Web Design with HTML and CSS

The need for mobile-optimized websites

Lesson 11, Mobile Design 245

Although the iPhone’s rendering is better than that of the older Nokia’s, it still presents

problems. Largely as a result of the two-column layout, the body text of the page is

unreadable without zooming. Also, the navigation bar presents a major problem in the default

portrait mode: it is essentially unusable because the buttons are too small a target for the

touchscreen (unless the user zooms in). In landscape mode, the navigation bar becomes more

usable, but the target of the buttons is still small enough to frustrate the user who accidentally

presses the wrong button.

How do websites know what browser you are using?

Whether you are browsing the web on your desktop or a mobile device, there are hidden

communications taking place between your browser and the server where the website is hosted.

All web browsers identify themselves with a user agent string. A user agent string identifi es the

visiting browser as Internet Explorer 6, Firefox 3.5, iPhone OS 3.0, and so on. In most cases, this

information is never used by the website. However, you can add user agent detectors to your

web pages. A detector can be a small piece of JavaScript code that identifi es the user agent (in

this case, a visiting browser), and then changes the default behavior of the website in some way.

In some cases, the behavior could be as drastic as preventing the visiting browser from accessing

the website. In other cases, this code might be used to send the visiting browser a diff erent style

sheet or to redirect the browser to a specifi c page.

The user agent string can be accessed in JavaScript with the Navigator Object. To learn more about

using the Navigator Object and user agent strings, see http://www.w3schools.com/jsref/obj_navigator.asp.

The trouble with style sheets.

A common problem in web design is the discrepancy between how something should
work and how it really works. You saw this in Lesson 9 with issues of browser compatibility.
Diff erent browsers render the exact same page diff erently depending on various factors. This
is especially the case with mobile web browsers. A solution to this problem was proposed
in 1999 when the original specifi cations for CSS were developed. Using this solution, the
browser defaults to the screen type when there is no other designation for the type of style
sheet to use. In other words, this code:

<link rel="stylesheet" href="base.css" type="text/css" />

is the same as this code:

<link rel="stylesheet" media="all" href="base.css"

type="text/css" />