home of the “design for the web” coursean adult course focused on webstandards based webdesign
design for the web
21/03/2013 No Comments
Time for more practice using this sample design. Write the required CSS (working with the given HTML) to produce the layout as completed webpage. Take a look at the screenshots of the hidden/shown images and work towards the 3 break points shown.
Ideally, you’ll approach this task mobile first :)
18/01/2013 No Comments
Time to get responsive ;) As the web moves onto more and more different devices all the time - it is important for us to ensure that our sites display well on this variety of displays. Luckily the wonderful Ethan Marcotte has coined the term "responsive web design", or RWD, via his article on A List Apart.
Ethan quotes John Allsopp who stated in his article "A Dao of Web Design" in 2000:
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”
With this in mind - let's read Ethan's original article and study his beautiful example:
continue reading ➤09/02/2012 Comments Off
Let’s see how well you’ve remembered ~ take another look at the screenshots provided and draw out wireframes to show layout adjusted to smaller window sizes.
download quiz
02/02/2012 Comments Off
Time to get stuck in ;) Download the source files and write the CSS, including the media queries for various screensizes, screenshots included :)
07/04/2011 Comments Off
Let’s see how well you’ll remember the second time around — team up in your set teams and draw out neat wireframes for the sites from memory. Have fun :)
07/04/2011 Comments Off
Now that you've seen some site with inspiring responsive web design - it is time to plan in the layout reflows during the early stages of your design process, especially for your own portfolio site (soon!). For mockups and design roughs - you can either create your own custom sized templates for the different screen sizes/aspect ratios - or you can make a start by downloading these templates from Punchcut (as shown in the image above).
continue reading ➤