Pragmatic Responsive Web Design

F4b9a4a4a00c827269ef65a692b8bfda?s=47 John Tsevdos
December 01, 2012

Pragmatic Responsive Web Design

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

F4b9a4a4a00c827269ef65a692b8bfda?s=128

John Tsevdos

December 01, 2012
Tweet

Transcript

  1. 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
  2. 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)
  3. 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)
  4. 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 ) { }
  5. 14.

    question : does it make sense to create a break

    point (and make adjustments) for every known device?
  6. 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 * / }
  7. 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
  8. 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
  9. 18.

    CSS the rest set a good base (typography, colors, helpers,

    etc.) use CSS preprocessors (SASS, LESS, etc.) normalize
  10. 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
  11. 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 " / >
  12. 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
  13. 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...
  14. 33.