SlideShare ist ein Scribd-Unternehmen logo
1 von 76
Downloaden Sie, um offline zu lesen
RESPONSIVE DESIGN

WORKFLOW  STEPHEN HAY . MOBILISM AMSTERDAM 20120511
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: Mobilism 2012
OUR CLIENT WANTS SOME CHANGES MADE.
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
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: Mobilism 2012
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
                              DOCS
                                      SYNTAX HIGHLIGHTING
    SCREENSHOTS VIA
    CasperJS / PhantomJS
YOU’VE JUST CREATED A


STYLEGUIDE
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 and ANA NELSON

Weitere ähnliche Inhalte

Was ist angesagt?

Integração do Zabbix com AWS EC2 Auto Scalling - 1º ZABBIX MEETUP DO INTERIOR-SP
Integração do Zabbix com AWS EC2 Auto Scalling - 1º ZABBIX MEETUP DO INTERIOR-SPIntegração do Zabbix com AWS EC2 Auto Scalling - 1º ZABBIX MEETUP DO INTERIOR-SP
Integração do Zabbix com AWS EC2 Auto Scalling - 1º ZABBIX MEETUP DO INTERIOR-SPAndré Déo
 
Intro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentBrad Williams
 
AppSheet Overview -- DIY Mobile App Platform
AppSheet Overview -- DIY Mobile App PlatformAppSheet Overview -- DIY Mobile App Platform
AppSheet Overview -- DIY Mobile App Platformpravse
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessAustin Gil
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web AppSankalp Khandelwal
 
Web Hosting, Web Design & Development Technical Proposal
Web Hosting, Web Design & Development Technical ProposalWeb Hosting, Web Design & Development Technical Proposal
Web Hosting, Web Design & Development Technical ProposalAnthony Waweru
 
Bootstrap seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentationPratikDoiphode1
 
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeWrapPixel
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web ApplicationsBartek Igielski
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASSJon Dean
 
Android: the Single Activity, Multiple Fragments pattern | One Activity to ru...
Android: the Single Activity, Multiple Fragments pattern | One Activity to ru...Android: the Single Activity, Multiple Fragments pattern | One Activity to ru...
Android: the Single Activity, Multiple Fragments pattern | One Activity to ru...olrandir
 
Visual definitions of UX ( Restored )
Visual definitions of UX ( Restored )Visual definitions of UX ( Restored )
Visual definitions of UX ( Restored )Gena Drahun
 
Introduction to docker
Introduction to dockerIntroduction to docker
Introduction to dockerWei-Ting Kuo
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen
 

Was ist angesagt? (20)

Integração do Zabbix com AWS EC2 Auto Scalling - 1º ZABBIX MEETUP DO INTERIOR-SP
Integração do Zabbix com AWS EC2 Auto Scalling - 1º ZABBIX MEETUP DO INTERIOR-SPIntegração do Zabbix com AWS EC2 Auto Scalling - 1º ZABBIX MEETUP DO INTERIOR-SP
Integração do Zabbix com AWS EC2 Auto Scalling - 1º ZABBIX MEETUP DO INTERIOR-SP
 
Intro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin Development
 
AppSheet Overview -- DIY Mobile App Platform
AppSheet Overview -- DIY Mobile App PlatformAppSheet Overview -- DIY Mobile App Platform
AppSheet Overview -- DIY Mobile App Platform
 
Ux design process
Ux design processUx design process
Ux design process
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
MidJourney.pptx
MidJourney.pptxMidJourney.pptx
MidJourney.pptx
 
Web Hosting, Web Design & Development Technical Proposal
Web Hosting, Web Design & Development Technical ProposalWeb Hosting, Web Design & Development Technical Proposal
Web Hosting, Web Design & Development Technical Proposal
 
Bootstrap seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentation
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
 
Progressive Web Applications
Progressive Web ApplicationsProgressive Web Applications
Progressive Web Applications
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASS
 
Android: the Single Activity, Multiple Fragments pattern | One Activity to ru...
Android: the Single Activity, Multiple Fragments pattern | One Activity to ru...Android: the Single Activity, Multiple Fragments pattern | One Activity to ru...
Android: the Single Activity, Multiple Fragments pattern | One Activity to ru...
 
Visual definitions of UX ( Restored )
Visual definitions of UX ( Restored )Visual definitions of UX ( Restored )
Visual definitions of UX ( Restored )
 
Introduction to docker
Introduction to dockerIntroduction to docker
Introduction to docker
 
ux flow and process
ux flow and processux flow and process
ux flow and process
 
Webpack slides
Webpack slidesWebpack slides
Webpack slides
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 

Andere mochten auch

Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
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)Stephen Hay
 
New Opportunities for Contract Pharmacies
New Opportunities for Contract PharmaciesNew Opportunities for Contract Pharmacies
New Opportunities for Contract Pharmaciesanthonylesser
 
Visual summary of Entrepreneurs weekend BXL November 2016
Visual summary of Entrepreneurs weekend BXL November 2016Visual summary of Entrepreneurs weekend BXL November 2016
Visual summary of Entrepreneurs weekend BXL November 2016Frederik Vincx
 
