Responsive Web Design

There has been a steady increase in mobile internet use.  As for April 2020 Mobile accounted for 53.81%, Desktop at 43.27%, and Tablets at 2.92% of market share worldwide.  This data is important since it underscores the importance that the websites we design must look great on both desktop and mobile devices if we are to meet the needs of the typical business website visitor.

I know that some of you have questions on responsive and mobile-only designs, so this page was created to help explain things some, and to provide some visual samples of what a responsive layout will look like.

Mobile Websites

The first mobile websites were created around 2010 in response to growing number of people viewing websites with mobile phones. Many businesses quickly recognized that most desktop display websites were difficult to navigate (the constant need to zoom in and zoom out was irksome), there were page loading concerns since mobile networks weren’t especially fast at rendering pages, and some of the scripting used and features found in websites designed for full-sized monitors didn’t display well, if at all, for mobile.  The solution at that time was to create an additional “mobile-only” website, simplified so it would load fast, and then redirect the user to the mobile-only version by targeting the device type.

If you’ve used your phone to view websites for a while you have likely seen the mobile redirect wherein the URL is changed to a mobile “m.” sub-directory. Here are a few of our mobile-only websites we designed around 2010.  Each site was developed with the JQuery mobile UI, and was created to look similar to the main website.

This mobile-only option has worked for many businesses, yet there are potential concerns.

• Not all mobile devices can easily be targeted.
• When updates are required there are two websites to manage, so additional cost.
• The mobile-only site is typically simpler, so potentially of less value and interest to a site visitor.

The solution was to create a responsive website design. Newer responsive websites target for mobile by assigning a column width based upon the resolution of the device viewing the page, and not assigning a fixed width/height dimensions to images. As the viewing resolution decreases the web page columns reduce in size. Additionally, the columns are set to “float-left” so that the columns stack vertically on top of each-other; this allows for the page content to adjust to the space available. And finally, most responsive layouts include a “mobile” menu which is set to only display when the screen resolution is reduced to small tablet and mobile phone size.

The current web development standard is to develop all websites as responsive layouts, and while we still work on non-responsive websites for many of our clients (and will design a mobile-only site upon request), we do recommend a responsive framework for all new websites, and all redevelopments for a few key reasons:

• A well made responsive site will work well with all existing mobile viewing devices and provide a consistent user experience.
• A responsive website is a “complete” website, so nothing is lost, and there is only one website to update; this in turn saves money.
• A responsive website will rank better with SEO than having a non-responsive website or an additional mobile-only website since content won’t be duplicated, and device accessible websites receive a ratings boost.

Note: Google also recommends a responsive layout since there is just one URL, which makes it easier for search engines to index.

You can easily test how a responsive layout resizes by manually narrowing your browser display, or there are online mobile emulators that will approximate how a website will display on a mobile device.  Of these the best one we’ve used is http://mobiletest.me/iphone_5_emulator.

Please let us know if you have questions on responsive layouts or mobility.