Web Design with HTML and CSS

254

Self study

Web Design with HTML and CSS Digital Classroom

Self study

1 Experiment with the design of your page. Add some left padding to the #mainnav list

rules to give your navigation links a bit more space.

2 Improve the formatting of the second-level heading, “Our Mission Statement,” by adding

a new rule for #maincontent h2 in your media query section.

3 Experiment with diff erent font sizes and other text styling.

Review

Questions

1 Name three ways in which mobile websites provide a diff erent experience for the user.

2 How are CSS3 media queries better than style sheets that use the handheld media type?

3 Rebecca wants to convert her pre-existing website to a mobile site and she begins to use

a CSS3 media query to do so. She also wants to convert her multi-column layout to a

single-column layout to maximize the screen space on the mobile browser. What are the

two CSS properties relating to layout Rebecca should modify fi rst?

Answers

1 First, desktop websites assume that you are using a mouse and keyboard, whereas mobile

devices use arrow keys, numerical keypads, or a touchscreen. Second, desktop websites

are often designed with the landscape format in mind, whereas most mobile devices

use portrait format. Third, multimedia such as video, audio, and Flash are not always

supported on mobile devices. A fourth diff erence is that mobile devices often have slower

connections to the Internet than desktop computers.

2 The handheld media type was designed to allow mobile browsers use a special style sheet

if the designer or developer added the correct code. This method works for many mobile

devices, but it is inconsistent and newer devices, such as the iPhone, do not recognize the

handheld value. These devices use CSS3 media queries, which are inside a style sheet and

use a special syntax. The benefi t of media queries is that they look for the capabilities of

the mobile device (based on properties such as screen width and orientation) and allow

the designer to create unique styles based on these capabilities.

3 To convert a multi-column layout to a single-column layout, Rebecca should fi rst set

a fl oat property of none and a width property of auto to most or all elements using

fl oats or that have fi xed-width values.