Lab 8: Responsive Design

In this lab, you will create a Web page using responsive design techniques.

Objectives:

To work with a fluid, grid-based design
To use media queries

Part 1: Installing the Window Resizer Plugin

Though it's best to test responsive designs on actual devices with different screen sizes, for this lab, you will use a browser plugin to simulate fixed pixel widths so you can test the responsive page you will create.

Steps:

Use File - Close All to close all open editing windows.

Install the Browser Width extension into Chrome:
1. Open Chrome and navigate to https://chrome.google.com/webstore/category/extensions.
2. In the upper-left corner, find the "Search the Store" box and enter Browser Width.
  
  Find the Browser Width extension entry, then press the "Free" button to install it.
  
  The extension adds a button to Chrome's toolbar, just to the right of the URL entry field. Click the button and try entering a width of 640 pixels - note how the window resizes.
  
  Manually resize the browser window, then click the button again to see the current width.

Part 2: A Responsive Design: Fluid Grid

In this part, you will examine a mock-up of page for the pizza parlor. The mock-up uses a fixed-width, pixel-based grid. Your job is to convert that mock-up into a responsive, fluid, grid-based Web page.

Steps:

First, examine the mock-up:

Note how the mock-up has 12 columns, each 70 pixels wide, with a 11-pixel "gutter" between columns.

For a starting point, we've provided a starter project in {Lab Installation Directory}/starters/lab08/lab08.zip.

As you have done in earlier labs, import this as an existing project into your workspace - you should end up with Lab08Web and Lab08EAR projects.

Examine the Lab08Web project, then run fundraising.html on the server to see what we've provided. Note that it's a fixed-width design - try resizing the window to 800 pixels wide and note that you need to scroll horizontally.

Examine main.css and note how it uses fixed-width, pixel-based measurements - all widths, font sizes and so forth are in pixels.

Let's first start by making the font sizes proportional:
1. The default font size in pixels for most browsers is 16 pixels. Looking at main.css, note how it specifies 24px for the section header h1 selector and 18px for section header h2. To calculate the proprotional size using the "simple calculation", simply divide the desired size by the context (the browser's default size). So for each selector:
```
Selector            Calculation    Result
--------            -----------    ------
section header h1    24 / 16        1.5em
section header h2    18 / 16        1.125em         
            
```
  Modify the stylesheet accordingly and retest - the output should be about the same as it was before, but now the size will scale properly on smaller screens.
2. Repeat the above to convert the h1 and h2 margin's to ems. Note: When the division results in a fraction, we recommend that you do NOT round it, but instead use as many fractional digits as possible. This will help prevent layout issues due to browser rounding off your measurements.
  
  Retest.

Next, let's go about converting the fixed, pixel-based width to a fluid, responsive based layout that matches the mock-up as closely as possible.
1. Start by finding the CSS rule for #page that sets the width to 960px. Change the value to 90% - this will leave a bit of space (5%) on each side.
  
  Then modify the #page's margin, deleting the pixel value, but leaving the auto.
  
  The 90% figure is pretty much arbitrary, but a common choice for responsive designs.
  
  Test your work so far - note how there's not much improvement, but this is a step in the right direction.
2. Next, let's work on the #main selector. The desired width is 900px - but it's contained with the #page, which has a nominal width of 960px. So applying the "simple calculation", target / context = result, we get:
```
900 / 960 = .9375 = 93.75% 
            
```
  Modify the #main selector accordingly (be sure to remove the pixel-based margin), then test. Note the text and page flow better than before.
3. Repeat the above step for the fundraising-options and eligibility classes, replacing the pixel-based widths with a percentage. Note that the context of both elements is the #main section, which has a nominal width of 900px. Be sure to convert the division to a percentage by multiplying by 100, and don't round off!
  
  Test your work so far - it should flow nicely as you resize your window. Try testing with a screen width of 320px (the pixel width of the original iPhone) - how does it look? Note how with that narrow of screen, the "Eligibility" box doesn't look very good. We will fix that shortly.
4. Next, let's change the padding values to ems instead of pixels. The "simple formula" still applies, but we need to modify it a little bit: For the context, it's the width of the element itself, not its containing element. Find the eligibility class in main.css and note that the padding-left is specified as 10px. Applying the formula:
```
  10 / 243 =  0.04115226337449 = 4.115226337449%        
            
```
  Modify the eligibility class's padding-left and test, the use the formula to modify the padding-right in the same fashion.
  
  For the top and bottom paddings, instead of using the element's width as the context, use the browser's default font pixel height of 16 and then use ems like you did for the font size earlier. For example, the padding-top is currently 10px. Applying the formula:
```
10 / 16 = .625em            
            
```
  Modify both padding-top and padding-bottom accordingly, then test.
  
  Note that you probably don't need to modify the border- radius and box-shadow values since they don't affect the page layout.
5. Finally, examine the fundraising-options class and note that it uses a pixel-based right margin. For margins, the context is the width of the containing element, which in this case, is nominally 548px. Apply the formula and set the right-margin accordingly. Then test. Your fluid grid should respond well to changes in the browser width (but there are still issues with the text).

Even though the fluid grid works pretty well, there are still issues with the responsive design. For one, the pizza-parlor logo is way too large when you make the window small. Luckily, there's an easy fix.

Modify main.css so it has the following rule:
```
img
{
  max-width: 100%;
}        
        
```
Test with this change - the logo should resize as you change the window size.

Note that this is still not ideal - we are still sending the large logo in its entirety to the browser, using a far amount of bandwidth. A more optimal solution would be to enlist a server-side program to send differently sized images based on the browser's capabilities. That technique is beyond the scope of this lab.

Finally, if you have access to a real Web site on which you can upload files and you have a smart phone, upload fundraising.html, main.css and logo.gif and use your smartphone to browse to fundraising.html.

You will note that even though you have a nice responsive design, the browser will still scale the page as if it was a 960px fixed-width design! To defeat that scaling, edit fundraising.html and add this to the page head:
```
<meta name="viewport" content="initial-scale=1.0, 
   width=device-width" />

        
```
Then re-upload the HTML file and refresh your smartphone's browser - you should see a more responsive page (though there still are issues with text overflowing).

Part 3: Using Media Queries

In this part, you will use a media query so that your page looks better on small devices.

Steps:

The final big remaining problem with the site is the text overflowing the "eligibility" box when the screen width is small. We can fix that using a media query and converting that section to a non-floating element and removing the background box styling.

Start by editing main.css, and at the bottom, write the basic media query:
```
@media screen and (max-width: 400px) 
{
}        
        
```
This checks for screens about the size of the original iPhone.

Within the media query block, start by restyling the eligibility class so it's no longer a floating block:
```
 .eligibility 
 {
   float: none;
   background-color: white;
   box-shadow: none;
}        
        
```
Test your work so far. Try setting the browser's width to 350px - the "eligibility" box should move to the bottom of the page.

Further enhance the media query by setting the width of the eligibility and fundraising-options classes so they take up the entire width of the page.

Here are a couple of more enhancements to consider:
- Set the padding to an appropriate value to match the fundraising-options class.
- For emphasis (since we've lost the background color), use a CSS text-transform so that the eligibility text appears upper case.
Test your work.