The 5 Commandments of Responsive Web Design

Thursday, November 05, 2015 1:00 PM

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.

Start Small

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.

A web developer starting with the mobile design of his website

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.

Mobile website design across many devices

Pay Attention to Performance

Optimizing content for ideal performance is key across screen sizes and platforms. This can be achieved, in part, by only utilizing essential images (that you've optimized), removing unnecessary Javascript libraries/3rd party tools, taking advantage of caching, minifying CSS, and reducing the total number of HTTP requests. Running usability tests is the best way to determine whether performance is optimized, and will uncover any UX issues prior to launch.

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!

Bridget VanWart

Bridget VanWart

Bridget VanWart is Div1's newest addition, joining the team after graduating with a Bachelor of Business Administration from the University of New Brunswick. When she's not serving as Div1's client liaison and administrative assistant, she can be found Instagramming pretty things she stumbles upon around the city.

comments powered by Disqus