SlideShare a Scribd company logo
1 of 76
Download to read offline
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

More Related Content

What's hot

Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic DesignAndrew Jones
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best PracticesBrad Frost
 
Atomic Design
Atomic Design Atomic Design
Atomic Design Rey Mayson
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesignBart De Waele
 
"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...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy DesignRich Quick
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
 

What's hot (20)

Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
 
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
 
Atomic design
Atomic designAtomic design
Atomic design
 
Adventures in Atomic Design
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic Design
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
 
Atomic Design con Pattern Lab
Atomic Design con Pattern LabAtomic Design con Pattern Lab
Atomic Design con Pattern Lab
 
Atomic Design
Atomic Design Atomic Design
Atomic Design
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
"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...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 

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

Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Responsive Design with Backbone
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with BackboneMauvis Ledford
 
UCSY CS Club Week7
UCSY CS Club Week7 UCSY CS Club Week7
UCSY CS Club Week7 Ye Linn Wai
 
Ruby On Rails Presentation
Ruby On Rails PresentationRuby On Rails Presentation
Ruby On Rails PresentationPaul Pajo
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's WebMeagan Fisher
 
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
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ПрофсоUX
 
9 responsive design mistakes that drive people nuts
9 responsive design mistakes that drive people nuts9 responsive design mistakes that drive people nuts
9 responsive design mistakes that drive people nutsChirag Vyas
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Mediacurrent
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why howbrucelawson
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-campbrucelawson
 
Stocktwits & Responsive Web Design, social network meets flexible framework
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 frameworkJohn Strott
 

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

Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
WebKit, why it matters?
WebKit, why it matters?WebKit, why it matters?
WebKit, why it matters?
 
Responsive Design with Backbone
Responsive Design with BackboneResponsive Design with Backbone
Responsive Design with Backbone
 
UCSY CS Club Week7
UCSY CS Club Week7 UCSY CS Club Week7
UCSY CS Club Week7
 
Ruby On Rails Presentation
Ruby On Rails PresentationRuby On Rails Presentation
Ruby On Rails Presentation
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
 
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
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
 
Portfolio
PortfolioPortfolio
Portfolio
 
9 responsive design mistakes that drive people nuts
9 responsive design mistakes that drive people nuts9 responsive design mistakes that drive people nuts
9 responsive design mistakes that drive people nuts
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
 
Back-End Code Essay
Back-End Code EssayBack-End Code Essay
Back-End Code Essay
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-camp
 
Stocktwits & Responsive Web Design, social network meets flexible framework
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
 

More from Stephen Hay

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen 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)
The Backside of the Class (CSS Day 2015)Stephen Hay
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay
 
Sculpting Text: Easing the Pain of Designing in the Browser
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
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen 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)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)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)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)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)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)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)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web
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 WebStephen Hay
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The FlowStephen Hay
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingStephen Hay
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queriesStephen Hay
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
 
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2Stephen Hay
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive DesignStephen Hay
 
De aanvrager wint
De aanvrager wintDe aanvrager wint
De aanvrager wintStephen Hay
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Stephen Hay
 

More from Stephen Hay (20)

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
 
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of Deception
 
Sculpting Text: Easing the Pain of Designing in the Browser
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
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
 
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)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
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)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
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)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
 
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)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
 
The New Photoshop, Part 2: The Revenge of the Web
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
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The Flow
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
 
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
 
De aanvrager wint
De aanvrager wintDe aanvrager wint
De aanvrager wint
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009
 

Recently uploaded

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 

Recently uploaded (18)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)