More and More People are Viewing your Website on Mobile Devices. Is Your Site Ready?
Posted by Bryan
Having a website that looks “pretty good for being that small” is no longer good enough. Web traffic from mobile devices has been one of the fastest-growing segments of the Internet for years. Nationwide, about one-third of all search traffic comes from mobile devices. According to TechCrunch, the number of users accessing the Internet through a mobile device (including a smartphone or tablet) will exceed those who use a traditional desktop or laptop by 2014, if not sooner. For 28% of Americans, a mobile device is their primary way of accessing the web. On top of that, research by Google shows that a website that performs poorly on a mobile device hurts sales, conversions, and a company’s image.
For many sites, a responsive web design is the answer.
Responsive web design is a term coined by Ethan Marcotte in his article on A List Apart. The basic concept is to give a website a flexible, fluid layout that adapts to the different viewing modes and sizes of various web browsers. The end results are tailored layouts with scaled images that dynamically adjust depending on how the site is viewed. A responsive website ensures that users get the best and a consistent experience on any device – iPhones, iPads, Android OS smartphones and tablets, Windows devices, as well as desktops, laptops and notebooks.
Key technical features include tailored style sheets using CSS3 media queries, flexible grid-based layouts that use relative sizing, and dynamic scaling of images and other media. Media Queries are a type of conditional statement. One design can be used for a large display while different designs are used for mobile devices with different widths. Media queries allow designers to create multiple layouts using the same content.
A responsive site allows some assets (like large background images) to be turned off, sparing a download and causing the site to load faster over a mobile connection. It allows for extra functionality that's only available on phones, such as displaying a "tel:" link that people can click to dial a phone number.
It does take a little more time and budget to build a responsive site, but you can save money by avoiding a separate mobile version of your site. And as said before, studies by Google show that a good mobile site increases sales. Even if the final purchase is made on a desktop, the customer’s research may have started on a mobile device. A responsive design also performs better in search engines since the same HTML is served in all applications.
This site, www.duncanmccall.com, is an example of a responsive design. If you are using a modern browser, including Internet Explorer 9 or above, resize the browser window and watch how the design of the page changes. Or try it out on your phone. Other examples of responsive designs are pensacolalighthouse.org and pensacolarotaryclub.org.
Now more than ever, digital content is being viewed in a wide variety of ways. Responsive web design offers one way forward. Give us a call if your site needs some mobile help.