Slide 1

Slide 1 text

Pragmatic Responsive Web Design From / John Tsevdos @tsevdos

Slide 2

Slide 2 text

hi I'm John and I'm social... tsevdos.com phrappe.com @tsevdos github.com/tsevdos linkedin.com/in/tsevdosjohn

Slide 3

Slide 3 text

agenda why rwd how rwd rwd tips and techniques

Slide 4

Slide 4 text

why responsive? and not native and not mobile site

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

responsive web design principles flexible layout (grid) media queries flexible media (images, videos, etc.)

Slide 7

Slide 7 text

that's all bye, bye...

Slide 8

Slide 8 text

...but I promise pragmatic responsive web design!

Slide 9

Slide 9 text

being pragmatic think different support as many devices/browsers your budget allows solve problems with simple solutions

Slide 10

Slide 10 text

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)

Slide 11

Slide 11 text

mobile first mobile first content? mobile first styles question : why mobile first?

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

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 ) { }

Slide 14

Slide 14 text

question : does it make sense to create a break point (and make adjustments) for every known device?

Slide 15

Slide 15 text

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 * / }

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

CSS the rest set a good base (typography, colors, helpers, etc.) use CSS preprocessors (SASS, LESS, etc.) normalize

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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 " / >

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

hand-code or frameworks that's a tough one, it depends budget time project scale

Slide 23

Slide 23 text

responsive web design frameworks Bootstrap Foundation

Slide 24

Slide 24 text

responsive web design patterns (all images are from the post) Multi-Device Layout Patterns

Slide 25

Slide 25 text

mostly fluid

Slide 26

Slide 26 text

column drop

Slide 27

Slide 27 text

layout shifter

Slide 28

Slide 28 text

tiny tweaks

Slide 29

Slide 29 text

off canvas

Slide 30

Slide 30 text

responsive web design patterns Responsive Patterns

Slide 31

Slide 31 text

toolbox text editor / IDE Chrome / Firefox iPad iPhone Adobe Edge Inspect

Slide 32

Slide 32 text

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...

Slide 33

Slide 33 text

thank you

Slide 34

Slide 34 text

questions ?