Anúncio

Beyond Squishy: The Principles of Adaptive Design

Brad Frost
Web Designer, Speaker, and Consultant em Brad Frost Web
9 de Mar de 2013••
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design

Check these out next

Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Stephen Hay
Atomic design
Atomic design
Brad Frost
Atomic Design con Pattern Lab
Atomic Design con Pattern Lab
Mauricio Angulo Sillas
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
Dave Olsen
Atomic design React Nova Presentation
Atomic design React Nova Presentation
Steve Zyglowicz
The Server Side of Responsive Web Design
The Server Side of Responsive Web Design
Dave Olsen
Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022
ZainAsgar1
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Renato Iwashima
1 de 249

Beyond Squishy: The Principles of Adaptive Design

9 de Mar de 2013••
Baixar para ler offline
Tecnologia

Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!" While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.

Brad Frost
Web Designer, Speaker, and Consultant em Brad Frost Web
Anúncio
Anúncio
Anúncio

Recomendados

Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost58.4K visualizações•181 slides
Atomic Design - BDConf Nashville, 2013Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013Brad Frost50.7K visualizações•212 slides
Responsive webdesignResponsive webdesign
Responsive webdesignBart De Waele4.7K visualizações•203 slides
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce2.6K visualizações•38 slides
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions1.3K visualizações•44 slides
Adventures in Atomic DesignAdventures in Atomic Design
Adventures in Atomic DesignAndrew Jones1.2K visualizações•84 slides

Mais conteúdo relacionado

Apresentações para você(20)

Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Stephen Hay•86.7K visualizações
Atomic designAtomic design
Atomic design
Brad Frost•1.9M visualizações
Atomic Design con Pattern LabAtomic Design con Pattern Lab
Atomic Design con Pattern Lab
Mauricio Angulo Sillas•1.1K visualizações
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
Dave Olsen•13.1K visualizações
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
Steve Zyglowicz•528 visualizações
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
Dave Olsen•13.7K visualizações
Data science for infrastructure dev week 2022Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022
ZainAsgar1•113 visualizações
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Renato Iwashima•3.1K visualizações
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
Nadya Rodionenko•1.6K visualizações
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architecture
Jasper Moelker•6.2K visualizações
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsify
valuebound•5.6K visualizações
Atomic Design Atomic Design
Atomic Design
Rey Mayson•341 visualizações
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Stephen Hay•44.5K visualizações
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•42.2K visualizações
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with Jekyll
Todd Moy•1.3K visualizações
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
Dave Olsen•1.6K visualizações
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
Steve Souders•4.3K visualizações
The What & Why of Pattern LabThe What & Why of Pattern Lab
The What & Why of Pattern Lab
Dave Olsen•8.5K visualizações
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
Stephen Hay•3.9K visualizações
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nlJoomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Philip Locke•1.9K visualizações

Destaque(20)

Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
Brad Frost•18.8K visualizações
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)
Brad Frost•15K visualizações
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly Web
Brad Frost•32.6K visualizações
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)
Brad Frost•12.1K visualizações
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
Brad Frost•20.6K visualizações
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
Brad Frost•13.8K visualizações
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
Brad Frost•106.2K visualizações
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Brad Frost•15.7K visualizações
Reset the WebReset the Web
Reset the Web
yiibu•185.3K visualizações
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
Andreas Bovens•82.5K visualizações
Why I Don't Use The GPLWhy I Don't Use The GPL
Why I Don't Use The GPL
Shane Curcuru•1.1K visualizações
Death To BullshitDeath To Bullshit
Death To Bullshit
Brad Frost•180.3K visualizações
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!
Brad Frost•138.4K visualizações
Codemotion 2014 - Hackathones - de 0 a produccion en 24 horasCodemotion 2014 - Hackathones - de 0 a produccion en 24 horas
Codemotion 2014 - Hackathones - de 0 a produccion en 24 horas
Adolfo Sanz De Diego•6.5K visualizações
Mejora tus retrospectivas (codemotion 2014)Mejora tus retrospectivas (codemotion 2014)
Mejora tus retrospectivas (codemotion 2014)
Juanma Gómez•5K visualizações
Joseph Levy MedicReS World Congress 2013 - 1 Joseph Levy MedicReS World Congress 2013 - 1
Joseph Levy MedicReS World Congress 2013 - 1
MedicReS •3.8K visualizações
Stateless token-based authentication for pure front-end applicationsStateless token-based authentication for pure front-end applications
Stateless token-based authentication for pure front-end applications
Alvaro Sanchez-Mariscal•13.8K visualizações
Web Design Process vs. PhiladelphiaWeb Design Process vs. Philadelphia
Web Design Process vs. Philadelphia
Christopher Cashdollar•1.3K visualizações
Helping Your Company Adopt a User-Centered ProcessHelping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered Process
Zack Naylor•723 visualizações
Wp3 refresh pghWp3 refresh pgh
Wp3 refresh pgh
MrDirby•773 visualizações
Anúncio

