Site Guide

Site Guide

Planning Your Mobile Web Page

The Basic Mobile Web Code to fill out your Page

FUN Mobile Web Features To Have

Aside | Posted on by | Tagged

Mobile web page navigation elements

The mobile pages do not contain lots of information mostly they contain quick links to services and simple information.

The content section of the pages in our template are mostly navigation elements.

We have 3 primary types of navigation elements all made as slightly different lists of links.

Main Navigation list

List of Links with icons

Our main navigation consist of a list containing links an icon left and a right pointing arrow. This is very much like settings menus on an iPhone or iPod but more colorful.

NOTE: The icons were set on each link tag as a background with an inline style so you could edit the icon for a nav link without opening any other files.

The Links with icons CSS for these is primarily in the ios.css file. The use of the > bracket in lines like this "body > #content > #nav > ol" help especially when you have nested IDs like #nav inside #content. The icons for this style are exactly 48 by 48 pixels. In the tools and freebies post you will find out more about getting nice icons.

/* navigation - list of links with icons */
body > #content > #nav > ol{ font-size:18px; font-weight:bold;
margin: 0px 0; padding: 0; width: 100%; border-top: 1px solid #dadada;
}
body > #content > #nav > ol > li { padding: 1px 0px 3px 0px;
margin: 1px 0px 0px -5px; border-bottom: 1px solid #dadada;
line-height:29px; list-style-type: none; padding-left:3px;
background: url(/m/images/listArrow.png) no-repeat right center;
}
body > #content > #nav > ol > li > a {
display: block; padding: 10px 22px 10px 55px;
overflow:hidden; text-decoration: none; color:#1F497D;
}

Nav Links without icons use id=navnoicon

The nav noicon list does have some redundant CSS to the #nav ID CSS when I have time would change that so navnoicon was a class inside a #nav id with only a couple lines of CSS to modify the left padding. Perhaps one of you might try that.


<div id='navnoicon'>
<ol>
<li><a href='http://search.ebscohost.com/mydatabase/login/'>My database Link</a></li>
<li><a href='http://search.ebscohost.com/otherdatabase/login/'>other Link</a></li>
</ol>
</div>

The navnoicon CSS for smart devices

Note it is nearly the same as #nav but only 3 pixel padding on the left instead of 55.

/* navnoicon navigation list of links without icons  */
body > #content > #navnoicon > ol{ font-size:18px; font-weight:bold;
margin: 0px 0; padding: 0; width: 100%; border-top: 1px solid #dadada;
}
body > #content > #navnoicon > ol > li {
margin: 0px 0px 0px -5px; border-bottom: 1px solid #dadada;
line-height:29px; list-style-type: none; padding-left:3px;
background: url(/m/images/listArrow.png) no-repeat right center;
}
body > #content > #navnoicon > ol > li > a {
display: block; padding: 10px 22px 10px 3px;
overflow:hidden; text-decoration: none; color:#1F497D;
}

Lists with Drop Down sub lists – Requires a small javascriptCategory Drop list

This navigation element lets you divide long lists into categories, click on a category and get a drop down list of each item in that category. Like a list of databases by subject area. This one I hope to refine because coding the main and subsists list by hand takes some care as it is.

This is just a nested list with certain classes applied to the main list and sub list. A javascript changes the CSS attribute for the sublist from display:hidden to display:show and vice versa when clicked on.

The html

Each list and sublist must have a unique id the LI tag of the main ID must also end in “-show” then the onclick runs a simple java function on the ID.

Like this:

<div id=’navnoicon’>

<ol id=”categories”>

<li><a href=”#” id=”StartGen-show” class=”showList” onclick=”showHide(‘StartGen’);return false;”>Start Here/Gerneral</a></li>

<ol id=”StartGen” class=”sublist”>

<li><a href=”http://search.ebscohost.com/mydatabase/login/”>Academic Search Complete</a></li>

<li><a href=”http://mobile.jstor.org/”>JSTOR</a></li&gt;

</ol>

<li><a href=”#” id=”Art-show” class=”showList” onclick=”showHide(‘Art’);return false;”>Art</a></li>

<ol id=”Art” class=”sublist”>

<li><a alt=”Art” href=”http://search.ebscohost.com/art2database/login/”&gt;

Art &amp; Architecture Index</a></li>

<li><a href=http://mobile.artstor.org/”>ARTStor</a></li>

</ol>

</ol>

</div>

The javascript for the Lists with drop down sublist

Super simple

