While out traveling this summer, I used my smartphone and iPad to discover new places, websites, campgrounds, restaurants, cafes, and local hot spots in Moab, Utah, Boise, Idaho and every small town in between. I didn’t want to lug around my laptop and thought, “It’s 2015, I’m?sure?places in the backwoods of Idaho will have a website that I can use.”

I’m sad to say that I was incorrect. However, mobile usage?has surpassed desktop and laptop usage, the trend beginning in 2014.

?More Google searches take place on mobile devices than on computers in 10 countries including the US and Japan.?

? Google Adwords Blog, May 2015

Mary Meeker of Kleiner Perkins Caufield and Byers, has been following theses trends. This graph?illustrates both work and home Internet usage as its progressed over time. Mobile is defined here as both smartphone and tablets in this case. 2014 was the first year that mobile surpassed desktop and it will continue to trend in that direction.

KPCB.jpg

Of the various websites I visited while on my trip,?about 65% showed a site that was a small version of their desktop site, like this image on the left. They were?not-optimized for mobile which meant?zooming in to see the content on the screen, difficulty finding and using the buttons, and a generally horrible experience.

The image on the right is the better, viewport-configured image. The screen’s content has been adjusted for size based on the device.

iphoneimagenoviewport.jpgiphoneviewportconfigured.jpg

There is a quick fix which?doesn’t require creating an entirely new responsive?mobile site design.

3 Steps to?enable?the viewport for your site:

1. First, refer to?my blog post showing you how to get up to speed with Mobilegeddon?on getting your site up to speed with the announcement of Google’s mobile update for ranking. This will show your responsive readiness and it will indicate if your viewport has been configured. ?If it hasn’t, continue to step 2. If it has, congrats!

2. Now, you’re?aware of your site’s mobile responsiveness. If you haven’t already, configure your website’s viewport. Add a meta viewport tag to all webpages to ensure they will be viewed according to the devices’ screen size. This will eliminate your users zooming in and out to read with the content on your site.?Use this html snippet:

<meta name=viewport
content=”width=device-width,
initial-scale=1″>

Placing this tag in the header file will take care of the entire site, however, there are some cases where you must individually add the tag to each page.
If you’d like to get specific on viewport sizes for specific screen types, reference this list
http://viewportsizes.com?.

3. Check your work. Go through every page on a tablet and smartphone to ensure the tag is working. If desired, configure a mobile-responsive css and javascript. At this stage, many CMS systems have built this into their website builders. A quick search can help you determine whom to use.

References:
Google Developer Tools
Html5 Rocks Mobile-Responsive Design Article
Google Webmaster Tools For Checking Mobile Usability