beginning html xhtml css and javascript phần 6 pdf

Chapter 9: Page Layout
404
#footer {
background-color:#cccccc;
padding:10px;
height:40px;
clear:both;
border-top:20px solid #ffffff;}

Looking back at the table, we still need to add Gutters 1, 2, and 3 to columns 1, 2, and 3 using the

margin - left property with a value that is 2% . We do not actually need to add Gutter 4 into the design
because we have already allowed a little extra space to the right of the design.
We will also create padding in the boxes by giving the
padding property a value of 1% . Because the
padding is added onto the width of the box, to create a box that takes up 30 percent of the screen, the

width property for each column should have a value of 28% .
/* 3 columns */
.column1of3, .column2of3, .column3of3 {
float:left;
width:28%;
margin-left:2%;
background-color:#cccccc;
padding:1%;
margin-top:20px;
height:175px;}

You can see the result in Figure 9 - 32.
Figure 9-32
c09.indd 404c09.indd 404 11/20/09 5:00:25 PM11/20/09 5:00:25 PM

Chapter 9: Page Layout
405
One of the issues with liquid layouts is that, because the user can shrink and increase the width of the
boxes in the layout, the text may become too short or too long to read, and any fixed - width items (such
as images) may end up poking out of boxes if they are too small.
In such cases, you can make use of the
min - width and max - width attributes, which you read about in
Chapter 7. Unfortunately, IE7 was the first version of Internet Explorer to support these properties.
Luckily, the number of IE6 users is constantly shrinking, and since other browsers have supported
these properties for longer, you should use them to help users whose browsers understand them
(
ch09_eg09.css ).
.column1of3, .column2of3, .column3of3 {
float:left;
width:28%;
margin-left:2%;
background-color:#cccccc;
padding:1%;
margin-top:20px;
height:175px;
min-width:210px;
max-width:400px;}

Once you specify a min - width property, if a user shrinks the window down quite small, you may find
that content flows out of the boxes. You can use the
overflow property to control what happens to
content in such circumstances. Alternatively, you could put the three columns in a containing element
and set a minimum width for that container element — wide enough to hold the minimum width of all
three columns (
ch09_eg09.html ).

< div class=”columns123” >
< div class=”column1of3” >
< img src=”images/golden_section.gif” width=”200” height=”75”
alt=”Golden Section” / > column 1 of 3
< /div >
< div class=”column2of3” > column 2 of 3 < /div >
< div class=”column3of3” > column 3 of 3 < /div >
< /div >

Here is the rule that attaches the style to the new container element:
.columns123 {min-width:750px;}

You should also add the same minimum width to the other elements that take up the full width of the
page since their width is calculated as the width of the browser window when the page loads, which
means that these elements might not otherwise be as wide as the new container element.
Backgrounds That Reach the Bottom of the Page
One of the issues when you use the CSS float property to create columns is that when you specify a
visible background color or border for the columns, each can look a different height. Let ’ s add some
content into the three - column layout you met earlier so you can see what happens:
< div class=”column1of3” >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
c09.indd 405c09.indd 405 11/20/09 5:00:26 PM11/20/09 5:00:26 PM
Chapter 9: Page Layout
406
< /div >
< div class=”column2of3” >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque vel sem odio, et tincidunt magna. Nam malesuada justo non risus
ullamcorper eget dignissim erat viverra.
< /div >

< div class=”column3of3” >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque vel sem odio, et tincidunt magna. Nam malesuada justo non risus
ullamcorper eget dignissim erat viverra. Mauris viverra massa ac libero
feugiat tempor. Cras scelerisque fermentum dui et feugiat. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
< /div >

Figure 9 - 33 shows how the background for the box comes down only as far as the text (plus padding),
which would not make for a very attractive design.
Figure 9-33
You have actually already seen a way around this problem, when we used the grid as a background
image on the
< div > element that had a class attribute whose value is page . By using a background
image on the containing element, you can ensure that it applies to all columns, no matter how tall they
are (
ch09_eg10.css ).
c09.indd 406c09.indd 406 11/20/09 5:00:26 PM11/20/09 5:00:26 PM
Chapter 9: Page Layout
407
#frame {
margin-left:auto;
margin-right:auto;
width:960px;
background-color:#ffffff;
background-image:url(“images/960px_3column_background.gif”);
background-repeat:repeat-y;}

You can see the result in Figure 9 - 34.
Figure 9-34

You are now well equipped to be creating well-thought-out sites and page layouts. If you are interested
in finding out more about page layout, here are some good resources:
960.gs:

