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.
This mobile-only option has worked for many businesses, yet there are potential concerns.
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.
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:
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.
Where Vision, Creativity and Technology Meet