For the past few weeks you may have noticed we've been focused on responsive website design. We've talked about what it is, why you need it and discussed some examples of when good sites go bad. To round off, it's only fair we discuss some of the potential drawbacks of responsive design and how to overcome them.
What drawbacks?
Perhaps it would be fairer to say that this week, we'll be discussing how we can prevent poor responsiveness by thinking ahead and planning properly.
Often, when discussing the drawbacks of a particular technology we forget that perhaps we're just doing it wrong or we haven't considered an alternative way to solve a complex problem because we're all stubborn little creatures of habit and we love to cut corners where we can.
We're just humans after all and humans are fundamentally flawed!
Here are just some complaints that we've heard about responsive website design and a brief explanation as to how these gripes can be overcome.
If you've seen a website where a critical piece of functionality is removed entirely for smaller devices, then that's just plain lazy.
Functionality should never just disappear because somebody couldn't be bothered to put some thought and planning into how that functionality should alter for different devices.
This stuff is vital to face head on in the planning stage, and you need to know the value of each piece of your content and functionality. Don't be tempted to put your head in the sand.
Remember - as we've explained earlier in this series - over half of web searches on Google are now done on mobile devices. So this is where your client is now more likely to find you, and experience your site for the first time.
When I've used mobile sites there is always stuff from the desktop site that goes missing. The functionality that's key to my site just won't work on a smaller screen!
Okay so this is a niche problem, more specific to very design-heavy companies who are used to controlling print layouts... and it may not be relevant to some of you reading this, but we've got an answer all the same.
For the uninitiated, text 'lockups' are those beautiful typography designs you commonly see in print and fashion but unfortunately their journey to the web has often been risky and unsuccessful.
But if it is something you're worried about losing with a responsive website... the solution lies in using SVG images. This gives you all of the control of using an image, but all of the SEO benefits of using actual text, plus you'll benefit from the lossless vector quality of the format. If you need to know more check out this fantastic 'Creating a Web Type Lockup' tutorial.
My website has pixel perfect text lockups that use custom fonts. I've heard these don't work responsively as they require fixed pixels to display correctly. To have lockups display dynamically and respond to different screen sizes I'd need to replace them with images, but that will be bad for my SEO rankings with Google, and for general accessibility and usability.
Maps are tricky blighters on smaller screen; that much is true. But you only have to look at the map apps that are out there to see what is achievable at mobile screen sizes.
Plotting points all over the world and trying to display that with any sense on a mobile can easily get messy but with thought, care and planning it can still work.
There's nothing “unresponsive” about pinching and zooming on something as fundamentally scalable as a map, if the user experience and user journey requires it.
So don't fall into the first camp and assume maps just have to be removed - especially if they are key to your site's functionality. Maps take a lot of consideration in terms of usability, but there is no reason you can't provide map functionality for all device sizes.
Maps are horrible on mobile devices. A phone screen is just too small to interact with anything on a map.
Super wide images are great for desktop machines and laptops (or any device that is being held horizontally) but when you shift the screen to a portrait orientation things can look very odd very quickly.
Fortunately using nifty ninja coder tricks good designers will be able to change the aspect ratio of images for different device breakpoints and even change images entirely if that is more appropriate (for example, using a 'piece' of the image which is beautifully cropped and aligned for each 'breakpoint').
We mentioned earlier in the series how JavaScript can be used to replace a video background with an image on a mobile device to save data. The same technology can be used to change images dynamically for different breakpoints as well! Magic.
My images are super wide which looks great on my laptop but wouldn't be viewable on a mobile device.
If you fail to plan then you plan to fail
It all comes down to the age old Dad-saying. If you fail to plan then you plan to fail.
If all your responsive requirements are considered early on, then none of this stuff should cause you any issues. It's just about making the right decisions. Designing for different device sizes is like dealing with completely separate designs except that all of the elements are the same and need to flow in the same order despite the changes in orientation and size. This is why it is best to plan for all device sizes, for all components right from the get go. And even if you're working with an existing 'unresponsive' design, you'll need to make different decisions for different 'breakpoints', and this may have some repercussions for your existing desktop screen sizes.
It's all about creating positive experiences for your users - making your site's information and functionality available in a way that makes sense, regardless of the 'viewport' they're viewing it through. It takes proper thought and planning - but a lot of this heavy lifting can be done up front, provided you understand the trade-offs. Don't let it get to launch day before you user test your brand new, supposedly responsive site, and get a shock when things don't work as they should.
Do the proper planning. Have the right discussions early on. Know what decisions you need to make, by knowing what questions to ask of your web agency. Empower yourself.
You get what you pay for
Yes - it's an investment to design for responsive considerations. But don't be fooled - it's a false economy and a big mistake to think 'I'll just get my site out there for now to limit the spend, and deal with responsive later'. There are a lot of web agencies out there who will simply take your money and just deliver what they're told to, even if you don't really know what you're asking. But if you are really serious about succeeding online in this day and age, then you need to be super serious about budgeting for a responsive site, and having a web team who can help you ask the right questions, and will even challenge you to justify your answers.
A static Photoshop design made into a website at an average desktop screen size, just doesn't cut it anymore. You need to see how elements will flow for different devices and whether there are any oddities in the re-stack of elements for different devices. These things take consideration, care and of course - time and budget. But allow for this now as part of your build, and you won't be tearing down and throwing your site away in 12 months time in order to spend money rebuilding it again, because you've lost search engine ranking, customers, and profits.
Conclusion
Well... what a start to 2016.
In the last four weeks we've covered a whole lot about responsive website design and to be honest we've still only really scratched the surface.
There are new innovations and best practises surfacing everyday, both technologically and creatively, and the landscape just keeps evolving.
With the continuous arrival of new devices one thing is for sure… responsive website design is going to keep evolving and getting better and better. So don't risk being left behind - get involved, and do it now!
And if you think you need our help then don't hesitate to get in touch to discuss how we might be able to help you.
