Web II: Responsive Web

responsiveWeb users are using mobile devices more than ever to access content on the web. Create a site that accommodates that shift. In fact, you assignment is to use @media (media queries / here’s a link to some common device queries and their CSS / test it out at W3Schools) to create a site that offers different content based on the device that’s viewing the site. What kind of content would shift based on the user device?

And because the site needs to be responsive, use a grid-based approach to the layout. This will make your site scalable and responsive, without compromising aesthetics.

There are a number of methods for such. Here is a straight-forward approach on css-tricks.com. Here’s another from sitepoint.com. (Don’t forget Flexbox) And there are lots more… And here’s a good tutorial on Lynda.com.

This is a short project (two weeks), so don’t get caught up in the details. Focus on creating a css-based grid, and then changing content per device, and what that content would be.

Objectives:

  • Understand and implement the @media rule
  • Create a css-based grid framework
  • Create a responsive site that reflects different content based on detected devices
  • Think creatively about how we use sites via mobile devices vs. desktop application

Due: Thur Oct 15


 

Leave a Reply

Your email address will not be published. Required fields are marked *