Common Crisis in Responsive Design & How to Work Them Out

image 1

With nothing set in solid base and layout elements as flexible as water, it’s not even ‘designing’ in the traditional sense. Responsive design is going with (and accommodating for) the flow of devices in the market. Everyone is experimenting and it’s never been more awesome to be a web designer.

There are so many practices for responsive design that it’s hard to look at one set and call them the best. We can’t have a ‘What to Do’ list. We can, however, learn from each others’ mistakes.

So here’s what I learned designing for a responsive web:

Design for Your Audience. Not Yourself.

image 2
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; it should be an instant, massive hit. The numbers themselves are in your favor. Or they would be if you had known that barely 13% people there have smart phones. (Source: Google Mobile Planet).

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 will make or break your brand/website.
It’s easier than it sounds.

Designers are known to lose sight of who they are designing for.

So if you don’t have a UX architect at hand, you’ll do well to research this by yourself. It’ll eventually reflect on your work, so don’t shrug and say it’s not your forte.

For mobile-specific numbers, use Google’s Mobile Planet. Question your clients about their audience.

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 basic human psyche.

A ‘wireframe’ Needs a Story

Your responsive design project will be incomplete without interactions. The same applies to your mockup.

Your design is (likely) not going to be a one-page gig where content appears and nothing else happens.

No interactions, no states, no animations or effects: basically everything that can make your site a success (or a failure, if used without thought) is stripped out. While Style Tiles is a classic for good reason (as its founder said, “For starting a conversation around the design”) it’s far too simple to be sophisticated in today’s design terms.

INVEST SOME TIME IN CREATING INTERACTIVE PROTOTYPES OF YOUR IDEAS. COLLABORATE ON THOSE EXTENSIVELY BEFORE STARTING WITH FRONT-END DEVELOPMENT.

Don’t just throw around ideas. You have heard about storytelling?

Tell a responsive, interactive story to your clients with nothing but your prototype and intuition.

Use tools like Balsamiq, Axure, UXPin, etc. to create visual versions of those ‘stories’. Stroke their imagination with words; feed it with a well-crafted prototype.
It’ll serve to streamline your design and development work for later and give you a somewhat defined track to stick with. And as a Bonus: First impressions still matter. A good prototype shows that you’re enthusiastic about the project.

Content: First, Visible, and Adaptable. Always

The reason you’re going responsive is so that your message has a wider reach by being uniformly accessible and device agnostic.

You defeat the entire purpose of responsive design by having to hide your content.

Your mobile audience is going to download the data anyway, so what’s the point hiding it? 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.

First: Understand User Goals and what they want from the website, and then adapt your content for easy access across their devices.

Instead of just squeezing a million words article to fit a mobile page, give your users a chance to peruse the information without scrolling endlessly. And front-end or server side scripting isn’t the (actual) answer for it.

A good way to do this is using brief and accurate summary for preview.

Let the user decide if they want to scroll through your content for the rest of it. TL; DR is common amongst everyone (even media organizations, which is why we get stories published without actual fact checking and based on nothing but hype). So add a section at the end of your content and make it easier.

Second: DO give the users complete information instead of only a fragmented version of it.

Use responsive columns and typefaces. Use Zurb Responsive Tables for fluid data tables. Compress the media (use CDN and caching for boost in performance).
Content is your message. Make sure it’s clear and visible, regardless of device size.

Bonus: Content-first puts you in mind of content hierarchy, and that makes designing navigation a smoother process.

Respect Device Limitations and Capabilities

image 3
When we talk about ‘mobile-first’ or ‘progressive enhancement’, do we truly understand and accommodate for the barest minimum? Here’s a rundown of what ‘bare minimum’ should be:

  • Usable Screen Width: 120 pixels, minimum.
  • Markup Language Support: XHTML Basic 1.1 delivered with content type application/xhtml + xml.
  • Character Encoding: UTF-8
  • Image Format Support: JPEG, GIF 89a.
  • Colors: 256 Colors, minimum.
  • Style Sheet Support: CSS Level 1, CSS Level 2 @media rule together with the handheld and all media types
  • HTTP: HTTP/1.0 or more recent HTTP1.1
  • Script: No support for client side scripting.

Based on these specs, it’s not difficult to create a functional design. The problem is scaling up.
It’s good to consider device dimensions, but that’s just the beginning and not the whole of it. Minifying and normalizing scripts (performance and experience), designing clean interfaces with care for enough whitespaces (for tapping), respecting connectivity and load limitations of devices (performance), and always testing rigorously are important here.

Please Lighten the Load

image 4
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 and better user-experience.

Simply put: If your page is slow to load, no-one will bother waiting for it to catch up.

An approach like mobile-first actually works very well for this. In progressive enhancement, we start out with bare minimum of everything: 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.

So employ CDN (feasible for medium to high traffic websites) and back-end developing techniques that specifically lighten page loads. Use caching. Improve perceived performance (how fast the site ‘feels’ for the user) by checking the relevant box before saving a JPG image for web.

Keep your design lean and trim (least of all your clients and users).

TL; DR

So here’s what I learned designing for one responsive web:

  • Design for an audience. Research a little and use Google Mobile Planet (and other similar tools) for numbers.
  • A Wireframe can be brought to life by a story. ‘Prototype’ means the preliminary version of a device/system. Make it something that actually works. Use interactive prototyping tools.
  • Make content visible and adaptable. Do not hide content from mobiles when it’ll be downloaded anyway. If there is one original post, add a short relevant summary that is better suited for reading on mobiles.
  • Respect device limitations and capabilities. Mouse/Finger-tap debate aside or dimensions aside, design for the minimum specs of device used by your targeted audience.
  • Pay attention to performance. Not just for better search rankings, but experience too.

Author Bio: Lucy Barret is associated with HireWPGeeks Ltd. She provide HTML to WordPress conversion services and she has a team of expert developers to help her out. She is also a passionate blogger and loves to share her knowledge with the large community of WordPress. Follow her company on social media networks like Facebook and Google+.

Beautiful Newsletter Templates

Professional newsletter templates that are fully responsive for desktop, tablet, and mobile. They are 100% cross-client compatible.

See Them
Comments

No comments yet

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Save 15% On All Purchases

Use this amazing, limited offer and SAVE BIG! Buy any of our WordPress plugins, extension plugins or newsletter templates.

Save 15% On All Purchases

You have Successfully Subscribed!

Pin It on Pinterest