Responsive Grid Layout

The next three projects will focus on mobile design.

Working with a partner, you will create a responsive website using a template, a mobile website using Dreamweaver CS6, and an app using App Inventor.

1. What is a responsive site? Why is it important to consider how your site looks on different screen sizes?

What is it?

Some examples

The browser test- see what happens to these site when you shrink your browser window.

2. Your project

Working with a partner, you will create a responsively designed home page for Medford High School.

You will be assigned a partner today. The both of you will plan out your site. Everyone will be given the same template to work from.

Today you want to spend time planning the content of your webpage. Download and save images. Create a list of links. Sketch an outline of how the page will be organized and what kinds of information it will link to.

Be creative! Don’t be afraid to do something different. Since you are creating just a practice home page for Medford High, it is OK to link to other pages of the school website as part of your project.