Date post: | 14-Jan-2015 |
Category: |
Technology |
Upload: | nickolay-ninarski |
View: | 2,309 times |
Download: | 1 times |
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