get responsive in 30 minutes (wordcamp sofia)

Get Responsive in 30 minutes.

Nikolay Ninarski (Ninio) Shtrak! Ltd. (Штрак!.. да, ш&т).

initLab html5, wp, drupal, mobile

Me?

• Developer

• WordPress fan

• I like Drupal also

• I and 2 friends founded a catering company that is doing WP and Drupal.

• Long story.

• Labber at initLab (hackerspaces FTW)

Why Mobile

Warning! Pie Chart ahead!

Copyright kayakeverywhere, flickr.com

x2/year

88%

12%

Desktop vs Mobile (09.2012)

Desktop Mobile

93%

7%

Desktop vs Mobile (09.2011)

Desktop Mobile

Data from StatCounter

How to go mobile?

Mobile Site Approaches

• Separate mobile website

• Responsive design

• Hybrid

Separate mobile version

• Detect the browser on server side

• Redirect and serve simpler design

+ Less load on the device

+ Tailor-made website

‒ More work

Responsive design

• Make CSS with media queries to show/hide stuff

(*media query = a point from which the design will change.. Usually at specific width)

• Use js if needed to make more complex changes

+ Quick (in simple cases)

− Slower load/performance (desktop inheritance)

Responsive approaches

• Mobile first – if we do it from scratch.

– Start from the mobile version and enhance iteratively up to the desktop

• Break/fix approach – In cases you have an existing non-responsive website.

– Make the screen smaller and check when the design will break. Fix. Continue.

Check out our weapons

Break/fix approach

Tools:

• Chrome Web Dev Tools

• Make something smaller

• Make something bigger

• Make something fluid

• Hide something

• Convert something (possibly with js)

Step 1

Break Something Copyright LinderRox, flickr.com

Step 1

Identify your break point (the point where it breaks)

Step 2

Find the problematic bastard

Copyright COLECCION CAMARAS DE COLORES, flickr.com

Step 2

Find out what is breaking the page

Step 3

Fix it

Step 3

Fix it

• Make the things fluid on it (%)

• Change size

• Hide/show

• …

Step 4

Go To Step 1

(loop-loop)

Step Last

Add <meta name="viewport" content="width=device-width, initial-scale=1.0">

to the head

Hacker’s tip

Merge breakpoints so you don’t write that much

Break/fix comments

• Good solution for existing websites

• Not that much thinking involved

• Kind of agile

• Looks kind of natural

Want to go deeper

• http://adaptive-images.com/

• http://wordpress.org/extend/plugins/mobble/

• http://wordpress.org/extend/plugins/wptouch/

• http://caniuse.com/

• http://smashingmagazine.com

• http://css-tricks.com/

Thanks!

M: ninio@shtrak.eu

Blog: http://shtrak.eu/ninio

Twitter: @ninarski

Shtrak!: http://shtrak.eu/it