Blueprint: www.blueprintcss.org/
YUI Grids:
Before we finish looking at page layouts, we need to consider mobile phones that are used to access
web pages.
❑
❑
❑
c09.indd 407c09.indd 407 11/20/09 5:00:26 PM11/20/09 5:00:26 PM
Chapter 9: Page Layout
408
Developing for Mobile Devices
Many people think that the use of the Web on mobile phones is not really relevant to them or their
company, especially if they (or those in their peer group) do not use web services on their mobile phones.
But two things are changing minds:
The success of high - profile devices such as the Blackberry and iPhone
Statistics that show how many people access web - based services on mobile phones
In 2009, the British government released statistics showing that 11 percent of UK mobile phone users
were using their mobile to browse the Internet, which (bearing in mind that more people have mobile
phones than web access) equates to over a fifth of web users accessing the Web via mobile devices.
Considering that the number of mobile phones sold in 2008 outstripped the entire user base of PCs, this
is a trend that is only likely to increase.
Despite the growing interest in the mobile Web, it is not uncommon for people to view the Web on
mobile devices as being inferior or “ behind ” the experience they have on a desktop computer. Yet the
comparison between the experience of the Web on mobile devices and desktop computers is not quite as
straightforward as it might first seem.
Understanding the Medium and How It Is Used

When it comes to thinking about how people access the Web on mobile phones, there are some very
important aspects to consider:
Context: What the user is doing when using a mobile phone
Relationship: How people treat their mobile phone
Capabilities: The features and capabilities of mobile phones compared with desktop computers
Context: What Is the Mobile User Doing?
Mobile devices are being used on the move, often in a hurry, and sometimes one - handed. The result is
that when mobile phones are used to access the Web, they are often used to achieve very different things
than the same user might want to achieve in front of a desktop computer.
While people sit for hours in front of a desktop computer surfing the Web, when users are out and about,
they are far less likely to be just surfing — rather they are more likely to want to do something specific
(whether this is checking the local weather forecast, latest news headlines and sports results, or finding
out the opening hours of a nearby shop).
It is important here to note that a laptop, even though it is portable, is often used in the same manner as
a desktop, even if the user is in a coffee shop, a car park, or at an airport.
❑
❑
❑
❑
❑
c09.indd 408c09.indd 408 11/20/09 5:00:27 PM11/20/09 5:00:27 PM
Chapter 9: Page Layout
409
When you start to think about your site appearing on a mobile device, it is wise to go back to the
beginning of this chapter and create a new set of actors or personae that reflects the typical visitors to
your site via a mobile phone.
At the same time, you should be creating a new set of tasks that they might want to achieve, because the
mobile user will often want to achieve different things than the desktop user would. For example, mobile
users accessing a supermarket web site are more likely to look for the nearest store and its hours than
they are to do their weekly grocery shopping on their phones.

Even if users want the same information that they might request when at a desktop computer (for
example to check the latest sports results or weather forecast in their area), you should always consider
whether they may benefit from the information being displayed in a very different way.
Relationship: How Do Users Treat Their Mobile Phones?
It is also worth comparing the relationship that people have with their mobile phones compared with
desktop computers. It is far more common for people to have their own mobile phones whereas desktop
computers are often shared between members of a family, or used at work and schools. This means that
people have a more personal relationship with their mobile phones. It also means that it is possible to
more accurately uniquely identify users and personalize services to them.
These devices are also usually carried around 24 hours a day, no matter where the owner is (they may be
turned on silent, but rarely turned off).
Capabilities: How Do Features of Mobiles Compare with Desktop PCs?
Finally, we should compare capabilities of mobile phones and desktop computers. Here are some of the
positive aspects of mobile phones that are not as apparent on desktop devices:
Allow for location specific services: Because they can use triangulation or (where installed)
GPS to identify location of users.
Have a built - in payment system: Whether on contract or a pay - as - you - go scheme, the payment
is integrated more than a desktop computer where a user must enter credit card information or
set up an account with a service such as PayPal. The payment system is also available to those
who are not old enough to have debit and credit cards. It has also been suggested that mobile
phone owners are more used to (and willing to) pay for services accessed via their mobile than
they are to pay for services accessed via a desktop computer.
Have a built - in camera: Only a handful of desktop machines will have a camera built in,
and those that do are still used in a desk - based setting (rather than being carried around all
the time).
Are integrated with voice data: Because they are phones as well, and although services such as
Skype allow phone calls to be made through a computer, it is not inherent in the platform.
Have other features: Such as SMS and MMS, which some users (particularly in Europe)
use often.
❑

