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 trainline.com 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

http://www.lukew.com/ff/entry.asp?1392

 

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

Baselinesscss.com – 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

 

MANYMINDS

 

Chrome & Firefox portable

Blog posts on head London website

 

GRIDS

Start with girds and Nav first

Grids in frameworks can be rigid

 

Bootswatch – customise bootstrap

Skeletion CSS framwork

http://susy.oddbird.net/

SASS>COMPASS>SUSY

Mark Pilgrim

 

Ruby Installed on .???

Whencaniuse.com

HTML5 rocks resource list

Create your own boilerplate

No HTML5 on websites at present is safest

WebSockets – continuous connections

Ethan Marcotte

Luke Wrob