SlideShare a Scribd company logo
Responsive Design
    about.me/markustripp
       @markustripp
about


Markus Tripp, 38, Salzburg, Linz
Sony, Netociety, Wikitude,Yasssu, Fabasoft
the boston globe


Der Durchbruch
http://www.bostonglobe.com
begin


A LIST apart: May 25, 2010, Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
320andup


Erstes Framework
http://stuffandnonsense.co.uk/projects/320andup/
Simon Collison


Frühes Beispiel
http://colly.com/
A book apart


http://www.abookapart.com/products/responsive-web-design
Beispiele


Ultimate Responsive Web Design Roundup
http://www.webdesignerdepot.com/2011/09/the-ultimate-
responsive-web-design-roundup/
konzepte


CSS Media Queries, Flexible Grid, Images,
Videos, ...
media queries

@media only screen and
    (max-width: 980px) and
    (min-width: 500px) {

        body {background: black};
}
flexible media

Bilder
http://filamentgroup.com/examples/responsive-images/

Videos
http://webdesignerwall.com/demo/elastic-videos/

Text
http://fittextjs.com/
twitter bootstrap


Responsive HTML5 User Interface
http://twitter.github.com/bootstrap/
m-trends


Flipboard iPhone, Google+
native apps, mobile web,
responsive design, mobile hybrid
Flipboard
Video
http://scobleizer.com/2011/12/12/viral-coefficients-store-
feature-branding-influencers-cool-apps-on-ios-first/

iPad
http://www.youtube.com/watch?v=11pQ5sb5wME&t=6m30s

iPhone
http://www.youtube.com/watch?v=11pQ5sb5wME&t=9m20s
Danke
about.me/markustripp
   @markustripp

More Related Content

Similar to Responsive Design

#RWD To the future
#RWD To the future#RWD To the future
#RWD To the future
Davorin Pavlica
 
Forum One Responsive Design UXCampDC 2013
Forum One Responsive Design UXCampDC 2013Forum One Responsive Design UXCampDC 2013
Forum One Responsive Design UXCampDC 2013
Forum One
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
Malcolm Jones
 
(WI2012) Lucijan Blagonic - Responsive web design
(WI2012) Lucijan Blagonic - Responsive web design(WI2012) Lucijan Blagonic - Responsive web design
(WI2012) Lucijan Blagonic - Responsive web design
Web::INDUSTRIJA
 
Rulespace
RulespaceRulespace
Rulespace
Matt Jones
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
Clarissa Peterson
 
jy-web-visualization-ux08-slides
jy-web-visualization-ux08-slidesjy-web-visualization-ux08-slides
jy-web-visualization-ux08-slides
Jeremy Yuille
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Lucijan Blagonic
 
Design Camp Cologne (Public)
Design Camp Cologne (Public)Design Camp Cologne (Public)
Design Camp Cologne (Public)
Martin Koser
 
Size Doesn't Matter
Size Doesn't MatterSize Doesn't Matter
Size Doesn't Matter
Roy Degler
 
Next Generation Media - Wolter
Next Generation Media - WolterNext Generation Media - Wolter
Next Generation Media - Wolter
Codemotion
 
Roll Your Own CSS Framework
Roll Your Own CSS FrameworkRoll Your Own CSS Framework
Roll Your Own CSS Framework
Mike Aparicio
 
Must Know Web 20 For Nyscate 2010
Must Know Web 20 For Nyscate 2010Must Know Web 20 For Nyscate 2010
Must Know Web 20 For Nyscate 2010
Karen Brooks
 
Georgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityGeorgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
Christian Heilmann
 
Firefox Developer Tools
Firefox Developer ToolsFirefox Developer Tools
Firefox Developer Tools
dynamis
 
Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008
guest1fb6e4
 
Digital Fabrication Studio.01 _Fabbing @ Aalto Media Factory
Digital Fabrication Studio.01 _Fabbing @ Aalto Media FactoryDigital Fabrication Studio.01 _Fabbing @ Aalto Media Factory
Digital Fabrication Studio.01 _Fabbing @ Aalto Media Factory
Massimo Menichinelli
 
iMoot16 - Radioactive Spider Bite
iMoot16 - Radioactive Spider BiteiMoot16 - Radioactive Spider Bite
iMoot16 - Radioactive Spider Bite
Stephan Rinke
 
Mobile: the next frontier
Mobile: the next frontierMobile: the next frontier
Mobile: the next frontier
Mike Ellis
 
Si mobile projectsv2
Si mobile projectsv2Si mobile projectsv2
Si mobile projectsv2
Nancy Proctor
 

Similar to Responsive Design (20)

#RWD To the future
#RWD To the future#RWD To the future
#RWD To the future
 
Forum One Responsive Design UXCampDC 2013
Forum One Responsive Design UXCampDC 2013Forum One Responsive Design UXCampDC 2013
Forum One Responsive Design UXCampDC 2013
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
 
(WI2012) Lucijan Blagonic - Responsive web design
(WI2012) Lucijan Blagonic - Responsive web design(WI2012) Lucijan Blagonic - Responsive web design
(WI2012) Lucijan Blagonic - Responsive web design
 
Rulespace
RulespaceRulespace
Rulespace
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
jy-web-visualization-ux08-slides
jy-web-visualization-ux08-slidesjy-web-visualization-ux08-slides
jy-web-visualization-ux08-slides
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Design Camp Cologne (Public)
Design Camp Cologne (Public)Design Camp Cologne (Public)
Design Camp Cologne (Public)
 
Size Doesn't Matter
Size Doesn't MatterSize Doesn't Matter
Size Doesn't Matter
 
Next Generation Media - Wolter
Next Generation Media - WolterNext Generation Media - Wolter
Next Generation Media - Wolter
 
Roll Your Own CSS Framework
Roll Your Own CSS FrameworkRoll Your Own CSS Framework
Roll Your Own CSS Framework
 
Must Know Web 20 For Nyscate 2010
Must Know Web 20 For Nyscate 2010Must Know Web 20 For Nyscate 2010
Must Know Web 20 For Nyscate 2010
 
Georgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityGeorgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
 
Firefox Developer Tools
Firefox Developer ToolsFirefox Developer Tools
Firefox Developer Tools
 
Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008
 
Digital Fabrication Studio.01 _Fabbing @ Aalto Media Factory
Digital Fabrication Studio.01 _Fabbing @ Aalto Media FactoryDigital Fabrication Studio.01 _Fabbing @ Aalto Media Factory
Digital Fabrication Studio.01 _Fabbing @ Aalto Media Factory
 
iMoot16 - Radioactive Spider Bite
iMoot16 - Radioactive Spider BiteiMoot16 - Radioactive Spider Bite
iMoot16 - Radioactive Spider Bite
 
Mobile: the next frontier
Mobile: the next frontierMobile: the next frontier
Mobile: the next frontier
 
Si mobile projectsv2
Si mobile projectsv2Si mobile projectsv2
Si mobile projectsv2
 

Recently uploaded

Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 

Recently uploaded (20)

Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 

Responsive Design

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n