home of the “design for the web” coursean adult course focused on webstandards based webdesign

webeyedea logo design for the web

planning for different layouts

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).

Just for the record - a few points to remember:

  1. always add the meta tag viewport to your head tag
    <meta name="viewport" content="width=device-width">
    content="width=device-width, minimum-scale=1.0"
  2. add your media queries in one of the 2 following ways:
    1— at the very bottom of your master CSS, eg:
    @ media only screen and (min-device-width : 320px) and ↩ (max-device-width : 480px) { ... }
    2— link to the alternative CSS files using the queries as link attributes, eg:
    <link rel="stylesheet" href="smartphone.css" ↩ media="only screen and (min-device-width : 320px) ↩ and (max-device-width : 480px)">
  3. consider the screen sizes, orientations and devices you'd like to support and plan carefully how to implement your CSS but bear in mind that you should use your content to guide the break points, and not specific devices.
    (eg you might want to add CSS3 transitions for hover events which will not be applicable to mobile devices or touch screen, in which case you might want to add these in via media queries rather than applying them to the master CSS)
  4. don't forget about device-width and orientation,
    and that you have the option not only to check for precise pixel dimensions but also the aspect ratio, with aspect-ratio or device-aspect-ratio.

And here is a useful reference from Punchcut:

And a few useful articles to read:

tags:

Comments are closed.