Responsive Web Design: Everything has Changed

Slide 1

Slide 1 text

RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN everything has changed Javier Usobiaga #DrupalDevDays

Slide 2

Slide 2 text

@htmlboy @htmlboy @htmlboy I work at Swwweet.com

Slide 3

Slide 3 text

WHAT IS responsive web design? WHAT IS responsive web design? WHAT IS respoNsive web design?

Slide 4

Slide 4 text

WHAT IS THE web? WHAT IS THE web? WHAT IS THE web?

Slide 5

Slide 5 text

CONTROL CONTROL CONTROL a tale of obsession

Slide 6

Slide 6 text

1990s 1990s 1990s the web is 800px wide

Slide 7

Slide 7 text

2000s 2000s 2000s the web is 1024px wide

Slide 8

Slide 8 text

2007 2007 2007 + the web is 1024px & 320px wide

Slide 9

Slide 9 text

2010 2010 2010 + + the web is 1200px & 320px & 768px wide

Slide 10

Slide 10 text

2012 2012 2012 + + the web is 1200px & 320px & 768px & 1800px wide +

Slide 11

Slide 11 text

2012 2012 2012 + + 320px? +

Slide 12

Slide 12 text

2012 2012 2012 the web is 256px & 320px & 426px & 480px & 560px & 640px & 768px & 800px & 960px & 1024px & 1280px & 1440px & 1600px & 1800px… + + + +

Slide 13

Slide 13 text

ENOUGH! ENOUGH! ENOUGH!

Slide 14

Slide 14 text

ENOUGH! ENOUGH! ENOUGH! it’s time to accept the web’s nature

Slide 15

Slide 15 text

THE WEB IS THE WEB IS THE WEB IS ﬂuid universal multidevice

Slide 16

Slide 16 text

ﬁrst act RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN

Slide 17

Slide 17 text

2012.dconstruct.org

Slide 18

Slide 18 text

mediaqueri.es

Slide 19

Slide 19 text

BUT HOW? BUT HOW? BUT HOW? ﬂexible grids ﬂexible media @media queries

Slide 20

Slide 20 text

GRIDS GRIDS GRIDS 16% 16% 16% 16% 16% 16% 16% 16%

Slide 21

Slide 21 text

target context ÷ result GRIDS GRIDS GRIDS

Slide 22

Slide 22 text

.grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%} GRIDS GRIDS GRIDS

Slide 23

Slide 23 text

MEDIA MEDIA MEDIA img, video{ max-width:100% }

Slide 24

Slide 24 text

MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES @media screen and (max-width:320px){ .side_column{ width: 100%; float: none; } }

Slide 25

Slide 25 text

MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES change the layout change the styles increase the font size

Slide 26

Slide 26 text

RESPoNSIVE challenges RESPoNSIVE challenges Responsive challenges second act

Slide 27

Slide 27 text

Navigation Navigation Navigation

Slide 28

Slide 28 text

Navigation Navigation Navigation menu contact work about contact work about

Slide 29

Slide 29 text

bit.ly/rwd-nav

Slide 30

Slide 30 text

LAYOUT LAYOUT layout 1 2 3 4 6 5

Slide 31

Slide 31 text

3 2 LAYOUT LAYOUT layout 1 3 1 2 4 5 6

Slide 32

Slide 32 text

LAYOUT LAYOUT layout

Slide 33

Slide 33 text

IMAGES IMAGES images wide screens high-res screens small screens

Slide 34

Slide 34 text

IMAGES IMAGES images bigger images javascript loading sever-side solutions

Slide 35

Slide 35 text

bit.ly/rwd-images

Slide 36

Slide 36 text

IMAGES IMAGES images CSS3 SVG icon fonts

Slide 37

Slide 37 text

workflow workflow workflow third act

Slide 38

Slide 38 text

WATERFALL WATERFALL WATERFALL UX / IA DESIGN VISUAL DESIGN DEV BOSS

Slide 39

Slide 39 text

Hi, I want a website… WATERFALL WATERFALL WATERFALL

Slide 40

Slide 40 text

Sure thing! WATERFALL WATERFALL WATERFALL

Slide 41

Slide 41 text

First things ﬁrst. We’ll need some wireframes to set the structure. WATERFALL WATERFALL WATERFALL

Slide 42

Slide 42 text

Some color and shiny things… WATERFALL WATERFALL WATERFALL

Slide 43

Slide 43 text

A bit of CSS, a dash of JS... And voilà, our job here is done! WATERFALL WATERFALL WATERFALL

Slide 44

Slide 44 text

Er... guys... WATERFALL WATERFALL WATERFALL

Slide 45

Slide 45 text

FAIL fail Fail

Slide 46

Slide 46 text

responsive responsive Responsive

Slide 47

Slide 47 text

ten tips ten tips ten tips fourth act

Slide 48

Slide 48 text

1. Communication Between the whole team, during the whole project.

Slide 49

Slide 49 text

2. Design & dev, together A lot of decissions have to be taken along the way.

Slide 50

Slide 50 text

3. Micro-deliveries Client takes part actively and makes decisions.

Slide 51

Slide 51 text

4. Content ﬁrst Make an inventory of the content and ﬁnd its limitations.

Slide 52

Slide 52 text

5. Find the critical points Navigation, images, ads, information hierarchy…

Slide 53

Slide 53 text

6. Mobile ﬁrst The small screen is the ﬁrst limit.

Slide 54

Slide 54 text

7. Reference sketches Make basic sketches to help with the hierarchy of the content.

Slide 55

Slide 55 text

8. Prototype fast The sooner you start coding your HTML, the better.

Slide 56

Slide 56 text

9. Design in the browser Make design decisions as you see the result on the browser.

Slide 57

Slide 57 text

10. All screens at once When developing, always think about all screen sizes.

Slide 58

Slide 58 text

TO RECAP TO RECAP TO RECAP

Slide 59

Slide 59 text

TO RECAP TO RECAP TO RECAP you can’t control the web

Slide 60

Slide 60 text

TO RECAP TO RECAP TO RECAP you can’t control the web RWD is a viable solution

Slide 61

Slide 61 text

TO RECAP TO RECAP TO RECAP you can’t control the web RWD is a viable solution if we change our mentality

Slide 62

Slide 62 text

thanks! thanks! thanks! Javier Usobiaga · http://Swwweet.com · @htmlboy