The technology landscape is constantly changing. Just a few years ago, a desktop computer with a 17" monitor was the only way to access the internet. Now, users can access the internet with a desktop, laptop, tablet or mobile device. Is your site optimized for everything from a phone screen to a 42" widescreen monitor? It had better be!
While most sites are designed primarily for a large viewport, with mobile traffic outpacing desktop views, you need to make sure your site also scales in a functional, pleasing, user-friendly way for small viewports. As an illustration, below are 4 images of a typical business website:
A traditional, non-responsive site as it appears initially on a mobile device.
Most mobile devices will by default attempt to fill the screen with the full width of the site. While this is technically functional, it is impossible to actually read text or interact with the site (i.e. use the navigation menu’s, press buttons, etc.) at this size.
A traditional, non-responsive site as it appears zoomed in on a mobile device.
In order to enable interaction with the site, mobile devices will allow the user to resize the site view by zooming in on specific areas of the screen. Again, while technically functional, this is a very cumbersome and time-consuming method to browse a website. A large percentage of visitors will simply give-up and move to another site that’s easier to view.
A properly formatted responsive design on a mobile device.
While viewing this site on a desktop computer or larger viewport would show the design depicted in the first image (sized appropriately on the larger screen), mobile and other devices with small viewports would automatically reformat this site for an optimal viewing experience. For example, on the example page, the content in the main left column would be formatted to fill the width of the screen, resizing the text and images for maximum viewing experience. The links that are in the righthand column would then appear below the main content, with the footer again below that. And again, everything would be resized and optimized for the small viewport. Compare this to the first image - which site would you rather look at?
Responsive sites also have an optimized navigation system.
If you notice on the image above, on the small screen the navigation menu is no longer below the header. To maximize functionality, on a mobile device the menu would be replaced with a mobile-specific navigation system that would be activated by clicking the menu icon in the upper right corner. Again, this makes it easy for visitors to access all of the sites pages and content without repeatedly squeezing and zooming pages to try and access the various links and menus.
In addition, responsive sites are given much better positioning in search result rankings by all major search engines. Google’s current algorithms enact significant penalties for websites failing to meet its standards for mobile friendliness. Another thing to consider is that virtuall all social media referrals are on mobile. If you're doing social media marketing of any kind, odds are very high that incoming traffic will be accessing your site via mobile devices.
Long story short: If you’re using your website as a marketing and sales tool for your business you NEED a modern, responsive layout! Unless of course, this is the impression you want to have on prospective customers...
Posted on January 3rd, 2020 at 10:00 AM