Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Stephen Hay
Stephen HaySenior UX Design Lead at Catawiki
RESPONSIVE DESIGN

WORKFLOW  STEPHEN HAY . BDCONF ORLANDO 20120415
SOME ASPECTS OF OUR WORK ARE DECIDEDLY


UNSEXY(AND WORKFLOW IS ONE OF THEM)
Technology is advancing constantly.
We’re starting to design for multiple platforms.
We’re learning & using new tech all the time.
Web design workflow generally remains unchanged.
Technology is advancing constantly.
We’re starting to design for multiple platforms.
We’re learning & using new tech all the time.
Web design workflow generally remains unchanged.


THIS IS *^%$#@! WEIRD.
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
OUR CLIENT WANTS SOME CHANGES MADE.
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
The answer is to design from the bottom up,
which means
The answer is to design from the bottom up,
which means


FROM THE CONTENT OUT.
Content and form are lovers,


THEIR LOVE-CHILD IS DESIGN
MUCH DESIGN DECISIONMAKING IS BASED ON


TECH   THIS IS A BAD THING.
ANDY CLARKE
               ELLIOT JAY STOCKS
               PAUL BOAG
               RACHEL ANDREW
               LEA VEROU
               DAVID STOREY
               CHRIS HEILMANN
               AARRON WALTER
Absolutely     ARAL BALKAN
shameless,     BEN SCHWARZ
yet tasteful   DMITRY FADEYEV
book plug      MARC EDWARDS
               AND LITTLE OL’ ME
“One technique I've used for
 years is to 'design in text'… not
 necessarily describing
 everything in textual form[…]”

                                 — BRYAN RIEGER
“(which usually results in docs
 sounding oddly creepy, '–it puts
 the lotion on it's skin!')[…]”

                                  — BRYAN RIEGER
“essentially what is the message
 that needs to be communicated
 if I was ONLY able to provide
 the user with unstyled HTML?”

                               — BRYAN RIEGER
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:


MOBILE
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:


MOBILE
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:


MOBILE
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
                                                        OR DO WE?
SMABLET
i SMABLET
WORKFLOW


NOW
INFORMATION
ARCHITECTURE



flickr.com/photos/cannedtuna/4853380320/
INTERACTION
                                                 DESIGN



http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
LOOK, MA!




                                                 INTERACTION
                                                 DESIGN



http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
DESIGN




flickr.com/photos/zieak/2905918515/
DESIGN
PHOTOSHOP, RINSE, REPEAT




flickr.com/photos/zieak/2905918515/
DESIGN IS NOT


DECORATION
AND DECORATION IS NOT DESIGN
RESPONSIVE
       WORKFLOW
RESPONSIVE
WORKFLOW:
10 STEPS
1.    Content inventory
             2.    Content reference wireframes
             3.    Design in text (structured content)
             4.    Linear design
             5.    Breakpoint graph
             6.    Design for various breakpoints
             7.    HTML design prototype
RESPONSIVE   8.    Present prototype screenshots
WORKFLOW:    9.    Present prototype after revision
10 STEPS     10.   Document for production
1. CONTENT INVENTORY
1. CONTENT INVENTORY
1. Site navigation
2. Logo
3. Date & location
4. Social media links
5. Registration status/link
6. Introductory text
7. Speakers (with photo)
8. Countdown
9. Sponsors
10. Secondary navigation
CONTENT REFERENCE WIREFRAMES




        http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
CONTENT REFERENCE WIREFRAMES
CONTENT REFERENCE WIREFRAMES
                              1

                       2, 3        4

                              5

                              6




                              7




                              8



                              9



                              10
CONTENT REFERENCE WIREFRAMES
                                      1

                               2, 3        4

 1. Site navigation                   5

 2. Logo                              6


 3. Date & location
 4. Social media links
 5. Registration status/link          7


 6. Introductory text
 7. Speakers (with photo)
 8. Countdown                         8


 9. Sponsors                          9
 10. Secondary navigation
                                      10
3. DESIGNING
IN TEXT

ENVISIONING
STRUCTURED CONTENT
3. DESIGNING
    pandoc content.md -o content.html
                           IN TEXT

                                    ENVISIONING
                                    STRUCTURED CONTENT

http://johnmacfarlane.net/pandoc/
3. DESIGNING
IN TEXT

ENVISIONING
STRUCTURED CONTENT
3. DESIGNING
IN TEXT

ENVISIONING
STRUCTURED CONTENT
THE WORLD’S FIRST WEBSITE IS ALMOST


