Design Insights # 1 notes – Responsive Design

Adaptive -> Changes

Fluid -> Stretches
Resolution & Pixel density need to be considered.

Before starting think about content.

Different devices = different content needs


Tablet users mostly in browsing mode

Designing for multiple screens

  • Desktop
  • Mobile
  • Tablet
  • Internet ready TV
  • Home entertainment system
  • Handhelod games consoles
  •  Adaptive design is very labout intensive and a bit less future prrof
  • Fluid is cheaper and more future proof

Which one to use can depend on the content.


When designing for mobile first design for the smallest and weakest – Javascript & CSs

Progressive enhancement

Check out the mobile first website


Fluid design

Desktop version  – search on top rights

Small version – no search on top rights


LukeW | RESS: Responsive Design + Server Side Components


Project flow:

Agile development, scrum style using 2 week bursts works best for responsive design

  • Design part by part
  • Split into user stories/product backlog

Prince2 – waterfall method


Prototyping saves time & effort, mockup mobile early, real content. Design in the browser/



SASS & Compass – toolset to generate CSS

JavaScript components – may vary depending on device.

  • Interactions- no hover on touch screen
  • Programme for touch start and touch end events


Responsive images

  • Max-width technique
  • Stretch BG images
  • No script technique


Asset production

  • Fonts & be careful of @font-face rendering
  • Look @ fonts on all devices before starting

WikiMobile – nav menu

Equal height columns are a bad idea


No pagination on mobile if possible. Load more buttons.

2% have javascript turned off




Chrome & Firefox portable

Blog posts on head London website



Start with girds and Nav first

Grids in frameworks can be rigid


Bootswatch – customise bootstrap

Skeletion CSS framwork


Mark Pilgrim


Ruby Installed on .???

HTML5 rocks resource list

Create your own boilerplate

No HTML5 on websites at present is safest

WebSockets – continuous connections

Ethan Marcotte

Luke Wrob