❑
❑
❑
❑
c09.indd 409c09.indd 409 11/20/09 5:00:27 PM11/20/09 5:00:27 PM
Chapter 9: Page Layout
410
Having said that, there are some inherent limitations with mobile devices:
Slower connection speeds: The connection speeds of mobile phones consistently trail behind
those offered by broadband connections.
Connection can be intermittent: As users move about, for example when traveling in more
isolated rural areas, or when going through tunnels in cities, their connection can be cut.
Screen are usually smaller: Because screens are small, it is not possible for users to scan as
much information to find out what they are looking for.
Input devices are harder to use: Although many mobile users are adept at using their mobile
phones, they are unlikely to achieve the same speed and accuracy of data input that they would
achieve with a keyboard and mouse.
Less control over appearance: Several phones will remove your choice of font, size of text, and
background images to show them in a manner they see fit for the device.
Armed with this information, you can start to think about mobile development.
How to Approach Mobile Development
Often the key factors in deciding a mobile strategy will depend upon the resources a company has
available for its web users and whether it has enough users to justify the expense of development.
Broadly speaking, you can categorize the approaches in mobile development into one of three categories:
Just have one main web site (no separate mobile site)
Provide a different view of the content on your site to those with mobile phones
Create an entirely new site for mobile users
Let ’ s take a look at each of these options in turn.
Do Not Develop a Mobile Site
The cheapest and least time-intensive strategy for mobile development is simply to do nothing. Many

mobile phones are adept at giving users access to the content on the site. Some larger touch-screen
phones (such as the iPhone) are capable of cleverly resizing a web page to fit on the screen, then allow
users to zoom into parts of the page. Other phones may change the way in which the page is presented
in order to make it available on the size of screen they have (often overriding font sizes and image sizes).
The obvious drawback with this approach is that your content is not addressing the aims that visitors to
a mobile site might have.
❑
❑
❑
❑
❑
❑
❑
❑
c09.indd 410c09.indd 410 11/20/09 5:00:27 PM11/20/09 5:00:27 PM
Chapter 9: Page Layout
411
Provide an Alternative View of Your Site
A middle ground is to re - use the content that you have, but to present it in a manner that is easier for
mobile users. In this middle ground there are two common options.
The first approach is to add a second style sheet to the same pages, so that mobile devices can use a
separate set of CSS rules to control how the pages appear to them:
< link href=”mobile.css” rel=”stylesheet” type=”text/css” media=”handheld” / >

This can help you use a different layout, change the dimensions of the page, and attempt to control
colors and sizes of fonts.
Unfortunately, not all phones know to take this version of the style sheet, and those that do still have to
download a page that is the same file size as the pages created for desktop computers (which means that
they may take a long time to download).
I have seen style sheets for handheld devices that try to hide parts of the page (setting the CSS

display
property on those elements to
none ), which has the advantage that it makes the interface simpler,
although it does not make the file size smaller.
The second approach is to use a different set of templates when someone arrives at your site via a mobile
device. Rather than just using a new style sheet, some companies will use the same content, but design
new pages to hold the information.
This approach allows a lot more flexibility because you can change the order in which items appear. You
can also entirely remove some parts of the page (such as advertisements and secondary navigation), and
therefore reduce bandwidth needed to load the pages.
Still, both of these methods still fail to address the context in which the phone is being used.
Create a Separate Mobile - Optimized with Its Own Content
If you have the resources available, users will often benefit from a site being specifically designed for use
on a mobile phone. It allows you to address the requirements of users who are on the go (which are often
different from those of a desktop PC user) and to understand the context in which visitors to your site
use these devices.
A couple of good examples are
(shown below in Figure 9 - 35) and
(shown below in Figure 9 - 36). Both of these sites have been developed especially
for mobile users (you should be able to access them from a desktop browser as well to get an idea of how
they work). You may also note how the mobile version of Flickr also has a location - based option in the
main navigation.
c09.indd 411c09.indd 411 11/20/09 5:00:28 PM11/20/09 5:00:28 PM
Chapter 9: Page Layout
412
Figure 9-35 Figure 9-36
Should you have the opportunity to develop a site specifically for mobile users, it is very important to
consider the function of these sites before addressing how they look. (Realistically the mobile offering is
likely to look a lot more basic than the desktop site.) Also consider whether your users would benefit
from features that are specific to mobile devices, such as location awareness (for example, a store might

automatically show the closest locations), or the ability to send in pictures.
The first step is to look at the tasks you have identified as the most common ones that users will want to
achieve on a mobile device and make them the first and most prominent offerings. In doing this, it is
very important to retain focus on the main tasks and not try to give the mobile user every feature that is
available on sites accessed by desktop computers. Content or features that are unlikely to be used on the
go should be removed (or adapted into a form that will help mobile users).
Once you have worked out what it is that people want to achieve, and how you can meet their
requirements, you can start to consider the practical aspects of your mobile site.
c09.indd 412c09.indd 412 11/20/09 5:00:28 PM11/20/09 5:00:28 PM
Chapter 9: Page Layout
413
Building a Mobile Site
While there is not enough space in this book to go into this topic in great detail, and entire books have
been written about building mobile web sites, I can give you some pointers regarding the key issues
should you decide to create a site especially for mobile phones.
Domain Name
One of the most common questions regarding mobile development is whether to have a separate
top - level domain name for the site because the
.mobi top - level domain was created specifically for
mobile devices.
In practice, a lot of companies have opted for a variation on their current address instead — for example,