MOBILE-READY
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
OPERA BROWSER
OPERA MOBILE, SAMSUNG GALAXY TAB
The device landscape is constantly changing.
Capabilities are constantly changing.
Properly structured content is portable
to future platforms.
THE ZERO INTERFACE:


THINK, DONE.
ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,
SO CHOOSE WISELY.
4. LINEAR “DESIGN”
      THE BARE ESSENTIALS. START PLAYING AROUND A BIT.
5. BREAKPOINT GRAPHS
STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
5. BREAKPOINT GRAPHS
STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS




THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.
6. DESIGN FOR VARIOUS BREAKPOINTS




DON’T FORGET TO


SKETCH
7. IF WE’RE NOT DELIVERING DESIGNS IN


PHOTOSHOP,
WHAT DO WE DELIVER?
AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:
HOUSTON, WE HAVE A PROBLEM.
STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES
       CSS
STRUCTURED CONTENT

LINEAR DESIGN

CONTENT REFERENCE WIREFRAMES
       CSS




PROTOTYPE
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
VERSION CONTROL

PREPROCESSORS / HELPER SCRIPTS

FRAMEWORKS (BE CAREFUL, THOUGH)

HTML TEMPLATING, STATIC SITE GENERATORS

DEVELOPMENT APPROACHES (SMACSS, ETC.)
8 & 9. SOME PRESENTATION PSYCHOLOGY
8 & 9. SOME PRESENTATION PSYCHOLOGY




1. For the first presentation, use screenshots.
8 & 9. SOME PRESENTATION PSYCHOLOGY




1. For the first presentation, use screenshots.
2. See above.
10. AND WHAT DO WE GIVE TO THE


DEVELOPERS?
INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer
INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer
WHAT I USE: DEXY
http://www.dexy.it/
WHAT I USE: DEXY
http://www.dexy.it/
WHAT I USE: DEXY
http://www.dexy.it/
HOW DEXY WORKS
http://www.dexy.it/

                      MARKDOWN

            HTML                   CSS

                         HTML

                                 SYNTAX HIGHLIGHTING
YOU’VE JUST CREATED A


DESIGNGUIDE
AND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE
1.    Content inventory
             2.    Content reference wireframes
             3.    Design in text (structured content)
             4.    Linear design
             5.    Breakpoint graph
             6.    Design for various breakpoints
             7.    HTML design prototype
RESPONSIVE   8.    Present prototype screenshots
WORKFLOW:    9.    Present prototype after revision
10 STEPS     10.   Document for production
KEEP ADAPTING.


KEEPLEARNING.
THX
@STEPHENHAY

THE-HAYSTACK.COM




SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER
1 of 76

Recommended

Responsive Design Workflow by
Responsive Design WorkflowResponsive Design Workflow
Responsive Design WorkflowIntergen
3.7K views72 slides
The Server Side of Responsive Web Design by
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
13.7K views90 slides
Responsive Design Workflow: Mobilism 2012 by
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
86.8K views76 slides
Style Guides Are The New Photoshop (Fronteers 2012) by
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
44.5K views52 slides
Responsive Design Workflow: Webshaped 2012 by
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Stephen Hay
2.3K views81 slides
Style Guides Are The New Photoshop (Smashing Conference 2012) by
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Stephen Hay
3.9K views50 slides

More Related Content

What's hot

Object Oriented CSS by
Object Oriented CSSObject Oriented CSS
Object Oriented CSSNicole Sullivan
283.2K views64 slides
Atomic Design - An Event Apart San Diego by
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
58.4K views181 slides
The Death of Lorem Ipsum & Pixel Perfect Content by
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
13.1K views98 slides
Atomic Design - BDConf Nashville, 2013 by
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
50.7K views212 slides
Beyond Squishy: The Principles of Adaptive Design by
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
116.7K views249 slides
Atomic design by
Atomic designAtomic design
Atomic designBrad Frost
2M views173 slides

What's hot(20)

