Soumettre la recherche
Mettre en ligne
Responsive Design: Mehr als CSS
•
0 j'aime
•
4,642 vues
Walter Ebert
Suivre
Drupal Meetup Frankfurt 12. September 2013
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 22
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Contenu connexe
Tendances
[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
Tendances
(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와 모바일
Similaire à 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
Similaire à 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
Plus 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
Plus 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
Dernier
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
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Neo4j
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
IES VE
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
Hansamali Gamage
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
DianaGray10
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series - Day 1
DianaGray10
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
Infopole1
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
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
DianaGray10
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Tejal81
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
DianaGray10
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
xtailishbaloch
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Alkin Tezuysal
March Patch Tuesday
March Patch Tuesday
Ivanti
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
IES VE
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
ThousandEyes
From the origin to the future of Open Source model and business
From the origin to the future of Open Source model and business
Francesco Corti
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
Brian Pichman
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
Satishbabu Gunukula
Dernier
(20)
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series - Day 1
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
March Patch Tuesday
March Patch Tuesday
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
From the origin to the future of Open Source model and business
From the origin to the future of Open Source model and business
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
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
Télécharger maintenant