Responsive Design – Practical advice from the trenches
Responsive design can be a fiddly and time consuming process. Designing and developing a single site to support a large variety of sometimes fundamentally different devices at multiple resolutions often requires substantial time investment across all steps of the process, starting with UX and wire-framing and carrying right through to final testing. But a little forethought and preparation before you begin putting pen to paper (or pixel to PSD) can help alleviate potential risks and prevent your developers from getting lost in a messy quagmire of media queries, shims and polyfills.
Educate yourself
Responsive design is THE thing in digital media right now. Drop by any coffee shop in Silicon (Surry) Hills in Sydney and you’re bound to overhear someone throw the term around, likely followed by other terms like advertainment, gamification and synergy. But few people truly understand exactly what the term ‘responsive web design’ means, or even why it’s becoming such a requested aspect of digital marketing. And that’s okay. No one is expecting every business executive or marketing manager to know the difference between EM’s and REM’s – that’s why agencies and digital professionals exist.
However, when it comes to planning your business venture with a digital agency a little bit of knowledge helps. Start with Google. Search the web for some articles, demonstration sites, whatever you can find. Don’t worry if you don’t understand some of the terminology or acronyms, your digital partners can help you solidify and grow your knowledge over time. Here are a few good places to start:
http://alistapart.com/article/responsive-web-design
Considered by many to be the article that birthed the term ‘responsive web design’. Highly recommend.
http://www.hongkiat.com/blog/responsive-web-design-war/
This article cuts through a lot misconceptions of responsive design and its drawbacks; a must read for people across all aspects of digital marketing.
Reconsider your audience, brand and ideal experience
Before even considering a responsive site, take some time to consider your core requirements, your target audience and the ideal experience you want to present to them. I’d argue that responsive design isn’t really a feature – it’s a solution to a problem. The problem being how to serve your business’s offerings to an audience that will be accessing your site from a range of different devices, from different locations and in different environments. And responsive web design isn’t the only solution. Consider also the experience you’d like to offer your users. Would the ability to take and share photos help strengthen engagement? It is difficult (and in some cases impossible) for a mobile friendly responsive site to access device hardware such as cameras, so a native application might be a better solution. When choosing a digital partner for your next campaign or site launch, discuss your options with them to gain a better understanding of the available solutions. Don’t ask for a responsive site just because your competitors have one or because you watched a TEDX presentation on responsive design. Do it for the right reasons.
Consider Browser Support
The rise of responsive design is directly tied to the growth of modern hardware technologies such as tablets and mobile phones. This growth of hardware in turn pushes the software and underlying code used in responsive design. As a result a lot of this code isn’t supported in older browsers. Rapid release browsers like Chrome and Firefox for the most part have excellent support and make development substantially easier. The undying dinosaurs like IE7 and 8 however, have terrible support and this makes developing a responsive site to support these browsers time consuming and consequentially, expensive. In order to assist your digital partners develop a lean, well performing responsive site you may need to consider dropping support for older browsers. This isn’t always an option, I know, but doing so will free up your developers to utilize a much more modern and flexible set of tools. Knowledge of your target audience can help you make this decision. If you’re relaunching a site, look to your analytics data (you do have analytics, right?). By very definition responsive design aims to be forward thinking – you can’t look to the future whilst keeping one foot in the past.
Content is King
In an ideal utopia of web design and development, every client would have all copy and content written and ready to go at the onset of a project. However this is rarely the case; it’s usually the last thing on the list. Whilst this can be frustrating, it is totally understandable. Copy writing and developing a ‘voice’ takes time, and in the early wire-framing and design stages of a project our old Latin mate Mr. Ipsum will usually suffice. However, when considering a responsive web project, copy and content are far more important. Designers will need to know how much content they need to design for and how copy length will respond to multiple page layouts and browser / device resolutions. A tagline of 12 words might look great on a desktop but scale that down to a mobile phone and you’re quickly running out of real estate. Lengthy, excessive copy can break mobile designs very quickly. It’s every designer and developer’s worst nightmare to proceed with the assumption certain content areas will be limited to 8-10 words, but what if one of those words turns out to be floccinaucinihilipilification? Yep, the designer is head-desking and I just tore out my sideburns in frustration.
While final copy isn’t mandatory – a word or letter count should be sufficient – perhaps more important is the strategy behind your content. If your business is a blog or news channel, then obviously your users are coming to your site to consume that content. If you’re a bricks and mortar retailer however, there’s a good chance your mobile users are looking for specific information, be it a contact phone number, or store locations and opening hours. One of the major drawbacks to responsive web design (as it is commonly understood) is that the same content is served to all users, regardless of how they’re accessing your site. There are ways around this (they’re worth investigating and using, here’s a start (http://www.lukew.com/ff/entry.asp?1392)) but for most part content is the same; it’s just presented in a different way, to suit the users device.
This presents another issue – losing your users due to unwanted or unrelated content. Don’t make it difficult for the users to find the information that they need by obscuring it behind lengthy copy extolling how awesome your business is. Consider the content your users are likely to be seeking under different environments and discuss ways to provide that content. A strong content strategy will help give your team a clear goal and make the initial wire framing steps a lot easier. This will carry right through design, development and testing, resulting in less bugs and amends and ultimately, a better service for your customers.
The mobile web is here; it’s loud and demands to be acknowledged. Delivering a site that functions and performs well across the ever growing spectrum of internet connect devices is challenging, few people will argue against that. But proper planning, a little bit of initiative and forethought can help make the bumps in the road a little smoother. Do some research yourself. Try to look to the future. Most importantly, don’t be afraid to talk about it and ask questions. Talk to your digital partners about how they handle responsive design and its many hurdles. Every agency will have a different approach and different tools, but if they can’t discuss it with you, then chances are they can’t deliver.
The post Responsive Design – Practical advice from the trenches appeared first on Chrysalis - Digital Blog.