Tweet

Tweet

Slide 1

Slide 1 text

Responsive Web Design Marko Dugonjić Creative Nights

Slide 2

Slide 2 text

@markodugonjic

Slide 3

Slide 3 text

Nice to meet you!

Slide 4

Slide 4 text

begginer or The Old Grump?

Slide 5

Slide 5 text

Deﬁnition of RWD

Slide 6

Slide 6 text

Ethan Marcotte ﬂexible layout ﬂexible images media queries

Slide 7

Slide 7 text

Brief books for people who make websites No. 4 !"#$%'(" )"*+,"#'-& Ethan Marcotte Jeremy Keith

Slide 8

Slide 8 text

Responsive Web Design is web design, done right. — Andy Clarke aka Malarkey

Slide 9

Slide 9 text

Examples

Slide 10

Slide 10 text

http://bostonglobe.com/

Slide 11

Slide 11 text

http://smashingmagazine.com/

Slide 12

Slide 12 text

http://foodsense.is/

Slide 13

Slide 13 text

http://iso.org/

Slide 14

Slide 14 text

http://maratz.com/

Slide 15

Slide 15 text

The latest eZ Publish

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

The switch

Slide 21

Slide 21 text

a picture of a web site (way back then)

Slide 22

Slide 22 text

the paradox of undeliverable promise

Slide 23

Slide 23 text

interface elements instead of full layout

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

design system instead of the ﬁnal state

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

designing in a browser is CSS3 enough?

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Mobile First

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

(probably) last month

Slide 36

Slide 36 text

Mobile First Content

Slide 37

Slide 37 text

http://bit.ly/QWNTkA

Slide 38

Slide 38 text

page diagrams HIGH PRIORITY ITEMS LOW PRIORITY ITEMS 1 2 3 ARTICLE Article elements (by priority): - title - hero image - intro - body text - inline images - pull quotes Pull quotes should be used as the reading rest areas, not promotional tool, double-check the font-size on small devices, so it always fit in the screen. “SMART” POOL Pools offer users a set of pre-set answers, as well as option to enter their own answer. We are using the entered value to query the database and offer related articles. COMMENTS The article page features the last five comments, with a link to full comments list page. Commenting is allowed for logged-in members only. Comment form should have two states: 1. “log in to participate” 2. text area + submit button Comment elements (by priority): - comment text - “reply to this comment” - avatar - author’s nickname - publish date RELATED ARTICLES Related articles are associated to the main article by tags. If no tag- related article is found, then use a list of category-related entries. Display 3 articles at most. Related article elements (by priority): - thumbnail - title - publish date

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Let’s build stuff! “the plan”

Slide 41

Slide 41 text

analyze design sketch elements HTML structure modular CSS @media CSS breakpoints ﬂexible layout

Slide 42

Slide 42 text

#1 Analyze design

Slide 43

Slide 43 text

look and feel instead of layout

Slide 44

Slide 44 text

typography color shape lines artwork

Slide 45

Slide 45 text

http://clearairchallenge.com/

Slide 46

Slide 46 text

http://www.dolectures.com/

Slide 47

Slide 47 text

http://lifeingreenville.com/

Slide 48

Slide 48 text

#2 Sketch elements

Slide 49

Slide 49 text

essential elements are always visible but ﬂexible

Slide 50

Slide 50 text

headlines body text images + multimedia data tables primary forms

Slide 51

Slide 51 text

supplementary elements a/ fully visible state b/ contracted state

Slide 52

Slide 52 text

branding (logo) (multi-level) navigation search pagination

Slide 53

Slide 53 text

#3 HTML structure

Slide 54

Slide 54 text

header nav section article aside footer

Slide 55

Slide 55 text

branding main navigation local navigation search primary content secondary content footer

Slide 56

Slide 56 text

Slide 57

Slide 57 text

component markup enclose each component and give it a unique class name

Slide 58

Slide 58 text

Article title

Article content

Comment
Comment
Comment

Slide 59

Slide 59 text

