Class 12 Notes

 

Topics

  • Review Final Project
  • Media Queries (Demo)
  • Flexible Navigation
  • jQuery plug-ins
  • In-Class Lab time

Extra Credit Question

Fabian Geyrhalter and Chris Do talked a lot about the concept of “brand.” They suggested that, while you are a student you need to represent yourself as a brand. Your brand.

What do they mean by this? And do you agree or disagree with this and why? Please post your response to your WordPress blog to receive extra credit points.


Final Project Schedule

November 29 – Complete re-design, responsive navigation & jQuery plugin
December 6 – Testing & Final refinements
December 13 – Final Project presentations

No other assignments will be due from here on out, you will work on your Final Project only. Bring it to class every week.


Final Project Process

Here are the steps I recommend for your final project:

1. Work on rebranding and redesigning your midterm project.

Change the name. Redesign the logo. Create more of your own assets. Make the design your own.

Tips:

  • Don’t create a design or layout that you can’t make responsive. Simplify your design. Look at responsive websites here: http://mediaqueri.es/
  • Decide which responsive navigation you want to use (options listed on final project web page) and integrate this into your final design.
  • Same thing with the jQuery plugin (slideshow). Decide which plugin you want to use and integrate this into your final design.
  • Don’t spend too much time in this step. Move on to the technical part by Thanksgiving at the very latest or you’ll run out of time.

2. Do an experimental page using Media Queries.

Using Media Queries, make the home page of your midterm project  responsive (you’ve already made it “flexible), so you get a basic sense of how you’ll make all of your 3-4 pages responsive.

Don’t forget to put this in the <head> of your HTML files:

 <meta name="viewport" content="initial-scale=1.0, width=device-width" />

Suggested breakpoints (or you can use the 480px, 700px and 1000px from earlier class notes):

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) { }

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) { }

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 768px) { }

To get your divs to stack change to these: width: 100% and float:none will

#content {
width:100%;
float:none;
}

2. Create a test page with your responsive navigation.

Build the responsive navigation in a test page separate from your working files. Change the content and the styling so it matches the look of your final design. You can integrate this into your final design after you’ve built the test page.

3. Create a test page with your jQuery plugin.

Build the jQuery plugin in a test page separate from your working files. Use your own assets so it matches the look of your final design. You can integrate this into your final design after you’ve built the test page.

4. Put it all together.

Make sure all of your 3-4 pages are “flexible.”  Add your media queries, responsive navigation and jQuery plugin.

5. Test it on multiple devices.

Post your site to the class server and go to the Verizon, AT& T, Staples or Office Depot store and test it on multiple devices.


Helpful Examples

Click on the icon to view a sample page.

I suggest you upload a version of your project at each of these steps so you can view it on the class server and test it on multiple devices.

Flexible layout (midterm)  

  • Fonts converted from px to em
  • Flexible widths (%)
  • Flexible margins + padding (%)
  • Flexible images (max-width: 100%)

Responsive layout

  • Add meta tag for width=device-width
  • Add media queries to existing style.css

Add responsive navigation  

Add jQuery feature 

Final project

  • Add the rest of your content and style.
  • Test it on multiple devices: test, test and test.

Leave a Comment