Enviar pesquisa
Carregar
Responsive Design: Mehr als CSS
•
0 gostou
•
4,642 visualizações
Walter Ebert
Seguir
Drupal Meetup Frankfurt 12. September 2013
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 22
Baixar agora
Baixar para ler offline
Recomendados
High Performance Images
High Performance Images
Walter Ebert
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
Walter Ebert
Bilder usw...
Bilder usw...
Walter Ebert
Weniger aus Bilder holen
Weniger aus Bilder holen
Walter Ebert
Bilder einbinden ist kein Thema, oder?
Bilder einbinden ist kein Thema, oder?
Walter Ebert
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
Christian Heilmann
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
Christopher Schmitt
Jag tag
Jag tag
Sandra Helms-Stolpa
Mais conteúdo relacionado
Mais procurados
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
Christopher Schmitt
Responsive and Fast
Responsive and Fast
Sven Wolfermann
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
Christopher Schmitt
Responsive Enhancement
Responsive Enhancement
Sven Wolfermann
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
Christopher Schmitt
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
Christopher Schmitt
Hybrid app
Hybrid app
hyun soomyung
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
Christopher Schmitt
Ie9 dev overview (300) beta
Ie9 dev overview (300) beta
Kirk Yamamoto
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
Walter Ebert
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
Christopher Schmitt
WordCamp Praga 2015
WordCamp Praga 2015
Tomasz Dziuda
HTML5 Multimedia
HTML5 Multimedia
Siddhi
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
Christopher Schmitt
How We Build NG-MY Websites: Performance, SEO, CI, CD
How We Build NG-MY Websites: Performance, SEO, CI, CD
Seven Peaks Speaks
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
Web page load speed optimization
Web page load speed optimization
Dmitry Dudin
Making the HTML5 Video element interactive
Making the HTML5 Video element interactive
Charles Hudson
HTML5와 모바일
HTML5와 모바일
ACCESS
Mais procurados
(20)
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
Responsive and Fast
Responsive and Fast
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
Responsive Enhancement
Responsive Enhancement
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
Hybrid app
Hybrid app
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
Ie9 dev overview (300) beta
Ie9 dev overview (300) beta
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
WordCamp Praga 2015
WordCamp Praga 2015
HTML5 Multimedia
HTML5 Multimedia
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
How We Build NG-MY Websites: Performance, SEO, CI, CD
How We Build NG-MY Websites: Performance, SEO, CI, CD
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Web page load speed optimization
Web page load speed optimization
Making the HTML5 Video element interactive
Making the HTML5 Video element interactive
HTML5와 모바일
HTML5와 모바일
Semelhante a Responsive Design: Mehr als CSS
Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011
Patrick Lauke
Responsive Websites
Responsive Websites
Joe Seifi
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
Makoto Mori
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
Roni Banerjee
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
betabeers
Once Source to Rule Them All
Once Source to Rule Them All
David Yeiser
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
Patrick Lauke
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Patrick Lauke
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
alanburke
Upload[1]
Upload[1]
mirjana stojanova
smoke1272528461
smoke1272528461
mxsmoketest
Bootstrap
Bootstrap
Sarvesh Kushwaha
Responsive layouts by Maqbool
Responsive layouts by Maqbool
Navin Agarwal
CSS framework By Palash
CSS framework By Palash
PalashBajpai
Responsive content
Responsive content
honzie
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
adhocgraFX
Bootstrap 3 Cheat Sheet PDF Reference
Bootstrap 3 Cheat Sheet PDF Reference
Bootstrap Creative
Ss 36932418[1]
Ss 36932418[1]
Ya Jinda
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
Wahyu Putra
Xxx
Xxx
syfwan
Semelhante a Responsive Design: Mehr als CSS
(20)
Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011
Responsive Websites
Responsive Websites
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
Once Source to Rule Them All
Once Source to Rule Them All
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
Upload[1]
Upload[1]
smoke1272528461
smoke1272528461
Bootstrap
Bootstrap
Responsive layouts by Maqbool
Responsive layouts by Maqbool
CSS framework By Palash
CSS framework By Palash
Responsive content
Responsive content
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
Joomla!Day 2013 Nürnberg; Vortrag von Johannes Hock
Bootstrap 3 Cheat Sheet PDF Reference
Bootstrap 3 Cheat Sheet PDF Reference
Ss 36932418[1]
Ss 36932418[1]
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
Xxx
Xxx
Mais de Walter Ebert
FrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-Instanz
Walter Ebert
Hero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp Ruhr
Walter Ebert
Sicherheit für WordPress
Sicherheit für WordPress
Walter Ebert
WordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp Stuttgart
Walter Ebert
WordPress aufräumen
WordPress aufräumen
Walter Ebert
Hero Video Performance
Hero Video Performance
Walter Ebert
WordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellen
Walter Ebert
Using browser settings for performance
Using browser settings for performance
Walter Ebert
Das richtige WordPress-Theme finden
Das richtige WordPress-Theme finden
Walter Ebert
WordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp Würzburg
Walter Ebert
WordPress Health Check
WordPress Health Check
Walter Ebert
Making WordPress fast(er)
Making WordPress fast(er)
Walter Ebert
Testumgebungen für WordPress
Testumgebungen für WordPress
Walter Ebert
Modernism in Web Design
Modernism in Web Design
Walter Ebert
WordPress Multisite
WordPress Multisite
Walter Ebert
WordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwalten
Walter Ebert
HTTPS + Let's Encrypt
HTTPS + Let's Encrypt
Walter Ebert
WordPress-Themes mit Twig entwickeln
WordPress-Themes mit Twig entwickeln
Walter Ebert
Mehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp Köln
Walter Ebert
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
Walter Ebert
Mais de Walter Ebert
(20)
FrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-Instanz
Hero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp Ruhr
Sicherheit für WordPress
Sicherheit für WordPress
WordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen
WordPress aufräumen
Hero Video Performance
Hero Video Performance
WordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellen
Using browser settings for performance
Using browser settings for performance
Das richtige WordPress-Theme finden
Das richtige WordPress-Theme finden
WordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp Würzburg
WordPress Health Check
WordPress Health Check
Making WordPress fast(er)
Making WordPress fast(er)
Testumgebungen für WordPress
Testumgebungen für WordPress
Modernism in Web Design
Modernism in Web Design
WordPress Multisite
WordPress Multisite
WordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwalten
HTTPS + Let's Encrypt
HTTPS + Let's Encrypt
WordPress-Themes mit Twig entwickeln
WordPress-Themes mit Twig entwickeln
Mehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WordCamp Köln
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
Último
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
IES VE
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
Infopole1
SheDev 2024
SheDev 2024
GDSC PJATK
20140402 - Smart house demo kit
20140402 - Smart house demo kit
Jamie (Taka) Wang
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
DianaGray10
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
Satishbabu Gunukula
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
Neo4j
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
KaustubhBhavsar6
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
Eric D. Schabell
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
Knoldus Inc.
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series - Day 1
DianaGray10
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
MAGNIntelligence
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
Neo4j
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Product School
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
ThousandEyes
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
DianaGray10
Último
(20)
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
SheDev 2024
SheDev 2024
20140402 - Smart house demo kit
20140402 - Smart house demo kit
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series - Day 1
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
Responsive Design: Mehr als CSS
2.
<meta name="viewport" content="width=device-width, initial-scale=1"> <link
href="all.css" rel="stylesheet" media="all"> <link href="mobile.css" rel="stylesheet" media="(max-width: 480px)"> <link href="desktop.css" rel="stylesheet" media="(min-width: 481px)">
3.
https://github.com/scottjehl/CSS-Download-Tests
4.
86% der responsive Websites sind
in der mobilen Ansicht genau so schwer wie in der Desktop Ansicht http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
5.
Runterladen & Verstecken <div
id="main">...</div> <div id="sidebar">...</div> @media (max-width: 480px) { #sidebar {display: none;} }
6.
Runterladen & Schrumpfen <div
id="main"> <img src="foto-1024px.jpg"> </div> @media (max-width: 480px) { #main img { max-width: 100%; height: auto; } }
7.
<script src="jquery.min.js"></script> <script src="masonry.pkgd.min.js"></script> <script> var
$container = $('#container'); $container.masonry({ columnWidth: 200, itemSelector: '.item' }); </script> http://masonry.desandro.com/ Javascript
8.
<script src="masonry.pkgd.min.js"></script> <script> var container
= document.querySelector('#container'); var msnry = new Masonry( container, { columnWidth: 200, itemSelector: '.item' }); </script> http://masonry.desandro.com/
9.
- 93 kB -
1 HTTP Request
10.
<script> if (typeof document.querySelector
=== "undefined") { // jQuery } else { // Reines Javascript } </script>
11.
<script> if ( window.matchMedia("(min-width: 36em)").matches )
{ document.write("<script src='masonry.pkgd.min.js'><" + "/script>"); window.onload = function() { new Masonry( document.querySelector(".masonry"), {itemSelector:".item"}); }; } </script>
12.
http://responsiveimages.org/
13.
http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/ <img src="fallback.jpg" srcset="small.jpg 640w
1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">
14.
https://github.com/borismus/srcset-polyfill
15.
http://adaptive-images.com/
16.
http://www.resrc.it/
17.
Video Media Queries <video
controls> <source src="small.mp4" type="video/mp4" media="(max-width:480px)"> <source src="small.webm" type="video/webm" media="(max-width:480px)"> <source src="big.mp4" type="video/mp4"> <source src="big.webm" type="video/webm"> </video>
18.
http://www.lukew.com/ff/entry.asp?1392 RESS: Responsive Design + Server
Side Components
19.
<div id="main">...</div> <div id="sidebar"> <?php
if ( is_mobile() ): ?> Mobil <?php else: ?> Desktop <?php endif; ?> </div>
20.
http://detectmobilebrowsers.com/ http://wurfl.sourceforge.net/ https://deviceatlas.com/ Endgeräte-Erkennung
21.
http://mobilewebbestpractices.com/
22.
Walter Ebert @wltrd walterebert.de slideshare.net/walterebert drupal.org/user/699574
Baixar agora