Topic Homework Assignment:
HW-07: “The Responsive Site”

You are to design and build a one-page website using principles of Responsive Web Design (RWD) and utilizing the flexbox techniques.

/web-dev-hw/project-4/

There is no true “project” for this Topic, just a one-page site:

1. In Atom, create a new file and save it in /project-4 as index.html
2. Create another new file and save it in /project-4/css as style.css.

Content

I have a weird, “meta” assignment for you this week. For your content, I want you to present a case for responsive web design. You might choose to discuss:

• What is responsive web design?
• Why is RWD important?
• Why designers should utilize a RWD approach?
• Describe your process (or what you think you process will be) for RWD?
• How is flexbox suitable, or not, for RWD?
• How wireframes play a role in RWD?

Readme

In your readme, you should answer:

• What is the information this page aims to deliver?
• What is the first information on the page that should draw the eye?
• What is the primary content of this page?
• What is the secondary content?

You should also provide a list of content items that you will include in your site. (specific images/movies, navigation (if any), text, headings, etc.)

Collect your content before you begin to design the site. Let the content you choose drive the development of the site. (You should plan a few days for this assignment)

Finally, in this first step, you should also make some initial decisions about fonts and a color palette.

Sketch and Wireframe

Next, you should do some sketching for your site. By this, I mean, you should either download a wireframe template, to sketch by hand, or you can use a program like Photoshop, Illustrator, etc, to explore with a 2d graphics program.

Start with a “mobile” sketch. To do this, draw a long skinny column. Draw a horizontal line where the bottom of the display might be initially. Fill this in, with low-fi boxes representing content elements. Think about how big they might be, the order, and their importance. Remember the content above the line your drew is what the user will see first, when they initially visit the site.

Once you have laid out your content for a mobile display, draw a second long column, that is of “medium” width. Draw in the content again, thinking about how it might change or reflow to take advantage of the extra space.

Finally, draw another long column, which is wider, and represents a computer screen. Place the content in again.

You will probably need to complete a few sketches, before settling on one that best presents your content. During this step, you should also think about the design pattern, if any, you are following. I would suggest you all work with the “column drop” design pattern discussed during this week for your first responsive site.

Please include these sketches in your weekly readme. (If these sketches were drawn by hand, you should take pictures with a digital camera.)

Identify Possible Structure

Using your wireframe sketches, try to identify possible structure and grouping of elements.

I.E. What elements need to be wrapped together in container element. For example, one such grouping will be elements/boxes that appear next to each other in any version (mobile/small/narrow, tablet/medium, desktop/large) which need to be side by side at some point.

Start to Build the Site

After sketching your site, it is time to build it with HTML and CSS.

Remember to start with the mobile version first. Make your browser window as narrow as it will go, and build the site this way. After completing this first version, start to drag the side of your browser window to make it larger, and determine when your first breakpoint needs to occur, along with how the content will need to be adjusted. Keep doing this and adding breakpoints with media queries, until your site is as wide as is possible.

Test Your Site

After building your site, view it in numerous browsers (Chrome, Firefox, Safari, IE), and on multiple platforms/devices (Mac, Windows, iOS, Android). If you notice problems, go fix them.

{ TODO: }

1. Use the previous pages of the Topic to complete you homework assignment.
2. Finish documenting your Project’s progress in your README.md!

---