m.domainname.com , mobile.domainname.com , and domainname.com/mobile . In my opinion, the
fewer taps a user has to make in order to reach a domain name on a mobile device, the better, which is
why I tend to opt for the first of these options.
Device Detection
Device detection is a means by which the site attempts to tell whether a user is on a desktop computer or
mobile phone, and then guide this user to the appropriate site.
Telling you how to do this is beyond the scope of this book, but the following two URLs should help you
make a good start:

or www.andymoore.info .
If you are able to offer device protection and send visitors to the mobile version of your site, it is a good
idea to offer them a link to your full web site on the homepage. If they opt to use the full web site, you
should aim to direct them to the same site in the future (when accessed from that phone).
Likewise, on your main web site, it is helpful to tell people that you have a mobile site, to make them
more aware of its existence. You can also offer a link to the mobile version of the site.
Languages for Creating Mobile Web Sites
Most fairly recent phones that feature a web browser are capable of displaying XHTML and basic CSS.
That doesn ’ t mean that they will display them as you would expect. Some phones will show all text at
the same size, and some will strip out styles that are not necessary (such as background images or
colors). Others will show the more complex design.
c09.indd 413c09.indd 413 11/20/09 5:00:29 PM11/20/09 5:00:29 PM
Chapter 9: Page Layout
414
Technically speaking, they tend to support one of two subsets of XHTML known as XHTML - Mobile
Profile and XHTML Basic. A good rule of thumb, however, is just to stick to the most common XHTML
features and then most phones will be able to handle it. Here is the DOCTYPE declaration for XHTML -
Mobile Profile:
< !DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN”
“ >

While there is not enough space in this book to cover all the differences between XHTML - MP and
XHTML, there are several resources on the Web that can help you with this, such as the Openwave
developer ’ s reference:
/>
Design Tips
Most new sites being created for mobile devices are targeting browsers that are between 240 and 320
pixels wide. The layout of these pages should generally be vertical pages that scroll down.
You still need white space in your designs so that they are easy to read. However, if you have too much
white space, users will have to scroll more than necessary.

With the exception of touch phones such as the iPhone (and other larger screened phones), many of the
browsers on mobile phones do not support the CSS float property, so your boxes are likely to be
positioned one above the other, even if you tried to position them to the sides. Because block - level
elements (by default) take up the full width of the page, they act like a liquid layout.
So, let ’ s look at some specific issues regarding design for mobile devices.
Content
As we have already discussed, users are less likely to be just surfing the Web on a mobile phone; it is
more likely that they are going to want to achieve tasks, and to do that quickly. Therefore:
Use clear concise language. Content should be available in small bite - size chunks that are easy
to digest.
Use semantic markup, such as headings in
< hn > elements, paragraphs in < p > elements,
and so on.
User fewer images and graphics to save on download speeds.
Consider using the title of pages to indicate the action that a user should take.
Figure 9 - 37 shows the BBC news site on an iPhone; it uses less text and fewer images than the site for
desktop computer users. The headlines are short and descriptive, while the page is designed to be long
and thin (so users can scroll down to see more stories).
❑
❑
❑
❑
c09.indd 414c09.indd 414 11/20/09 5:00:29 PM11/20/09 5:00:29 PM
Chapter 9: Page Layout
415
Color
Remember that many mobile phones are used outside where screens can be harder to read, and there is
not often an easy way to adjust contrast. Therefore:
Ensure that there is sufficient contrast in your designs.
Avoid using backgrounds.

