Responsive Web Design Workshop

Slide 1

Slide 1 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Workshop: Responsive Web Design Stewart Curry

Slide 2

Slide 2 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Who is This Guy? Web Designer for 15 years or so Table-based layouts & spacer gifs CSS changed all that RWD is how the web was meant to be woop.ie - iteration, modules, themes, templates

Slide 3

Slide 3 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 960px so long

Slide 4

Slide 4 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 5

Slide 5 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 6

Slide 6 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Caveat "[I do not] carry such information in my mind since it is readily available in books." Albert Einstein, when asked what the speed of sound was

Slide 7

Slide 7 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 8

Slide 8 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 9

Slide 9 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 10

Slide 10 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD

Slide 11

Slide 11 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Responsive web design We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more ﬂexible, but more adaptive to the media that renders them / ETHAN MARCOTTE

Slide 12

Slide 12 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://alistapart.com/article/responsive-web-design

Slide 13

Slide 13 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Definition Responsive web design means designing your website so that it responds to your users environment based on screen- size, platform and orientation.

Slide 14

Slide 14 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Definition It looks di erent and things jiggle around, scale, re-order, appear, and disappear so it works well in your browser size or whatever device you’re using to view it...

Slide 15

Slide 15 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Advantages • Easier to Manage no mobile version, faster to update, single URL for Google, less to manage • One site, many devices • Respects your visitors The best experience for their device

Slide 16

Slide 16 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Key Components • Fluid, proportion-based grids % widths and em units, not ﬁxed pixels • Flexible images width/height not ﬁxed • CSS3 Media Queries @media rule

Slide 17

Slide 17 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 New Thinking • Work on everything Design for many sizes at once • Clean design reduce clutter, essential content only • Design from the content out Let content decide breakpoints

Slide 18

Slide 18 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 New Thinking • Design is how it works Not how it looks • Less Graphic ﬁles CSS gradients, font icons • Keep learning Responsive images? Polyﬁlls?

Slide 19

Slide 19 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 *actually* from a non-linear, non-subjective viewpoint - it's more like a big ball of wibbly wobbly... time-y wimey... stu . “ ”

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids Scales to the width of the browser / device

Slide 23

Slide 23 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids

Slide 24

Slide 24 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids

Slide 25

Slide 25 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids

Slide 26

Slide 26 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids .row { padding-left: 2%; } .col { ﬂoat: left; margin:0 2% 0 0; } .col:last-child { margin: 0; } .span-1 { width: 23%; } .span-2 { width: 48%; }

Slide 27

Slide 27 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexible Images Scales to the width of the browser / device

Slide 28

Slide 28 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexible Images Blue bottle food truck street art, direct trade cosby sweater ethical hoodie hashtag american apparel. Wayfarers selvage pour-over swag, etsy next level meh Austin polaroid beard wolf irony squid PBR. DIY synth post-ironic 8-bit polaroid typewriter, vice cliche fixie pug retro direct trade lomo. Tonx fap wes anderson, cred pinterest street art retro fashion axe.

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexible Images img { max-width: 100%;} < img src="kitten.jpg" />

Slide 32

Slide 32 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries Speciﬁc styles for certain sizes and ranges

Slide 33

Slide 33 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries External < link rel="stylesheet" media="screen and ( max-width: 500px )" href="mobile.css" > < link rel="stylesheet" media="screen and ( max-width: 800px )" href="tablet.css" > < link rel="stylesheet" media="screen and ( min-width: 1000px )" href="desktop.css" >

Slide 34

Slide 34 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries Same file @media screen and ( max-width: 500px ) @media screen and ( min-width: 800px ) @media screen and ( min-width: 500px ) and ( max-width: 800px )

Slide 35

Slide 35 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries Devices @media ( -webkit-min-device-pixel-ratio: 2 ) , ( min-resolution: 192dpi ) @media only screen and ( min-device-width: 768px ) and ( max-device-width: 1024px ) @media only screen and ( min-device-width: 768px ) and ( max-device-width: 1024px ) and ( orientation: landscape )

Slide 36

Slide 36 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { /* CSS declarations */ }

Slide 37

Slide 37 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { /* CSS declarations */ } This is for screen only (desktops, smartphones, not print)

Slide 38

Slide 38 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { /* CSS declarations */ } The width of the window must be AT LEAST 500px

Slide 39

Slide 39 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { /* CSS declarations */ } The width of the window must ALSO be NO MORE THAN 800px

Slide 40

