Web Design with HTML and CSS

The need for mobile-optimized websites

Lesson 11, Mobile Design 253

In this code, you are setting the styles for the footer and the paragraph inside the footer.

You need to use the clear:none rule to override the clear:both rule from the main

style sheet. You set both width and height to auto in this case. Additionally, you set the

background-image to none to simplify the page design. Finally, you add more padding

and set the top margin to zero.

Save the fi le and then upload your HTML and CSS fi les to your server (if you are testing
on your phone). Load or refresh the page in your web browser.

With all the fl oats removed and widths set

to auto, you have a true one-column layout.

Test your page in both portrait and landscape modes. You are done with this lesson.

Diving deeper into CSS3 media queries

To learn more about CSS3 media queries to target and style content for mobile devices, see the

resources listed below.

Safari Reference Library

Apple provides free and useful documentation on optimizing your site for WebKit-based

browsers (used primarily for the iPhone, but also for other smartphone browsers). The

organization of the website might have changed since this lesson was written, so you should

perform a search for “Optimizing Web Content.” This documentation explores the various ways

to use media queries:

http://developer.apple.com/library/safari/navigation/

Responsive Design

This article by Ethan Marcotte explores techniques to build sites that are based on proportion

and are better suited for creating desktop sites and mobile sites from start:

http://www.alistapart.com/articles/responsive-web-design/