AIM 2
Assignment 2: Mobify
Due: Week 9 (4/2)
You will retrofit a website that you have created this semester to work with mobile devices, using CSS3 media queries.
Begin with the mobile-ready template:
http://www.ecbrown.org/aim2/templates/mobile_template/mobile_template.zip
Transfer all of your current HTML and CSS markup to these documents.
Your mobified site will need to account for at least one tablet and one handheld device. Recommendations of screen widths are here:
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
For tablets, the new design is much like a desktop design for a narrower width. The main difference is redesigning links for touch access. 44x44 px is a standard recommendation for a fingertip-friendly button.
Here are guidelines for mobifying a website:
http://ecbrown.org/aim2/txt/mobifying_steps.txt
Note: other than adapting to the different screen sizes, you should take advantage of the media queries to make aesthetic changes to your site as it reforms itself for tablets and phones.
Checking your work:
Your site only needs to succeed with a standard browser resize. But you'll have more fun if you check your results in a simulator:
http://mobiletest.me
http://quirktools.com/screenfly
Last step:
Email the URL of your mobified site to me, so that I know specifically which site you updated.