Slide 40 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { img { border: 5px solid # f; } } Images will have a white border when the window is from 500px to 800px wide

Slide 41

Slide 41 text

Slide 42

Slide 42 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Design Pattern a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design

Slide 43

Slide 43 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Patterns Layouts http://www.lukew.com/ /entry.asp?1514 Luke Wroblewski

Slide 44

Slide 44 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Mostly Fluid

Slide 45

Slide 45 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Column Drop

Slide 46

Slide 46 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Layout Shifter

Slide 47

Slide 47 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Off Canvas

Slide 48

Slide 48 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Patterns Navigation http://bradfrost.github.io/this-is-responsive/ patterns.html Brad Frost

Slide 49

Slide 49 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Toggle Navigation Home About Location Services Contact Us Home About Location Services Contact Us Menu. Menu.

Slide 50

Slide 50 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Navigation Home About Location Services Contact Us

Slide 51

Slide 51 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Footer Navigation Home About Location Services Contact Us Menu. Home About Location Services Contact Us

Slide 52

Slide 52 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Stacked Top Links Navigation Home About Location Services Contact Us Home About Location Services Contact Us

Slide 53

Slide 53 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Left Nav Flyout Home About Location Services Contact Us Menu Echo Park chambray 90's fap cardigan keffiyeh, trust fund retro Truffaut next level. Lomo forage pop-up Neutra, fashion axe sustainable keffiyeh helvetica DIY. Fashion axe Neutra craft beer four loko helvetica. American apparel sustainable kale chips Etsy, photo booth VHS shabby chic. Home About Location Services Contact Us Home About Location Services Contact Us Menu Echo Park chambray 90's fap cardigan keffiyeh, trust fund retro Truffaut next level. Lomo forage pop-up Neutra, fashion axe sustainable keffiyeh helvetica DIY. Fashion axe Neutra craft beer four loko helvetica. American apparel sustainable kale chips Etsy, photo booth VHS shabby chic.

Slide 54

Slide 54 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Priority+ Navigation Home About Location Services Contact Us Home Location More

Slide 55

Slide 55 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Priority+ Navigation Home About ▼ Location ▼ Services ▼ Contact Us Service 1 Service 2 Service 3 Home About + Location + Services - Service 1 Service 2 Service 3 Contact Us

Slide 56

Slide 56 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Patterns Order Shift http://bradfrost.github.io/this-is-responsive/ patterns.html Brad Frost

Slide 57

Slide 57 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Source Order (table display) Home About Location Services Contact Us Home About Location Services Contact Us Lorem ipsum dolor sit amet Consectetur adipiscing elit. Sed vel vehicula justo, et vestibulum erat. Maecenas sagittis volutpat molestie. Integer tortor mi, egestas et tristique quis, tempus nec diam Lorem ipsum dolor sit amet Consectetur adipiscing elit. Sed vel vehicula justo, et vestibulum erat. Maecenas sagittis volutpat molestie. Integer tortor mi, egestas et 2nd in source 1st in source 2nd in source 1st in source

Slide 58

Slide 58 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Patterns Order Shift http://www.jordanm.co.uk/lab/ contentchoreography Jordan Moore

Slide 59

Slide 59 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexbox #logo #menu #content #leftnav #footer 1 2 3 4 5 #logo #menu #content #leftnav #footer 1 2 3 4 5 1 2 3 4 5

Slide 60

Slide 60 text

Slide 61

Slide 61 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Editorial

Slide 62

Slide 62 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.bostonglobe.com

Slide 63

Slide 63 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.time.com/time/

Slide 64

Slide 64 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.vogue.co.uk

Slide 65

Slide 65 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.esquire.co.uk

Slide 66

Slide 66 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.smashingmagazine.com

Slide 67

Slide 67 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://sportsbant.com

Slide 68

Slide 68 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://thegreatdiscontent.com

Slide 69

Slide 69 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Commerce

Slide 70

Slide 70 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://skinnyties.com

Slide 71

Slide 71 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://us.illyissimo.com

Slide 72

Slide 72 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Corporate

Slide 73

Slide 73 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://riothq.com

Slide 74

Slide 74 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.microsoft.com/en-us/default.aspx

Slide 75

Slide 75 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://worldwildlife.org

Slide 76

Slide 76 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://disney.com

Slide 77

Slide 77 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Travel/Tourism

Slide 78

Slide 78 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://niarchive.org/trails/plantation-rewriting-the-story/

Slide 79

Slide 79 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://beta.tﬂ.gov.uk/

Slide 80

Slide 80 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.ﬂytodublin.com/

Slide 81

Slide 81 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Government

Slide 82

Slide 82 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 https://www.gov.uk

Slide 83

Slide 83 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.manchester.gov.uk

Slide 84

Slide 84 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.fsai.ie

Slide 85

Slide 85 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://mediaqueri.es for more inspiration

Slide 86

Slide 86 text

Slide 87

Slide 87 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Example Responsive Restaurant Website

Slide 88

Slide 88 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 89

Slide 89 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 90

Slide 90 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 What about...? Older Browsers

Slide 91

Slide 91 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 IE Only Stylesheet

Slide 92

Slide 92 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Conditional Classes

Slide 93

Slide 93 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Detect Features http://modernizr.com/ Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications... ...what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Slide 94

Slide 94 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Shims, Shivs & Polyfills HTML5 Shim https://code.google.com/p/html5shim/ CSS3 Media Queries Shim https://code.google.com/p/css3- mediaqueries-js/ https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyﬁlls

Slide 95

Slide 95 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 96

Slide 96 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 + html5 shiv + ie.css

Slide 97

Slide 97 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 98

Slide 98 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 What about...? An existing design

Slide 99

Slide 99 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 target ÷ context = result required font size container’s font size desired font size

Slide 100

Slide 100 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Set base size body { font-size : 100%; } Base font size: 16px; 1em = 16px http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Slide 101

Slide 101 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 24 ÷ 16 = 1.5 required font size (em) container’s font size (px) desired font size (px)

Slide 102

Slide 102 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 103

Slide 103 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 104

Slide 104 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 105

Slide 105 text

Slide 106

Slide 106 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Approaches • Mobile First and add styles and breakpoints • Adaptive Web Design predeﬁned screensizes • Multiple Grids di erent grids for di erent breakpoints (gridsetapp for example)

Slide 107

Slide 107 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Approaches • Small is Special Unique case for <480px (ish) • Device Detection widths, assumptions, scripts, resolutions • Frameworks pre-built grids and modules

Slide 108

Slide 108 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Start with the small screen ﬁrst, then expand until it looks like shit. TIME FOR A BREAKPOINT! “ ” @stephenhay

Slide 109

Slide 109 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Working with Images Some things to consider

Slide 110

Slide 110 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Art Direction

Slide 111

Slide 111 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Retina Backgrounds .box { background: url ('images/box-bg.png') no-repeat top left; } @media screen and ( -webkit-min-device-pixel-ratio: 2 ) , ( min- resolution: 192dpi ) { .box { background: url ('images/box-bg@2x.png') no-repeat top left; background-size: 200px 200px; } }

Slide 112

Slide 112 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Multiple Images • Clown Car Technique (svg file, swap images as backgrounds) • Picture Polyfill https://github.com/scottjehl/picturefill • 8 guidelines and 1 rule http://blog.cloudfour.com/8-guidelines- and-1-rule-for-responsive-images/

Slide 113

Slide 113 text

Slide 114

Slide 114 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://goldengridsystem.com/

Slide 115

Slide 115 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://goldilocksapproach.com/demo/

Slide 116

Slide 116 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://responsive.gs/

Slide 117

Slide 117 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://gumbyframework.com/

Slide 118

Slide 118 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://foundation.zurb.com

Slide 119

Slide 119 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://twitter.github.io/bootstrap/

Slide 120

Slide 120 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://purecss.io/

Slide 121

Slide 121 text

Slide 122

Slide 122 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 https://gridsetapp.com

Slide 123

Slide 123 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Slide 124

Slide 124 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://typecast.com

Slide 125

Slide 125 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://typecast.com

Slide 126

Slide 126 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://sass-lang.com

Slide 127

Slide 127 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://mattkersley.com/responsive/

Slide 128

Slide 128 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://responsive.is/

Slide 129

Slide 129 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://ami.responsivedesign.is/

Slide 130

Slide 130 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://lab.maltewassermann.com/viewport-resizer/

Slide 131

Slide 131 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://html.adobe.com/edge/reﬂow/

Slide 132

Slide 132 text

Slide 133

Slide 133 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Mockups? • Time consuming too many variations • Untested get on devices sooner rather than later • Waterfall be agile!

Slide 134

Slide 134 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Mood boards When trying to convey a design idea, moods, feelings and ﬂu y stu like that are hard to communicate ... designers will often use a mood board: a collection of textures, images and text related to a design theme as a reference point. http://www.creativebloq.com/graphic-design/mood-boards-812470

Slide 135

Slide 135 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Mood boards

Slide 136

Slide 136 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Mood boards

Slide 137

Slide 137 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 www.evernote.com

Slide 138

Slide 138 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 gimmebar.com

Slide 139

Slide 139 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 www.realmacsoftware.com/littlesnapper/

Slide 140

Slide 140 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Style tiles An interior designer doesn't design three di erent rooms for a client at the ﬁrst kick-o meeting, so why do Web designers design three di erent webpage mockups?

Slide 141

Slide 141 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Style tiles Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Slide 142

Slide 142 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://styletil.es

Slide 143

Slide 143 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Style tiles

Slide 144

Slide 144 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Prototype Build an interface everyone can start looking at, using, clicking through, and "feeling" before you start worrying about back-end code. Get yourself in front of the customer experience as much as possible. / JASON FRIED

Slide 145

Slide 145 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Prototype • Download Zurb or Bootstrap • Test & ﬁnd out what doesn’t work • Make a Wireframe • Make a PSD • Make HTML pages • Integrate • Test & ﬁnd out what doesn’t work or

Slide 146

Slide 146 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Summary Take it slowly

Slide 147

Slide 147 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Reading List http://www.abookapart.com/products/

Slide 148

Slide 148 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Reading List http://www.ﬁvesimplesteps.com/

Slide 149

Slide 149 text

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Dip your toes • Design in the browser • Start with mobile • Add a breakpoint around 500px • Add a breakpoint around 800px • Keep it simple!