Figure 9 - 38 shows the simplified Amazon mobile homepage, which mainly features a search box for
users to find the book or other product they are looking for. It is also worth noting on this example the
link in the top left - hand corner to the “ PC Site. ”
❑
❑
Figure 9-37
Figure 9-38
c09.indd 415c09.indd 415 11/20/09 5:00:29 PM11/20/09 5:00:29 PM
Chapter 9: Page Layout
416
Navigation
Because those accessing the Web on a mobile device often want to achieve a task quickly, navigation is of
primary importance — not only in helping them achieve their task as quickly as possible, but also
because there is less space on the screen to show navigation options.
Consider having the main navigation on the homepage only (with a link back to the homepage
on every other page), or if you do have a navigation bar at the top of every page, have the
minimum number of options you can.
At the end of each page have home and back links, but don ’ t repeat the links that appear on the
bottom of the site used by desktop visitors (such as
about, help , and faq ).
Consider using access keys for links (we discussed access keys in Chapter 5 when we were
looking at Forms).
Figure 9 - 39 shows the result of a search on the Amazon mobile site. As you can see , there is a link back
to the homepage at the top of the page (rather than a navigation bar), and this is followed by another
small search box before showing the results.
❑
❑
❑
Figure 9-39
c09.indd 416c09.indd 416 11/20/09 5:00:31 PM11/20/09 5:00:31 PM

Chapter 9: Page Layout
417
Links
Although CSS allows you a lot of control over how links are presented, it is considered good practice on
mobiles to keep links simple and obvious:
Stick to black text and blue links, and avoid using other colors for links. Remember that many
mobile phones are used outside where screens can be harder to read.
Make it clear which link is active because it is harder to get the right link.
For phones, while iPhone and the Mobile Opera browser automatically determine phone
numbers, you can put phone numbers in
< a > tags, with the href attribute starting with tel :
< a href=”tel:+44 (0) 208 208 2080” > +44 (0) 208 208 2080 < /a >

Forms
Filling in a form on a mobile phone is harder for most people than it would be on a desktop computer;
not only might people be on the move, using one hand; they also have to contend with smaller buttons
or input devices. Therefore you should avoid using form controls as much as possible:
Consider using links instead of form controls.
Do not mask passwords. The use of dots or asterisks on password inputs was to prevent people
looking over the shoulder of the user from seeing the password entered; this is not so much of
an issue on mobile devices (and it is easier to make mistakes when typing on a mobile device).
If you have fields that only allow numbers (such as quantity fields), only allow people to enter
numbers into these form fields (this technique is sometimes known as an input mask).
Avoid logins unless absolutely necessary.
Testing
With the number of mobile devices available today, no one would expect you to test a mobile site on
every available phone. Some developers choose to run a few phones with varying capabilities (switching
one SIM card between them), but you can always ask friends to see if they can access a site for you and
show you what it looks like on their phones.
You can also use the following emulators, which mimic the abilities of phones:

dotMobi emulator — simulates Sony Ericsson K750 and Nokia N70 (
i/
emulator.php
)
Opera Mini Simulator
( www.operamini.com/ )
Nokia Mobile Browser Simulator ( www.forum.nokia.com/ )
Openwave phone simulator (
/>_sdk/phone_simulator/
)
iPhoney (
www.marketcircle.com/iphoney/ )
Blackberry (
)
❑
❑
❑
❑
❑
❑
❑
❑
❑
❑
❑
❑
❑
c09.indd 417c09.indd 417 11/20/09 5:00:31 PM11/20/09 5:00:31 PM
Chapter 9: Page Layout
418

Another handy tool is the Firefox Web Developer Toolbar, which allows you to test pages on small
screens (
). This feature is available from
the Miscellaneous menu, under the option Small Screen Rendering, as shown in Figure 9 - 40.
Figure 9-40
Once you know that your site is working, don ’ t forget to test with real users (which is something we
discuss in Chapter 13). It is also a good idea to validate your markup (also discussed in Chapter 13)
because mobile phones are less forgiving of markup with errors than browsers such as IE, Firefox, and
Safari on desktop computers. The W3C provides a tool for validating markup for mobiles here:


