Assignment 6: Responsive Web Design

In this assignment, you will incorporate CSS media queries into your HTML pages from Assignment 4. This will allow your page layout to change based on whether a visitor to your site is using a smartphone, tablet, or desktop computer. For reference, here is an example site which links to three different style sheets based on viewing width.

Media Queries

To begin, you will need to replace the existing link to your external style sheet with the following code. This goes inside the head section of each of your HTML documents.

<!-- Media query for narrow browser width -->
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="styles/mobile.css" />

<!-- Media query for smartphones -->
<link rel="stylesheet" media="only screen and (max-device-width: 568px)" href="styles/mobile.css" />

<!-- Media query for medium browser width -->
<link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 960px)" href="styles/tablet.css" />

<!-- Media query for tablets -->
<link rel="stylesheet" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="styles/tablet.css" />

<!-- Media query for full browser width -->
<link rel="stylesheet" media="only screen and (min-width: 961px)" href="styles/desktop.css" />

<!-- Prevent smartphones from scaling pages down -->
<meta name="viewport" content="initial-scale=1">

As the comments indicate, these media queries assess a viewer’s browser width or device width and use that information to determine which of three style sheets to use for the page: mobile.css, tablet.css, or desktop.css.

Alternate Style Sheets

Now that your Web pages have the flexibility to access different style sheets, the next step is to optimize the layout with CSS for each of the widths specified. In the example site, a three-column layout is used for desktop viewing, a two-column layout is used for tablets, and a one-column layout is used for smartphones. You should similarly structure your HTML code with div tags in order to “float” sections of content alongside each other when appropriate. In addition to layout changes, feel free to tweak the formatting to optimize each of the three style sheets.

As before, you should write your HTML and CSS documents using a plain text editor. Here is a list of required elements to include.

  1. Add media queries to each of your HTML pages to choose among alternate style sheets. Feel free to copy and paste the code above.
  2. Create three separate CSS style sheets—desktop.css, tablet.css, and mobile.css—that correspond to the media queries.
  3. Add div tags to logical column sections of your HTML documents.
  4. Add style rules that allow your divs to float next to each other.
  5. Modify each style sheet for optimal viewing with different browser widths.
  6. Smartphone layout should be one column, tablet and desktop layouts should be two or more.

The primary goal of this assignment is for you to incorporate CSS styles that affect page layout while using media queries to choose among separate style sheets. In doing so, you can anticipate and design for a variety of viewing experiences.

Submitting Your Assignment

Upload your files (both the CSS and HTML) to the i6 Unix server. Your files and directories should go in the i6 directory called “public_html.” Test your pages again once they are live on the Web server, varying browser width to observe style changes.

Post the URL for your assignment in the form of http://i6.cims.nyu.edu/~netid/ on NYU Classes in the Comments area. ALSO, Zip all your file and post them to NYU Classes.

Grading

This assignment is worth 10 points.

  • Each HTML page should contain active media queries, as provided above. (1 point)
  • There should be three style sheets associated with the media queries. (3 points)
  • Div tags should be added to logical sections of the HTML on all pages. (2 points)
  • Floats should be used in the CSS to position content side-by-side, width-permitting. (2 points)
  • Smartphone layout should be one column, tablet and desktop layouts should be two or more. (2 points)