(responsive) webdesign - Speaker Deck

Slide 1

Slide 1 text

Hello, I’m Simon

Slide 2

Slide 2 text

I ❤ Making websites

Slide 3

Slide 3 text

I like to do the front-end of my own designs. Especially when it comes to responsive websites. Because so many design decisions have to be made in the browser.

Slide 4

Slide 4 text

Webdesigner Netlash-bSeen @simoncoudeville s.imon.be

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

(responsive) webdesign

Slide 10

Slide 10 text

Andy Clarke http://stuffandnonsense.co.uk/ Web design is responsive design. Responsive Web Design is web design, done right.

Slide 11

Slide 11 text

In case you haven’t noticed, mobile is growing! ‐

Slide 12

Slide 12 text

Sollutions • native app • web app • mobile version • responsive webdesign

Slide 13

Slide 13 text

It depends.

Slide 14

Slide 14 text

I ❤ apps

Slide 15

Slide 15 text

I ☠ mobile sites

Slide 16

Slide 16 text

I ☠ being redirected.

Slide 17

Slide 17 text

Via, tweets, Facebook, bookmark, RSS readers, ...

Slide 18

Slide 18 text

http://cnet.co/A3PWiW The problem is that this redirect is so stupid that rather than ﬁgure out what you wanted to see, it just puts you at the mobile site's home page and thinks it's doing you a favor. At that point, whether you coded your site in native or HTML5 has no bearing. I can't see what I wanted to see.

Slide 19

Slide 19 text

And what if a user actually sees your regular site on a mobile device?

Slide 20

Slide 20 text

Please don’t click here to go to the full site.

Slide 21

Slide 21 text

↺ The other way around.

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

99 viewports, iphone’s just 1

Slide 25

Slide 25 text

Mobile is not iphone! • Smartphones • feature phones • tablets • nokia, Blackberry, Android, Symbian, ...

Slide 26

Slide 26 text

Ethan Marcotte Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display.

Slide 27

Slide 27 text

It doesn't matter whether you have an app or a mobile version. If you have a website, users should be abble to access it through any device. So optimize it.

Slide 28

Slide 28 text

Think responsively.

Slide 29

Slide 29 text

3. Same URL 2. Same content 1. Same website

Slide 30

Slide 30 text

3. Same URL 2. Same content 1. Same website

Slide 31

Slide 31 text

3. Same URL’s 2. Same content 1. Same website

Slide 32

Slide 32 text

2. different functionalities 1. different layouts

Slide 33

Slide 33 text

2. different functionalities 1. different layouts

Slide 34

Slide 34 text

What is it not? • Hiding content • display: none

Slide 35

Slide 35 text

David (TheLeggett) Leggett http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/ The most reasonable case for omitting objects from a mobile site is when the object wasn’t essential to the desktop site in the ﬁrst place.

Slide 36

Slide 36 text

The new road To enlightment.

Slide 37

Slide 37 text

how to start? (working draft)

Slide 38

Slide 38 text

1. Online strategy 2. Information architecture 3. Design 4. Front-end design 5. Development Our proces

Slide 39

Slide 39 text

♛ Content is king

Slide 40

Slide 40 text

IA • Gather content • organization of content

Slide 41

Slide 41 text

Rethink • Header • Navigation • Search bar • Call to actions • Interactions

Slide 42

Slide 42 text

Some tips from our IA’s • Avoid subnavigation • Overview pages • Eliminate all unnecassary stuff • Counts as much for desktop

Slide 43

Slide 43 text

✒ Design

Slide 44

Slide 44 text

Designing in the browser

Slide 45

Slide 45 text

3. Content organisation before design 2. A static image doesn’t feel like a real page 1. The browser is our canvas

Slide 46

Slide 46 text

3. Content organisation before design 2. A static image doesn’t feel like a real page 1. The browser is our canvas

Slide 47

Slide 47 text

3. Content organisation before design 2. A static image doesn’t feel like a real page 1. The browser is our canvas

Slide 48

Slide 48 text

Designing in photoshop

Slide 49

Slide 49 text

3. Try things not possible with only 2. No limitations 1. Photoshop as creative outlet

Slide 50

Slide 50 text

3. Try things not possible with only 2. No limitations 1. Photoshop as creative outlet

Slide 51

Slide 51 text

3. Try things not possible with only css3 2. No limitations 1. Photoshop as creative outlet

Slide 52

Slide 52 text

Establish the global visual design direction

Slide 53

Slide 53 text

3. The designer ≠ front-end dev 2. Something to fall back on 1. Starting point

Slide 54

Slide 54 text

3. The designer ≠ front-end dev 2. Something to fall back on 1. Starting point

Slide 55

Slide 55 text

3. The designer ≠ front-end dev 2. Something to fall back on 1. Starting point

Slide 56

Slide 56 text

Designing proportions.

Slide 57

Slide 57 text

3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!

Slide 58

Slide 58 text

3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!

Slide 59

Slide 59 text

3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!

Slide 60

Slide 60 text

Width?

Slide 61

Slide 61 text

4. old principles of webdesign still stand 3. Dependent of number of modules 2. Dependent of the amount of content 1. Decide on a maximum width

Slide 62

Slide 62 text

4. old principles of webdesign still stand 3. Dependent of number of modules 2. Dependent of the amount of content 1. Decide on a maximum width

Slide 63