c09.indd 418c09.indd 418 11/20/09 5:00:31 PM11/20/09 5:00:31 PM
Chapter 9: Page Layout
419
Summary
This chapter introduced you to techniques for designing pages that are attractive and that meet the
needs of those who visit them. You learned a process that helps you determine the information a visitor
might expect to find on the site. You saw that this process involved creating fictional actors or personae
who represented the typical audience, working out the tasks that these people would want to achieve,
and determining the information needed to achieve those goals.
The information that visitors might expect to find was then added to the information that the site owners
might want to convey (bearing in mind that the two may be different). The resulting list was then
prioritized to determine the most important information on the site. From this, a site map is developed
and the information is apportioned to the relevant pages.
The next step was to understand the issues regarding designing for screens — in particular, the
difference between fixed - width and liquid layouts, whether your page should always stay the same size
or expand and contract to fit the browser window.
Eventually the design or layout begins, and you saw how the use of a layout grid helps create a far more
professional-looking layout compared with randomly selecting the size of parts of pages.
Some popular layout grids were then transformed into XHTML and CSS code, using floats to position

the content on the page. This chapter demonstrated two - , three - , four - , and six - column layouts.
I hope the practical advice in this chapter makes it easier for you to design your web sites, and also helps
you deal with those people or organizations you might be creating sites for. In the next chapter, we look
at some more specific aspects within each page, such as typography, navigation, links, and forms.
Exercises
The answers to all the exercises are in Appendix A.
1. Take another look at the article page from the Guardian newspaper ’ s web site; it is shown again
in Figure 9 - 41. List all the different elements on the page that would have been listed in the de-
sign stage, and put them together in their relevant grouping or categories. For example, the
main article section of the page might need a list like this:
Title
Summary
Author
Date

c09.indd 419c09.indd 419 11/20/09 5:00:32 PM11/20/09 5:00:32 PM
Chapter 9: Page Layout
420
2. Try to recreate the structure of the page you can see in Figure 9 - 41. It sits in the 12 - column
960 - pixel grid we were using in this chapter, so you have seen much of the code you
need already — you just need to assemble it correctly.
Figure 9-41
c09.indd 420c09.indd 420 11/20/09 5:00:33 PM11/20/09 5:00:33 PM
10
Design Issues
This chapter looks at design issues that affect specific aspects of your pages — typography,
navigation, tables, and forms. Each is addressed in its own section, and each section contains
helpful tips that will make your pages more attractive and easier to use.
First up is typography; you will see how carefully composing your text on the page makes it easier
for people to read the words you have written and improves the clarity of your message.

Next, you look at the three main forms of navigation: menus, search, and links within pages.
As you will see, a menu does not just offer a means for users to navigate your site; it also
plays an important role in helping visitors understand what a site is about and how the
information is organized.
If you have to add tabular data to your site, this section contains helpful guidelines to make your
tables easier to read.
Finally, you will look at forms. I have yet to meet someone who enjoys filling out forms
(particularly on the Web), so these techniques will increase the chances of your forms being
completed (and completed with the right information).
While this chapter can ’ t teach you how to be a great web page designer — that requires
creativity, a good eye, and flair — it will show you some concepts that help create good designs
and introduce you to some guidelines that will help you improve both the look and usability
of your site.
Throughout this chapter I mention programs called screen readers. Screen readers are programs
that read a page to a user. While screen readers are commonly used by those with visual impair-
ments, they are likely to become more popular in other web - based scenarios, such as for those
who want to access information while they are driving or doing something else that prevents
them from actually reading a screen.
c10.indd 421c10.indd 421 11/21/09 12:14:40 AM11/21/09 12:14:40 AM
Chapter 10: Design Issues
422
Typography
While typesetting used to be the domain of skilled craftsmen, the desktop publishing revolution, which
started 25 years ago, has led us to the point where anyone can create a document on a standard PC in the
home. This was followed by the Internet revolution, which has removed the need to print many
messages because they can be seen on a screen.
While technology has allowed anyone to create documents on a home PC, the skills and experience
of the typesetters who knew how to make type attractive and easy to read were not built into the new
technology. But we can learn a lot from the experience of these craftsmen. Studying even the basics of
typography can have a big impact on the design of your pages, and also on how many (and which)

of your precious words are read.
Typography can be defined as the art of arranging text so that it is carefully composed on the page to
create a readable, coherent, and visually satisfying whole that works invisibly. This means putting a lot
of care and attention into typesetting in order to make your message clearer and help the reader navigate
around the page with ease, but doing so in a manner that does not call readers’ attention to what you are
trying to do.
When you consider that web users commonly scan pages to find the information that they want, the
value of good typography becomes even more apparent.
In this section, we will be looking at issues such as:
Line length
Relationship between sizes of letters
Gaps between lines
Spaces between letters and words
Careful chunking
Contrast
Choice of fonts
Before you look at these issues in detail, it is worth clarifying a couple of terms typographers use:
Legible: Text is legible if it is recognizable; for example, when a font gets too small it may no
longer be legible.
Readable: Text is readable if it is comfortable to read it for many minutes (without strain
or difficulty).
A legible typeface can become unreadable through poor setting and placement, and a less legible
typeface can be made more readable through good design.
Line Length — A Measure
A measure is the name typographers give to the number of characters in a single line of text.
❑
❑
❑
❑
❑