Similar a Beyond Squishy: The Principles of Adaptive Design(20)

Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
Aaron Gustafson•216 visualizações
Responsivedesign slides2-120507173812-phpapp01Responsivedesign slides2-120507173812-phpapp01
Responsivedesign slides2-120507173812-phpapp01
Innovation Excellence•9K visualizações
Responsive DesignResponsive Design
Responsive Design
Sara Cannon•83.6K visualizações
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
Peter Rozek•25.1K visualizações
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
Marco Cedaro•9.1K visualizações
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
Four Kitchens•1.4K visualizações
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
Clarissa Peterson•10.4K visualizações
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Anna Dahlström•2.8K visualizações
Of innovation and impatience - Future Decoded 2015Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
Christian Heilmann•2.1K visualizações
Responsive Web Design: buzzword or revolution?Responsive Web Design: buzzword or revolution?
Responsive Web Design: buzzword or revolution?
Wojtek Zając•1.9K visualizações
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver•9.5K visualizações
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
Jason Grigsby•4K visualizações
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Acquia•1.2K visualizações
Responsive Design Responsive Design
Responsive Design
Clarissa Peterson•12.7K visualizações
Beyond being responsive, a mobile first strategyBeyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
internet-inspired•41.5K visualizações
Pantalk: Responsive Web DesignPantalk: Responsive Web Design
Pantalk: Responsive Web Design
Screen Concept•1.1K visualizações
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
Marco Cedaro•734 visualizações
The Squishy Future of Content - HEEMAC EditionThe Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC Edition
Dave Olsen•1.9K visualizações
Adaptive, Responsive, Mobile. A liquid web.Adaptive, Responsive, Mobile. A liquid web.
Adaptive, Responsive, Mobile. A liquid web.
Cristiano Rastelli•432 visualizações
Prototyping: Helping to take away the suckPrototyping: Helping to take away the suck
Prototyping: Helping to take away the suck
Harvard Web Working Group•1.6K visualizações

Último(20)