Slide 63 text

4. old principles of webdesign still stand 3. Dependent of number of modules 2. Dependent of the amount of content 1. Decide on a maximum width

Slide 64

Slide 64 text

4. old principles of webdesign still stand 3. Dependent of number of modules 2. Dependent of the amount of content 1. Decide on a maximum width

Slide 65

Slide 65 text

Grid!

Slide 66

Slide 66 text

3. Make your own grid 2. Forget 960 grid system 1. Solid grid helps establish proportions

Slide 67

Slide 67 text

3. Make your own grid 2. Forget 960 grid system 1. Solid grid helps establish proportion

Slide 68

Slide 68 text

3. Make your own grid 2. Forget 960 grid system 1. Solid grid helps establish

Slide 69

Slide 69 text

Modular grid extension modulargrid.org

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

New possiblities • Go beyond 1024 • Use a 75px margin • New layout possibilities for wider screens.

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Best practice

Slide 78

Slide 78 text

3. Design ﬂexible modules 2. Start with a solid grid 1. Deﬁne a maximum width

Slide 79

Slide 79 text

3. Design ﬂexible modules 2. Start with a solid grid 1. Deﬁne a maximum width

Slide 80

Slide 80 text

3. Design ﬂexible modules 2. Start with a solid grid 1. Deﬁne a maximum width

Slide 81

Slide 81 text

To the browser!

Slide 82

Slide 82 text

Ethan Marcotte alistapart.com Responsive webdesign consists of three components: a ﬂuid grid, ﬂuid media and media queries

Slide 83

Slide 83 text

Fluid vs ﬁxed Responsive vs adaptive

Slide 84

Slide 84 text

ﬂuid, responsive http://dropmark.com/

Slide 85

Slide 85 text

4. Harder to achieve (ﬂuid media) 3. Takes up all the available space 2. Maximum width deﬁned once 1. Page adapts to every possible resolution

Slide 86

Slide 86 text

4. Harder to achieve (ﬂuid media) 3. Takes up all the available space 2. Maximum width deﬁned once 1. Page adapts to every possible resolution

Slide 87

Slide 87 text

4. Harder to achieve (ﬂuid media) 3. Takes up all the available space 2. Maximum width deﬁned once 1. Page adapts to every possible

Slide 88

Slide 88 text

4. Harder to achieve (ﬂuid media) 3. Takes up all the available space 2. Maximum width deﬁned once 1. Page adapts to every possible

Slide 89

Slide 89 text

ﬁxed, adaptive http://mikedidthis-focus.tumblr.com/

Slide 90

Slide 90 text

3. Not optimizied for future screen sizes? 2. Easier to achieve. 1. Different layouts deﬁned in ﬁxed widths

Slide 91

Slide 91 text

3. Not optimizied for future screen sizes? 2. Easier to achieve. 1. Different layouts deﬁned in ﬁxed widths

Slide 92

Slide 92 text

3. Not optimizied for future screen sizes 2. Easier to achieve. 1. Different layouts deﬁned in ﬁxed widths

Slide 93

Slide 93 text

CSS3 media queries

Slide 94

Slide 94 text

Media queries • Check for certain conditions • Apply different styles • Usually width • Height, orientation, pixel-ratio, ... • Breakpoints

Slide 95

Slide 95 text

A breakpoint is the size (usually the width) at which the layout starts to look broken, at which point a new layout is applied.

Slide 96

Slide 96 text

Common breakpoints • 320px (first generation smartphones portrait) • 480px (first generation smartphones landsape) • 600px (iphone 4 portrait, kindle fire) • 768px (tablet portrait) • 960px (tablet landscape, old computers) • 1200px and up (modern computers, TV's, projectors)

Slide 97

Slide 97 text

Long live natural responsive web design breakpoints.

Slide 98

Slide 98 text

Mark Drummond http://marcdrummond.com/responsive-web-design/2011/12/29/default- breakpoints-are-dead Use awkwardness as your guideline, not ephemeral default device widths.

Slide 99

Slide 99 text

http://responsivepx.com/ http://www.youtube.com/watch? v=kYpENMubJKQ

Slide 100

Slide 100 text

Mobile first Basic CSS is defined before the first breakpoint.

Slide 101

Slide 101 text

Mobile ﬁrst • Typography • link colors • background colors • margins • ...

Slide 102

Slide 102 text

This way the simplest version is served ﬁrst so less capable devices still serve a usable readable website.

Slide 103

Slide 103 text

Progressive enhancement Enhancement to the presentation and behavior of the page.

Slide 104

Slide 104 text

This is my grid. There are many like it, but this one is mine. My grid is my best friend. It is my life. I must master it as I must master my life.

Slide 105

Slide 105 text

Fluid design formula: (target ÷ context) x 100 = result

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

1 kolom (55 ÷ 1260) x 100 = 4.3650794

Slide 108

Slide 108 text

margin (25 ÷ 1260) x 100 = 1.984127

Slide 109

Slide 109 text

3. left to right = top to bottom (in most cases) 2. hierarchy = HTML 1. ﬂexible modules

Slide 110

Slide 110 text

3. left to right = top to bottom (in most cases) 2. hierarchy = HTML structure 1. ﬂexible modules

Slide 111

Slide 111 text

3. left to right = top to bottom (in most cases) 2. hierarchy = HTML structure 1. ﬂexible modules