Pragmatic Responsive Web Design

Pragmatic Responsive Web Design

This presentation was given at the 1st Joomlafrappe (http://joomlafrappe.gr/) conference at 12/3/2013.

F4b9a4a4a00c827269ef65a692b8bfda?s=128

John Tsevdos

March 12, 2013
Tweet

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. Responsive Web Design why? how? 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 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. Being pragmatic think different support as many devices/browsers your budget

    allows solve problems with simple solutions
  8. 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)
  9. Mobile first mobile first content? mobile first styles Question :

    why mobile first?
  10. 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)
  11. 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 ) { }
  12. Question : does it make sense to create a break

    point (and make adjustments) for every known device?
  13. CSS : Flexible layout 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 % ; / * 2 0 / 1 2 0 0 * / }
  14. CSS : Flexible layout 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
  15. 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 r e c t a s p e c t 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
  16. CSS : The rest set a good base (typography, colors,

    helpers, etc.) use CSS preprocessors (SASS, LESS, etc.) normalize
  17. 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
  18. 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 " / >
  19. Markup Easy mobile-friendly inputs < ! - - D e

    f a u l t K e y b o a r d - - > < i n p u t t y p e = " t e x t " / > < ! - - N u m e r i c K e y b o a r d - - > < i n p u t t y p e = " n u m b e r " / > < ! - - P a t t e r n K e y b o a r d - - > < i n p u t p a t t e r n = " [ 0 - 9 ] * " t y p e = " t e x t " / > < ! - - N u m b e r K e y b o a r d - - > < i n p u t t y p e = " t e l " / > < ! - - U R L K e y b o a r d - - > < i n p u t t y p e = " u r l " / > < ! - - e - m a i l K e y b o a r d - - > < i n p u t t y p e = " e m a i l " / >
  20. 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
  21. Hand-code or frameworks that's a tough one, it depends budget

    time project scale
  22. Responsive web design frameworks Bootstrap Foundation

  23. Responsive web design patterns (all images are from the post)

    Multi-Device Layout Patterns
  24. Mostly fluid

  25. Column drop

  26. Layout shifter

  27. Tiny tweaks

  28. Off canvas

  29. Responsive web design patterns Responsive Patterns

  30. Toolbox text editor / IDE Chrome / Firefox iPad iPhone

    Adobe Edge Inspect
  31. 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...
  32. Thank you

  33. Questions ?