❑
❑
❑
❑
c10.indd 422c10.indd 422 11/21/09 12:14:41 AM11/21/09 12:14:41 AM
Chapter 10: Design Issues
423
It is generally considered that for a body of text (such as a news article), the line length should be
between 45 and 75 characters including letters, spacing, and punctuation. If you have a narrow column,
your measure should be less — around 30 to 50 characters.
At the end of each line of text, readers have to make an effort to accurately find the beginning of the next
line, and they have to do this before the flow of the reading is lost. If a line is too long, it can be harder
for the reader to scan back to the left - hand side of the page. If there are two few characters, the reader
has to move onto the next line more often, causing too many breaks in the reading.
In a liquid layout you do not have control over the measure because users can increase and decrease the
width of the writing as they change the size of the browser window. This is a key reason why text - heavy
sites, such as news sites, often like to use fixed - width layouts.
With a fixed layout, you have greater ability to control the measure (although if the user changes the size
of the font, it will affect the number of characters on each line). Figure 10 - 1 shows the BBC news site; as
you can see, the main column (below the picture) has a measure of 45 – 75 words, and next to the picture
and in the right - hand column the measure is less (30 – 50 characters).
Figure 10-1
c10.indd 423c10.indd 423 11/21/09 12:14:41 AM11/21/09 12:14:41 AM
Chapter 10: Design Issues
424
Font Sizes
You have probably come across the following series of typeface sizes in all kinds of programs, such as
Word, Photoshop, or InDesign:
8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 36pt 48pt 60pt 72pt
Such programs use the same sizes because they are set according to a scale or ratio, which was

developed by European typographers in the sixteenth century.
Just as the shape of a rectangle based upon the golden ratio (with the square of its hypotenuse equal to
the sum of its sides) looks pleasing to the eye, this scale of fonts works well and has changed little in the
last 400 years.
Therefore, when you start designing pages, using these font sizes will help your pages look a lot
more balanced.
You could choose settings in pixels that follow this scale of size, like so:

body {font-size: 12px;}
h1 {font-size: 24px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}

Unfortunately, specifying font sizes in pixels is not very good for accessibility because Internet Explorer
does not allow users to resize text when its size is specified in pixels. Therefore, you should aim to create
a similar effect using percentages or ems as a unit of measurement because they will allow all users to
change the size of the text.
Fortunately, the default size of text in all browsers is 16 pixels, so we can work from this point to create
the correct size using percentages like so:

body {font-size: 75%;} /* 16 x .075 = 12 */
h1 {font-size: 200%;} /* 12 x 2 = 24 */
h2 {font-size: 150%;} /* 12 x 1.5 = 18 */
h3 {font-size: 133%;} /* 12 x 1.333 = 16 */
h4 {font-size: 116%;} /* 12 x 1.16 = 14 */

You could also use ems. Ems allow you to change the size of text relative to the size of the text element ’ s
parent element, so if the body of a web page is 16 pixels, to get a paragraph to render at 12px you use
0.75em:

body {font-size: 100%;} /* ensure IE scales correctly */
p {font-size: 0.75em;} /* 16 x 0.75 = 12 */
h1 {font-size: 1.5em;} /* 16 x 1.5 = 24 */
h2 {font-size: 1.3em;} /* 16 x 1.125 = 18 */
h3 {font-size: 0.875em;} /* 16 x 0.875 = 14 */

You may have noticed in this example that there is a rule for the < body > element and the < p > element.
The rule that applies to the
< body > element is required because IE6 and IE7 exaggerate the smallness
c10.indd 424c10.indd 424 11/21/09 12:14:42 AM11/21/09 12:14:42 AM
Chapter 10: Design Issues
425
and largeness of the resized text without it, whereas the rule for the < p > element sets the size of the text
in paragraphs to 12 pixels:
This may seem like a complicated way to calculate text sizes, but when you remember the importance
of working to scale, and that this scale of sizes has been used for over 400 years, you should not need
to work out too many of your own font scales for the moment.
As mentioned, the default size of text in a browser is 16 pixels, and traditionally the majority of sites
have made the main body text smaller. Recently, however, a number of sites have started to leave the
body text at the default size, suggesting that it increases readability (and that 11 or 12 pixel fonts are
slightly too small).


