Do it Right: Responsive Web Design

Do it Right: Responsive Web Design

Andy Holland

Responsive web design is the latest best practice for improved functionality across all screen sizes. With the uptake of mobile technology it’s an approach which can no longer be avoided. Despite its importance, many developers are finding the transition difficult to manage.

It’s not surprising given the significant change in development which covers everything from content to layout and back-end coding. Many are still catching up with this latest trend, and fail to acknowledge the fundamentals. In this straightforward guide, we highlight four of the most common responsive design mistakes. Avoid these and you’ll do it right.

Optimising only for small

Responsive design is all about optimising for small mobile devices, right?! It’s a mentality shared by many but that’s not to say it’s correct. Great responsive design should encompass all sizes including desktop. After all, desktop users still account for 42% of traffic.

Be sure to optimise for larger screens by ensuring images keep their quality when scaled up. Always consider line lengths, ideally keeping them between 45 and 75 characters long. Finally, ensure that content is placed appropriately to fit in your widest screen layout.

Removing or hiding content

Mobile websites of the past were often seen as miniature or limited versions of the real thing. As larger screen sizes now dominate the market, that’s since changed. Current users expect to have all the information of a conventional site available at the touch of their mobile phone.

While it may be beneficial to prioritise content, never make the mistake of removing or hiding certain sections. Any of this information may be needed by the potential customer and if it’s not quickly accessible they may look to the competition for answers.

Not designing for touch

It’s shocking given the whole ethos behind responsive design, but developers are still failing to design for touch-screen devices. Using our thumbs and fingers is very different than clicking a mouse, and this needs to be considered at every stage.

Links should be larger and easier to click, items shouldn’t be placed too close together and hover screens no longer have a purpose. Instead, make certain that any information on site is accessible for touch screen users. Try to create navigation which flows and lends itself to common hand gestures. This way you’ll develop a seamless platform which functions across all platforms.

Failing to optimise performance

In the new era of faster internet speeds, users have far less patience for slow loading sites. In fact, new studies suggest that visitors are inclined to leave those websites which take more than 4-seconds to load. Regardless of the device or connectivity, responsive design should be geared towards quick loading speeds.

If you’re having problems, start by limiting images to only those which are the most important. You should also remove any excessive add-ons such as Javascript libraries and external plugins. Lastly, by making use of browser caching, those returning to your site can be given a better and faster experience. This enables commonly used files on your website such as HTML and CSS to be stored locally.