Tipps und Tricks » kleine webmaster FAQ

ID #1829

performance: wie sieht es da bei responsive webdesign aus ?

Hallo,

zum Performance-Test habe ich eine vor ca. 10 Jahre programmierte JavaScript-Animation in eine CSS3-Animation umgeschrieben. 8 unterschiedliche DIV-Container werden mit keyframes und margin-left in Prozentwerten verschoben.

22%

22% auf einem schnellen desktop-Rechner... das ist viel !

Hier der erste Versuch es mit CSS3 zu gestalten:

Auch wenn dieser Test vielleicht übertrieben erscheint, so zeigt er doch dass sich die performance bei Prozentwerten sich verschlechtert. Beim responsiven webdesign sollte man mit Prozentwerten nicht übertreiben.

Gerade bei smartphones kann man davon ausgehen, dass diese wesentlich langsamer arbeiten als ein Desktop-Rechner.

Nach der Regel mobile first, fängt man also mit dem "Schwächsten" an und richtet das mobile-layout auf fixen Werten aus. Mir ist selber noch nicht klar, was der ideale Wert wäre. Vielleicht für 300px bis 479 px ein zentriertes layout mit 300px fixer Breite. Bei 480px folgt dann das erste Media-Query mit Prozentwerten, z.B. 480-800px; und falls notwendig auch eines für den landscape-Modus mit einer Höhe von 320px !

Einfaches Beispiel (Fenster vom browser auf ca. 3000px verkleinern).

Bin noch am testen und probieren, dazu später mehr in einem anderen Beitrag.

Eines ist jedoch klar, keine Prozentwerte für den kleinsten und schwächsten viewport.

.
.
 

Tags: Animation, CSS3, HTML5, performance, responsive, webdesign, webmaster

Verwandte Artikel:

Letzte Änderung des Tests: 2018-01-17 11:15
Autor: pipe

Leser: 4193 (19.5 pro Tag )


Revision: 1.0

Artikel bewerten

bisher bewertet
4 (408 ×)

1 2 3 4 5

Kommentar schreiben


Spam Schutz

..