Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS3 for mobile

No description
by

Sven Wolfermann

on 8 October 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS3 for mobile

Mit CSS3 das mobile Web beschleunigen mobile web performance optimierung Wer ist die Flitzpiepe da überhaupt? Sven Wolfermann, 33 - Freelancer aus Berlin

hat Ahnung von TYPO3 & CSS (sagt er)

schreibt für das Webstandards-Magazin

Twitter: @maddesigns Warum ist Performance auch/gerade mobil wichtig? • das mobile Netz ist teilweise erhebliche langsamer

• mobile Prozessoren sind langsamer

• mobile Browser sind nicht so leistungsfähig wie Desktop-Browser

• mobile Nutzer nutzen das Internet anders/unterschiedlich Das Rendering auf Smartphones ist 40%-80% langsamer,
auf älteren internetfähigen Geräten 4x-10x langsamer

- User erwarten dass mobiles Browsing genau so schnell ist Mobile Browser • Es gibt zu viele verschiedene

• Sie unterstützen teilweise nicht alle Eigenschaften

• Sind schlecht updatebar

• Kaum Dokumentation Allerdings ist der CSS3 Support bei Webkit-Browsern
(Safari/iPhone, Android) sehr gut CSS3-Eigenschaften, mit denen
man auf 90% der Layoutgrafiken
verzichten kann -webkit-border-radius & -webkit-border-image

-webkit-text-stroke & -webkit-text-fill-color

-webkit-gradient

- webkit-transitions & -webkit-transform

- font-face Zudem unterstützen eine Vielzahl der Browser
CSS Sprites sowie inline images (data URl) Das bringt natürlich Performance
ohne Ende... Das spart Server-Anfragen (http-requests) und somit Zeit
-> wo wir bei der Performance-Optimierung sind Performance-Gedöns Für die Startseite ist es ratsam CSS & Javascript
direkt im Head einzubinden und erst auf Folgeseiten über <link> auszulagern, damit es cachebar ist

noch schöner:
JS & CSS in HTML5 localStorage speichern Und natürlich dann nur je eine komprimierte CSS und eine JS-Datei

Unnötige CSS-Files entfernen (print.css)

Expires Header & GZIP verwenden Redirects vermeiden, die gleiche Startseite zu verwenden
kann auch SEO-Vorteile bringen Cookies vermeiden (werden bei jedem Request mitgesendet),
wenn es geht HTML5 localStorage verwenden CSS3 Media-Queries auf Gerätegrößen reagieren "Mit Media Queries können die Eigenschaften von Ausgabemedien
wie mobilen Endgeräten abgefragt und somit CSS-Eigenschaften
speziell für die Fähigkeiten dieser Medien angelegt und somit für
den Anwender zielgerichtet optimiert werden." @media (min-width: 950px) {
/* Regeln für breite Browserfenstern */
}

@media (min-width: 450px) and (max-width: 950px) {
/* Regeln für Netbooks */
}

@media (max-width: 450px) {
/* Regeln für mobile Geräte */
} @media all and (orientation: portrait) {
body { }
div { }
}


Beim drehen des iPhone wird die Textgröße angepasst
-> verhindern durch:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
} @media screen and (max-width: 600px) {
.aside,
.intro,
.main,
.footer {
float: none;
width: auto;
}
} Auf iPhone 4 Retina Displayauflösung reagieren <link
rel="stylesheet"
type="text/css"
href="/css/retina.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/> Native Funktionen verknüpfen

<a href="tel:01234567890">Anrufen</a>
<a href="sms:01234567890">SMS senden</a>

<input type="number" />
<input type="url" />
<input type="email" /> Kleiner Showcase - http://mediaqueri.es/ und dann testen, testen, testen...

...wenn möglich auf echten Endgeräten
mit echter Funkverbindung!

alternativ:
http://www.mobilexweb.com/emulators Linkschleuder <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAA0CAMAAABfCzE1AAAAGXRFWHRTb..." /> <img src=“logo-maddesigns.png“ width=“150“ height=“52“ alt=“Logo maddesigns“ /> Data URl Online-Tool:
http://yellowgreen.de/image-to-base64-string-encoder Wir brauchen Speed! also Geschwindigkeit, ihr wisst schon... Fragen? CSS Device Adaptation Neuer Ansatz von Opera um
<meta name="viewport" content="width=device-width"/> mit CSS zu ersetzen

@viewport {
width: device-width;
}

http://bit.ly/o-viewport mobile performance tester

http://www.blaze.io/mobile/ http://html5boilerplate.com/mobile/

- Starter Kit für mobile WebApps
- cross-browser optimiert inkl. best practices Mobile Boilerplate http://stevesouders.com/mobileperf

45 most useful guidelines for mobile web design & development
http://bit.ly/mobile-guidelines

Fingers are Bigger than Mice – Design Concepts for Mobile Websites
http://bit.ly/mobile-design-concepts

Optimizing your email for mobile devices with the @media query
http://bit.ly/html-mail-query

deutschsprachige Slides über CSS Media Queries
http://www.slideshare.net/jendryschik/css-media-queries http://blog.kissmetrics.com/loading-time/ -border-radius
-linear-gradient
-box-shadow bit.ly/hl87lQ bit.ly/dE5Ecl -border-radius
-transform
-box-shadow
-font-face http://bit.ly/css3-advent Danke! http://maddesigns.de

@maddesigns Nachteil:

Image-Resourcen werden trotzdem mit heruntergeladen auch wenn sie laut @media-Querie nicht angezeigt werden sollen

Webkit-Barrier-Trick => @charset "utf-8";

Webkit bricht das weitere Parsen ab, wenn es tiefer als in Zeile 1 auf eine @charset-Deklaration trifft.

http://www.der-schepp.de/webkit-barrier/
Full transcript