Darren is the digital designer here at Real Life Digital. He handles our small to medium size projects from their very conception right through to implementing them in code on the final product. He loves pushing the boundaries using new HTML5 and CSS3 technologies. Darren's background is in print design and he has a knack for translating static pixel-perfect designs in to organic, responsive websites and applications. He is known around the office for his prominent beard, his insatiable thirst for decent beer (not in work hours), his passion for obscure hip-hop and his bizarre love affair with chilli sauce.
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.
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.
“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!”
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.
“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”
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.
“Maps are horrible on mobile devices. A phone screen is just too small to interact with anything on a map.”
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.
“My images are super wide which looks great on my laptop but wouldn't be viewable on a mobile device”
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').