The case for responsive design

By March 15, 2012Blog, eCommerce
istock responsive design

Will your web presence truly adapt to all the devices and browsers that might be thrown at it?

Responsive design seems to be the concept of the moment. It’s on the coffee-stained lips of designers and developers worldwide but what does it mean and more importantly what does it mean for businesses looking to build a website?

You know what it’s like to look at a site on your mobile and get annoyed when it does not work properly or optimise for your device?  Responsive design is about building a website to recognise and adapt its form according to the device that you are viewing it with including: mobile, PC, tablet, video game or whatever inventors cook up next. It refers designing online usability using the medium’s inherent flexibility and intelligence that print or broadcasting doesn’t necessarily have. It is predicted that in the next few years, mobile browsing will outweigh desktop surfing, so when building a site you need to think hard about this. There’s touch and keypads to consider, think about operating systems from Android, CSL or iPhone to Windows versus Mac, there’s everything from 26”screens down to barely-there mobiles, even video game-driven browsers.  Yep, there are more browsers, more devices, more input systems, more users, more user types. More, more, more!

Sometimes you might find that because you have specific needs for mobile, for example, the solution may be to tailor content separately. It may seem logical to create separate strategies and content versions (such as one for iPhone, one for PC) yet as responsive design guru, Ethan Marcotte, asks, “can we really continue to commit to supporting each new user agent with its own bespoke experience?” Designing and compartmentalising as separate different requirements in a rapidly-proliferating environment is no longer pragmatic. Building and maintaining multiple versions and apps gets costly and unmanageable.

Marcotte explains:

“we can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them”.

For example, through creating conditions (known as media queries) developers issues in the layout can be corrected – responsively – as it scales beyond its initial, ideal resolution eliminating the need to target a specific version of a browser.

At Design Industries we believe in being platform neutral to stay relevant and making design adaptive. The framework needs to ensure prime functionality and good looks whatever the application.  A pared back, minimal aesthetic is one way to create a responsive design but not the only route.

How then do you future-proof your website design? We suggest that you make sure that:

Flexibility and adaptability are prioritised.

Your site adapts easily to portrait and landscape orientations.

That no assumptions as to the browser’s width or height are made.

Your design supports changes in resolution or viewport size.

Text breaks are logical and suit your design mantra; user flow must always be protected

Size changes accommodate text wrapping, typesetting eligibility

Elements are shown or hidden where appropriate to aid easy navigation.

Target area where links appear are adapted according to the screen.

Has the capacity to adapt to change as it happens.

When images grow they don’t become unwieldy, cumbersome or pixelated.

Wireframes  and sitemaps are created to adjust accordingly for each; a stagnate version will not allow you to clearly map out the whole process.

Consider starting from a ‘mobile first’ perspective as it is then easier to create for a worse case pixel scenario and work upwards.

Adapt sites to look and feel like they were meant to run on the version in use –people don’t want to feel like they are getting second best.

Proceed with caution: unlike fixed width design, you lose control over line length legibility, flow and placement of page items. Having a responsive layout can mean losing control over visually guiding users through the content.

Design Industries knows how to leverage the latest responsive design technologies, including HTML5, CSS3, media queries and an intelligent modular design tailored to your businesses’ specific web requirements.

Contact us if you would like help building a web presence that adapts to your users and their devices.

2 Comments

  • Tamara Caddy says:

    It should be noted that we at Design Industries will be adopting this philosophy ourselves when we launch our new mobile optimised, responsively designed website in the coming months.

    We’ve been so busy servicing our clients that this complete overhaul is now well and truly overdue. WATCH THIS SPACE…

  • Gabriel says:

    This trend in web design seems very interesting and a very near future for web sites.

Leave a Reply