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?

Site Redesign Winners

A few weeks ago, Cheryl Wise offered to redesign one page of a site you could submit to Site Makeover Week. The offer was advertised on a number of mailing lists and groups. It was surprising to me that not more folks took advantage of this offer. The sites chosen were:

Redesign Day 1

Site: Johnson Space Center Astronomical Society


Write UpRedesign Day 1

Redesign–Day 2

Site: John McGhie (This is a copy of the original site as John has already implemented the changes suggested.

Redesign: John McGhie

Write UpRedesign–Day 2

Redesign–Day 3

Site: The Alamance County Genealogical Society


Write UpRedesign–Day 3

Redesign–Day 4

Site: Elko-Lander-Eureka County Library System  in case the original is made over either using our redesign or another here is the original.


Write UpRedesign–Day 4

Redesign Day 5

Site: TADA Productions

Redesign: Finished version with slideshow

Write UpRedesign Day 5

Redesign Day 6

Site: Foster, Colenso, Drummond, Leeman and Ussher 

Write Up: Redesign Day 6

Redesign–Day 7

Site: Need Help 4 MAC

RedesignNeed Help 4 MAC (Redesign has already been implemented)

Write UpRedesign–Day 7

It will be interesting to see how many of the sites submitted take advantage of the suggestions Cheryl made and actually implement the redesign. So far, only two sites have.

Site Makeover Week

Cheryl Wise had a new post on her blog that those of you who are still using FrontPage and thinking of moving to Expression Web might be interested in. She will be selecting a site a day to do a makeover of. The site should be an  old FrontPage site or other at least a 5 year old design   The first redesign will be posted on her site and the byexpression Facebook page on Sunday March 9 and the last one Saturday March 15.

So if you would like to have your site’s home page to be redesigned with modern HTML & CSS at no cost here is your opportunity. You can read all of the details and what is required of you to enter your site on her post Site Makeover Week.

Remember that Expression Web 4 is now available as a FREE download from Microsoft.

Remember The Order of Margin/Padding Shorthand with TROUBLE

Quite often when I am working on a site or designing templates for others, I use the following set of style rules which is considered css shorthand.

.imgrgt {
	padding: 5px 0px 5px 10px;
	float: right;

The question came up recently on one of the forums as to what do each of these px’s refer to? 

Remember The Order of Margin/Padding Shorthand with TROUBLE is an old article by Chris Coyier, but it remains a good reminder.

Use the word TROUBLE to remember the order of padding/margin amounts in CSS shorthand. The trick is that the first four consonants in the word are the first letters of "Top", "Right", "Bottom" and "Left". He even includes a small graphic you can print out as a reminder.

If all of the units of measurement are the same, you can use the following shorthand:

padding: 5px;

What Makes a Website Look Dated?

While browsing around the web this morning, I came across an interesting article that I would pass on to my readers. The article was written by James George and posted on the Design Festival website.

Having an outdated style for your website can leave a negative impression with your visitors, reduce your overall traffic, and lower the interest and credibility of your site. Retro or vintage designs are great, but retro/​vintage and outdated are two entirely different concepts, and no visitor will interpret an outdated site as a purposeful throwback to an earlier time.

He calls our attention to the following "pitfalls."

  1. Having Anything that is Flashing or Blinking – The flashing and blink icons and banners still turn up on occasion especially on hobby sites. To my way of thinking, there is nothing more annoying that flashing and blinking items on a page. This is especially true if you are trying to sell something to your viewer.
  2. Generic Colors -  for hyperlink states. I’m not sure I totally agree with this as sometimes the generic colors work well with a site. However, I do use CSS to style hyperlinks on my site with colors that match the rest of the site.
  3. Generic Typefaces -  Google Web Fonts makes it easy to integrate custom typefaces as part of your website. You don’t have to stick with Arial, Helvetica, Verdana and the other “web safe” typefaces. You might also consider the CSS3 @font-face Rule. The @font-face rule is only supported by newer browsers.
  4. Using Tables for Your Design – Tables are meant to be used to present data NOT for site layout. You can and should construct all of your layout ideas using CSS. Add dimension to your websites by using the text shadow and box shadow CSS properties. Remember though, these properties are only supported by newer, modern browsers
  5. Using Images Where You Could Use CSS – One of the most common uses of images was the ability to use "fancy fonts" for typography since not everyone might have the font you chose to use on their computer. With Google Web Fonts and @fontface integration, you can find almost any style of typeface that will match what you are looking for.
  6. Not Taking Advantage of CSS at All  – Using CSS will make your site much faster to load and much easier to update and maintain.
  7. Not Using Transparency in Logos & Images That Require It – Is yours a site that uses a certain background color with a logo image pasted against it? Looks kind of haphazard. Create your images with a transparent background and it will look so much more professional.

It’s important that you the web designer stay up-to-date on the latest practices so that YOUR website doesn’t look dated. Ask yourself if YOUR website has any of the qualities mentioned above. If so, you might want to consider redesigning it or at least updating it.

You can read What Makes a Website Look Dated? by visiting the Design Festival site.