Final Project – DUE TODAY

CONGRATULATIONS! Work well-done!

Remember you must attend our last class and present your final project in order to receive a grade for it.

Final Project: Due Thursday, December 13

Next iteration of midterm project prototype

Specifications:

Make the visual design your own

In order to use this project in your portfolio, make the visual design your own. Change the name of the brand. Incorporate more of your own visual assets. For this project, it’s fine to use existing copy. I want to see a complete redesign… not just a reorganization and version of the existing design.

Study other responsive websites: http://mediaqueri.es/
Think about how your navigation is going to adapt from desktop to mobile.

One of the more difficult issues to resolve in responsive design is how to adapt your navigation. How will the navigation layout change from the desktop version, to the tablet, and finally the mobile website? Be sure to review and study other responsive websites in order to gain a better understanding of feasible options. Check out Responsive navigation patterns by Brad Frost. I recommend you use one of the navigations listed below. They are listed from easy to difficult:

Top Nav or “Do Nothing” Approach
Simple Mobile First Navigation
Menu to a Drop Down
Toggle Navigation (aka FlexNav)
Responsive Toggle Nav
Multi Toggle Navigation
Pull Down for Navigation
Incorporate jQuery (or jQuery mobile) into your final mobile design

Integrate a feature in your design that uses a a jQuery plugin
- FitText: A plugin that makes font-sizes flexible.
- Elastislide: A responsive jQuery carousel plugin.
- Blueberry: An image slider plugin written specifically for responsive web layouts.
- ResponsiveSlides: A jQuery plugin for a responsive slider using list items inside <ul>
- Supersized: A fullscreen background slideshow plugin.
- FitVids: A lightweight, easy-to-use jQuery plugin for fluid width video embeds.Can’t find what you’re looking for? Here are 30 additional plugins for sliders:
  http://webdesignandsuch.com/top-30-responsive-jquery-slider-plugins-for-websites/
Build a responsive design

Using the technique from the “flexible” scaleable prototype built for the midterm, add media queries to your project to make the site responsive. (Or use a responsive design framework like Skeleton to build your site. If you want to use a framework for your final project, please talk to me about it first.) Build three to four pages of the site in HTML5/CSS. Post final project to the class server along with your new design comps in the source file folder.
Test your design on other mobile devices

Before you finish building the site (and after a version is uploaded to a class server), view your design on multiple devices. I recommend you go to a Staples, OfficeDepot, Radio Shack, AT&T, or Verizon store. Any store that has an array of different devices so you can look at your design on several devices with a variety of different dimensions.

Please upload your final project to the class server before our class at 6:30pm on Thursday, December 13.