Slide 60

Slide 60 text

#4 Scalable and Modular CSS

Slide 61

Slide 61 text

typography hierarchy + vertical spacing

Slide 62

Slide 62 text

* { margin: 0; padding: 0; }

Slide 63

Slide 63 text

rem = root em

Slide 64

Slide 64 text

html { font-size: 62.5%; } body { font-size: 1.4rem; } /* = 14px */ h1 { font-size: 2.4rem; } /* = 24px */

Slide 65

Slide 65 text

p, ul, ol { line-height: 1.5em; margin: 0 0 1.5em; }

Slide 66

Slide 66 text

/* CSS */ img, embed, object, video { max-width: 100%; height: auto; } /* IE7 and above */ /* JavaScript concept! */ if (parent.offsetWidth > 440) { img.src = 'bigger-image.jpg'; }

Slide 67

Slide 67 text

#5 @media

Slide 68

Slide 68 text

going up with min-width

Slide 69

Slide 69 text

all browsers CSS @media only screen and (min-width: 500px) @media only screen and (min-width: 800px)

Slide 70

Slide 70 text

...

Slide 71

Slide 71 text

#6 Breakpoints

Slide 72

Slide 72 text

reading distances and line-length instead of device resolutions

Slide 73

Slide 73 text

Breakpoints should not be dictated by devices, but by content. Let the content decide when to expand and then adjust your designs. — Jeremy Keith http://www.lukew.com/ff/entry.asp?1393

Slide 74

Slide 74 text

0,26mm 1,3mm 71cm 350cm

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

create a set of typographic rules for each reading distance

Slide 77

Slide 77 text

@media (breakpoint) { /* reading distance rules */ /* layout rules (in a minute) */ }

Slide 78

Slide 78 text

vertical ﬂipping

Slide 79

Slide 79 text

NAVIGATION NAVIGATION

Slide 80

Slide 80 text

.content { display: table; border-collapse: collapse; } #main-nav { display: table-header-group; } /* Hat tip to Andy Clarke */

Slide 81

Slide 81 text

#7 Flexible layout “columns management”

Slide 82

Slide 82 text

maintain proportions with percentages

Slide 83

Slide 83 text

column / wrapper = percentage

Slide 84

Slide 84 text

column / wrapper = percentage COLUMN WRAPPER

Slide 85

Slide 85 text

300px / 1000px = 30%

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

483px 300px

Slide 88

Slide 88 text

483px 300px IAB

Slide 89

Slide 89 text

483px / 783px = 61,685823% 300px / 783px = 38,314176%

Slide 90

Slide 90 text

box-sizing: border-box (not supported in IE7)

Slide 91

Slide 91 text

WIDTH PADDING BORDER WIDTH (box-sizing: border-box)

Slide 92

Slide 92 text

emulate box-sizing with CSS expressions for IE7 http://maratz.com/blog/?p=2046

Slide 93

Slide 93 text

#primary, #secondary { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 2rem; } #primary { width: 61.685823%; } #secondary { width: 38.314176%; }

Slide 94

Slide 94 text

http://bit.ly/P4xZTF Faux Columns

Slide 95

Slide 95 text

.content { background-image: url(columns.png); background-repeat: repeat-y; background-size: 100% auto; }

Slide 96

Slide 96 text

Viewport-percentage length vw, vh, vmin, vmax The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the viewport is changed, they are scaled accordingly.

Slide 97

Slide 97 text

:root { font-size: calc(100vw / 40); } h1 { font-size: 2rem; } p { font-size: 1rem; }

Slide 98

Slide 98 text

Viewport Sized Typography http://bit.ly/MABc8Q

Slide 99

Slide 99 text

Close-up

Slide 100

Slide 100 text

Tools and resources http://responsive.is/ http://responsivepx.com/ https://vimeo.com/34662135 http://galleria.io/

Slide 101

Slide 101 text

Q & A

Slide 102

Slide 102 text

Thank you! creativenights.com @markodugonjic