Atomic Design - An Event Apart San Diego by Brad Frost
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost58.4K views
The Death of Lorem Ipsum & Pixel Perfect Content by Dave Olsen
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
Dave Olsen13.1K views
Atomic Design - BDConf Nashville, 2013 by Brad Frost
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
Brad Frost50.7K views
Beyond Squishy: The Principles of Adaptive Design by Brad Frost
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Brad Frost116.7K views
Adventures in Atomic Design by Andrew Jones
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
Andrew Jones1.2K views
So…What Do I Make? (Dan Mall) by Future Insights
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
Future Insights7.3K views
MIMA 2014 - Changing your Responsive Design Workflow by easelsolutions
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
easelsolutions1.3K views
Style Guide Best Practices by Brad Frost
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
Brad Frost106.4K views
Atomic Design by Rey Mayson
Atomic Design Atomic Design
Atomic Design
Rey Mayson357 views
ACSS: Rethinking CSS Best Practices by Renato Iwashima
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Renato Iwashima3.1K views
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin... by Yandex
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex15.7K views
Web Standards And Protocols by Steven Cahill
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
Steven Cahill5.6K views
Topsy Turvy Design by Rich Quick
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
Rich Quick4.7K views
Responsive Web Design: Clever Tips and Techniques by Vitaly Friedman
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman135.4K views
RESS: An Evolution of Responsive Web Design by Dave Olsen
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
Dave Olsen25.3K views

Similar to Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Jennifer Robbins: ARTIFACT Conference Keynote by
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
3.9K views120 slides
RWD - Bootstrap by
RWD - BootstrapRWD - Bootstrap
RWD - BootstrapJasvinder Singh
1.6K views35 slides
Responsive web design by
Responsive web designResponsive web design
Responsive web designSenthilkumar Gopal
1.4K views60 slides
WebKit, why it matters? by
WebKit, why it matters?WebKit, why it matters?
WebKit, why it matters?Kenneth Rohde Christiansen
573 views22 slides
Responsive Design with Backbone by
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with BackboneMauvis Ledford
6.1K views45 slides
UCSY CS Club Week7 by
UCSY CS Club Week7 UCSY CS Club Week7
UCSY CS Club Week7 Ye Linn Wai
451 views26 slides

Similar to Responsive Design Workflow (Breaking Development Conference 2012 Orlando)(20)

Jennifer Robbins: ARTIFACT Conference Keynote by JenRobbins
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
JenRobbins3.9K views
Responsive Design with Backbone by Mauvis Ledford
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with Backbone
Mauvis Ledford6.1K views
UCSY CS Club Week7 by Ye Linn Wai
UCSY CS Club Week7 UCSY CS Club Week7
UCSY CS Club Week7
Ye Linn Wai451 views
Ruby On Rails Presentation by Paul Pajo
Ruby On Rails PresentationRuby On Rails Presentation
Ruby On Rails Presentation
Paul Pajo1.5K views
Designing for Today's Web by Meagan Fisher
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
Meagan Fisher191 views
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices by ПрофсоUX
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesMarcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
ПрофсоUX3.5K views
9 responsive design mistakes that drive people nuts by Chirag Vyas
9 responsive design mistakes that drive people nuts9 responsive design mistakes that drive people nuts
9 responsive design mistakes that drive people nuts
Chirag Vyas386 views
Introduction to HTML5/CSS3 In Drupal 7 by Mediacurrent
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Mediacurrent14K views
Introduction to Responsive Design v.2 by Clarissa Peterson
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Clarissa Peterson2.5K views
New Rules of The Responsive Web by Matt Carver
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver9.5K views
HTML5 Who what where when why how by brucelawson
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
brucelawson1.8K views
RWD in the Wild by Rich Quick
RWD in the WildRWD in the Wild
RWD in the Wild
Rich Quick905 views
Html5 oslo-code-camp by brucelawson
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-camp
brucelawson550 views
Stocktwits & Responsive Web Design, social network meets flexible framework by John Strott
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
John Strott6.5K views

More from Stephen Hay

From Deception to Clarity by
From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen Hay
3.6K views77 slides
The Backside of the Class (CSS Day 2015) by
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)Stephen Hay
3.6K views66 slides
The Art of Deception by
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay
17.3K views65 slides
Sculpting Text: Easing the Pain of Designing in the Browser by
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserStephen Hay
6.8K views45 slides
Power Tools For Browser-Based Design by
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay
3.3K views119 slides
UIE Virtual Seminar: Responsive Web Design Workflow by
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen Hay
5.9K views8 slides

More from Stephen Hay(20)