LangChain Intro by KeyMate.AILangChain Intro by KeyMate.AI
LangChain Intro by KeyMate.AI
OzgurOscarOzkan•0 visão
Making Products in GenAI’s World by LinkedIn VP of Product.pdfMaking Products in GenAI’s World by LinkedIn VP of Product.pdf
Making Products in GenAI’s World by LinkedIn VP of Product.pdf
Product School•0 visão
Top 12 Benefits of Automated Software Testing.pdfTop 12 Benefits of Automated Software Testing.pdf
Top 12 Benefits of Automated Software Testing.pdf
RohitBhandari66•0 visão
System Unit.pptxSystem Unit.pptx
System Unit.pptx
BillySalamero1•0 visão
Framework for understanding quantum computing use cases from a multidisciplin...Framework for understanding quantum computing use cases from a multidisciplin...
Framework for understanding quantum computing use cases from a multidisciplin...
Anastasija Nikiforova•0 visão
Building Better Tech: The Product Manager's Role in Infrastructure & Platform...Building Better Tech: The Product Manager's Role in Infrastructure & Platform...
Building Better Tech: The Product Manager's Role in Infrastructure & Platform...
Product School•0 visão
PB-503R Wireless alarm keypadPB-503R Wireless alarm keypad
PB-503R Wireless alarm keypad
Vedard Security Alarm System Store•0 visão
Chapter Three Motivation.pptxChapter Three Motivation.pptx
Chapter Three Motivation.pptx
YoomifTube•0 visão
Wilab-NWDAF-datasheet.pdfWilab-NWDAF-datasheet.pdf
Wilab-NWDAF-datasheet.pdf
FabianToh2•0 visão
poweredge R7525 installation service manual.pdfpoweredge R7525 installation service manual.pdf
poweredge R7525 installation service manual.pdf
psyberdude1•0 visão
The Future of Product Management by Product School Founder & CEO.pdfThe Future of Product Management by Product School Founder & CEO.pdf
The Future of Product Management by Product School Founder & CEO.pdf
Product School•0 visão
University of Engineering and Technology.docxUniversity of Engineering and Technology.docx
University of Engineering and Technology.docx
MuhammadumairKhan74•0 visão
Feng_Gao_Presentation.pdfFeng_Gao_Presentation.pdf
Feng_Gao_Presentation.pdf
FabianToh2•0 visão
ace_get_gcp_certified_2023_journey_roadmap.pdface_get_gcp_certified_2023_journey_roadmap.pdf
ace_get_gcp_certified_2023_journey_roadmap.pdf
Muhammad Herwindra Berlian•0 visão
How Derisking Big Bets Can Drive Impactful Product Innovation by fmr Hinge CP...How Derisking Big Bets Can Drive Impactful Product Innovation by fmr Hinge CP...
How Derisking Big Bets Can Drive Impactful Product Innovation by fmr Hinge CP...
Product School•0 visão
The Industrialist: Trends & Innovations - May 2023The Industrialist: Trends & Innovations - May 2023
The Industrialist: Trends & Innovations - May 2023
accenture•0 visão
10Life - Insurtech Innovation Award 202310Life - Insurtech Innovation Award 2023
10Life - Insurtech Innovation Award 2023
The Digital Insurer•0 visão
Product Leadership - from FAANG to Traditional Media by The New York Times SV...Product Leadership - from FAANG to Traditional Media by The New York Times SV...
Product Leadership - from FAANG to Traditional Media by The New York Times SV...
Product School•0 visão
ARDUINO_presentation_by_Bamidele samuel.pptARDUINO_presentation_by_Bamidele samuel.ppt
ARDUINO_presentation_by_Bamidele samuel.ppt
SAMTECH ELECTRONICS CONCEPT •0 visão
bizhub C287i seriesbizhub C287i series
bizhub C287i series
konicaUAE•0 visão
Anúncio

