ISTA 230 Introduction to Web Design (Spring 2017)

Assignment 8: Responsive Design

Due Date: April 6, 2017 before 11:59pm

Overview: This assignment will test your understanding of CSS, HTML, specifically how to use CSS media queries, flexible layouts, and flexible images to create a responsive web design.

If you have any questions or concerns regarding this assignment, please don't hesitate to contact your instructor at jmspargu@email.arizona.edu or at 520-276-6433.

Assignment: For this assignment, you will be redesigning a website for The University of Arizona. You will not be creating an HTML file for this assignment. The HTML file will be provided for you by the instructor in your student directory on the ISTA 230 web server. Using your ISTA 230 web account, you will be able to log in to the ISTA 230 server and will find a directory named "assignment8". Within this directory are the files for this assignment. The first file is the HTML file. You may modify the contents of this file if you would like but it is not required for this assignment. Additionally, you will find a directory named 'css' which contains a CSS file named 'style.css' and an 'imgs' directory containing all images for this assignment.

The existing website was created using a 'mobile first' approach. However, the previous designer only tested the website using an iPhone in landscape mode (480px × 320px). While the site works well when viewed on devices with these dimensions, it does not look right when viewed on tablets, desktop computers, or mobile devices in portrait mode.

Your job is to create three additional CSS files to provide this website with a complete responsive website design. Again, you may modify the contents of the HTML file if you would like but it is not required to complete this assignment. You may not create additional HTML files to complete this assignment!

Sample Responsive Design

Using what we have learned in class, you are to create a responsive design that meets the following criteria:

Grading:

Your work will be graded on the following criteria:

To check if your HTML and CSS validate properly, use the ISTA 230 HTML and CSS Validators:

To evaluate the accessibility of your web pages, use the Accessibility Developer Tools extension for Google Chrome:

Please note that you are not allowed to use any third-party frameworks (e.g., Bootstrap) for this assignment. All work submitted must be your own!

Turn In: All of your files for this assignment must have been uploaded to your user account on the ISTA 230 web server by 11:59p on April 6, 2017. Any files uploaded after that will be considered late and your grade will be adjusted accordingly.

Sample Output:

Mobile Device View

Figure 1: Mobile device layout in landscape (provided)

Smaller Tablet View

Figure 2: Small tablet layout

Large Tablet View

Figure 3: Larger tablet / small desktop monitor layout

Desktop View

Figure 4: Large desktop monitor layout