Suche senden
Hochladen
Responsive Design: Mehr als CSS
•
0 gefällt mir
•
4,642 views
Walter Ebert
Folgen
Drupal Meetup Frankfurt 12. September 2013
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 22
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
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
Más contenido relacionado
Was ist angesagt?
[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
Was ist angesagt?
(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와 모바일
Ähnlich wie 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
Ähnlich wie 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
Mehr von 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
Mehr von 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
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
nooralam814309
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
IPLOOK Networks
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
adam112203
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
DianaGray10
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility WTS FEST
BillieHyde
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
shyamraj55
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
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
Infopole1
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
Eric D. Schabell
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
ThousandEyes
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
Hansamali Gamage
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
KaustubhBhavsar6
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
Brian Pichman
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
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
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
Safe Software
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
The Good Food Institute
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
Neo4j
March Patch Tuesday
March Patch Tuesday
Ivanti
Último
(20)
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility WTS FEST
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
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
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
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...
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
March Patch Tuesday
March Patch Tuesday
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
Jetzt herunterladen