SlideShare uma empresa Scribd logo
1 de 76
Baixar para ler offline
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.
OUR CLIENT WANTS SOME CHANGES MADE.
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
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

Mais conteúdo relacionado

Mais procurados

consumer_driven_contract with spring cloud contract at spring camp 2018
consumer_driven_contract with spring cloud contract at spring camp 2018consumer_driven_contract with spring cloud contract at spring camp 2018
consumer_driven_contract with spring cloud contract at spring camp 2018minseok kim
 
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022HostedbyConfluent
 
webservice scaling for newbie
webservice scaling for newbiewebservice scaling for newbie
webservice scaling for newbieDaeMyung Kang
 
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...InfluxData
 
Event Driven Software Architecture Pattern
Event Driven Software Architecture PatternEvent Driven Software Architecture Pattern
Event Driven Software Architecture Patternjeetendra mandal
 
Digital research: Ukraine 2022.pptx
Digital research: Ukraine 2022.pptxDigital research: Ukraine 2022.pptx
Digital research: Ukraine 2022.pptxnewage.
 
How to build massive service for advance
How to build massive service for advanceHow to build massive service for advance
How to build massive service for advanceDaeMyung Kang
 
A Microservices approach with Cassandra and Quarkus | DevNation Tech Talk
A Microservices approach with Cassandra and Quarkus | DevNation Tech TalkA Microservices approach with Cassandra and Quarkus | DevNation Tech Talk
A Microservices approach with Cassandra and Quarkus | DevNation Tech TalkRed Hat Developers
 
Why does my jenkins freeze sometimes and what can I do about it?
Why does my jenkins freeze sometimes and what can I do about it?Why does my jenkins freeze sometimes and what can I do about it?
Why does my jenkins freeze sometimes and what can I do about it?Tidhar Klein Orbach
 
Managing multiple event types in a single topic with Schema Registry | Bill B...
Managing multiple event types in a single topic with Schema Registry | Bill B...Managing multiple event types in a single topic with Schema Registry | Bill B...
Managing multiple event types in a single topic with Schema Registry | Bill B...HostedbyConfluent
 
Vector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayersVector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayersJody Garnett
 
Integrating Splunk into your Spring Applications
Integrating Splunk into your Spring ApplicationsIntegrating Splunk into your Spring Applications
Integrating Splunk into your Spring ApplicationsDamien Dallimore
 
게임 애셋 스트리밍 패치
게임 애셋 스트리밍 패치게임 애셋 스트리밍 패치
게임 애셋 스트리밍 패치Seungjae Lee
 
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민Hyunjik Bae
 
[NDC13] 70명이 커밋하는 라이브 개발하기 (해외 진출 라이브 프로젝트의 개발 관리) - 송창규
[NDC13] 70명이 커밋하는 라이브 개발하기 (해외 진출 라이브 프로젝트의 개발 관리) - 송창규[NDC13] 70명이 커밋하는 라이브 개발하기 (해외 진출 라이브 프로젝트의 개발 관리) - 송창규
[NDC13] 70명이 커밋하는 라이브 개발하기 (해외 진출 라이브 프로젝트의 개발 관리) - 송창규ChangKyu Song
 

Mais procurados (16)

consumer_driven_contract with spring cloud contract at spring camp 2018
consumer_driven_contract with spring cloud contract at spring camp 2018consumer_driven_contract with spring cloud contract at spring camp 2018
consumer_driven_contract with spring cloud contract at spring camp 2018
 
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
 
webservice scaling for newbie
webservice scaling for newbiewebservice scaling for newbie
webservice scaling for newbie
 
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
 
Event Driven Software Architecture Pattern
Event Driven Software Architecture PatternEvent Driven Software Architecture Pattern
Event Driven Software Architecture Pattern
 
Digital research: Ukraine 2022.pptx
Digital research: Ukraine 2022.pptxDigital research: Ukraine 2022.pptx
Digital research: Ukraine 2022.pptx
 
How to build massive service for advance
How to build massive service for advanceHow to build massive service for advance
How to build massive service for advance
 
A Microservices approach with Cassandra and Quarkus | DevNation Tech Talk
A Microservices approach with Cassandra and Quarkus | DevNation Tech TalkA Microservices approach with Cassandra and Quarkus | DevNation Tech Talk
A Microservices approach with Cassandra and Quarkus | DevNation Tech Talk
 
Why does my jenkins freeze sometimes and what can I do about it?
Why does my jenkins freeze sometimes and what can I do about it?Why does my jenkins freeze sometimes and what can I do about it?
Why does my jenkins freeze sometimes and what can I do about it?
 
Managing multiple event types in a single topic with Schema Registry | Bill B...
Managing multiple event types in a single topic with Schema Registry | Bill B...Managing multiple event types in a single topic with Schema Registry | Bill B...
Managing multiple event types in a single topic with Schema Registry | Bill B...
 
Vector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayersVector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayers
 
Smart Improved Cook Stove (ICS)
Smart Improved Cook Stove (ICS)Smart Improved Cook Stove (ICS)
Smart Improved Cook Stove (ICS)
 
Integrating Splunk into your Spring Applications
Integrating Splunk into your Spring ApplicationsIntegrating Splunk into your Spring Applications
Integrating Splunk into your Spring Applications
 
게임 애셋 스트리밍 패치
게임 애셋 스트리밍 패치게임 애셋 스트리밍 패치
게임 애셋 스트리밍 패치
 
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
 
[NDC13] 70명이 커밋하는 라이브 개발하기 (해외 진출 라이브 프로젝트의 개발 관리) - 송창규
[NDC13] 70명이 커밋하는 라이브 개발하기 (해외 진출 라이브 프로젝트의 개발 관리) - 송창규[NDC13] 70명이 커밋하는 라이브 개발하기 (해외 진출 라이브 프로젝트의 개발 관리) - 송창규
[NDC13] 70명이 커밋하는 라이브 개발하기 (해외 진출 라이브 프로젝트의 개발 관리) - 송창규
 

Destaque

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
 

Destaque (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
 

Semelhante a 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
 
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
 

Semelhante a 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
 
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?
 
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
 

Mais de 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
 

Mais de 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
 

Último

SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 

Último (20)

SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 

Responsive Design Workflow: Mobilism 2012