Ungerboeck Digital - Blog

Blog

 

Best Practice Exchange: Responsive Design Considerations

Angie Golio
Nov 05, 2015
responsive design best practices

We make kind of a big deal out of the fact that we only produce 100% responsive design. Given that Google reports that more than 50% of their 100 Billion searches each month now take place on a mobile device, there’s obviously good reason for that. However, more than once, I’ve gotten the impression that this is something clients know to ask for without actually understanding what it means or how to evaluate whether the final result is any good.

So, what better topic for a Best Practice Exchange, am I right? Here’s a mini-primer on exactly what we mean by responsive design and a few things that should help you sort out the specifics.

The Mobile Site is Dead

You know how video killed the radio star? Same goes for responsive design and mobile sites. Think of mobile sites as the web’s first attempt at appeasing smaller screens. It was a completely different site, with a completely different back-end and typically, featured similar, but abbreviated content. Still only capable of being viewed appropriately at one (albeit, smaller) size, mobile sites essentially amounted to double the work with minimal payoff for end users.

Then came responsive design. See, responsive design is part of the process from square one. Instead of trying to squeeze and stretch the initial website design after the fact, responsive design considers the user experience on any size screen or device. Though you might not see the same thing if you’re sitting at a desktop vs. browsing on your iPhone, you’re still looking at one design, with one back-end. The process of determining exactly how that plays out is a balancing act between UX, SEO and the unique objectives of your site.

Best practices for achieving that balance, coming right up!

1. Adios Navigation

First rule of responsive design? Be prepared to turn the rules for good, traditional website design on their head. Case in point: for the desktop version, the high-level navigation should be front and center. Not so for responsive. Hiding the main navigation on smaller screens is the first, best way to keep the layout simple (which is the second rule of responsive design!). At this point, users have become extremely accustomed to this approach, so you run very little chance of people not being able to find it via a simple icon, text or combination of the two.

2. Think Big (Buttons)

Yet another example of a seemingly counterintuitive rule for responsive design, you want buttons and links larger. The easier to tap, the better. A good rule of thumb (pun intended!) here is 40 px as the minimum touch point for mobile.

3. Balance Font Weights & Sizes

Unlike buttons, the large headers we love so much on desktop are not so hot for mobile. You’ll want to make sure that headers and paragraph text scale appropriately for a balance that is easy on the eyes.

4. “Eye-Swing” Measure

That sounds a little fancier than it really is, but what we’re talking about here is line lengths of your content. If a line of text is too long, it gets tough to follow on a larger screen. The same is true for lines that are too short. You want to shoot for approx. 50-60 characters per line on mobile to ensure a comfortable reading rhythm.

5. Respect The Swipe

You already know that the index finger is the navigational instrument of choice on a mobile device, but you’d be surprised how often designers and users still need subtle reminders about exactly how to go about getting around a site this way. Leave figurative breadcrumbs for users in this regard by adding swipe gestures to banners, menus and image galleries, etc. or by dangling half an image off the screen to suggest that there’s more to come with a simple swipe.

6. There Is No “Fold”

Anyone who’s been involved in designing or building a website is familiar with the old adage about keeping content “above the fold.” This harks from ye old days of newspapers when publishers knew to put the really juicy stuff above the literal fold of the paper, since it was pretty likely no one was going to bother flipping it over or opening it up to read more. On the web, this meant everything that was visible on the screen without having to scroll.

Both of these hard and fast rules are now virtually extinct, due largely in part to mobile where scrolling is natural and necessary. This gives you free reign to let your mobile design be airy without fear that users won’t follow what you’re laying further down the page. Rest assured, they will.

Bonus PSA: Tablets Are People Too

A lot of designers have the desktop layout and mobile orientation down to a science, but tend to completely neglect tablets in portrait mode. This is an increasingly common way for people to get their web surf on, so be sure to give it its due in the process!

All of this should give you a basic idea about what responsive design means to us and how we go about working that magic for our clients. If you’re still hungry for more or have any specific questions, shout ‘em out in the comments!

Let's Talk

Looking to know more? Drop us a note through the form below.

636.300.5606  |  100 Ungerboeck Park, O'Fallon, Missouri, 63368
Godzilla