Helping users find mobile-friendly pages

I am probably one of the few users who does not search the web using either a smartphone or tablet. I am usually on either my desktop or my 17” laptop BUT the majority of my sites are mobile-friendly including this blog.

On November 18, 2014, Google published the following on its Webmaster Blog:

Have you ever tapped on a Google Search result on your mobile phone, only to find yourself looking at a page where the text was too small, the links were tiny, and you had to scroll sideways to see all the content? This usually happens when the website has not been optimized to be viewed on a mobile phone.

This can be a frustrating experience for our mobile searchers. Starting today, to make it easier for people to find the information that they’re looking for, we’re adding a “mobile-friendly” label to our mobile search results.

You can see an example of how the listing will look once Google decides your site is mobile-friendly. I could not find a listing that was already marked as mobile-friendly.

Mobile Friendly site example.

Google will be rolling out his change over the weeks to come.

A page is eligible for the “mobile-friendly” label if it meets the certain criteria as detected by Googlebot. You can read the entire article and the criteria that Google will use for deciding if your page/site is mobile friendly – Helping users find mobile-friendly pages

You can check your pages with the Mobile-Friendly Test, The image below shows you the report on this site.

Graphic of Google's mobile friendly test site.

If you’re interested in learning more about mobile sites, check out the Google Webmaster’s Mobile Guide or the Principles of Site Design on Web Fundamentals.

Is your site mobile-friendly?

How to test responsive designs for free

When you are trying to design your site to be responsive BUT don’t have all the various devices to test on, what can you do> My first investment was Electric Mobile Simulator Lite which was available for free from Electric Plum. Unfortunately they no longer offer a free version. Next I purchased Electric Mobile Simulator 2012 which does a nice job most of the time. But at $39.99 it is a bit expensive.

deviceresponsive

A couple of days ago, Ian Haynes posted in the Expression Web group on Facebook a link to a free tool deviceresponsive which shows a quick preview of your website’s responsive layout on different device resolutions like Macbook, iPad, or iPhone.  You can then share share this preview with your client or use it for your own testing. I tried it out on a couple of my sites and was happy with the result. deviceresponsive lets you see the results of both portrait and landscape orientations. All devices are shown at once on one long page.

Devices and screen sizes emulated in this site are

  • Macbook — 1280 x 800
  • iPad portrait — 768 x 1024
  • iPad landscape — 1024 x 768
  • Kindle portrait — 600 x 1024
  • Kindle landscape — 1024 x 600
  • iPhone portrait — 320 x 480
  • iPhone landscape — 480 x 320
  • Galaxy portrait — 240 x 320
  • Galaxy landscape — 320 x 240
    No screenshot included as it would be way to long! Test your site to see the results.

Am I Responsive?

Today, a couple of folks posted a link to an article How to test responsive designs for free which includes another free tool Am I Responsive? which gives a simple, instant view of your site as it would display on four different devices. All four are iOS, and the developer explains that focus on the site. It offers no controls and no choices, just a very simple, elegant presentation.

Viewport sizes are

  • Desktop — 1600 x 992px scaled down to scale (0.3181)
  • Laptop — 1280 x 802px scaled down to scale (0.277)
  • Tablet — 768 x 1024px scaled down to scale (0.219)
  • Mobile — 320 x 480px scaled down to scale (0.219)

The screenshot shown below is how this blog displays in the various devices.

Screenshot of Expression Web Tips Blog.

You can read the full article How to test responsive designs for free. I would encourage you to add both of these free tools to your testing arsenal if you re working with responsive designs. It is always best to test on an actual mobile device but some of us do not have that luxury.

Google and Responsive Design

I recently began the task of converting each of my websites to use a responsive design layout. Google recommends using responsive design and says:

This means that your website serves the same HTML code to all devices along with different CSS style rules to optimize the site’s interface on desktops, smartphones, and tablets.

You may choose to develop your own responsive layout, buy a template that is responsive or use an add-in/extension for your particular web editor. Since I own both Dreamweaver and Expression Web, I decided to give the Dreamweaver extensions developed by Project VII a try. The two I have been using are Affinity with its included Drop Menu Magic program and CSS Page Builder Magic 2. They are both excellent additions and I wish they were available for Expression Web but sadly they are not. Since I am not as familiar with the workings of Dreamweaver, I switch between the two programs.

Details of recommendations

Google gives the following details on its recommendations:

  1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
  2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
  3. Sites that have separate mobile and desktop URLs.

Examples: Each of the sites listed below us a responsive layout. You can test them by opening the site in your browser and resizing the browser itself.

You can read the full article Building Smartphone-Optimized Websites on Googles Web Developers site. You might also be interested in Building Mobile-Optimized Websites.