SlideShare a Scribd company logo
1 of 7
Download to read offline
Responsive Design
   about.me/markustripp
Beispiele

http://stuffandnonsense.co.uk/projects/320andup/

http://owltastic.com/

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-
FINAL.html

http://responsivetwentyten.com/

http://2011.dconstruct.org/
Responsive vs Mobile

Eigene Mobile Version:
  http://www.goodhousekeeping.com/

  Google Plus Mobile Web Version

  Wikipedia Mobile

  “Design a separate mobile site”
  http://www.useit.com/alertbox/mobile-usability.html
Techniken
Responsive Videos:
http://webdesignerwall.com/demo/elastic-videos/


Responsive Images:
http://filamentgroup.com/examples/responsive-images-new/demos/A-
Default/demo.html


CSS3 Media Queries:
http://www.woothemes.com/2011/05/responsive-design-using-css3-
media-queries/


Skalieren und verbergen

Touch und HOVER
The Boston Globe

Responsive Design

HTML5 (offline)

Eine Version für Web, Touch, Mobile
http://www.boston.com/bostonglobe/features/

http://www.bostonglobe.com/
Online Artikel


http://www.alistapart.com/articles/
responsive-web-design

http://www.webdesignerdepot.com/2011/09/
the-ultimate-responsive-web-design-
roundup/
Danke & Diskussion
     @markustripp

More Related Content

Viewers also liked

@SiteCanada - Social for Events @SamStanton - Toronto 11/13/13
@SiteCanada - Social for Events @SamStanton - Toronto 11/13/13@SiteCanada - Social for Events @SamStanton - Toronto 11/13/13
@SiteCanada - Social for Events @SamStanton - Toronto 11/13/13redbutton.tv
 
διδακτικη επισκεψη πληροφορικης φεστιβαλ ψηφιακης δημιουργιας
διδακτικη επισκεψη πληροφορικης   φεστιβαλ ψηφιακης δημιουργιαςδιδακτικη επισκεψη πληροφορικης   φεστιβαλ ψηφιακης δημιουργιας
διδακτικη επισκεψη πληροφορικης φεστιβαλ ψηφιακης δημιουργιαςcristos
 
San Francisco Food Society 6/2012
San Francisco Food Society 6/2012San Francisco Food Society 6/2012
San Francisco Food Society 6/2012VerticalResponse
 
Email Marketing 1-2-3: How to Get Started, Get Results and Get Growing
Email Marketing 1-2-3: How to Get Started, Get Results and Get GrowingEmail Marketing 1-2-3: How to Get Started, Get Results and Get Growing
Email Marketing 1-2-3: How to Get Started, Get Results and Get GrowingVerticalResponse
 
21 final 3 g
21 final 3 g21 final 3 g
21 final 3 gManish
 
E4 - 4ο Γυμνάσιο Χανίων
E4  - 4ο Γυμνάσιο ΧανίωνE4  - 4ο Γυμνάσιο Χανίων
E4 - 4ο Γυμνάσιο Χανίωνcristos
 
George Cadena fundador Aeterna sol
George Cadena fundador Aeterna solGeorge Cadena fundador Aeterna sol
George Cadena fundador Aeterna solSOFOFAInnova
 
Jean-Jaques Rousseau Vida Completa, Aportaciones pedagógicas y educación en e...
Jean-Jaques Rousseau Vida Completa, Aportaciones pedagógicas y educación en e...Jean-Jaques Rousseau Vida Completa, Aportaciones pedagógicas y educación en e...
Jean-Jaques Rousseau Vida Completa, Aportaciones pedagógicas y educación en e...patrybernado
 

Viewers also liked (8)

@SiteCanada - Social for Events @SamStanton - Toronto 11/13/13
@SiteCanada - Social for Events @SamStanton - Toronto 11/13/13@SiteCanada - Social for Events @SamStanton - Toronto 11/13/13
@SiteCanada - Social for Events @SamStanton - Toronto 11/13/13
 
διδακτικη επισκεψη πληροφορικης φεστιβαλ ψηφιακης δημιουργιας
διδακτικη επισκεψη πληροφορικης   φεστιβαλ ψηφιακης δημιουργιαςδιδακτικη επισκεψη πληροφορικης   φεστιβαλ ψηφιακης δημιουργιας
διδακτικη επισκεψη πληροφορικης φεστιβαλ ψηφιακης δημιουργιας
 
San Francisco Food Society 6/2012
San Francisco Food Society 6/2012San Francisco Food Society 6/2012
San Francisco Food Society 6/2012
 
Email Marketing 1-2-3: How to Get Started, Get Results and Get Growing
Email Marketing 1-2-3: How to Get Started, Get Results and Get GrowingEmail Marketing 1-2-3: How to Get Started, Get Results and Get Growing
Email Marketing 1-2-3: How to Get Started, Get Results and Get Growing
 
