Notes 9/1: Smashing Magazine Article

I. Responsive web design= design and development should respond to user’s behavior based on the device they are using

  • Flexible grids and layouts
  • CSS media queries= to create custom layout structures
  • Javascript= backup to devices that dont support CSS3 media queries

II. Adjusting screen resolution

  • Hundreds of screen sizes in addition to orientation
  • Solution= flexible layouts (fluid grids, fluid images, smart mark-up)
    • hiding and revealing images (simpler navigation, more focused content, lists/rows instead of multiple columns)
    • sliding composite images
    • foreground images that scale
  • Fluid images= Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size”

III. Touch screens vs cursors

  • Touch screens have no capability to display CSS hovers for link definition