Responsiv nach Google

Aufgabenstellung

Die Vorgaben von Google bezüglich der optimalen Ladezeiten für eine Mobile Site sind sportlich: Die Forderung von Google ist das fertige Rendern des sichtbaren Inhalts in unter 1 Sekunde. Dabei hat man praktisch nur auf die letzten 400ms Einfluss:
200ms DNS Lookup
200ms TCP Connection
200ms HTTP Request and Response
200ms Server Response Time
200ms Client Site Rendering

Dies wird so in der Form z.B. nicht vom populären Boot Strap umgesetzt.

Analysiere die gegebenen Quellen und ergänze sie nach Bedarf. Lege dabei fest welche Teilziele Du konkret umsetzen möchtest. Für diese Teilziele lieferst Du ein geeignetes Messverfahren um die Wirksamkeit deiner Lösung zu beweisen. Entwickele darauf basierend dein Framework für ein googlefreundliches Mobile First Template <1sek.

Code like a Poem: Semantik, lesende Namen und dein kommentierter Quellcode sollen eine spätere beliebige Anpassung durch Dritte unterstützen. Die Gestaltung dieses Basis-Templates soll optisch neutral sein. Typische Elemente wie Überschriften, Bilder, Tabellen, Links, Text und Listen sollen exemplarisch dargestellt sein. Die modernen Mobil- und Desktop Browser sollen unterstützt sein, z.B. durch Vendor-Prefixe.

1. Mobile Analyse in PageSpeed Insights
2. Regeln von PageSpeed Insights
3. Performance Optimization (Critical Rendering Path)
4. Ansatz für Responsives Design von HTML5Rocks


Fakten und Ressourcen

CODEBeschreibung
NiveauFortgeschritten


Skript

Im kostenlosen CODE Skript sind umfangreiche ergänzende Informationen und die gesamten Tabellen der Übersichten zu den HTML Elementen und CSS Eigenschaften, Scripts, Layout und andere Aspekte des Webdesigns wie z.B. praktische Beispiele für Javascript, PHP und MySQL.

CODE-Skript 1617 (7.7 MiB)

Abgabetermin9. November 2015 für 11MED
Bewertung• Geeignetes Messverfahren
• Ladezeit unter 1 Sekunde mit responsiven Bildern
• Sauberer und semantisch korrekter Quellcode
• Sinnvolle Kommentare und lesende Namen im Quellcode
• Anpassungsfreundlichkeit des Templates
• Optische ausgeglichene Gestaltung
• Schriften und Bilder müssen frei verwendbar sein
• Angaben zur Browser-Kompatibilität
• Angabe der verwendeten Hard- und Software, Fonts, Scripts etc.

Empfohlene Software

Diese kostenlose Open Source Software hat sich vielfach bewährt.

SoftwareBedeutung
Sublime Text 3Kostenloser Editor für alle Betriebssysteme mit vielen praktischen Funktionen. Es gibt noch eine ganze Reihe anderer Editoren die auch zu Empfehlen sind.
FirebugBei der Arbeit mit Quellcode ist es sehr hilfreich zu prüfen was im Browser ankommt. Firebug zeigt den CODE für HTML, CSS und Javascript und bietet auch die Möglichkeit diesen temporär in der Vorschau zu ändern. Firebug ist eine kostenlose Erweiterung für den Firefox Browser. Es gibt Firebug auch für Chrome. Für Safari sind vergleichbare Webentwickler-Tools eingebaut.
FileZillaWenn eine Webseite auf einen Webserver hochgeladen werden muss, wird meist das File-Transfer-Protokoll (FTP) benutzt. Um z.B. Daten auf einen Server im Internet zu spielen benötigst Du eine FTP Software. Filezilla ist eine sehr gute und kostenlose Lösung für alle Betriebssysteme. Mit dem FTP Programm lassen sich auch Lese- und Schreibrechte festlegen. Ebenso andere Sicherheitsaspekte wie .htaccess insofern dies nicht über den Dienst des Webserver gesteuert wird.
Adobe Photoshop

Gimp
Wer Adobe Photoshop zur Verfügung hat, der benutzt natürlich den weltweiten Branchen-Standard für Bildbearbeitung. Lösbar sind die meisten einfachen Anforderungen allerdings auch mit dem kostenlosen Gimp. In der Arnold-Bode-Schule arbeiten wir aus professionellen Gründen mit Adobe und haben das auf jedem Computer.
waterfall

Die kostenlose Webseite webpagetest.org bietet für die Messung der Geschwindigkeit viele nützliche Funktionen. Z.B. kann der Ort des Servers und die dortigen Betriebssysteme (z.B. iOS oder Android) gewählt werden. Die Ladezeiten der Elemente werden in einem Waterfall-Diagramm aufschlussreich wiedergegeben. Es wird auch ein Video vom Page-Load aufgezeichnet.

www.webpagetest.org

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit