Waterfall

Mobile Web Development Spring 2012

To view lecture notes for a given lesson follow the links below. Lecture notes will be added the day of each lecture. Assignments will be listed for each section. Assignments are due before class.

Subscribe to the RSS Feed for Mobile Web Development

Mobile Design Webinar - April 19, 2012

Mobile Design: Designing Tapworthy Mobile Apps with Josh Clark
Handouts:
http://www.uie.com/handouts/virtual-seminars/UIE_vs63_mobile_design.pdf

Assignment

Write a short review of the presentation including three takeaways or strategies that you can incorporate into your mobile interface design. Emailed to me before class on Tuesday. If you missed class please email and I will send yo the link to presentation. This is a graded assignment.

Work Session – Tablet/Desktop Design - April 17, 2012

This week you should be focusing you design efforts on the tablet / desktop version of your site. Taking the mobile design you have been working on the last few weeks you should build off of that initial design work using media queries to establish breakpoints for the devices you wish to target. Make sure you use all of the tools at your disposal for testing. If you need to refer back to this module.

Assignment

By the end of the week you should have in place the css for both the mobile and tablet versions of your site.

Exploring CSS3 - April 10, 2012

Assignment

You should have the finishing touches in place on your mobile interface by the end of the week. Be prepared to discuss how, where, and why you have incorporated css3 into your interface designs in class on Tuesday. It is not a requirement to use in the final product but I’d like you to experiment with it.

Classroom Lab Time - April 5, 2012

We’ll use today’s session to continue work on the mobile view of our project websites. By Tuesday of next week you should have a at a minimum the html structure in place along with rudimentary “mobile first” css. We’ll spend next week working with CSS3 as a means to polish our interface.

Assignment

Spend some time browsing some of the usable CSS3 properties on this page. We’ll discuss usage and implementation on Tuesday.

Working with .htaccess files - March 29, 2012

Assignment

Send a visual mock-up of your mobile site to me before class on Tuesday. This can be a design file from Fireworks or Photoshop or the actual html and css.

Announcement

Join the Society for Computing and Information Science tomorrow evening at 6:00pm in the EIT auditorium for a webinar entitled “The How and Why of Responsive Web Design” with Ethan Marcotte. Afterwards we’ll head to Buffalo Wild Wings for dinner. Hope you can make it.

Site Planning and Prototyping - March 15, 2012

Assignment

Refine your site concept and create a preliminary sitemap for the site/app. Experiment with one of the prototyping tools we discussed in class and build a prototype of the mobile view of your new site. This only needs to an outline. No need to do a full design treatment at this point. We’ll use this as a starting point for laying out the mobile version of our site when we return.

Use Kuler or a similar tool to generate a color scheme for your web site. You should make note of the hexadecimal color values of your scheme. If you need more information check out the following post on deciding on good colors.

 

 

Mobile Web Final Project Brainstorm - March 13, 2012

I’d like you to spend this session coming up with and idea for a final project web site. I’d like this project to incorporate the the use of responsive design practices and utilize some of the new html5 api’s. I’ll give you a clear list of technical requirements after spring break. You are welcome to work individually or with a single partner. This can be for a fictitious client or a real world client or project. Be creative. Pick something you are interested in learning more about. I’d like you to write a paragraph or two explaining the project and what you hope to accomplish/learn by completing the project. Please email this to me before class on Tuesday. Be prepared to discuss your idea in class.

Responsive Images Lab - March 8, 2012

For this assignment I’d like you to evaluate and implement any two responsive image techniques from the homework reading (http://cloudfour.com/responsive-imgs-part-2/) or other techniques discovered via independent research.

On each of the example pages I’d like you provide a link to the technique along with a paragraph or two discussing ease of implementation and your perceived usefulness of the technique.

I’d like you to submit these URLs to me no later than class next Tuesday.

HTML5 Odds and Ends - February 21, 2012

In-class Lab – Please Complete the following Tutorial and submit your online Resume to me via Email

Note: If you are uncomfortable with sharing any personal information with me  (or Google!) feel free use fictitious information. You may skips steps 8-10 if you’d like.

For more information on the subject check out the following resources

The goal of this exercise is familiarize you with the proposed Microdata Spec and to get your brain wrapped around its use. Be prepared to discuss in class on Thursday.

At this point I should have the following HTML5 related assignments from you…

  • Exploring Relationship Types Assignment
  • HTML5 Video Implementation with fallback for older browsers
  • HTML5 Audio Implementation with fallback for older browsers
  • Microdata Resume Exercise – Due Thursday

I will be grading these 4 assignments as the Skill-based Assessment grade for HTML5. Please make sure I have all of these before class on Thursday. They will not be accepted after that time.

 

 

HTML5 Audio - February 14, 2012

Assignment

Evaluate and implement one of the html5 audio fallback options. Please share the url of this working implementation with me before class on Thursday Included on the page should be the url of technique you used and a list of browsers and devices you were able to support.

Be prepared to demo/discuss both the video and audio implementation in class on Thursday

Introduction to HTML5 - February 2, 2012

In Class Assignment

Visit 10 Websites / Services you frequent. For each you should provide me with the site url, declared doctype, and a list of linked resources with the relationships. Only include the relationship information for elements we have not discussed. I’d like for you to discover as many new relationship types as possible. There is no need to list all relationship attributes for the site, only ones that are new to you. Once completed select one of the new relationship types and provide me with an explanation of its purpose.

Please email this assignment to me prior to class on Tuesday.

Homework Reading