Thought not a new practice by any means, responsive design is far more saturated in today's market than ever before.
With the majority of websites (finally) getting on board with the importance of being mobile-friendly, and the majority of those choosing responsive design to achieve it, there is bound to be a fair share of responsive design disasters floating around the web today. Thought not a new practice by any means, responsive design is far more saturated in today's market than ever before, with a decline in organizations choosing to have a separate, designated mobile website and instead choosing to adapt their current website to fit any number of devices. From focusing on said devices instead of screens, to thinking too small, we present our top tips to keep your responsive design from falling flat.
Ben Gremillion of UXPin explains something called the Mobile First approach to design. This approach starts design at it's smallest screen relevancy and works its way up to its largest. For example, design begins around a mobile phone size and is slowly scaled larger until it appears strained. At this point, media queries are added to make necessary layout changes for a larger display size, and the process repeats itself until design is optimized for the largest relevant screen size.
Know What to Change
In responsive design, some things need to remain consistent. Namely, link/button labels, typefaces, and colour themes. Things that need to adjust and adapt, however, include button size, visual layout, and how navigation works (ex. full menu bar on larger screen vs. menu dropdown button on smaller screens). The overall feel of your website should remain consistent throughout all sized displays, but it is simultaneously crucial to adjust navigational techniques and layout.
Focus on Screen Size, Not Device
The sheer amount of device models on todays market - from mobile phones, to wearables like the Apple Watch, to tablets, to good old fashioned desktop and laptop computers - is incredibly vast. Designing for a particular model is so ill-advised because of this, but many developers still get caught in a trap of designing for the 'latest device' instead of the screen size it encapsulates. Even lumping design by the category of technology is no longer relevant, as there are mobile phones with larger screens than some small tablets, and desktop screens that rival televisions.
Pay Attention to Performance
Don't Hide Content
It's dated thinking that users on mobile devices are in a rush and only looking for key information instead of a website's full content offering. A content hierarchy based design is key in providing users with key information first, with resultant content following suit. And please - only link to mobile-friendly content!
Get a Quote Today
Let us know what you're looking to create, and we'll provide you with a zero-obligation quotation.
View Our Portfolio
Let us show you how we've helped local to global organizations create a more streamlined, intuitive presence.
More Articles from AIVIA Inc.
What to Expect from Wearable Tech
Wearable tech like the Pebble Watch or Apple watch are not new pieces of technology that are meant to replace or your phone or tablet.
iHate? 5 Things I don’t know whether I love or hate about Apple’s new iPhones
They are just as much in the business of creating the next big thing that you need to be seen holding in your hand than they are in the business of creating tiny supercomputers that talk to spaceships.