Default CategoryAug 22, 2016

Designers and Developers Unite for the General Election

Jeph Kryzak

In the world of politics, there’s campaigning for office and then there’s being the elected official. Designers are like those who run for office. With their comps, they promise the world and paint a picture of how things will be with their ideals and strategy. Fast forward to the aftermath of being sworn into office. You’re no longer a candidate, you’re an elected official. You are a front-end developer.

In my years of being a front-end developer, many recurring challenges come to mind that make delivering a noble politician a reality. Here I will offer three tips for an honest yet winnable campaign.

Perform a Background Check

Be careful when you have actual HTML text over a background image. While that may look good at a fixed screen or canvas size, in responsive design the placement and size of the background image is fluid. So that clever title or headline could potentially overlap the focus of the equally clever background image. To compound the problem, when it comes to light and dark areas of a photo behind light or dark text, legibility is in jeopardy. This is particularly noteworthy when designing with a content management system in mind, as you never know what image a user might utilize.

Be aware of text placement to avoid potential contrast/legibility conflicts. Operate under the assumption that you don’t have control over the actual images that will be used. One option to consider is adding a filter to your images to keep them consistently dark or consistently light. The following examples show what adding a shadow to text can do. Both a filter and a shadow option could be done via CSS. It doesn’t have to be a perfect solution, rather it should alleviate potential problem areas.

Don’t Design Content

Data ain’t pretty. Yet so often in comps we see samples of first and last names no longer than four syllables—under 15 characters. “Welcome, Jake Carter” will be the greeting in the top right corner, with a perfectly cropped stock photography avatar. “Welcome, Aashresh Krishnamurthy” may seem a bit excessive, but the likelihood of a name being that lengthy is quite realistic. That may not be a problem on a desktop, but once you go mobile, things get tight really fast. I’ve seen similar behavior with addresses. A simple pretty address is put in place and the design looks great. Then a real world address is used and line breaks, overflowing, or ellipses are needed to maintain some semblance of the design’s integrity. This problem goes both ways. Designers may present a comp that has a product description of five “lorem ipsum” sentences, whereas the actual product description is one lonely sentence.

The size of content affects spacing throughout the page. So it has a wider impact than just that small section itself. If you find yourself using abbreviations to get something to fit, you’re designing content. If you’re adjusting font sizes just to fill space, you’re designing content. In the final product, a designer doesn’t get to control the length of content, but they should be considerate of how that might impact their design. Try inserting the worst-case scenarios when creating your comps.

For more detailed information, see Rachel Costas’ blog post “Make Content a Priority, Not an Afterthought.”

Select Input With Caution

Form inputs are not the most exciting elements to style, nor are they the easiest. But with a bit of work, they can be what the designer wants. Well, with the exception of the select input (sometimes called a dropdown menu). This element does not play well with others. Different operating systems and browsers across different devices render this element, well… differently. JavaScript can address this to a certain extent, but 1) I try to avoid JavaScript for design, and 2) it doesn’t create a truly consistent solution across platforms. Furthermore, a front-end developer may not have control over how forms are implemented and therefore cannot resort to JavaScript wizardry. But if the best-case scenario exists, proceed with caution.

When it comes to forms, I am a firm believer that less is more. Keep them familiar—it’s a better experience for the user that way. Avoid restyling the select input element to the best of your ability. Bootstrap goes to great lengths to ensure a consistent experience, and as shown in the image below, there are still discrepancies in padding, shading/backgrounds, and icons.

I found this article addressing the select input issues helpful.

There’s no such thing as the perfect politician, but practicing these three tips can bring a heightened level of integrity to the next election. Designers, we’re stronger together when we align our ideals with reality. Let’s make web development great again!