With mobile-friendliness now factoring into how well websites rank for organic search, many business owners are considering a full conversion to responsive design, even when they don’t wish to otherwise change the look and feel of their websites.
The process of website conversion will vary in complexity based on the specifics of a particular website, but anyone planning to convert their static design into something mobile friendly will need to keep these factors in mind throughout planning and implementation:
Layout
The biggest change that comes from moving to a responsive design is the need to adjust the layout of the site for different screen sizes. Oftentimes, a display that works perfectly well for a large desktop becomes too small and cramped on a phone or tablet.
There are two schools of thought when it comes to designing the “breakpoints” or the resolutions at which designs change based on the size of the screen.
One school of thought revolves around creating breakpoints at specific screen sizes to target particular devices. This can work well if you know that the vast majority of your website visitors access your site through a particular device.
This option may lead to more redesigns and iterations in the long run as screen sizes continue to evolve and the more popular devices amongst your site visitors will likely change over time.
The other school of thought embraces the idea of designing “up” – namely starting with the smallest screen resolution and creating breakpoints as each resolution where the screen gets too large for the design. Designing this way provides greater flexibility in terms of making your site accessible.
The challenge of designing this way is that some common devices may have a less than ideal layout, depending upon where they fall on the spectrum before reaching the breakpoint.
The decision on which type of design layout to use depends largely on company data – if the website is being accessed by only one or two types of devices, it may make sense to design breakpoints around those devices. However, if the website is accessed by multiple types of devices, designing around text and image ratios as the size scales up is the better option to maximize the utility of your website.
Touch/Tap Targets
While getting the initial layout right is incredibly important, that’s not the only area that needs adjustment when converting to responsive design.
Any area that is usually targeted by a mouse click – buttons, menus, forms, etc. – must be modified to ensure that they are large enough for someone to touch without having any overlap or errors. For websites with nested menus, this can pose a particular challenge and may require paring down the sub-items or the use of a different type of menu structure entirely on mobile devices.
The hamburger menu is often a popular choice with mobile designers, as it creates a single touch point that can then be used to display a full menu of options. This eliminates the issue of menu overlap, and reduces the need to trim down menu options – though this may still be an issue if there are multiple nested menus to contend with.
Another option to consider in addition to properly sized targets and simplified menus is visual feedback. For example, changing the color of a menu item as it is tapped can help users to confirm that they are successfully navigating to the proper page, and reduce confusion overall.
Technology
If your current website is built on top of a popular CMS such as Umbraco, WordPress or Drupal, chances are good that implementation of a mobile-friendly design template will be relatively simple. It may even be possible to alter the current template to make it more mobile friendly.
For websites built using older technologies, particularly Flash, it will likely prove easier to recreate the design on a more flexible platform. With websites that rely on databases for backend functionality, any change in technology will need to be weighed against the necessary adjustments or updates that will required to maintain the current user experience.
Functionality
Certain functionality remains consistent from device to device – think submitting a form, making a purchase, performing a search, etc. – while other types of functionality are specific to the mobile platform.
These special mobile functions such as tap to call require space and planned placement within the design. In the case of functionality that is designed to generate leads or sales, it may be beneficial to have these functions readily visible at all times by implementing a floating bar or some other call to action that remains at the top of the screen during the mobile browsing experience.
Conclusion
Responsive design is more than just adjusting pixels on a screen. Business owners with older, static websites need to think carefully about the full mobile experience of their website visitors before taking the time to convert the website to be more mobile friendly.
By understanding how the various elements of mobile web design come together to make a positive and engaging user experience, business owners can make informed choices about how to redesign their website – whether it’s an adjustment to an existing design or the creation of something entirely new.
NEED HELP ADJUSTING YOUR WEBSITE TO BE MORE MOBILE FRIENDLY?
The professionals at Bear Creek Web have decades of experience in the ever-evolving platform of web design. Get in touch with us today to see how we can make your current website perform better and look its best across all mobile and desktop devices.