Real-world Responsive Design @ Breaking Development 2011

Stephen Hay
Senior UX Design Lead at Catawiki
Apr. 12, 2011••
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
1 of 77

Real-world Responsive Design @ Breaking Development 2011

Apr. 12, 2011••
Download to read offline
Technology

A presentation I gave at Breaking Development 2011 (which was an updated and modified version of the presentation I gave at Fronteers 2010). In this talk I touched on the new Flexbox draft and CSS3 Grid Layout. Interestingly enough, while I was presenting, Microsoft announced IE10, which includes support for both specs (as well as multicolumn layout).

Stephen Hay
Senior UX Design Lead at Catawiki

Recommended

Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queriesStephen Hay32.5K views•100 slides
Influencing Business using a Wall of KnowledgeInfluencing Business using a Wall of Knowledge
Influencing Business using a Wall of KnowledgeHeidi Munc38.7K views•78 slides
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb43.3K views•51 slides
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Railscodeinmotion21.4K views•43 slides
Responsive Web DesignResponsive Web Design
Responsive Web DesignJustin Avery7.5K views•69 slides
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley22.3K views•91 slides

More Related Content

More from Stephen Hay

From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen Hay3.6K views•77 slides
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)Stephen Hay3.6K views•66 slides
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay17.3K views•65 slides
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 Hay6.8K views•45 slides
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay3.3K views•119 slides
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen Hay5.9K views•8 slides

More from Stephen Hay(20)

From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
Stephen Hay•3.6K views
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
Stephen Hay•3.6K views
The Art of DeceptionThe Art of Deception
The Art of Deception
Stephen Hay•17.3K views
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
Stephen Hay•6.8K views
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
Stephen Hay•3.3K views
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
Stephen Hay•5.9K views
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•5.7K views
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•3.8K views
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•11.5K views
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•2.8K views
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
Stephen Hay•3.6K views
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 views
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 views
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
Stephen Hay•2.3K views
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Stephen Hay•86.8K views
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 views
Go With The FlowGo With The Flow
Go With The Flow
Stephen Hay•13.7K views
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
Stephen Hay•3K views
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
Stephen Hay•986 views
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
Stephen Hay•2.1K views

Recently uploaded

Take Control of Podcasting thanks to Open Source and Podcasting 2.0Take Control of Podcasting thanks to Open Source and Podcasting 2.0
Take Control of Podcasting thanks to Open Source and Podcasting 2.0🎙 Benjamin Bellamy68 views•59 slides
Document Understanding as Cloud APIs and Generative AI Pre-labeling Extractio...Document Understanding as Cloud APIs and Generative AI Pre-labeling Extractio...
Document Understanding as Cloud APIs and Generative AI Pre-labeling Extractio...DianaGray10146 views•11 slides
Google Cloud Study Jams Info SessionGoogle Cloud Study Jams Info Session
Google Cloud Study Jams Info SessionGDSCPCCE64 views•13 slides
Supplier Sourcing_Cathy.pptxSupplier Sourcing_Cathy.pptx
Supplier Sourcing_Cathy.pptxCatarinaTorrenuevaMa21 views•25 slides
Announcing InfluxDB ClusteredAnnouncing InfluxDB Clustered
Announcing InfluxDB ClusteredInfluxData65 views•30 slides
Webhook Testing StrategyWebhook Testing Strategy
Webhook Testing StrategyDimpy Adhikary72 views•10 slides

Recently uploaded(20)

Take Control of Podcasting thanks to Open Source and Podcasting 2.0Take Control of Podcasting thanks to Open Source and Podcasting 2.0
Take Control of Podcasting thanks to Open Source and Podcasting 2.0
🎙 Benjamin Bellamy•68 views
Document Understanding as Cloud APIs and Generative AI Pre-labeling Extractio...Document Understanding as Cloud APIs and Generative AI Pre-labeling Extractio...
Document Understanding as Cloud APIs and Generative AI Pre-labeling Extractio...
DianaGray10•146 views
Google Cloud Study Jams Info SessionGoogle Cloud Study Jams Info Session
Google Cloud Study Jams Info Session
GDSCPCCE•64 views
Supplier Sourcing_Cathy.pptxSupplier Sourcing_Cathy.pptx
Supplier Sourcing_Cathy.pptx
CatarinaTorrenuevaMa•21 views
Announcing InfluxDB ClusteredAnnouncing InfluxDB Clustered
Announcing InfluxDB Clustered
InfluxData•65 views
Webhook Testing StrategyWebhook Testing Strategy
Webhook Testing Strategy
Dimpy Adhikary•72 views
Unleashing Innovation: IoT Project with MicroPythonUnleashing Innovation: IoT Project with MicroPython
Unleashing Innovation: IoT Project with MicroPython
Vubon Roy•35 views
Scaling out with WordPressScaling out with WordPress
Scaling out with WordPress
Konstantin Kovshenin•58 views
The Ultimate Administrator’s Guide to HCL Nomad WebThe Ultimate Administrator’s Guide to HCL Nomad Web
The Ultimate Administrator’s Guide to HCL Nomad Web
panagenda•65 views
EuroBSDCon 2023 - (auto)Installing BSD Systems - Cases using pfSense, TrueNAS...EuroBSDCon 2023 - (auto)Installing BSD Systems - Cases using pfSense, TrueNAS...
EuroBSDCon 2023 - (auto)Installing BSD Systems - Cases using pfSense, TrueNAS...
Vinícius Zavam•64 views
Privacy in the era of quantum computersPrivacy in the era of quantum computers
Privacy in the era of quantum computers
Speck&Tech•86 views
Product Research Presentation-Maidy Veloso.pptxProduct Research Presentation-Maidy Veloso.pptx
Product Research Presentation-Maidy Veloso.pptx
MaidyVeloso•22 views
Google cloud Study Jam 2023.pptxGoogle cloud Study Jam 2023.pptx
Google cloud Study Jam 2023.pptx
GDSCNiT•364 views
Common WordPress APIs - Options APICommon WordPress APIs - Options API
Common WordPress APIs - Options API
Jonathan Bossenger•29 views
Getting your enterprise ready for Microsoft 365 CopilotGetting your enterprise ready for Microsoft 365 Copilot
Getting your enterprise ready for Microsoft 365 Copilot
Vignesh Ganesan I Microsoft MVP•167 views
Mule Meetup Calgary- API Governance & Conformance.pdfMule Meetup Calgary- API Governance & Conformance.pdf
Mule Meetup Calgary- API Governance & Conformance.pdf
NithaJoseph4•41 views
LLaMA 2.pptxLLaMA 2.pptx
LLaMA 2.pptx
RkRahul16•40 views
Navigating the FutureNavigating the Future
Navigating the Future
OnBoard•32 views
Experts Live Europe 2023 - Ensure your compliance in Microsoft Teams with Mic...Experts Live Europe 2023 - Ensure your compliance in Microsoft Teams with Mic...
Experts Live Europe 2023 - Ensure your compliance in Microsoft Teams with Mic...
Jasper Oosterveld•87 views
"Architecture assessment from classics to details", Dmytro Ovcharenko"Architecture assessment from classics to details", Dmytro Ovcharenko
"Architecture assessment from classics to details", Dmytro Ovcharenko
Fwdays•34 views