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.
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
Seit dem Artikel von Ethan Marcotte hat Responsive Webdesign richtig Fahrt aufgenommen. Responsive Webdesign ist ein zentrales Buzzword, wenn es um Webentwicklung, E-Commerce, UX, SEO und Marketing geht. Seit 2010 hat sich viel verändert. Browser und Techniken haben sich weiterentwickelt. Das Nutzerverhalten hat sich stark verändert, heute sind Nutzer immer und überall online. Aber was ist mit uns, wo bleiben unsere Innovationsstärke und der Mut für Neues? Wir, die Websites verkaufen, konzipieren, designen und entwickeln. Entrepreneurship und Innovation erfordern Mut und einen Schritt weiterzugehen als alle anderen - where no man has gone before. Der Vortrag zeigt, dass jetzt der Zeitpunkt ist, innovative HTML- und CSS-Techniken einzusetzen.
Borrowing money from loansharks can lead to serious financial problems due to extremely high interest rates. The document provides an example where someone borrowed $10,353 from a loanshark and owed $10,917.24 after just one month, which equates to an annual interest rate of 5.45%. At this rate, the amount owed would double to over $20,000 within just 1.44 months. The conclusion warns against borrowing from loansharks and encourages people with financial problems to seek help from organizations like the National Council for Problem Gambling instead of risking severe debt.
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?
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
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
Gerade der Umgang mit Typografie im Web ist von hoher Bedeutung. Im Webdesign kommt es beim Text vor allem auf gute Lesbarkeit an, da das Lesen an verschiedenen Devices schneller ermüdet als z.B. das Lesen eines Buches.
Außerdem soll sich der Font stimmig in die Webseite einfügen und zum Corporate Design des Unternehmens passen.
Gute Typografie ist daher unerlässlich – dieses Whitepaper gibt interessante Einblicke, worauf zu achten ist.
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?
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
Seit dem Artikel von Ethan Marcotte hat Responsive Webdesign richtig Fahrt aufgenommen. Responsive Webdesign ist ein zentrales Buzzword, wenn es um Webentwicklung, E-Commerce, UX, SEO und Marketing geht. Seit 2010 hat sich viel verändert. Browser und Techniken haben sich weiterentwickelt. Das Nutzerverhalten hat sich stark verändert, heute sind Nutzer immer und überall online. Aber was ist mit uns, wo bleiben unsere Innovationsstärke und der Mut für Neues? Wir, die Websites verkaufen, konzipieren, designen und entwickeln. Entrepreneurship und Innovation erfordern Mut und einen Schritt weiterzugehen als alle anderen - where no man has gone before. Der Vortrag zeigt, dass jetzt der Zeitpunkt ist, innovative HTML- und CSS-Techniken einzusetzen.
Borrowing money from loansharks can lead to serious financial problems due to extremely high interest rates. The document provides an example where someone borrowed $10,353 from a loanshark and owed $10,917.24 after just one month, which equates to an annual interest rate of 5.45%. At this rate, the amount owed would double to over $20,000 within just 1.44 months. The conclusion warns against borrowing from loansharks and encourages people with financial problems to seek help from organizations like the National Council for Problem Gambling instead of risking severe debt.
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?
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
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
Gerade der Umgang mit Typografie im Web ist von hoher Bedeutung. Im Webdesign kommt es beim Text vor allem auf gute Lesbarkeit an, da das Lesen an verschiedenen Devices schneller ermüdet als z.B. das Lesen eines Buches.
Außerdem soll sich der Font stimmig in die Webseite einfügen und zum Corporate Design des Unternehmens passen.
Gute Typografie ist daher unerlässlich – dieses Whitepaper gibt interessante Einblicke, worauf zu achten ist.
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?
Antipasti
Typografie im Allgemeinen
Ein Rückblick vom Buchdruck bis Brody frisch garniert mit einigen Beispielen
Primi Piatti
Web-Typografie im Besonderen
HTML Basics mit einem Schuss Best Practices
Secondi Piatti
Tipps und Tools
Variationen zu Farbe, Raum und Schrift nach Laune des Chefs
Dolci
Trends und Ausblick
Chancen und Möglichkeiten von Mobile Devices, HTML 5 und Flash
Mit CSS3 Media Queries ist es möglich, die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht. Webautoren können so beispielsweise auf die Breite des Browserfensters reagieren und ein Spaltenlayout auflösen, wenn die Breite für die mehrspaltige Darstellung nicht mehr ausreicht. Oder sie können spezielle Stylesheets für die Darstellung auf dem iPhone oder iPad bereitstellen, abhängig davon, wie das Gerät in der Hand gehalten wird. Dieser Vortrag führt ein in die Funktionsweise von CSS Media Queries und zeigt aktuelle Anwendungsbeispiele, die in (fast) allen aktuellen Browsern funktionieren.
Webautoren haben verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken, sowohl bei der Einbindung eines Stylesheets als auch für bestimmte Regeln innerhalb des Stylesheets. Mit CSS3 Media Queries ist es möglich, die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht.
There and back again - Responsive Webdesign mit WordPress Michael Oeser
There and back again - Responsive Webdesign (RWD) mit WordPress - Vom Desktop zum Smartphone und wieder zurück
Präsentation anlässlich der Wordpress Konferenz am 05.03.2013 in Zürich
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.
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.
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.
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
HTML5 ist langsam, oder? Nein, in der Tat zeigt sich die grundlegende Geschwindigkeit von Cross-Plattform-HTML5-Anwendungen heutzutage in einem sehr positiven Licht. Es gibt aber doch ein paar Fallstricke, in denen sich der Entwickler schnell verfängt, wenn er nicht auf ein paar Punkte achtet. Der Vortrag geht zuerst auf die Vorgehensweise der Performancemessung ein. Anschließend werden die Top Performance-Tipps gezeigt, um nochmal einen ordentlichen Schub an Power herausholen zu können. Lassen Sie uns Gas geben!
Responsive Web Design is a buzzword. Everyone has heard about it but most do not exactly know what it is in detail. In the first section this talk covers an introduction in responsive webdesign and what are the main technical aspects and workflow changes. the second part handles a success story of the real world project how to transform a non responsive site into a fluid one.
This talk was held on the PHP Usergroup Düsseldorf in April 2014.
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.
Antipasti
Typografie im Allgemeinen
Ein Rückblick vom Buchdruck bis Brody frisch garniert mit einigen Beispielen
Primi Piatti
Web-Typografie im Besonderen
HTML Basics mit einem Schuss Best Practices
Secondi Piatti
Tipps und Tools
Variationen zu Farbe, Raum und Schrift nach Laune des Chefs
Dolci
Trends und Ausblick
Chancen und Möglichkeiten von Mobile Devices, HTML 5 und Flash
Mit CSS3 Media Queries ist es möglich, die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht. Webautoren können so beispielsweise auf die Breite des Browserfensters reagieren und ein Spaltenlayout auflösen, wenn die Breite für die mehrspaltige Darstellung nicht mehr ausreicht. Oder sie können spezielle Stylesheets für die Darstellung auf dem iPhone oder iPad bereitstellen, abhängig davon, wie das Gerät in der Hand gehalten wird. Dieser Vortrag führt ein in die Funktionsweise von CSS Media Queries und zeigt aktuelle Anwendungsbeispiele, die in (fast) allen aktuellen Browsern funktionieren.
Webautoren haben verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken, sowohl bei der Einbindung eines Stylesheets als auch für bestimmte Regeln innerhalb des Stylesheets. Mit CSS3 Media Queries ist es möglich, die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht.
There and back again - Responsive Webdesign mit WordPress Michael Oeser
There and back again - Responsive Webdesign (RWD) mit WordPress - Vom Desktop zum Smartphone und wieder zurück
Präsentation anlässlich der Wordpress Konferenz am 05.03.2013 in Zürich
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.
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.
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.
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
HTML5 ist langsam, oder? Nein, in der Tat zeigt sich die grundlegende Geschwindigkeit von Cross-Plattform-HTML5-Anwendungen heutzutage in einem sehr positiven Licht. Es gibt aber doch ein paar Fallstricke, in denen sich der Entwickler schnell verfängt, wenn er nicht auf ein paar Punkte achtet. Der Vortrag geht zuerst auf die Vorgehensweise der Performancemessung ein. Anschließend werden die Top Performance-Tipps gezeigt, um nochmal einen ordentlichen Schub an Power herausholen zu können. Lassen Sie uns Gas geben!
Responsive Web Design is a buzzword. Everyone has heard about it but most do not exactly know what it is in detail. In the first section this talk covers an introduction in responsive webdesign and what are the main technical aspects and workflow changes. the second part handles a success story of the real world project how to transform a non responsive site into a fluid one.
This talk was held on the PHP Usergroup Düsseldorf in April 2014.
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.
2. Sven Wolfermann (36)
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. The responsive web will be
99.9% typography
— James Young (@welcomebrand)
“
”
The responsive web will be 99.9% typography
/
5. Typography in ten minutes
http://practicaltypography.com/typography-in-ten-minutes.html
/
6. Typography in ten minutes
Wichtigste Fakten
Bodytext gut aussehen lassen, dann um den Rest kümmern
Bodytext Schriftgröße: 15–25 Pixel
Zeilenhöhe sollte bei 120–145% liegen
Zeilenlänge sollte zwischen 45–90 Zeichen pro Zeile betragen
Nach Möglichkeit keine Systemfont verwenden, sondern eine
professionelle Webfont
·
·
·
·
·
/
7. Anything from 45 to 75 characters is widely
regarded as a satisfactory length of line for
a single-column page set in a serifed text
face in a text size […] (counting both letters
and spaces) […].
—2.1.2 Choose a comfortable measure
“
”
The Elements of Typographic Style Applied to the Web
/
8. optimal Zeilenlänge 45 - 75 Zeichen
Trent Walton nutzt einen einfachen Trick mit * Sternchen
Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do
eiusmod *tempor incididunt ut labore et dolore magna aliqua.
„Wenn die zwei Sternchen in einer Textzeile sind, ist es Zeit die
Schriftgröße zu erhöhen.“
Fluid Type
/
10. Leseabstand zum Bildschirm
The reference pixel is the visual angle of
one pixel on a device with a pixel density of
96dpi and a distance from the reader of an
arm's length.
For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For
reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).
“
”
http://www.w3.org/TR/css3-values/#lengths
/
11. Typographic scale
Schriftgrößen-Empfehlung von Marko Dugonjić
kurze Leseentfernung: 16px, 18px, 21px, 24px
mittlere Leseentfernung: 18px, 21px, 24px, 36px
lange Leseentfernung: 21px, 24px, 36px, 48px
·
·
·
Responsive Web Typography
/
17. relative Schriftgröße – em
Bei der Berechnung von em-basierenden Schriften acht geben. Der em-
Wert von font-size bezieht sich auf das Elternelement, em-Wert von
margin/padding auf die eigene font-size
span{
font-size:0.666666667em;/*16px/24px*/
}
Überschrift
dienocheineSublinehat
In fast allen Browsern ist 16px die Default-Schriftgröße, allerdings
haben einige Mobile-Browser höhere Schriftgrößen. Blackberry OS 6.0
= 22px, Kindle Touch = 26px, UC-Browser = 19px.
/
19. relative Schriftgröße – rem
rem Schriftgrößen basierend auf dem Rootelement (<html>)
span{
font-size:1rem;/*16px/16px*/
}
Achtung! rem basiert auf <html>
=> default meist 100% => 16px!
html{font-size:16px;}
body{font-size:62.5%;}
Media-Querys in em – Basisberechnung ist 16px, nicht was für html {}
definiert ist
/
20. CSS3 rem Einheit » Browser-Support
Chrome seit Version 6.0 (aktuell Version 29)
Firefox seit Version 3.6 (aktuell Version 23)
Opera / Mobile seit 11.6 / 12.0 (16 / 14)
Safari / iOS seit Version 5.0 / 4.0 (6.0 / 6.1)
Android seit Version 2.1 (4.3)
IE / mobile seit Version 9.0 / 9.0 (10.0 / 10.0)
IE9/10interpretierenrem nichtinder"font"Shorthand-Notation(fixedinIE11)
/
21. Einfaches Sass-Mixin mit px-Fallback
$main-font-size:16px;
@mixinx-rem($property,$value){
#{$property}:$value*$main-font-size;
#{$property}:#{$value}rem;
}
//usage
.some-class{
@includex-rem(font-size,1.4);
}
The REM Fallback with Sass or LESS
/
24. CSS3 vw, vh, vmin, vmax Einheit » Browser-Support
Chrome seit Version 26.0 (aktuell Version 29)
Firefox seit Version 19 (aktuell Version 23)
Opera / Mobile seit 15 / 14 (16 / 14)
Safari / iOS seit Version 6.0 / 6.0 (6.0 / 6.1)
Android kein Support :(
IE / mobile seit Version 9.0 / 9.0 (10.0 / 10.0)
/
25. CSS3 vw, vh, vmin, vmax Einheit » Browser-Bugs
IE9 unterstützt "vm" anstatt "vmin"
Chrome unterstützt die Viewport Einheiten in border-width, column-
gap oder in calc() nicht.
Chrome ist buggy bei vertikaler Veränderung des Browserfenster
Viewport Einheiten in font-size werden in WebKit bei Veränderung
des Browserfenster nicht angepasst.
·
·
·
·
/
29. Text-Size Anpassung auf iOS unterbinden
/*preventautotext-sizeadjusting*/
html{
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
letter-spacing
letter-spacing im Web ist oft zu eng
p{
letter-spacing:0.01em;
word-spacing:0.01em;
}
/
30. Vorsichtig bei text-rendering: optimizeLegibility
Vorteil: Kerning aktivieren
h1{
text-rendering:optimizeLegibility;
}
Firefox: wenndie font-size größer als 20px ist, dannnutzt Firefox automatisch
optimizeLegibility; für kleinerenText nutzt Firefox optimizeSpeed
/
31. Probleme/Bugs die bei der Verwendung von 'text-rendering'
aufgetreten sind
text-overflow: ellipsis; wird falsch dargestellt
Fonts embedded with @font-face will not work on Android when text-
rendering: optimizeLegibility is used.
letter-spacing don't work in Chrome
significant performance issues with optimizeLegibility on mobile
devices, it can negatively impact page load when applied to large
blocks of text.
Windows. text-rendering: optimizeLegibility; font-variant: small-caps;
small-caps are ignored
·
·
·
·
·
/
33. @font-face
Web-Fonts werden in allen Browsern bis zurück zum IE6 unterstützt
Das klingt doch gut!
zu schön um wahr zu sein...
@font-face{
font-family:'DINBold';
src:url("din-bold-webfont.eot");
src:url("din-bold-webfont.eot?#iefix")format("embedded-opentype"),
url("din-bold-webfont.woff")format("woff"),
url("din-bold-webfont.ttf")format("truetype"),
url("din-bold-webfont.svg#DINBold")format("svg");
}
um Gottes Willen...
/
42. Font-Loading Performance
Text mit Webfonts werden in mobilen
Browsern nicht angezeigt, bis die Schrift
geladen ist um den „FOUT“ (Flash of
unstyled content) zu vermeiden.
/
45. Font-Loading Performance
Webfonts nur für große Bildschirme (impliziert schnellere Verbindung)
@font-face{
font-family:"Fontname";
src:url("/fonts/Fontname-Regular.woff")format("woff");
font-weight:normal;
font-style:normal;
}
@mediaonlyscreenand(min-width:768px){
body{
font-family:"Fontname",Georgia,serif;
}
}
in modernen Browsern werden Schriften erst geladen, wenn sie
zugewiesen werden
/
46. Font-Loading Performance
m.guardian.co.uk lädt Webfonts nur für moderne Devices (Browser)
Cutting the mustard?
WOFF Support?
LocalStorage?
=> safe fonts to LocalStorage
=> load fonts
·
·
·
Cutting the mustard
/
52. Fallback-Fonts auf mobilen Geräten
Helvetica nur auf iOS, Arial auf iOS, WP und BB
auf Android nur Droid Sans, Droid Serif, Droid Sans Mono und Roboto
/
53. Fallback-Fonts auf mobilen Geräten
Helvetica-Fallback Beispiel
Firefox für Android seit Version 21 mit neuen System-Fonts
Open-Sans CharisImproved type on Firefox for Android
/
59. hyphenation – automatische Trennung
wenn Text zentriert wird, hyphenation aktivieren
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Wichtig: Dokumentensprache angeben <html lang="de">
getrennt wird anhand der im Browser integrierten Wörterbücher, Support kann unterschiedlich
sein
Problem: kaum Einfluss wann getrennt wird
hyphenate-limit-lines: 2; /* support in IE10 */
hyphenate-limit-chars: 6 3 2; /* longer than 6 characters, 3 or more
before break, 2 or more after break */
Chrome 29 und Android 4.0 Browser unterstützen "-webkit-hyphens: none", aber nicht die "auto"
Eigenschaft.
·
·
·
Finer grained control of hyphenation with CSS4 Text
/
60. Font-Features
OpenType Features mit CSS3 nutzen
OpenType tag Enables
kern Kerning
liga Standard ligatures
dlig Discretionary ligatures
smcp Small capitals
subs Subscript
sups Superscript
swsh Swashes
ss01, ss02, …, ss20 Stylistic sets 1 to 20
OpenType features in web browsers
/
61. Font-Features
Small Caps aktivieren (10% vergrößerte Kapitälchen)
p.smallcaps{font-feature-settings:"smcp"1;}
Ligaturen aktivieren
p.ligatures{font-feature-settings:"liga"on;}
mehrere Zuweisungen
.element{
-webkit-font-feature-settings:"kern","liga","case";
-moz-font-feature-settings:"kern","liga","case";
font-feature-settings:"kern","liga","case";
}
/