CompSci 290.2
Spring 2018
Web Application Development

Responsive Web Sites

This project is intended for you to show that you can use CSS and Bootstrap to style an HTML page to be responsive to different screen sizes.

Responsive Web Design was coined by Ethan Marcotte based on the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it. A website is said to be responsive if it works effectively on both desktop browsers and the variety of available mobile devices that are now used more often to visit web sites. Responsive architecture gives the best quality browsing experience — whether on a smartphone, tablet, netbook or e-reader, and regardless of the operating system. People who browse while on-the-go have very different needs than those sitting at a desk. Responsive web sites reorganize themselves automatically according to the device viewing them, so that the same website provides a great experience everywhere by prioritizing the content for the device.

Thus the goal of this assignment is for you to explore the key technical features at the heart of Responsive Web Design:

  1. Media queries selectors
  2. A flexible grid-based layout that uses relative sizing
  3. Flexible images and content that may be resized or removed on smaller displays

Your responsive web site can be about anything that is easily displayed as a list of images plus text to display, e.g., news articles, blog posts, item reviews, shopping descriptions, etc. Thus you can use just about any major site on the web as a starting point if you want but, since "real" sites often include extra features you do not need like JavaScript, a search tool, input forms, etc, you may want to strip those complicating features out. If you are okay with a local nature blog, you can use the site I already stripped down and made validate as your example web page. You could also make up the data, like many templates do, but I thought using a real site (perhaps one you have an interest in) might be more motivating.

To make your site responsive, you should use a combination of CSS media queries and Bootstrap (either version 3 or 4). Note, because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles at the bottom. Styles provided later and especially in your media queries should focus on what changes in the new context, not including duplications of previously defined styles. You are welcome to use SCSS or LESS to help reduce the typical duplication found in large scale web sites but it is not required.

Bootstrap will likely handle most of the basic responsive layout effects by automatically resizing whatever grid structure you decide to use. To take advantage of this, you will need to modify the HTML starting page you use to include Bootstrap's CSS classes instead of the home grown or other framework's classes it currently has. If you choose a page that is already Bootstrap enabled, then you will need to change its layout significantly from its original since part of the point of this project is to learn Bootstrap, not simply borrow any existing example.

Your website's styling must follow these guidelines:

You can use this site or the Developer Tools to check your website on different devices (including landscape orientations). Since the specific look and feel requirements are largely up to you, you must describe what you were trying to accomplish (so we can tell if what we see is intended or a bug). This can either be in the form of extensive comments within your style sheets or separately in your README file.

Now that you are becoming a more experienced web coder, you should start following standard coding conventions for HTML and CSS.

Resources

Submission: Adding your Pages to your Portfolio

This project will be added to your assignments-portfolio-GIT_SCREEN_NAME repository so there is one single place we can go to find your work during the semester.

To submit this project

Your style files must display the way you expect in the latest version of Chrome and validate using the W3C HTML and CSS validators online.

Only what is in your assignments-portfolio-GIT_SCREEN_NAME repository on GitHub at the deadline will be considered for your submission.