Link: Mobile Landing Page Optimization - 10 Best Practices for Success - Search Engine Watch (#SEW)

Mobile Landing Page Optimization - 10 Best Practices for Success - Search Engine Watch (#SEW)

Worth the read. Here's the recap:

Mobile Landing Page Optimization Recap

Be Accessible Be Fast Be Orderly Be Brief Be Legible

Be Call-Friendly Be Thumb-Friendly Be Local Be Form-Simple Be Action-Compelling

Simple Solution For Mobile-Friendly Websites

You probably don't need a statistic to tell you that mobile browsing is increasing

You probably don't need someone to tell you that you don't that it's harder to read a website on a smaller screen.

You probably don't need someone to tell you that you should make your website mobile friendly.

And you can probably do a Bing search to find out how to do it, perhaps in a better way than I did.

But getting something done right now would probably be better, right?

Here's what worked for me: CSS Media Queries

1. First, I made a copy of the full style sheet for IE less than version 9, because those browsers don't understand media queries. I was then able to pull the IE specific code out of the regular style sheet.

<!--[if lt IE 9]>
<link rel="stylesheet" media="all" type="text/css"   href="/css/morrison-ie.css"/>
<![endif]-->

2. Then I pulled only the most basic styling code out of the stylesheet to start the mobile css.
I changed some images to display based on percent, and some sections not to display:

.logoimg {width:20%;margin:1%;}
.bannerimg {width:74%;margin:1%;}
.titleimg {width:100%}
.contactbox {display:none}

3. I separated mobile from full with style links - iPad resolution is 768x1024.

<pre style="white-space: pre-wrap; word-wrap: break-word;">
<link href="/css/mi-mobile.css" media="only screen and (max-width : 768px)" rel="stylesheet" />
<link href="/css/morrison.css" media="only screen and (min-width : 769px)" rel="stylesheet" />
<link href="/css/print.css" media="print" rel="stylesheet" />

4. I added some viewport tags based on testing the stylesheet in various browsers, to make sure the pages were viewed in the correct size.

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=device-width"/>

5. Added the "apple-touch" icon, which Android uses too, for shortcuts.

<link href="/images/mlogo57.png" rel="apple-touch-icon"/>

All in all those changes were much easier than composing this post in Blogger's interface.

Any Questions?