21 final 3 g
21 final 3 g21 final 3 g
21 final 3 g
 
E4 - 4ο Γυμνάσιο Χανίων
E4  - 4ο Γυμνάσιο ΧανίωνE4  - 4ο Γυμνάσιο Χανίων
E4 - 4ο Γυμνάσιο Χανίων
 
George Cadena fundador Aeterna sol
George Cadena fundador Aeterna solGeorge Cadena fundador Aeterna sol
George Cadena fundador Aeterna sol
 
Jean-Jaques Rousseau Vida Completa, Aportaciones pedagógicas y educación en e...
Jean-Jaques Rousseau Vida Completa, Aportaciones pedagógicas y educación en e...Jean-Jaques Rousseau Vida Completa, Aportaciones pedagógicas y educación en e...
Jean-Jaques Rousseau Vida Completa, Aportaciones pedagógicas y educación en e...
 

Similar to Responsive Design

Mobil web technológiai utak, tervezés - Kolozsi István, kolboid
Mobil web technológiai utak, tervezés - Kolozsi István, kolboidMobil web technológiai utak, tervezés - Kolozsi István, kolboid
Mobil web technológiai utak, tervezés - Kolozsi István, kolboidIstván Kolozsi
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & HellClarissa Peterson
 
Responsive Design: Uitdagingen en Oplossingen
Responsive Design: Uitdagingen en OplossingenResponsive Design: Uitdagingen en Oplossingen
Responsive Design: Uitdagingen en OplossingenThemePartner
 
Tools that help and speed up RWD dev
Tools that help  and speed up RWD devTools that help  and speed up RWD dev
Tools that help and speed up RWD devMatjaž Korošec
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingVisual Engineering
 
(WI2012) Lucijan Blagonic - Responsive web design
(WI2012) Lucijan Blagonic - Responsive web design(WI2012) Lucijan Blagonic - Responsive web design
(WI2012) Lucijan Blagonic - Responsive web designWeb::INDUSTRIJA
 
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishingBriding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishingTom Deryckere
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordRuss Weakley
 
Responsive Web Design: buzzword or revolution?
Responsive Web Design: buzzword or revolution?Responsive Web Design: buzzword or revolution?
Responsive Web Design: buzzword or revolution?Wojtek Zając
 
Mobile Development Tips: Building Mobile Apps for Digital Libraries
Mobile Development Tips: Building Mobile Apps for Digital LibrariesMobile Development Tips: Building Mobile Apps for Digital Libraries
Mobile Development Tips: Building Mobile Apps for Digital Librariesjason clark
 
Developing for Mobile Web
Developing for Mobile WebDeveloping for Mobile Web
Developing for Mobile WebBarbara Bermes
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Thomas Carney
 
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...UX Riga
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-airbrucelawson
 

Similar to Responsive Design (20)

Mobil web technológiai utak, tervezés - Kolozsi István, kolboid
Mobil web technológiai utak, tervezés - Kolozsi István, kolboidMobil web technológiai utak, tervezés - Kolozsi István, kolboid
Mobil web technológiai utak, tervezés - Kolozsi István, kolboid
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
 
Responsive Design: Uitdagingen en Oplossingen
Responsive Design: Uitdagingen en OplossingenResponsive Design: Uitdagingen en Oplossingen
Responsive Design: Uitdagingen en Oplossingen
 
Tools that help and speed up RWD dev
Tools that help  and speed up RWD devTools that help  and speed up RWD dev
Tools that help and speed up RWD dev
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
 
(WI2012) Lucijan Blagonic - Responsive web design
(WI2012) Lucijan Blagonic - Responsive web design(WI2012) Lucijan Blagonic - Responsive web design
(WI2012) Lucijan Blagonic - Responsive web design
 
Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishingBriding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Responsive Web Design: buzzword or revolution?
Responsive Web Design: buzzword or revolution?Responsive Web Design: buzzword or revolution?
Responsive Web Design: buzzword or revolution?
 
Mobile Development Tips: Building Mobile Apps for Digital Libraries
Mobile Development Tips: Building Mobile Apps for Digital LibrariesMobile Development Tips: Building Mobile Apps for Digital Libraries
Mobile Development Tips: Building Mobile Apps for Digital Libraries
 
Developing for Mobile Web
Developing for Mobile WebDeveloping for Mobile Web
Developing for Mobile Web
 
Responsive Web Design - UX/UI
Responsive Web Design - UX/UIResponsive Web Design - UX/UI
Responsive Web Design - UX/UI
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
 

Recently uploaded

Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 

Recently uploaded (20)

Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 

Responsive Design

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n