The whole web designer community is on its head; going responsive and trying to make their designs fit fluidly through as many device dimensions as possible.
With nothing set in solid base and layout elements as flexible as Russian gymnasts, it’s not even ‘designing’ in the traditional sense. It’s more going with the flow.
Without a set of “What To Do” instructions, the best we can do is make a “What NOT To Do” list and avoid the mistakes.
No sense of navigation
This is, without contest, the most common problem I see in responsive designs. Designers who are used to “three buttons on top-left” style navigation hit a dead-end when that old route doesn’t work well smaller devices. There’s no one-size-fits-all anymore, if there ever was one to begin with.
The solution lies in understanding the content and making a well-defined plan to structure it, using as few tabs in the process as possible. 2 or more categories can be clubbed together into a single one with dropdowns for subcategories.
Then there are Page Slides, which sites like Facebook use with great success. The entire navigation menu, no matter how complicated, can be fit into a hidden panel that can be revealed with a tap on the nav icon while the current page scoots to the side to make room. It’s a simple jQuery plugin and already very popular with content-heavy sites (with lots of categories that can’t be clumped together).
Other popular choices include drop-downs with multiple levels (achievable by FlexNav jQuery plugin), retina-ready grid-based menus (and more) with Codrops (no jQuery), and more.
If people can’t get to what they want, they will leave and never spare a thought to your site. Make it easy to navigate, not a labyrinth of cobbled-up content.
That reminds me…
No one puts content in a corner!
The sole reason you’re going responsive is so that your singular content-source is uniformly accessible and device agnostic. I reiterate: Singular Content Source. You defeat the entire purpose of responsive design by having to hide your content.
This is why you should pull up your frilly stockings and design with Content-First.
Content was and still remains the king. Your design needs to adapt to content instead of other way around. Think of this as less repressive to your artistic expression and more necessary constraints of a great and purposeful design.
This site puts it well: You identify for each page (or content type) the types of content elements that should be on that page. Note that you are identifying what should be on the page, not what you already have on the page. –Stephen Hay
To elaborate, create a content element inventory. Identify which elements go on all pages, and which go on specific ones. For example, your CTA buttons can be on every single page, or specific ones (like landing page, related resources pages, etc.). You start with putting the content elements first, and then build up from there. Bells and whistles go at the end.
Use responsive columns and typefaces. Icon fonts are amazing alternatives to icon graphics, and they scale up/down very well. Use Zurb Responsive Tables for fluid data tables.
Content is your message. Make sure it’s clear and visible, regardless of device size.
Touch and go
This is the big transition: going from Mouse clicks to Finger taps; and don’t you forget it.
All your interactions need to make the leap from onHover to onClick. That creates as many problems as it solves.
Consider this: while, statistically speaking, more than half of your audience won’t be able to use Hover function, there is a significantly large portion of your audience which still uses mouse-dependent devices. Meaning that you can (and very much should) keep the Hover function for their sake.
And we know that while touch screen devices don’t have hover, they have touch-gestures. So we need to adopt those instead. For example: devices with iOS have momentum scroll by default (single flick in up/down direction keeps the page scrolling until eventually slowing down at the top/bottom end and stopping). There’s the very popular pinch-to-zoom feature (which incidentally, is great to adapt to for users with accessibility needs). Multi-touch is getting smoother at its own pace.
As designers, we can use touch-gestures to create interactive and intuitive responsive designs.
Note: Be selective to keep your design from turning into a nightmare. Also, keep the layout as clean as possible for maximum functionality on touch screens.
Please lighten the load
Google is ranking responsive and mobile-friendly pages higher, but it still considers page loading speed via HTML. I don’t want to harp on about this (we have plenty of opinions on this subject), but there’s no denying importance of page speed for higher-rankings (despite what certain sites might be saying).
We have mobile users on the internet because it’s the Information Age of Instant Gratification. If your page is slow to load, no-one will bother waiting for it to catch up. They’ll simply seek whatever you had to offer elsewhere. Seriously, go fast or go home, Slowpoke.
So once again, artists have to drown their instincts in a fetid pool of muck and stick to performance. An approach like mobile-first actually works very well for this. In progressive enhancement, we start out with bare minimum of everything: content, UI elements, features, and the fact that we are designing for narrowest bandwidths of all devices. Those who still decry the merits of mobile-first approach will agree that this does put one in mind of performance and speed over everything else.
Additionally, and you shouldn’t need to be reminded that, you have to keep the size of your media under check. Use tools like Adaptive Images to scale and size images for smaller devices. Retina Images is another great tool to keep your Retina display users happy.
Keep your design lean and trim and no-one needs to get hurt (least of all your clients and users).
Suss out your audience
Suppose you are trying to reach out to a largely Indian audience with a super-fast, brilliantly designed website and a great UX for those mobile users. There are 1.2 billion people there after all; it should be an instant, massive hit. Or it would be if you had remembered that barely 13% people use smart phones.
This is just one of the reasons why learning and understanding your audience is crucial. Cultural diversity, age, gender, profession, language, popular devices, etc. can be very important factors which can make or break your brand/website.
It’s easier than it sounds, to be honest. For mobile-specific numbers, you can use Google’s Mobile Planet, which can give you detailed (and most accurate) insights on user behavior in 48 different countries.
You don’t need to be fussy, just empathizing. If you can put yourself in your audience’s shoes you’ll be able to create intuitively user-friendly designs. It’s not rocket-science, just human instincts.
Communication and conversion
It’s 2015, and your client is still on fixed-width site. You know its high-time to convert to responsive, but have fun communicating with the clients about “mobile-friendly” and “adaptable” designs. Bonus difficulty-points if they are already pretty content with the “way things are.”
Communicating design progress to your own team can be a pain, much less with the clients. How much time are you going to spend creating photoshopped mockups of your design? Far too much, in any case. This is where you can use tools like Style Tiles, so that you and your clients are on the same page, progress-wise.
Now, conversion is still pretty debatable. I think it’s feasible for smaller, simpler websites, although it will still probably take more time than coming up with an entirely new design. Going from fixed to relative (percentage based) is pretty daunting, but possible with Greenfield and a kickass front-end framework like Bootstrap or Foundation.
If you understand your audience (see: Sussing out your Audience), you’ll be able to figure out whether you need to convert or not. If you decide to go with it, take it one step at a time.
Responsive design is still quite young compared to other design trends. This one, however, is here to stay for a long, long while. We are all still constantly coming up with newer, better ways of accomplishing things in responsive design. And there’s still a long way to go.
Evolve and adapt. And make sure your designs do too.
Author Bio: Lucy Barret is a talented WordPress developer with over 5 years of experience and an avid blogger. She is currently employed at HireWPGeeks and provides HTML to WordPress conversion service along with her team of developers. Follow her company, HireWPGeeks on Facebook.