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
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
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.
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
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
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.