Logical Friday

The days of clinging to pixel values are petering out slowly, while the rise of percentages is hailed by the masses. With all of this hubbub about the technology, we also have to start shifting our mindsets to build our platforms in a new way. Though changing pixel values to percentages is a start, it doesn’t teach us to handle the more complex problem of making sure the experience of our websites is pleasurable on all devices. It’s like encountering a puzzle where the pieces change shape every hour. Luckily, the puzzle is fun to solve and the result is highly rewarding.

In shifting our brain space, let us first consider that the “mobile first” and “responsive design” approaches are a brilliant new way of having us re-examine our User Experience and then build platforms for today’s users. This is not about what screen size you’re designing for, though of course that matters, it’s about cutting out all the content that your users don’t care about and keeping only the gold. Call it, a unified approach to making people happy on the internet. (Note: happy users = happy customers that bring more customers.) So, let’s start building the house from the foundation up.

1. Examine your constraints.
We’re designing for all screen sizes, connection speeds, and hardware load outs. I find it helpful to assume that the Javascript and custom fonts may not load for awhile, and the images will load slowly. This means your user may be staring at just your HTML and CSS for the first 10 seconds. Your content has to be enticing, or your window will be closed. A concept that has been around for centuries and only becomes increasingly applicable. If you could only have 3 things on your page, what would they be?

2. Consider your page one area at a time.
There are many approaches here. Once your main goals are set, I like to start at the top and work downward. For instance, say the top of the page is the navigation. What will it contain, and how will it look on all screen sizes? How can we make our links clickable if they are small and still tempting when they are large. In the body, do we have a sidebar? What’s going to happen to it if the user is on a small screen? If your sidebar is just going to end up at the bottom, perhaps your user might not get there or may get bored. Is that content necessary to include? For the footer, small screen users like to see the navigation again here, particularly on longer pages. Is there any way we can make this fun on a larger screen? Designers and developers need to work together closely on this process.

3. Build it!
Have a calculator handy and use percentages to your heart’s content! Remember that you can still use pixels and ems for vertical layout, just not horizontal. Pay attention to sneaky borders in pixels. Try making a container of the border color with a width of 100% and an inner box that’s 99%. Alternatively, use CSS3’s new flexible box layout properties. Fortuitously, smart phone browsers tend to play nice with CSS3, so it can often be safely used in place of images. Use media queries to deliver the right CSS for a user’s screen size. Use user-agent strings, feature detection, or conditionals in your JS to ensure that more processor-intensive code only gets delivered to devices that can handle it. As always, test it over and over. Look at it on different screens and devices. By using the site yourself, you’ll “feel the pain” and know what needs work. As an added bonus you get to have fun resizing your browser window for hours on end!

Tagged: CSS3, mobile, responsive design