DIY Responsive Design
February 28, 2013
If you are not already familiar with these websites, please look at some while resizing your browser on each. Also feel free to check them out on a smartphone:
Also look at these more experimental websites that encourage or are flexible with browser resize:
A wide variety of websites have made their websites responsive over the past few years. Of course lists like these could go on and on, but you get the idea. These websites are flexible for any screen dimensions, capable of being viewed on a wide variety of devices.
In CSS, media queries help designate what happens at different browser sizes. Look at responsive-world.html and take note of what happens on browser resize. The HTML/CSS for this page is below. Notice the media queries and the pixel breakpoints for the differences in background color:
In that example, you'll notice that areas are defined with @media screen and (max-width:???px). Anything contained in the curly braces that follow will override any previous style declarations for that specific screen size. Be sure to place these media queries at the end of your CSS document or section so that they will properly override previous declarations.
You'll also notice the line that includes meta name="viewport" etc. This line prevents certain mobile browsers like iOS and Android from auto-resizing the initial page if it is too large. Here it is set to an initial and maximum scale of 1.0 so that the mobile version is scaling to the same size as the laptop or desktop version (where 0.5 would be scaling to half the size, 3.0 would be three times the size and so on). The maximum scale controls how much a user can zoom in and out on the page. In this example, we're not allowing the user to do any zooming. For the purposes of the workshop, keeping initial and maximum values as 1.0 is fine.
Images and other graphics can easily be made responsive as well. Look at responsive-image.html to see a few images that shrink as the browser does. See the code below:
Create any website during the span of the class that changes its form and/or content at the breakpoints in the first example, responsive-world.html:
Your website can contain any kind of content. It could be the start of the responsive website for your event, but it could instead be a self-contained responsive website experiment. In your assignment, please also include at least one image or graphic that changes on browser resize. By the end of class at 3:20, please email me a link to your quick assignment.
For accessibility purposes, it's obviously good for websites to be readable, legible, and easily navigable on any device. However, I am most excited in how websites prioritize or create new content for specific platforms. For example, on a mobile website, this can mean sacrificing existing content that is normally initially viewable on the laptop or desktop version. What is most important for viewers of the mobile website? If it's a museum, content like "hours" and "address" should be surfaced instead of, say, the "about" page. Other times, maybe mobile viewers should be rewarded with new content made for the mobile version only, like an audio guide for viewing artwork at the museum. On this note, look at walkerart.org and okfoc.us on a smartphone. And on your computer while changing the browser size, look at something-world.html, a quick riff I made on the first example.
- Responsive Web Design, Ethan Marcotte, 2010, from A List Apart
- Unbuilding, Rob Giampietro, 2012
- Ditching Responsive Design, Hiroki Takeuchi, 2013
Articles about responsive design
- Book: Responsive Web Design with HTML5 and CSS3, Ben Frain, 2012
- Book: Responsive Web Design, Ethan Marcotte, A List Apart