It is estimated that the number of mobile Internet users will soon overtake desktop users. As a developer the steady increase in mobile internet use is important since it tells me 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.
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 a few years back. Each site was developed with the JQuery mobile UI, and was created to look similar to the main website. All but the one I developed for my business is still in use currently:
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.
Note: You can easily test how a responsive layout resizes by manually narrowing your browser display.
Responsive Design is the Current Web Development Standard
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 test your own site using an online emulator, and while no emulator provides a perfect representation of how a website will display on a mobile device, the best one we’ve used is http://mobiletest.me/iphone_5_emulator.
We have developed several professional websites for businesses of all types; you can view some our responsive website following, and please let us know if you have questions.