Pragmatic Responsive Web Design

Presentation I gave at the 1st UpNorth conference (1/12/2012). http://www.upnorthconf.gr

Transcript

1. Pragmatic Responsive Web Design From / John Tsevdos @tsevdos
2. hi I'm John and I'm social... tsevdos.com phrappe.com @tsevdos github.com/tsevdos linkedin.com/in/tsevdosjohn
3. agenda why rwd how rwd rwd tips and techniques
4. why responsive? and not native and not mobile site
5. because with a responsive web site we provide support for all devices, including tablets, phones and tvs for all screen sizes for all (modern?) browsers and because we love the "one site to rule them all" attitude
6. responsive web design principles flexible layout (grid) media queries flexible media (images, videos, etc.)
7. that's all bye, bye...
8. ...but I promise pragmatic responsive web design!
9. being pragmatic think different support as many devices/browsers your budget allows solve problems with simple solutions
10. first things first think out of the box, think responsivly forget pixel-perfection layout (wireframe it) forget colors, images, logos etc. prototype it (browser-ready protype)
11. mobile first mobile first content? mobile first styles question : why mobile first?
12. set your major and minor break points the first break point is the no "break point" primary (mobile first) styles set break points where your content needs adjusting phones (320/480) tablets (768/1024) (small) desktop (1024) (large) desktop (1200 and over)
13. set your major and minor break points @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 4 8 0 p x ) { } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 7 6 8 p x ) { } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 1 0 2 4 p x ) { } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 1 2 0 0 p x ) { }
14. question : does it make sense to create a break point (and make adjustments) for every known device?
15. CSS the % way do the right math (target ÷ context = result) flexible margin / paddings tip: use % for fonts as well # c o n t a i n e r { w i d t h : 1 0 0 % ; m a x - w i d t h : 1 2 0 0 p x ; } # m a i n { f l o a t : l e f t ; w i d t h : 7 5 % ; } / * 9 0 0 / 1 2 0 0 * / # s i d e b a r { f l o a t : r i g h t ; w i d t h : 2 5 % ; } / * 3 0 0 / 1 2 0 0 * / # m a i n { f l o a t : l e f t ; w i d t h : 7 1 . 6 6 6 6 6 6 % ; / * 8 6 0 / 1 2 0 0 * / p a d d i n g : 1 . 6 6 6 6 6 6 1 2 0 0 * / }
16. CSS the em way same as above, but with ems how much is 1em? tip: use ems for fonts as well 1 e m = 1 0 0 % f r o m 1 6 p x = 1 6 p x 1 . 5 e m = 1 5 0 % f r o m 1 6 p x = 2 4 p x 0 . 5 e m = 5 0 % f r o m 1 6 p x = 8 p x
17. CSS flexible media i m g { m a x - w i d t h : 1 0 0 % ; } i m g , o b j e c t , e m b e d , v i d e o { m a x - w i d t h : 1 0 0 % ; } i m g { m a x - w i d t h : 1 0 0 % ; h e i g h t : a u t o ! i m p o r t a n t ; / * j u s t i n c a s e , t o f o r c e c o r a t i o * / } i m g { - m s - i n t e r p o l a t i o n - m o d e : b i c u b i c ; } / * I E s c a l i n g f i x * / fluid images from unstoppable robot ninja post fitvids.js
18. CSS the rest set a good base (typography, colors, helpers, etc.) use CSS preprocessors (SASS, LESS, etc.) normalize
19. markup use HTML5 take control be nice to IE6-8 use or < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " / > < m e t a h t t p - e q u i v = " X - U A - C o m p a t i b l e " c o n t e n t = " I E = e d g e , c h r o m e = 1 " > html5shiv modernizr respond.js
20. markup Easy mobile-friendly enchantments Tel: SMS: iPhone/iPad icon: < a h r e f = " t e l : + 3 0 6 9 4 8 1 2 3 4 5 6 " > + 3 0 6 9 4 8 1 2 3 4 5 6 < / a > < a h r e f = " s m s : + 3 0 6 9 4 8 1 2 3 4 5 6 " > + 3 0 6 9 4 8 1 2 3 4 5 6 < / a > < l i n k r e l = " a p p l e - t o u c h - i c o n " s i z e s = " 5 7 x 5 7 " h r e f = " t o u c h - i c o n - i p h o n e - 1 1 4 . p n g " / >
21. responsive web design is great, but you'll need more unobtrusive javascript feature detection enrich touch devices (tablets/mobiles) navigation touch events (on image galleries, etc.) geolocation modernizr
22. hand-code or frameworks that's a tough one, it depends budget time project scale
23. responsive web design frameworks Bootstrap Foundation
24. responsive web design patterns (all images are from the post) Multi-Device Layout Patterns
25. mostly fluid
26. column drop
27. layout shifter
28. tiny tweaks
29. off canvas
30. responsive web design patterns Responsive Patterns
31. toolbox text editor / IDE Chrome / Firefox iPad iPhone Adobe Edge Inspect
32. testing don't rely on emulators and other desktop tools try to test to as many devices / browsers / OS you can you're not magician, it may not work on your mum's mobile...
33. thank you
34. questions ?