Responsive Design Assignment

From Knowledge Kitchen
Jump to: navigation, search

In this assignment, you will incorporate CSS media queries into your HTML pages from the previous assignment. This will allow your page layout to be responsive, meaning change based on whether a visitor to your site is using a smartphone, tablet, or desktop computer.

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. Make sure these links match your CSS file names and their location.

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

Submit your assignment the usual way.


Grades are determined as follows:

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

What links here