From Deception to Clarity by Stephen Hay
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
Stephen Hay3.6K views
The Backside of the Class (CSS Day 2015) by Stephen Hay
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
Stephen Hay3.6K views
The Art of Deception by Stephen Hay
The Art of DeceptionThe Art of Deception
The Art of Deception
Stephen Hay17.3K views
Sculpting Text: Easing the Pain of Designing in the Browser by Stephen Hay
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Stephen Hay6.8K views
Power Tools For Browser-Based Design by Stephen Hay
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
Stephen Hay3.3K views
UIE Virtual Seminar: Responsive Web Design Workflow by Stephen Hay
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
Stephen Hay5.9K views
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013) by Stephen Hay
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Stephen Hay5.7K views
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013) by Stephen Hay
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay3.9K views
The New Photoshop, Part 2: The Revenge of the Web (FEC13) by Stephen Hay
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
Stephen Hay11.5K views
Flexbox: One Giant Leap for Web Layout (CSS Day 2013) by Stephen Hay
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Stephen Hay2.8K views
The New Photoshop, Part 2: The Revenge of the Web by Stephen Hay
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
Stephen Hay3.6K views
Go With The Flow by Stephen Hay
Go With The FlowGo With The Flow
Go With The Flow
Stephen Hay13.7K views
Fronteers Workshop: Rabid Prototyping by Stephen Hay
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
Stephen Hay3K views
Meta layout: a closer look at media queries by Stephen Hay
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
Stephen Hay32.5K views
Real-world Responsive Design @ Breaking Development 2011 by Stephen Hay
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Stephen Hay5.3K views
HTML5 & Webrichtlijnen 2 by Stephen Hay
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
Stephen Hay986 views
Real-world Responsive Design by Stephen Hay
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
Stephen Hay2.1K views
De aanvrager wint by Stephen Hay
De aanvrager wintDe aanvrager wint
De aanvrager wint
Stephen Hay918 views
The Future State of Layout by Stephen Hay
The Future State of LayoutThe Future State of Layout
The Future State of Layout
Stephen Hay3.2K views
Web Guidelines Fronteers Teachers Day 2009 by Stephen Hay
Web Guidelines Fronteers Teachers Day 2009Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009
Stephen Hay691 views

Recently uploaded

DR Portfolio.pptx by
DR Portfolio.pptxDR Portfolio.pptx
DR Portfolio.pptxrobertsd2
18 views11 slides
Sugar Air Kiss Lipstick by
Sugar Air Kiss LipstickSugar Air Kiss Lipstick
Sugar Air Kiss Lipstickaryasheel1
7 views5 slides
StratPlanning Manual 220713.pdf by
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdfLakewalk Media
19 views43 slides
Essay 29.docx by
Essay 29.docxEssay 29.docx
Essay 29.docxOrlySiquihua
8 views1 slide
The-Craft Menu by
The-Craft MenuThe-Craft Menu
The-Craft Menunyhapedraza
20 views12 slides
Samsung Galaxy Watch 5 Presentation by
Samsung Galaxy Watch 5 PresentationSamsung Galaxy Watch 5 Presentation
Samsung Galaxy Watch 5 Presentationaryasheel1
13 views1 slide

Recently uploaded(20)

DR Portfolio.pptx by robertsd2
DR Portfolio.pptxDR Portfolio.pptx
DR Portfolio.pptx
robertsd218 views
Sugar Air Kiss Lipstick by aryasheel1
Sugar Air Kiss LipstickSugar Air Kiss Lipstick
Sugar Air Kiss Lipstick
aryasheel17 views
StratPlanning Manual 220713.pdf by Lakewalk Media
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media19 views
Samsung Galaxy Watch 5 Presentation by aryasheel1
Samsung Galaxy Watch 5 PresentationSamsung Galaxy Watch 5 Presentation
Samsung Galaxy Watch 5 Presentation
aryasheel113 views
Canned Cocktail Flat Labels by nyhapedraza
Canned Cocktail Flat LabelsCanned Cocktail Flat Labels
Canned Cocktail Flat Labels
nyhapedraza13 views
500% Sales Growth with Amazon A+ Content by Fahima
500% Sales Growth with Amazon A+ Content500% Sales Growth with Amazon A+ Content
500% Sales Growth with Amazon A+ Content
Fahima8 views
Free World aids day Template from Best presentation design agency by slideceotemplates
Free World aids day Template from Best presentation design agencyFree World aids day Template from Best presentation design agency
Free World aids day Template from Best presentation design agency
Legal PPT Presentation.pptx by 125071063
Legal PPT Presentation.pptxLegal PPT Presentation.pptx
Legal PPT Presentation.pptx
1250710635 views
Cocktail Merchandise by nyhapedraza
Cocktail MerchandiseCocktail Merchandise
Cocktail Merchandise
nyhapedraza11 views
Business X Design - People, Planet & Product by Cyber-Duck
Business X Design - People, Planet & ProductBusiness X Design - People, Planet & Product
Business X Design - People, Planet & Product
Cyber-Duck22 views
Sudden Deafness Design Document by wyfangherman
Sudden Deafness Design DocumentSudden Deafness Design Document
Sudden Deafness Design Document
wyfangherman53 views

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)