get responsive in 30 minutes (wordcamp sofia)
DESCRIPTION
A presentation I made on WordCamp Sofia 2012. It's about how to make your WordPress theme responsive by Breaking and Fixing it.TRANSCRIPT
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!
Blog: http://shtrak.eu/ninio
Twitter: @ninarski
Shtrak!: http://shtrak.eu/it