function showHide(shID) {

if (document.getElementById(shID)) {

if (document.getElementById(shID).style.display != ‘block’) {

document.getElementById(shID+’-show’).style.background = ‘url(/m/images/arrowdown.png)’ +

‘#fcf3da no-repeat left center’;

document.getElementById(shID).style.display = ‘block’;

}

else {

document.getElementById(shID+’-show’).style.background = ‘url(/m/images/arrow.png)’ +

#fcf3da no-repeat left center’;

document.getElementById(shID).style.display = ‘none’;

}

}

}

Posted in Mobile HTML and CSS, Mobile Navigation Elements, mobile web design | Tagged | Leave a comment

Mobile Headings and footer HTML and CSS

Let’s skip the content section of the page we set up for now and show the html the CSS of the top of the page headings and the simple footer.
Top of the page heading section

Home page heading section HTMLhome header

The home page of the mobile site has a different heading on top from the other pages inside because only the home page is set up with a small logo image. It has some CSS in all three CSS files.

<body>
<div id='header'>
<div id='home_heading'>
<img src="/m/images/mytinylogo.png" id="logoimage" alt="My College Name" />
<!-- top of index page heading title -->
<h1>My College Library Mobile<h1>
</div>
</div>

The CSS in the logo Each id= attribute is represented in the CSS

Primarily in the smart device CSS called ios.css in the heading shown above.


/* ios home page heading  */
#logoimage {float:left;}
#home_heading {min-height:60px;  background: #F78624; padding: 0 5px;}
#home_heading h1{font-size: 20px; font-weight: bold; font-family: Georgia, Serif;
text-align: center; text-shadow: 0px 2px 2px #444444;
margin:0 0 0 0;padding: 7px 0px 0px 0px; color: #fff; }

The CSS in the logo Each id= attribute is represented in the CSS

Primarily in the smart device CSS called ios.css in the heading shown above.

/* home page heading  */
#logoimage {float:left;}
#home_heading {min-height:60px;  background: #F78624; padding: 0 5px;}
#home_heading h1{font-size: 20px; font-weight: bold; font-family: Georgia, Serif;
text-align: center; text-shadow: 0px 2px 2px #444444;
margin:0 0 0 0;padding: 7px 0px 0px 0px; color: #fff; }

And two lines in the handled CSS for non smart devices


#home_heading {background: #F78624; }
#home_heading h1{font-size: 1em;color:brown; }

Normal pages heading HTMLRegular Page Header

The normal pages heading is meant to be more flexible so a page heading could be one line or two lines and expand to fit. Also it has a home button which is not an image which takes some extra CSS to format fit and stay in place.


<body>
<div id='header'>
<div id='page_heading'>
<div id="homelinkbox">
<a href="/m/" id="home_link">&nbsp;<big><big>&laquo;</big></big>&nbsp;Home&nbsp;</a>
</div>
<div id="titlebox"><center>
<!-- top of secondary page heading title -->
<h1> Library Hours</h1>
</center></div>
</div>
</div>

The normal page CSS in the ios.css file for smart devices
Display:table-cell allows content to be vertically centered so heading can have multiple lines. The parent ID, page_heading set to display table helps hold title and link side by side.


/* regular page heading  */
#page_heading { height: auto; background-color: #F78624;
padding: 3px;padding-bottom: 6px; width:100%;
display:table; }
#page_heading div {vertical-align: middle;}
#page_heading h1{color: #fff; font-size: 19px; font-weight: bold;text-align: center;
text-shadow: 0px 2px 4px #333333; margin: 5px 0px 5px -10px; }
#titlebox {display:table-cell;text-align: center;vertical-align: middle;
padding-top:3px;padding-bottom:3px;}
#homelinkbox { display:table-cell;vertical-align: middle;
padding-top:3px;padding-bottom:3px; width:90px;}
#home_link { background-color: white;border: medium solid #1F497D;
padding: 3px 0px 3px 0px; margin: 3px 0px 3px 0px;
border-radius: 10px;text-decoration: none; color: #1F497D;
font-weight: bold;font-family: Arial, Sans-Serif ;
-webkit-border-radius:10px;
-moz-border-radius:10px;}
#home_link A:link {text-decoration: none; color: #1F497D;}
#home_link A:active {text-decoration: none; color: #1F497D;}
#home_link A:visited {text-decoration: none; color: #1F497D; }

In the handheld CSS only 3 lines


#page_heading {background: #F78624; }
#page_heading h1{font-size: 1em;color:brown;}
#home_link {background-color:white;}

IE mobile did not want to cooperate so these lines made it fit with IE mobile


