responsive web design workshop
DESCRIPTION
An introduction to responsive web design, with lots of examples, tools and frameworks. My deck from a Responsive Web Design Workshop which included two walkthroughs on responsive web designs (not included in the deck because, well, you had to be there!) http://mulley.ie/blog/2013/05/responsive-web-design-training-course/TRANSCRIPT
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Workshop:Responsive Web Design
Stewart Curry
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Who isThis Guy?
Web Designer for 15 years or soTable-based layouts & spacer gifsCSS changed all thatRWD is how the web was meant to bewoop.ie - iteration, modules, themes, templates
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
960px
so long
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
!" # $
% & ' ()
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@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
@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 flexible, but more adaptive to the media that renders them / ETHAN MARCOTTE
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://alistapart.com/article/responsive-web-design
@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.
@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...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Advantages
• Easier to Manageno mobile version, faster to update, single URL for Google, less to manage
• One site, many devices
• Respects your visitorsThe best experience for their device
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Key Components
• Fluid, proportion-based grids% widths and em units, not fixed pixels
• Flexible imageswidth/height not fixed
• CSS3 Media Queries@media rule
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
New Thinking
• Work on everythingDesign for many sizes at once
• Clean designreduce clutter, essential content only
• Design from the content outLet content decide breakpoints
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
New Thinking
• Design is how it worksNot how it looks
• Less Graphic filesCSS gradients, font icons
• Keep learningResponsive images? Polyfills?
@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!.“
”
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Key Components
• Fluid, proportion-based grids% widths and em units, not fixed pixels
• Flexible imageswidth/height not fixed
• CSS3 Media Queries@media rule
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid GridsScales to the width of the browser / device
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid Grids
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid Grids
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid Grids
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid Grids .row { padding-left: 2%; }
.col { float: left; margin:0 2% 0 0; }
.col:last-child { margin: 0; }
.span-1 { width: 23%; }
.span-2 { width: 48%; }
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Flexible ImagesScales to the width of the browser / device
@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.
@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.
@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.
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Flexible Images img { max-width: 100%;}
< img src="kitten.jpg" />
<!-- [if lte IE 6]>
img { width: 100%;} + AlphaImageLoader
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Media QueriesSpecific styles for certain sizes and ranges
@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" >
@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 )
@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 )
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Media Queries
@media screen and ( min-width: 500px ) and ( max-width: 800px ) {
/* CSS declarations */
}
@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)
@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
@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
@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
@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
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Patterns
Layoutshttp://www.lukew.com/!/entry.asp?1514
Luke Wroblewski
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Mostly Fluid
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Column Drop
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Layout Shifter
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Off Canvas
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Patterns
Navigationhttp://bradfrost.github.io/this-is-responsive/patterns.html
Brad Frost
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Toggle Navigation
Home About Location Services Contact Us
HomeAboutLocationServicesContact Us
Menu. Menu.
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
<select> Navigation
Home About Location Services Contact Us
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Footer Navigation
Home About Location Services Contact Us Menu.
HomeAboutLocationServicesContact Us
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Stacked Top Links Navigation
Home About Location Services Contact Us HomeAboutLocationServicesContact Us
@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 HomeAboutLocationServicesContact 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.
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Priority+ Navigation
Home About Location Services Contact Us Home Location More
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Priority+ Navigation
Home About ▼ Location ▼ Services ▼ Contact Us
Service 1Service 2Service 3
Home
About +
Location +
Services -
Service 1Service 2Service 3
Contact Us
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Patterns
Order Shifthttp://bradfrost.github.io/this-is-responsive/patterns.html
Brad Frost
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Source Order (table display)
Home About Location Services Contact Us
HomeAboutLocationServicesContact 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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Patterns
Order Shifthttp://www.jordanm.co.uk/lab/contentchoreography
Jordan Moore
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Flexbox
#logo #menu
#content
#leftnav
#footer
12
34
5
#logo
#menu
#content
#leftnav
#footer
1
2
3
4
5
1
2
3
4
5
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Editorial
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.bostonglobe.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.time.com/time/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.vogue.co.uk
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.esquire.co.uk
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.smashingmagazine.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://sportsbant.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://thegreatdiscontent.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Commerce
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://skinnyties.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://us.illyissimo.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Corporate
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://riothq.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.microsoft.com/en-us/default.aspx
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://worldwildlife.org
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://disney.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Travel/Tourism
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://niarchive.org/trails/plantation-rewriting-the-story/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://beta.tfl.gov.uk/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.flytodublin.com/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Government
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
https://www.gov.uk
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.manchester.gov.uk
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://mediaqueri.esfor more inspiration
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Example Responsive Restaurant Website
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
What about...?
Older Browsers
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
IE Only Stylesheet<!--[if lt IE 9]>< link rel="stylesheet" media="screen" href="ie.css" >
<![endif]-->
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Conditional Classes<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]>
<!--> <html class="">
<!--<![endif]-->
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Detect Featureshttp://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.
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Shims, Shivs & Polyfills
HTML5 Shimhttps://code.google.com/p/html5shim/
CSS3 Media Queries Shimhttps://code.google.com/p/css3-mediaqueries-js/
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
+ html5 shiv + ie.css
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
What about...?
An existing design
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
target ÷ context = result
required font size
container’s font size
desired font size
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Set base sizebody { font-size : 100%; }
Base font size: 16px;
1em = 16px
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
24 ÷ 16 = 1.5
required font size
(em)
container’s font size
(px)
desired font size
(px)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Approaches
• Mobile Firstand add styles and breakpoints
• Adaptive Web Designpredefined screensizes
• Multiple Gridsdi!erent grids for di!erent breakpoints(gridsetapp for example)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Approaches
• Small is SpecialUnique case for <480px (ish)
• Device Detectionwidths, assumptions, scripts, resolutions
• Frameworkspre-built grids and modules
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Start with the small screen first, then expand until it looks like shit.
TIME FOR A BREAKPOINT!
“”
@stephenhay
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Working with ImagesSome things to consider
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Art Direction
@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/[email protected]') no-repeat top left; background-size: 200px 200px; }}
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Multiple Images• Clown Car Technique
(svg file, swap images as backgrounds)
• Picture Polyfillhttps://github.com/scottjehl/picturefill
• 8 guidelines and 1 rulehttp://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://goldengridsystem.com/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://goldilocksapproach.com/demo/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://responsive.gs/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://gumbyframework.com/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://foundation.zurb.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://twitter.github.io/bootstrap/
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
https://gridsetapp.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://typecast.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://typecast.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://sass-lang.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://mattkersley.com/responsive/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://responsive.is/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://ami.responsivedesign.is/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://lab.maltewassermann.com/viewport-resizer/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://html.adobe.com/edge/reflow/
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Mockups?
• Time consumingtoo many variations
• Untestedget on devices sooner rather than later
• Waterfallbe agile!
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
“Mood boards
When trying to convey a design idea, moods, feelings and flu!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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Mood boards
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Mood boards
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
www.evernote.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
www.realmacsoftware.com/littlesnapper/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
“Style tiles
An interior designer doesn't design three di!erent rooms for a client at the first kick-o! meeting, so why do Web designers design three di!erent webpage mockups?
@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.
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Style tiles
@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
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Prototype• Download Zurb or Bootstrap• Test & find out what doesn’t work
• Make a Wireframe• Make a PSD• Make HTML pages• Integrate• Test & find out what doesn’t work
or
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
SummaryTake it slowly
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Reading List
http://www.abookapart.com/products/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Reading List
http://www.fivesimplesteps.com/
@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!
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
if you need me... @irishstu