Beyond Squishy: The Principles of Adaptive Design

  1. d BEYONDOFSQUISHY THE PRINCIPLES ADAPTIVE DESIGN #ADAPTIVE
  2. GENERIC TM
  3. NEW AND SHINY
  4. They argued about the term “AJAX” until they were blue in the face. But in the end, no one would argue that “AJAX” wasn’t a good thing for our industry. -Jeff Croft http://jeffcroft.com/blog/2010/aug/02/term-html5/
  5. RESPONSIVE WEB DESIGN
  6. http://alistapart.com/article/responsive-web-design RCE OU RES
  7. http://www.abookapart.com/products/responsive-web-design RCE OU RES
  8. RESPONSIVE WEB DESIGN: THE MOVIE WINTER 2013
  9. FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES
  10. RESPONSIVE WEB DESIGN RESI IMPR ZE H ESS YOUR FR ERE! IEND S!
  11. RAISED EYEBROW IS RAISED
  12. THIS IS JUST THE TIP OF THE ICEBERG.
  13. THIS IS JUST THE TIP OF THE ICEBERG.
  14. THIS IS JUST THE TIP OF THE ICEBERG.
  15. RWD
  16. PRINCIPLES OF ADAPTIVE DESIGN
  17. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  18. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  19. B-SIDE THIS IS NOT THE WEB.
  20. WEB WEB
  21. Diversity is not a bug, it’s an opportunity. -Stephanie Rieger http://stephanierieger.com/diversity-is-not-a-bug/
  22. “...Alternately, we suggest checking out the site from your tablet if you have one...”
  23. Mobile users will do anything and everything desktop users will do, provided it’s presented in a usable way.
  24. ONE WEB.
  25. ONE WEB. THEMATIC CONSISTENCY.
  26. ONE WEB. THEMATIC CONSISTENCY. GIVE PEOPLE WHAT THEY WANT.
  27. CONTENT PARITY
  28. CONTENT PARITY TRUMPS ALL?
  29. BUT WHAT ABOUT MOBILE CONTEXT?
  30. WHAT EXACTLY IS “MOBILE CONTEXT”?
  31. “ON THE GO” IS STILL TRUE...
  32. BUT LOTS OF OTHER USE CASES EXIST TOO
  33. 76% ACCESS MOBILE WHILE WAITING IN LINE http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  34. 86% ACCESS MOBILE DEVICES WHILE WATCHING TV http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  35. 80% ACCESS MOBILE DURING GENERAL DOWNTIME http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  36. 69% ACCESS MOBILE IN RETAIL STORES http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  37. 39% WHILE #POOPIN http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  38. QUANTITATIVE QUALITATIVE ๏ Screen size ๏ User goals ๏ Connectivity ๏ User environment ๏ Device capabilities ๏ User attention ๏ Processing power ๏ User capabilities ๏ Input methods
  39. Just make quality, relevant content with appropriate tasks, and offer all of these to all users...then make it easy for the user to decide what it is they want to do. -Stephen Hay http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-mobile-context/
  40. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  41. 320PX.
  42. 320PX. 480PX.
  43. 320PX. 480PX. 768PX.
  44. 320PX. 480PX. 768PX. 1024PX.
  45. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
  46. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
  47. scha·den·freu·de ˈshä-dən-ˌfrȯi-də n. enjoyment obtained from the troubles of others
  48. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things”. -John Allsopp http://alistapart.com/article/dao
  49. http://static.lukew.com/unified_device_design.png E RC OU RES
  50. http://bradfrostweb.com/demo/ish/ E RC OU RES
  51. http://bradfrostweb.com/demo/ish/ E RC OU RES
  52. EMBRACE THE SQUISHINESS. TM
  53. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  54. 71% MOBILE USERS EXPECTING MOBILE SITES TO LOAD AS FAST IF NOT FASTER THAN DESKTOP SITES http://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers
  55. 74% MOBILE VISITORS WHO WILL ABANDON A SITE IF IT TAKES LONGER THAN 5 SECONDS TO LOAD http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  56. YOU HAVE 5 SECONDS OF SOMEONE’S TIME.
  57. 1.3MB AVERAGE PAGE SIZE http://httparchive.org/
  58. 86% RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEW http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
  59. REQUESTS: 136 PAGE WEIGHT: 5.9MB LOAD TIME: 2M 46S
  60. http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
  61. REQUESTS: 388 PAGE WEIGHT: 24.29MB LOAD TIME: 2M 01S http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
  62. If your website is 15MB it’s not HTML5, it’s stupid. -Christian Heilmann HTTPS://HACKS.MOZILLA.ORG/2012/10/BROKEN-PROMISES-OF-HTML5-AND-WHATS-NEXT-A-PRESENTATION-AT-HTML5DEVCONF/
  63. http://bradfrostweb.com/blog/post/performance-as-design/
  64. http://bradfrostweb.com/blog/post/performance-as-design/
  65. http://mobitest.akamai.com E RC OU RES
  66. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  67. RESPONSIVE DESIGN != ONE SIZE FITS ALL
  68. PROGRESSIVE ENHANCEMENT
  69. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY) MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
  70. Progressive enhancement isn’t about designing for the lowest common denominator. It’s just about starting there. -Jeremy Keith http://bradfrostweb.com/blog/post/the-spirit-of-the-web-jeremy-keith-at-smashing-conference/
  71. A BRIEF WORD ABOUT MOBILE WEB APPS
  72. It’s 2013, nobody has Javascript disabled! -Plenty of developers
  73. SUPPORT IS NOT BINARY
  74. JAVASCRIPT CAN FAIL.
  75. JAVASCRIPT CAN WILL FAIL.
  76. https://twitter.com/zachleat/status/151748039072157696
  77. And the menu failed. Never even opened. Suddenly, the site was without navigation...at all. -Stephanie Rieger HTTP://STEPHANIERIEGER.COM/A-PLEA-FOR-PROGRESSIVE-ENHANCEMENT/
  78. WORKED DIDN’T WORK ๏ Galaxy Nexus ๏ iPhone 4 (iOS 4.3) ๏ iPhone 4 (iOS 5) ๏ iPod Touch ๏ Nexus One ๏ Nokia Lumia 800 (WP7) ๏ HTC ChaCha (Android 2.3) ๏ HTC WildFire (Android 2.3) ๏ Huiwei Blaze (Android 2.3.5) ๏ Galaxy SII (Android 2.2.3) ๏ Galaxy Mini (Android 2.2.1) ๏ BlackBerry Torch (OS7) ๏ BlackBerry 9300 (OS6) ๏ Galaxy Tab 7” (Android 2.3) ๏ Galaxy Tab 10” (Android 2.3) ๏ Amazon Kindle
  79. Not everything on the Web needs to be a new Facebook, Google Reader or Google Mail. -Christian Heilmann HTTP://CHRISTIANHEILMANN.COM/2011/12/28/ON-SINGLE-PAGE-APPS/
  80. The bottom line is that a client-side architecture leads to slower performance because most of the code is being executed on our users' machines rather than our own. -Twitter Engineering Team http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html
  81. THIS IS FOUNDATIONAL WORK.
  82. THERE IS A DIFFERENCE BETWEEN SUPPORT AND OPTIMIZATION.
  83. MAN, THIS BLU-RAY QUALITY SUCKS.
  84. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  85. ACKNOWLEDGE AND EMBRACE UNPREDICTABILITY
  86. WEB WEB
  87. WEB WEB
  88. WEB WEB
  89. THERE’S NO SUCH THING AS FUTURE-PROOF
  90. BUT WE CAN BE FUTURE-FRIENDLY http://futurefriend.ly/
  91. PEOPLE’S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING.
  92. BULLSHIT BULLSHIT BULLSHIT This is a quote. This is where you put the quote text. BULLSHIT BULLSHIT -Quote Author BULLSHIT CONTENT BULLSHIT BULLSHIT BULLSHIT
  93. This is a quote. This is where you put the quote text. -Quote Author
  94. This is a quote. This is where you put the quote text. -Quote Author
  95. This is a quote. This is where you put the quote text. -Quote Author
  96. BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT CONTENT This is a quote. This is where you BULLSHIT BULLSHIT BULLSHIT put the quote text. BULLSHIT BULLSHIT -Quote Author BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT
  97. FOCUS.
  98. INVEST IN YOUR CONTENT. MAKE APIs NOT WAR
  99. CONTENT LIKE WATER
  100. GET YOUR CONTENT READY TO GO ANYWHERE BECAUSE IT’S GOING TO GO EVERYWHERE
  101. WE DON’T KNOW WHAT WILL BE UNDERNEATH CHRISTMAS TREES 2 YEARS FROM NOW...
  102. BUT THAT’S WHAT WE NEED TO DESIGN FOR TODAY. WEB WEB WEB WEB
  103. When it comes to the Web, the more backward-compatible you are, the more forward-compatible you’re likely to be. -Josh Clark http://globalmoxie.com/blog/making-of-people-mobile.shtml
  104. TODAY’S LANDSCAPE IS BOOTCAMP FOR TOMORROW’S INSANITY.
  105. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  106. DEMO http://bit.ly/mobilefirstrwd TUTORIAL http://bit.ly/rwdtutorial WALKTHROUGH http://bit.ly/rwdanatomy
  107. EXHIBIT A: MASTHEAD
  108. GET TO THE MEAT.
  109. EXHIBIT B: LOGO
  110. Make the logo bigger! -Every Client Ever
  111. http://blog.netvlies.nl/design-interactie/retina-revolution/ RCE OU RES
  112. EXHIBIT C: NAVIGATION
  113. NAVIGATION SHOULD BE LIKE A GOOD FRIEND... THERE WHEN YOU NEED THEM, BUT COOL ENOUGH TO GIVE YOU YOUR SPACE
  114. EXHIBIT D: SEARCH FORM
  115. EXHIBIT E: PRODUCT INFO
  116. 79% PEOPLE USING THEIR SMARTPHONES IN STORES http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx
  117. EXHIBIT F: PRODUCT IMAGES
  118. CAROUSEL BEST PRACTICES
  119. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one
  120. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one ๏ Cycle through like items
  121. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one ๏ Cycle through like items ๏ Only load what you need
  122. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one ๏ Cycle through like items ๏ Only load what you need ๏ Be explicit with navigation
  123. INSUFFICIENT
  124. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one ๏ Cycle through like items ๏ Only load what you need ๏ Be explicit with navigation ๏ Give hints to other content ๏ Treat touch as an enhancement
  125. EXHIBIT G: PRODUCT FORM
  126. EXHIBIT H: SHARE BUTTONS
  127. To load the Facebook, Twitter and Google social media buttons takes 19 requests and 246.7KB in bandwidth. -Zurb https://developers.facebook.com/blog/post/2012/02/27/helping-improve-the-mobile-web/
  128. http://filamentgroup.com/lab/socialcount/ E RC OU RES
  129. EXHIBIT I: FIND NEARBY
  130. OLD CONTEXT CAPABLE BROWSER FOCUSED LARGE SCREEN STATIONARY EFFICIENT INPUT FAST CONNECTION COMFORTABLE POWERFUL CPU
  131. NEW CONTEXT
  132. http://karenmcgrane.com/2012/07/10/mobile-local/ E RC OU RES
  133. ASK QUESTIONS.
  134. EXHIBIT J: AUXILIARY CONTENT
  135. 86% RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEW http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
  136. AGGRESSIVE ENHANCEMENT
  137. NOT THE THING NOT THE THING THE THING NOT THE THING NOT THE THING NOT THE THING
  138. NOT THE THING NOT THE THING THE THING NOT THE THING NOT THE THING LINK TO FRAGMENT LINK TO FRAGMENT LINK TO FRAGMENT NOT THE THING LINK TO FRAGMENT LINK TO FRAGMENT
  139. SCANNABILITY PERFORMANCE
  140. SCROLLING
  141. WHEN WE SCROLL ON MOBILE GOING BACK THROUGH DEEP DIVE IN TIME GROUPED ITEMS INTO CONTENT
  142. WHEN WE SCROLL ON MOBILE GOING BACK IN TIME
  143. WHEN WE SCROLL ON MOBILE THROUGH GROUPED ITEMS
  144. WHEN WE SCROLL ON MOBILE DEEP DIVE INTO CONTENT
  145. ALWAYS SCROLLING THROUGH A SINGULAR CONTENT TYPE
  146. EXHIBIT J: FOOTER NAV
  147. EXHIBIT K: CALL NUMBER
  148. THESE THINGS ARE COMMUNICATION DEVICES code block <a href="tel:+18005550199">1-800-555-0199</a> http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/
  149. EXHIBIT C: BACK TO TOP LINK
  150. THERE’S LOTS MORE.
  151. THIS STUFF IS LEGITIMATELY HARD.
  152. BUT IT’S 100% NECESSARY.
  153. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
  154. THIS IS FUN!
  155. 6,000,000,000 WORLDWIDE MOBILE SUBSCRIPTIONS http://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0
  156. MOBILE WEB
  157. MOBILE WEB
  158. THANKS! @brad_frost
Anúncio