The HTML headers make your page mobile

Here is the mobile header we came up with explanations of the tags are below it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<!-- Meta tags that set up the page as a mobile page   -->
<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/m/images/iphone.png" />
<meta name="format-detection" content="telephone=no" />
<!--  A free Google web font embed because android does not have the browser safe fonts -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Allerta">
<!-- Style sheet for NOT smart devices like older web phones  -->
<link href="/m/css/handheld.css" rel="stylesheet" type="text/css" media="handheld" />
<!-- Style sheet for smartphones and tablet devices -->
<link rel="stylesheet" href="/m/css/ios.css" media="screen" />
<!-- Style sheet for lousy incompatible frustrating IE mobile -->
<!--[if IEMobile]>
<link rel="stylesheet" href="/m/css/iemobile.css" media="screen" />
<![endif]-->
<!-Script that scrolls page up to the top -->
<script type="text/javascript">
window.scrollTo(0,1);
</script>
<!-- Fill out the Title for each page -->
<title>STL Library Mobile Home</title>
</head>

The document type declaration

A strict document type declaration at the top of the code may indeed help with compatibility with Windows Phone 7. Windows Phone 7 uses the old IE box model for pages that are not xhtml strict, which means anything you specify a border around will not line up the same as all the other browsers in the world. (Opera uses this insane IE box model too.)

In these pages I use a transitional document type declaration and I deal with Mobile IE with a separate IE Mobile ONLY style sheet, it’s more reliable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Metatags and Style Sheet links

Metatags

If you have a simple one column page with no large fixed widths already then one meta tag works like magic, the viewport tag. An improperly formatted viewport tag can stop your page from fitting properly if you change orientation from portrait to landscape and back.

This one works great for most mobile pages.

<meta name = “viewport” content = “user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width”>

You can even add this to a non mobile page and it may fit a little better on a mobile screen by dropping any unused space around your content BUT if you use it on non mobile headers be sure to change user scalable to yes. This will allow the screen to zoom in on form fields and make them easier to fill.

For regular pages set user-scalable=yes,

The “apple-mobile-web-app” meta tags I use in the header give the home page of the mobile site the style of an application. Setting it to YES also allows all the other meta tags below.

The “apple-mobile-web-app-status-bar-style” meta tag only makes a difference when your users load that page from a home screen icon and the only choices are black or black-translucent. It removes the address bar and navigation bar and makes the status bar black like a full screen app. Balck translucent though will show the status bar over top of your web page.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />

The “format-detection content telephone = no” meta tag prevents the browser from automatically detecting numbers as phone numbers because on my site we use telephone link URLs on all phone links. We do this so we can abbreviate numbers to help them fit and so the automatic detection does not make a mistake.

Like this:

<a href=tel:8452573714>257-3714</a>

The APPLE TOUCH ICON

You want your users to be able to place your library mobile site right on the home screen of their device so one way is to create the icon as a PNG image and put the PNG image in the root of your site and name it apple-touch-icon.png or apple-touch-icon-precomposed.png

The default size of the image is only 57 by 57 pixels but you can use sizes up to 114 pixels.

OR

You can specify an icon for you site or specific pages with a special link in the header that tells the mobile device where to find it.

Android devices also work when you specify an image with this tag.


<link rel="apple-touch-icon" href="/m/images/appleicon.jpg" />

It is also possible to specify different icons for different devices like the iPad or iPhone 4 that use slightly higer res files 72 by 72 and 114 by 114 pixels respectively.

Like this:


<link rel="apple-touch-icon" href="iphone-ipod.png" />
<link rel="apple-touch-icon" sizes="72x72" href=" ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="iphone4.png" />

I composed our apple touch icon using drawing tools in Microsoft Word, the WordArt tool and amazingly my iPod did not reject it. I traced the logo with a free program called InkScape and sized the final image with Paint.net. Size did not seem to matter but it has to be square, I was using an icon of 196 by 196 pixels just fine but I settled on 114 by 114.

Mobile Style Sheets Links

You will probably want at least 3 style sheets.

A style sheet for smart devices with touch pads

Devices like iPhones and Android Phones and small tablet devices. These are the primary target for our mobile page as discussed above this is the one you will work on most because it does most of the work. All your navigation elements will have their style here. It should have media=screen.


<link rel="stylesheet" href="/m/css/iphone.css" media="screen" />

Handheld CSS for not very smart devices like old web enabled phones

These are not our primary target user but they can still get our hours and contact numbers simple things. And it should not take much effort. These devices usually identify themselves as handheld and load for themselves only a Stylesheet with the media attribute “handheld”.


<link href="/m/css/handheld.css" rel="stylesheet" type="text/css" media="handheld" />

Finally a Mobile Style Sheet for cranky old Windows Phone

The IE browser in windows phone will always react badly to some things. Often you can counteract this by repeating the style for that thing in the IE Mobile only Stylesheet.

You specify a style sheet that only IE mobile can read with a conditional comment surrounding the style sheet tag. This one is read by all versions of IE Mobile but you can specify a version if you need to. Just put the version number after the if iemobile like:

<!--[if IEMobile 7]>.

<!--[if IEMobile]>
<link rel="stylesheet" href="/m/css/iemobile.css" media="screen" />
<![endif]-->

A simple helpful JavaScript to scroll your page up

This little script placed at the bottom of your header makes your page scroll up and hide the address bar giving more room to your content and a neater look. Place this at the bottom of the header. If your page is loading slowly I have found it does not always work.


<script type="text/javascript">
//<![CDATA[
window.scrollTo(0, 1);
//]]>
</script>

If you are wondering what the //<![CDATA[ and ending //]]> that appear to be commented out are there for it is so that your page will validate correctly if you are using strict XHTML as your document type. I don’t need them on my page but I left them in for you.

Advertisements

About mobilelibraryinacan

Library tech person 4 20 years
This entry was posted in Mobile HTML and CSS, Mobile Meta Tags, mobile web design and tagged . Bookmark the permalink.

One Response to The HTML headers make your page mobile

  1. David says:

    This is very helpful! Handy to have everything explained in one place.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s