On May 25th 2010 Ethan Marcotte wrote the seminal article Responsive Web Design, the basis for the modern web. In the article Ethan discusses how fluid grids, flexible images, and media queries let websites respond to a user’s device and deliver an appropriately sized layout.
Examples of Responsive Web Design
Your assignment will be to work with your group and review one of the responsive websites listed below. After doing some research, your group will put together a 6 minute summary—no slides, just the website—for the class that covers the following:
- Goals: Was this a redesign of an existing site to make it responsive or built from the ground up? Why did the client want to go responsive? Did the design team have to convince the client to go responsive?
- (Re)Design: A lot goes into designing or redesigning a website. What processes were used for team collaboration (and what type of professionals were on the team), what tools were used for building, communication, etc. How was testing done to ensure usability for all users, and accessibility for people with disabilities?
- Success: Was the (re)design successful? How was success measured? Increased sales, traffic, conversions, etc.
- Demo: Show the class the website specifically demonstrating different breakpoints. Tell us what you think works well and what could be improved.
Responsive Web Design Case Studies
- Greater Pittsburgh Community Food Bank
- National Audubon Society
- Ben & Jerry’s
- Boston Globe
This assignment will be worth 5 points and is due by 10:50 am. Hand in a piece of paper, email me a link to a Google Doc, or email a Word Doc with the names of your group’s members, the website you studied and a couple of bullet points for each category: Goals, (Re)Design, Success, and Demo before you leave class.
- 4–5: The presentation includes details about each of the three goals. The group is well prepared and familiar with their assigned website and the class gets insight from the presentation.
- 2–3: The presentation includes the required parts, but could have used more detail and research in order to back up their findings. The class learns a few things, but not anything they couldn’t have learned from clicking on the initial links below.
- 0–1: The presentation is missing one or more of the required parts, and the group is not familiar with their website they were assigned. The presentation does not give the class into the process or inform them of anything new.