body {font-size: 100%;}
h1 {font-size: 2em;} /* 16 x 2 = 32 */
h2 {font-size: 1.5em;} /* 16 x 1.5 = 24 */
h3 {font-size: 1.125em;} /* 16 x 1.125 = 18 */

This can seem a little large at first, but it can certainly help readability. Figure 10 - 2 shows an example

of a screenshot of
ch10_eg01.html , which contains fonts sized using ems, with the scale starting at
12 pixels, whereas Figure 10 - 3 shows an example of a screenshot of
ch10_eg02.html , which has a
scale starting at 16 pixels. You can try these in your own browser to get a feel for the difference in
text sizes.
Figure 10-2
c10.indd 425c10.indd 425 11/21/09 12:14:42 AM11/21/09 12:14:42 AM
Chapter 10: Design Issues
426
Choosing Fonts
In print, serif fonts tend to be easier to read for extended periods of time compared with sans - serif fonts.
When reading books and long articles in a language with which we are familiar, good readers don ’ t need
to carefully look at the whole of each character, either focusing on the top half of characters or sometimes
just on the general shape of familiar words.
On the Web, however, text is not as sharp as it is in print and the serifs on the font can make the
characters less clear (because the screen has fewer dots per inch than print). As a result, most people find
it easier to read longer passages of text in sans - serif fonts.
In practice, you are safe using either serif or sans - serif fonts as long as they are large enough to read.
When choosing which fonts (or typefaces) to use on a page, you should ensure that you consider which
fonts users are likely to have installed on their computers; if users don ’ t have your desired font installed
on their computers your design will not show up in that font.
Figure 10-3
c10.indd 426c10.indd 426 11/21/09 12:14:43 AM11/21/09 12:14:43 AM
Chapter 10: Design Issues
427
You can safely assume that the majority of users will have the following fonts installed:
Sans - serif: Arial, Helvetica, Verdana
Serif: Times, Times New Roman, Georgia
Monospace: Courier, Courier New

You can suggest other fonts, in the hope that users have them installed, and at the end of the list you can
put a generic font family, but remember that fonts can take up different amounts of space on the screen.
So do check that your layout works in all choices of font.
Here you can see the font list from
ch10_eg03.html :

h1, h2, h3, h4 {font-family: “gill sans”, arial, sans-serif;font-weight:
normal;}

Figure 10 - 4 shows you what this looks like in Safari on a Mac with Gill Sans installed, and Figure 10 - 5
shows you the same page in Firefox on a PC that does not have Gill Sans installed.
❑
❑
❑
Figure 10-4
If you want to use a specific font for a logo, you should use an image instead. You can also look at sIFR
(a technology that uses Flash) and Typekit as ways to include fonts that might not be installed on
visitors’ machines.
Line Height — Leading
Leading (pronounced ledding ) is the vertical space between lines of text. Text sits on a baseline, and the
height of letters such as a, e, and x are collectively known as the x height. The parts of letters that drop
c10.indd 427c10.indd 427 11/21/09 12:14:44 AM11/21/09 12:14:44 AM
Chapter 10: Design Issues
428
below the baseline are called descenders, while the bits that rise above the x height are known as
ascenders. Leading is measured from the bottom of the descender on one line, to the top of the ascender
on the next (Figure 10 - 6).
Figure 10-5
Figure 10-6
Baseline

Leading
Descende
r
Ascender
King and queen
Apple and pear
You can set the amount of leading in a document using the line - height property in CSS (when the line
height is larger than the font size the gap created between each line of text acts as the leading, and the
taller the line height the bigger the gap). Increasing the default amount of leading can make a block of
text easier to read; if you look in Figure 10 - 7, the first paragraph is default size and the second paragraph
has increased leading (
ch10_eg04.html ).
A good general guide for leading is that the vertical space between lines of text should be larger than
the space between each word as this helps the eye move along the line instead of down the lines. Around
1.5 em is a good starting point.
When you use the
line - height property in CSS, you should avoid specifying a value in pixels, because
visitors can tell their browsers to increase the size of text on the page and doing so does not necessarily
increase the line height as well (which means text can overlap). It is better to specify the line height using
c10.indd 428c10.indd 428 11/21/09 12:14:44 AM11/21/09 12:14:44 AM