Code Tips to Make your Website more Mobile

Posted on September 21, 2010

2


As more and more people are surfing web sites from mobile devices, websites need to be up to speed in our mobile connected world.

This article present several helpful tips.

Define the viewport – To tell the mobile browser to use whatever its device width happens to be  use:

1.  <meta name = "viewport" content = "width = device-width" />

Media Queries – To load custom CSS for mobile browsers

1.       <link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width:1024px)" />

2.       media attribute enables you to identify particular mobile browsers

3.       only screen keyword specifies that the mobile.css is only for mobile browsers

4.       max-device-width applies the css to every mobile device that has a maximum width of 1024 pixels; this includes the iPad

Site Styling – Certain practices do not lend themselves to displaying sites on mobile browsers

1.       <link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width:1024px)" />

2.       #page { width: 100% } left and right margins may work on large displays, but waste space on mobile browsers

3.       #mainMenu { font-weight: normal; } bold fonts take up more room and do not display well

4.       h1, h2, h3, h4, h5, h6 { font-family: Albany, "BB Alpha Serif". Georgia, "Times New Roman", "Droid Serif", serif; } define native mobile web fonts. Albany is a serif font found on the Palm devices, BB Alpha Serif on Blackberry, Droid Serif on all Android devices, and Georgia and Times New Roman are on the iPhone/iPad. Sans serif alternatives are Prelude is a sans serif font found on the Palm devices, BB Alpha Sans" on Blackberry, Droid Sans on all Android devices, and Verdana and Arial are on the iPhone/iPad.

Reference article

Advertisements
Posted in: Programming