Mittlerweile als moderne Technik etabliert, beschreiben zahlreiche Tutorials Umsetzungsvorschläge für Responsive Webdesign; dennoch stößt man in Projekten mit einem skalierbaren Layout auf immer gleiche Schwierigkeiten. Häufig haben mobile Geräte eine deutlich schwächere technische Ausstattung als der heimische Desktoprechner, sodass Fragen der Performance auf unterschiedlichen Devices in den Vordergrund gerückt werden. Gerade bei Bildern tauchen Begriffe wie "Responsive Images" oder "Adaptive Images" immer wieder auf. Welche Lösungen wann Sinn ergeben und wie man mit Retina-Screens umgeht, wie der aktuelle Stand des HTML5-Responsive-Image-Elements ist und wie man eine schlanke Bilder erstellt, werden in der Präsentation gezeigt.
Die deutsche Variante meines Talks "Rapid prototyping with jQuery" gibt eine Einleitung ins Prototyping und geht dann weiter über Lösungsansätze, Einsatzmöglichkeiten und Vorteilen von Prototypen.
Understanding and measuring web performanceBogdan Gaza
The document discusses measuring web performance. It defines web performance as the time perceived by a user when loading a web resource. It explains that human perception of time is subjective and variable. It then covers various metrics for measuring performance like time to first byte and page loaded time. Finally, it discusses different tools and techniques for measuring performance, including JavaScript, browser extensions, server modules, and network sniffing.
ThousandEyes provides network intelligence and monitoring of web performance. It offers different test types - HTTP server tests measure server response times, page load tests measure loading of full web pages in a browser, and web transaction tests measure performance of specific user interactions on a site. The tests provide metrics on response times, throughput, errors and performance of individual page components from different network locations and internet providers. The document recommends tips for optimizing web transactions such as adjusting timeouts, configuring start/stop steps, using XPath locators, and inserting wait conditions. It demonstrates creating and running page load, HTTP server and web transaction tests to monitor web performance.
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.
Die deutsche Variante meines Talks "Rapid prototyping with jQuery" gibt eine Einleitung ins Prototyping und geht dann weiter über Lösungsansätze, Einsatzmöglichkeiten und Vorteilen von Prototypen.
Understanding and measuring web performanceBogdan Gaza
The document discusses measuring web performance. It defines web performance as the time perceived by a user when loading a web resource. It explains that human perception of time is subjective and variable. It then covers various metrics for measuring performance like time to first byte and page loaded time. Finally, it discusses different tools and techniques for measuring performance, including JavaScript, browser extensions, server modules, and network sniffing.
ThousandEyes provides network intelligence and monitoring of web performance. It offers different test types - HTTP server tests measure server response times, page load tests measure loading of full web pages in a browser, and web transaction tests measure performance of specific user interactions on a site. The tests provide metrics on response times, throughput, errors and performance of individual page components from different network locations and internet providers. The document recommends tips for optimizing web transactions such as adjusting timeouts, configuring start/stop steps, using XPath locators, and inserting wait conditions. It demonstrates creating and running page load, HTTP server and web transaction tests to monitor web performance.
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.
Vortrag vom 18.07.2013 im Rahmen des Langen Donnerstags in Dortmund. Thema war die technische Seite von responsive Design, sowie das vorstellen nützlicher Tools und Seiten.
Links zu den genannten Seiten und Tools gibt es gebündelt unter
www.falconwhite.de/unter-der-haube
Responsive Webdesign ist grad der heiße Scheiß, allerdings ist Responsive Webdesign mehr, als eine Desktopwebsite in eine mobile Ansicht zu quetschen. Es muss ein neuer Prozess her. Der alte Workflow "Auftrag bekommen > Recherche > Design erstellen > Abnahme > Design umsetzen" funktioniert so nicht mehr. Im Responsive-Webdesign-Prozess müssen alle Beteiligten eines Webprojekts von der ersten Sekunde an enger zusammenarbeiten. Zudem müssen frühzeitige und häufige Testphasen und Implementierungsstrategien gefunden werden.
Bootstrap ist ein Open-Source-Framework von Twitter, das eine Reihe von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen bereitstellt. Die Gestaltungsvorlagen basieren auf HTML und CSS und beinhalten Formulare, Buttons, Tabellen und viele andere Oberflächenelemente. Dieser Vortrag gibt eine Einführung und weitere wertvolle Tipps aus der Praxis.
Das Konzept: Für jeden verständlich und übersichtlich, gemacht für Designer, Template-Entwickler und IT.Alle Anforderungen, alle Besonderheiten für mobile Optimierung müssen spezifiziert sein und dabei soll alles auch noch so einfach wie möglich aufbereitet sein. Gar nicht so einfach, oder?
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
Das Whitepaper gibt einen Überblick über Chancen und Herausforderungen bei der Einführung von Reponsive Webdesign. Welche Möglichkeiten bringt die Anpassung eines Webauftritts an verschiedene Endgeräte mit sich? Wie kann ein einheitliches Nutzererlebnis geschaffen werden? Welche Besonderheiten bringen die einzelnen Projektphasen mit sich?
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet: Einführung und Motivation, Die WebKit-Plattform, Überblick "mobile" Frameworks, Zusammenfassung und Fazit
Responsive Web Design für Mobilgeräte mit Drupal Acquia
Der Anteil an mobilen Besuchern von Webseiten steigt stetig und immer rasanter.
Eine der Lösungen dafür nennt sich "Responsive Web Design" und wird von Drupal durch verschiedenste Base Themes unterstützt. Allerdings gibt es dabei einige wichtige Dinge zu beachten, da die Möglichkeiten für Responsive Web Design fast endlos sind.
Michael Schmid von Amazee Labs hat schon mehrere Responsive Webseiten geplant und umgesetzt und wird einige der Hürden und dessen Lösungen präsentieren.
• Was ist Responsive Web Design und was kann es?
• Übersicht über die verschiedensten Responsive Themes in Drupal 7
• Probleme und Learnings nach über 10 gebauten Drupal Responsive Web Design Webseiten
This document discusses strategies for improving website performance. It begins by showing examples of slow loading pages and notes that responsive web design (RWD) does not inherently improve performance—proper implementation is important. Several tips for optimizing performance are provided, such as concatenating files, minifying code, compressing images, using responsive images, optimizing font and image sizes, and inlining critical CSS. The document also covers topics like bandwidth versus latency, measuring performance, and how HTTP/2 may impact current best practices. The overarching message is that performance should be a priority considered throughout the design and development process.
Vortrag vom 18.07.2013 im Rahmen des Langen Donnerstags in Dortmund. Thema war die technische Seite von responsive Design, sowie das vorstellen nützlicher Tools und Seiten.
Links zu den genannten Seiten und Tools gibt es gebündelt unter
www.falconwhite.de/unter-der-haube
Responsive Webdesign ist grad der heiße Scheiß, allerdings ist Responsive Webdesign mehr, als eine Desktopwebsite in eine mobile Ansicht zu quetschen. Es muss ein neuer Prozess her. Der alte Workflow "Auftrag bekommen > Recherche > Design erstellen > Abnahme > Design umsetzen" funktioniert so nicht mehr. Im Responsive-Webdesign-Prozess müssen alle Beteiligten eines Webprojekts von der ersten Sekunde an enger zusammenarbeiten. Zudem müssen frühzeitige und häufige Testphasen und Implementierungsstrategien gefunden werden.
Bootstrap ist ein Open-Source-Framework von Twitter, das eine Reihe von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen bereitstellt. Die Gestaltungsvorlagen basieren auf HTML und CSS und beinhalten Formulare, Buttons, Tabellen und viele andere Oberflächenelemente. Dieser Vortrag gibt eine Einführung und weitere wertvolle Tipps aus der Praxis.
Das Konzept: Für jeden verständlich und übersichtlich, gemacht für Designer, Template-Entwickler und IT.Alle Anforderungen, alle Besonderheiten für mobile Optimierung müssen spezifiziert sein und dabei soll alles auch noch so einfach wie möglich aufbereitet sein. Gar nicht so einfach, oder?
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
Das Whitepaper gibt einen Überblick über Chancen und Herausforderungen bei der Einführung von Reponsive Webdesign. Welche Möglichkeiten bringt die Anpassung eines Webauftritts an verschiedene Endgeräte mit sich? Wie kann ein einheitliches Nutzererlebnis geschaffen werden? Welche Besonderheiten bringen die einzelnen Projektphasen mit sich?
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet: Einführung und Motivation, Die WebKit-Plattform, Überblick "mobile" Frameworks, Zusammenfassung und Fazit
Responsive Web Design für Mobilgeräte mit Drupal Acquia
Der Anteil an mobilen Besuchern von Webseiten steigt stetig und immer rasanter.
Eine der Lösungen dafür nennt sich "Responsive Web Design" und wird von Drupal durch verschiedenste Base Themes unterstützt. Allerdings gibt es dabei einige wichtige Dinge zu beachten, da die Möglichkeiten für Responsive Web Design fast endlos sind.
Michael Schmid von Amazee Labs hat schon mehrere Responsive Webseiten geplant und umgesetzt und wird einige der Hürden und dessen Lösungen präsentieren.
• Was ist Responsive Web Design und was kann es?
• Übersicht über die verschiedensten Responsive Themes in Drupal 7
• Probleme und Learnings nach über 10 gebauten Drupal Responsive Web Design Webseiten
This document discusses strategies for improving website performance. It begins by showing examples of slow loading pages and notes that responsive web design (RWD) does not inherently improve performance—proper implementation is important. Several tips for optimizing performance are provided, such as concatenating files, minifying code, compressing images, using responsive images, optimizing font and image sizes, and inlining critical CSS. The document also covers topics like bandwidth versus latency, measuring performance, and how HTTP/2 may impact current best practices. The overarching message is that performance should be a priority considered throughout the design and development process.
Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/
Sass is a preprocessor scripting language that is compiled into CSS. It allows for nesting, variables, mixins, and other advanced features to help manage large CSS codebases. The document discusses how to install and use Sass via the command line as well as with GUI tools. Key Sass features covered include variables, nesting, parent selectors, combining selectors, imports, extends, and mixins.
Ein großer Bestandteil von Webseiten ist nach wie vor Text. Die weitreichende Unterstützung von Webfonts in modernen Browsern gibt uns die Möglichkeit, Schriftarten unserer Wahl für die Auszeichnung von Text zu nutzen. Allerdings gibt es auch Fallen bei der Verwendung von Webfonts, die gerade auf mobilen Geräten auftreten können. Lösungswege und Tipps für die Verwendung von Schrift im Responsive Webdesign. Zudem zeigt der Vortrag neue Möglichkeiten in CSS3.
2. Sven Wolfermann (35)
Freelancer für moderne Webentwicklung
(HTML5, CSS3, Responsive Webdesign) aus Berlin
CSS3 Adventskalender 2010/2011
schreibt Artikel für das T3N-, PHP- und
Webstandards-Magazin (new: Screengui.de)
mobile Geek
Wer ist die Flitzpiepe da überhaupt?
Twitter: @maddesigns
Web: http://maddesigns.de
·
·
·
·
·
/
3. Responsive Webdesign
Flexible Spaltenraster, die auf Prozentwerte basieren
Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an
CSS3 um Gerätegröße abzufragen und Inhalte anzupassen
·
·
·
Quelle Bild: http://macrojuice.com/
/
4. flexible Medieninhalte
keine statische Breitenangaben
img,embed,object,video{
max-width:100%;
}
Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhe
soll sich automatisch in Relation anpassen.
img,embed,object,video{
max-width:100%;/*max.originalpxwidth*/
height:auto;
/*width:auto;*/
}
/
6. Responsive Images
Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen
Große Bilder werden zwar verkleinert dargestellt, laden aber
unnötige Datenmengen
<img>-Tag ist nicht dafür ausgelegt
ein responsives Bildformat gibt es nicht
Polyfills müssen helfen
·
·
·
·
·
/
8. Asset Loading Tests von Tim Kadlec
Tests des Ladeverhalten mobiler Browser
Beispiel: Test CSS-Hintergrundbilder
<divclass="test5"></div>
@mediaalland(min-width:601px){
.test5{
background-image:url("img/test5-desktop.png");
}
}
@mediaalland(max-width:600px){
.test5{
background-image:url("img/test5-mobile.png");
}
}
/
9. Asset Loading Tests von Tim Kadlec
nur das passende Bild wird geladen, gut!
Tim Kadlec – Media Query & Asset Downloading Results
/
10. Lösungsansätze für Responsive Images
CSS3-Ansatz von Nicolas Gallagher
<img src="image.jpg" alt="" data-src-600px="image-600px.jpg">
Umsetzung auf CSS-Basis
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
Nachteil: 2 Bilder werden geladen, keine Browserunterstützung
http://nicolasgallagher.com/responsive-images-using-css3/
/
11. Responsive Images
alter Ansatz der Filament Group
<imgsrc="small.jpg?full=large.jpg">
https://github.com/filamentgroup/Responsive-Images
Nachteil: nicht immer kann man "src" verändern (CMS)
wird von der Filament Group nicht mehr empfohlen und nicht
weiterentwickelt!
Responsive Media - Blog Post von @drublic
/
12. Responsive Images
Eine einfache und gute Lösung meiner Meinung nach, ist die
<noscript>-Lösung mit HTML5 data-Attributen
<noscriptdata-large="Koala-large.jpg"
data-small="Koala-small.jpg"
data-alt="Koala">
<imgsrc="Koala-small.jpg"alt="Koala"/>
</noscript>
Vorteil: Assets die im <noscript>-Tag eingebunden sind, werden nicht
vom Browser in den DOM eingefügt (und nicht geladen), wenn
JavaScript aktiviert ist.
Ressourcen werden also nicht doppelt geladen.
JavaScript notwendig
http://www.monoliitti.com/images/
/
14. <picture> Element
Aktuelle W3C-Diskussion – <picture> Element
Aufbau wie <video> Element
<picturewidth="500"height="500">
<sourcesrc="large.jpg" media="(min-width:45em)">
<sourcesrc="middle.jpg"media="(min-width:18em)">
<imgsrc="small.jpg"alt="">
<p>Accessibletext</p>
</picture>
picture element proposal
/
16. Vorschlag: srcset-Attribut
<img> durch ein neues Attribut erweitern, das mehrere Bildpfade und -
qualitäten enthält
<imgalt="TheBreakfastCombo"src="banner.jpeg"
srcset="banner-HD.jpeg2x,banner-phone.jpeg100w,
banner-phone-HD.jpeg100w2x">
Support in CSS für background-images
/*Safari6,Chrome21supportsbackground-image:-webkit-image-set();*/
background-image:-webkit-image-set(
url(cloud-sd.png)1x,url(cloud-hd.png)2x);
-› Retina-Support für iOS
srcset attribut proposal
/
18. <picture> Element + srcset
Das beste aus beiden Vorschlägen
<picturewidth="500"height="500">
<sourcemedia="(min-width:45em)"
srcset="large-1.jpg1x,large-2.jpg2x">
<sourcemedia="(min-width:18em)"
srcset="med-1.jpg1x,med-2.jpg2x">
<sourcesrcset="small-1.jpg1x,small-2.jpg2x">
<imgsrc="small-1.jpg"alt="">
<p>Accessibletext</p>
</picture>
wird mit den Browserherstellern diskutiert, aktuell scheint die
Integration vom "srcset"-Attribut bevorzugt zu werden
https://code.google.com/p/chromium/issues/detail?id=233751
/
19. Clown Car Technique
Media Queries innerhalb SVG
<imgsrc="file.svg"alt="image">
Vorteil:
gut für Bild im Text
Nachteil:
SVG erst ab Android 4, IE9
Bild das erscheint, ist nicht das was man
herunterladen kann
http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-
web-design/
/
25. Focal Point – Lösungsvarianten für Bildausschnitte
http://www.cdnconnect.com/docs/focal-point-css/pure-html-css-responsive-high-resolution-images-solution
35. SVG vs. PNG
SVG 7,57 KB 51,50 KB 4,50 KB
PNG 200px 6,50 KB 11,10 KB 4,18 KB
PNG 400px 11,80 KB 27,60 KB 8,32 KB
PNG 800px 18,50 KB 72,70 KB 14,80 KB
fett = PNG kleiner als SVG
die Datenmenge für kleine PNG-Bilder ist häufig kleiner als eine SVG-
Grafik
super WPO Slides von Christian @derSchepp Schäfer
/
36. Classic CSS Sprites – Image-Requests sparen
kleine Grafiken oder Icons zu großen Sprite-Grafiken
zusammenfassen
mit CSS background-position den richtigen Ausschnitt anzeigen
·
·
CSS Sprite [DE]
/
39. Icon Fonts == Dingbats on dope
Vorteil:
Farben und Größe der Icons kann leicht mit CSS angepasst werden
zusätzlich können CSS-Effekte wie text-shadow oder animation für
die Darstellung genutzt werden
·
·
/
43. Data URI
super für kleine Grafiken, die nicht für Sprite-Image geeignet sind
(Twitter nutzt diese Technik für die Timeline Profilbilder)
optimal wenn Grafiken nur 1x vorkommen
reduziert die HTTP-Requests
Nachteile
nicht cachebar (cachebar in externen CSS Dateien)
IE8+ (IE8 Data-URI limitation < 24kb)
·
·
·
·
·
/
44. Vorsicht mit großen Bildern – iOS Resource Limits
Max. Größe für GIF, PNG & TIF = 3 Megapixel für Geräte < 256MB
RAM, 5 Megapixel ≥ 256 MB RAM
width * height ≤ 3 * 1024 * 1024.
Hinweis: Das dekodierte Bild ist weit aus größer als die enkodierte
Bild.
Mit Hilfe von Subsampling beträgt die maximale Größe von JPEGs 32
Megapixel. Das Subsampling dekodiert die JPEG Bilder so, dass sie
nur noch ein sechzehntel der ursprünglichen Pixel haben. Um den
Speicher zu reduzieren werden alle JPEGs mit mehr als 2 Megapixel
gesampelt.
·
·
·
Know iOS Resource Limits
/
46. Bildoptimierung kann Kosten sparen
Beispiel:
Amazon Web Service (AWS) – jedes gesparte Byte kann helfen Kosten
zu sparen
https://twitter.com/andmag/status/339987087531057153
/
47. Bildformat
das richtige Bildformat je Bildinhalt verwenden!
lieber PNG als GIF (besser komprimierbar)
PNG8 für einen limitierten Farbraum
PNG24 für Bilder mit Alphatransparenz
8bit PNG mit Alphatransparenz: http://pngmini.com/
zusätzlich PNGs crushen!
Bestes Tool: http://imageoptim.com/ (Mac)
RIOT http://luci.criosweb.ro/riot/ (Win)
·
·
·
·
·
·
Alpha Transparency in PNG-8 Images Without Using Fireworks
/
48. JPG für Photos verwenden! -› JPEGmini
Online-Tool
http://www.jpegmini.com/
/
49. kleinere Bilddaten bei vergleichbarer Qualität
neues Bildformat durch Google entwickelt (Ursprung in der WebM-
Videokompression)
komprimiert verlustbehaftet oder verlustfrei
statische oder animierte Bilder
unterstützt Alphatransparenzen
kann also PNG und JPG ersetzen
nur Chrome (und Opera)
Problematisch: Facebook testete WebP-Bilder, User waren unzufrieden
·
·
·
·
·
Video und Slides zum WebP-Status
/
50. Weitere Online-Tools zur Bildkomprimierung
PunyPNG
Smush.it
TinyPNG
http://img2webp.net
·
·
·
·
lossless image optimization tools
/