Responsive Web Design: More than a Technical Fix

For some website owners, responsive web design amounts to fixing a problem by adding a plug-in or adopting a responsive theme. After doing this and making some adjustments, they check their websites against a common range of device screen sizes. If it looks OK, the problem is ticked off their to-do list and they move on.

To approach responsive design as an after-thought is to miss the point of it. What is wrong with the above described approach? A replica of your desktop site that uses software to accommodate different screen sizes does not address its usability on mobile devices. In short, the "design" part of responsive web design has not been addressed. Here are four of these design considerations:

Keep The Navigation Simple

A common responsive navigation technique is the menu icon button which displays or hides the navigation menu when it is toggled. A variation to the technique of hiding menus is the off-canvas effect. The off-canvas menu is positioned out of sight and slides into view when a button is clicked. Often there is an array of category buttons that activate the associated menu.

While these techniques make good use of space, they will not compensate for an overly complicated, multi-level navigation scheme. Keep your site structure and its navigation simple. Provide a prioritized set of links to the main features and content of your website.

Test Your Website On Lots Of Devices

While web-based mobile emulators are convenient, they are not suitable for testing purposes. Many provide information on your site's appearance but do not simulate your site's interactions with the various mobile operating systems. The only way to do this is visiting and using the site with a device. Only then will you get a good sense of how easy it is to navigate, to click buttons, and to fully use the site as intended.

Optimize Your Site For Speed

Mobile Internet connections tend to be slow. If your website is a bit on the slow side for the desktop or laptop computer, it will be too slow for your mobile traffic. Therefore, you have to optimize your site for speed. Ways of doing this include:

• Caching - The benefits of database driven sites are many but these come at the cost of website speed. When someone visits your site, the web page is reconstructed on his browser through multiple database queries. More page elements usually mean more queries. Caching solves this problem by storing copies of the files that make up the page. Rather than asking the database to build up the page from scratch, the file copies are directly used to render the page.
• Minification of HTML, CSS, and JavaScript files - Code that is easy for a human to understand takes longer to execute. Minification removes multiple spaces and lines, as well as comments. This reduces the file size and speeds up the code.
• Image optimization - Use lossless image compression that reduces file size without reducing image quality. Smart compression techniques also exist that dramatically reduce file size with unnoticeable quality reduction. Site speed is also improved by getting rid of images that do not add to the page in some way. In addition to image optimization, there is the issue of resizing images to accommodate different screen sizes. One approach is never using images larger than can be displayed on the smallest devices. This gives the quickest loading speeds. Another approach is using fluid image techniques that resize your images to the screen size.

Size Your Links And Buttons For Easy Clicking

Unlike the large screens of desktops with their small cursors, the small touch screens of mobile devices and the large fingers of their users make clicking links and buttons a more difficult task. The target size for a clickable area should be about 44 pixels wide and 44 pixels high. Areas smaller than this can cause accidental clicks of the wrong links or buttons. Another problem associated with small target areas is that it slows down usage speeds because the task requires more effort and focus.

At Contensive, our talented team of engineers, analysts and designers develop responsive websites that convert mobile traffic. If your site is not mobile responsive or requires changes to improve mobile conversions, contact us.