Top 10 app developer excuses
Top 10 app developer excusesTop 10 app developer excuses
Top 10 app developer excusesUtpal Betai
 
Final presentation - workflow design and management
Final   presentation - workflow design and managementFinal   presentation - workflow design and management
Final presentation - workflow design and managementdirkstanley
 
Inside GitHub
Inside GitHubInside GitHub
Inside GitHuberr
 
Charity Survey Result
Charity Survey ResultCharity Survey Result
Charity Survey ResultJAKPATAPP
 
DocuTrack Datasheet
DocuTrack DatasheetDocuTrack Datasheet
DocuTrack Datasheetmcdonald347
 
Crestwood investor presentation jan 2017
Crestwood investor presentation jan 2017Crestwood investor presentation jan 2017
Crestwood investor presentation jan 2017CrestwoodCorporate
 
7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon KulikowskiiMasters
 
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid MarquesiMasters
 
TDC POA 2016 - Priorizando sem trauma
TDC POA 2016 - Priorizando sem traumaTDC POA 2016 - Priorizando sem trauma
TDC POA 2016 - Priorizando sem traumaAndressa Chiara
 
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetupPedro Donati
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Horácio Soares
 
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosQConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosEiti Kimura
 
Workflow Approval Solution Infographic by RapidValue Solutions
Workflow Approval Solution Infographic by RapidValue SolutionsWorkflow Approval Solution Infographic by RapidValue Solutions
Workflow Approval Solution Infographic by RapidValue SolutionsRapidValue
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentNick Landry
 

Andere mochten auch (20)

Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
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)
 
Atomic design
Atomic designAtomic design
Atomic design
 
New Opportunities for Contract Pharmacies
New Opportunities for Contract PharmaciesNew Opportunities for Contract Pharmacies
New Opportunities for Contract Pharmacies
 
Visual summary of Entrepreneurs weekend BXL November 2016
Visual summary of Entrepreneurs weekend BXL November 2016Visual summary of Entrepreneurs weekend BXL November 2016
Visual summary of Entrepreneurs weekend BXL November 2016
 
Top 10 app developer excuses
Top 10 app developer excusesTop 10 app developer excuses
Top 10 app developer excuses
 
Web Spam Techniques
Web Spam TechniquesWeb Spam Techniques
Web Spam Techniques
 
Final presentation - workflow design and management
Final   presentation - workflow design and managementFinal   presentation - workflow design and management
Final presentation - workflow design and management
 
Inside GitHub
Inside GitHubInside GitHub
Inside GitHub
 
Charity Survey Result
Charity Survey ResultCharity Survey Result
Charity Survey Result
 
DocuTrack Datasheet
DocuTrack DatasheetDocuTrack Datasheet
DocuTrack Datasheet
 
Crestwood investor presentation jan 2017
Crestwood investor presentation jan 2017Crestwood investor presentation jan 2017
Crestwood investor presentation jan 2017
 
7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski
 
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
 
TDC POA 2016 - Priorizando sem trauma
TDC POA 2016 - Priorizando sem traumaTDC POA 2016 - Priorizando sem trauma
TDC POA 2016 - Priorizando sem trauma
 
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
 
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosQConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
 
Workflow Approval Solution Infographic by RapidValue Solutions
Workflow Approval Solution Infographic by RapidValue SolutionsWorkflow Approval Solution Infographic by RapidValue Solutions
Workflow Approval Solution Infographic by RapidValue Solutions
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
 

Ähnlich wie Responsive Design Workflow: Mobilism 2012

Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
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
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-campbrucelawson
 
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
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesOleksii Prohonnyi
 
Style Guides Are The New Photoshop (Fronteers 2012)
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
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Ruby On Rails Presentation
Ruby On Rails PresentationRuby On Rails Presentation
Ruby On Rails PresentationPaul Pajo
 
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
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web FrameworksMatt Raible
 
Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)Naveen Krishnamurthy
 

Ähnlich wie Responsive Design Workflow: Mobilism 2012 (20)

Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
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
 
Portfolio
PortfolioPortfolio
Portfolio
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-camp
 
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
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Back-End Code Essay
Back-End Code EssayBack-End Code Essay
Back-End Code Essay
 
Knowing Your Audience
Knowing Your AudienceKnowing Your Audience
Knowing Your Audience
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Ruby On Rails Presentation
Ruby On Rails PresentationRuby On Rails Presentation
Ruby On Rails Presentation
 
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
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web Frameworks
 
PHP and Silverlight
PHP and SilverlightPHP and Silverlight
PHP and Silverlight
 
Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)
 
WebKit, why it matters?
WebKit, why it matters?WebKit, why it matters?
WebKit, why it matters?
 

Mehr von 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
 
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)
Style Guides Are The New Photoshop (Smashing Conference 2012)Stephen Hay
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Stephen 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
 

Mehr von 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
 
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)
Style Guides Are The New Photoshop (Smashing Conference 2012)
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
 
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
 

Kürzlich hochgeladen

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 

Kürzlich hochgeladen (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 

Responsive Design Workflow: Mobilism 2012