#title_header {display:inline-block;text-align: center;width:60%;
vertical-align: middle;padding-top:3px;padding-bottom:3px;}
#homelinkbox {float:left; display:inline; width:100px;
padding-top:10px;padding-bottom:10px;}
#home_link { background-color: white;border: medium solid #1F497D;
padding: 3px 0px 3px 0px; margin: 0px;}

The footer is just simple centered links

CSS for the footer adds a wide margin around paragraphs inside the DIV tag with the id=footer so a wide finger can still click these links.


<div id ='footer'>
<p class="center"><a href="/m/about.html">About My Mobile</a></p>
<p class="center"><a href="/m/">My Mobile Home</a> | <a href="/">My Main Page</a> </p>
<p class="center"><a href="tel:5552223333">Research desk#555-222-3333</a></p>
<br /><p class="center"><a href="http://my.college.edu/">My College Name</a> </p>
<br />
<br />
</div>
</body></html>

The footer CSS in the ios.css file for smart devices


/*footer*/
#footer { padding:10px 0px 0px 0px; text-align:center;
font-size: 16px; font-weight:bolder;}
#footer p{margin-top: 10px;margin-bottom: 10px;}
#footer a{color:navy;}
#footer a:visted {color:navy;}
.center { text-align: center; }

Posted in Mobile HTML and CSS, mobile web design | Tagged | Leave a comment

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.

Posted in Mobile HTML and CSS, Mobile Meta Tags, mobile web design | Tagged | 1 Comment

Tools and FREEbies that are helpful

The web developer toolbar for Firefox

For mobile development Firefox is a great tool for checking pages as is. The latest version is Webkit compatible as are Android and iOS mobile browsers.

The Web Developer toolbar addon for fire fox has tons of options for testing web pages and web code. You can edit CSS and HTML right in the browser see what the effects are immediately and save your work you can’t beat that.

One tool that comes in very handy is the on the CSS menu, Display by Media “Handheld”, it is the only easy way you can debug your handheld device style sheet.

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Royalty free icons

You can make your own icons or you can search for royalty free icons like these.

http://dezignus.com/web2_0-vector-icons1/

Free web fonts from Google

Since Android devices might only have 5 fonts installed and none of the web safe set web programmers are used to a font that downloads with your page comes in handy. Otherwise your page will not look the same or fit the same on different devices.

http://www.google.com/webfonts

A mobile device detection script that is easy to use

I did not put this script to work but I tested the javascript version and it was simple to set up. So far we have decided not to use device detection at all. With our simple set up I don’t think we need to.

http://blog.mobileesp.com/?page_id=20

http://www.hand-interactive.com/detect/mobileesp_demo_javascript.htm

Posted in mobile web design, Poccess of Making Mobile Web, The Fun Stuff | Tagged , , , , , , | Leave a comment

Documentation you should have

These apple guides for web coding for Safari are very helpful and much of it works for the Android mobile browser because it is also a “WebKit” compatible browser.

The section Configuring Web Applications and Using the Viewport are key to mobile development and they go into more detail than I will here.

http://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/SafariWebContent.pdf

http://developer.apple.com/library/safari/documentation/appleapplications/reference/safarihtmlref/SafariHTMLRef.pdf

Posted in Mobile HTML and CSS, Mobile Meta Tags, Poccess of Making Mobile Web | Tagged | Leave a comment

Mobile web design and code considerations

As you probably know already there are a few things to be avoided. Not banned completely just avoided.

Fixed pixel width could cause trouble if you can’t live without a fixed width then make sure it is small and test it in multiple devices. Many web editors set a fixed pixel width on images automatically in that case you will have to watch remove the height and replace width with a percentage width. Images though must have a width set without one they revert to a fixed width original image size.

Tables are not recommended but you can use them the w3c has never provided anything that easily replaces tables. If you have to you can lay part of your page out with a table. You will probably have to set percentage width on the top cells of tables for columns and set a max-width in pixels on the whole table if it is not 100 of your page. Of course the content will have to fit in your page.

Other things to keep in mind

  • People will be clicking on these with a finger and links need to be finger width
  • Keep the home page short so it mostly fits on a single screen
  • Wording needs to keep to a minimum to fit well on a small screen
  • You need to find out what resources that you connect to that offer mobile compatible pages and how to link to them for the mobile content
  • And with databases you will also need to update the pages of your Proxy/Authentication sever pages for the small screen also.
Posted in Mobile HTML and CSS, Mobile Web Style Considerations, Poccess of Making Mobile Web | Tagged | 2 Comments