Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Darstellung der Website auf Smartphone

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Trainer zeigt in diesem Video die Darstellung der Beispiel-Website auf einem Smartphone. Dabei skaliert das mobile Endgerät die Seite passend für den kleineren Bildschirm.

Transkript

Seit der Vorstellung des iPhones im Jahre 2007 hat sich das Verb langsam aber sicher verändert und immer mehr Menschen serven mit mobilen Geräten. Eine Webseite muss also heute auf Smartphones, Tabletes, Notebooks und traditionellen Desktop-Computern, also auf Bildschirmen mit einer Diagonale von 3-30 Zoll, so rund gerechnet, gut aussehen und bedienbar sein. Ich möchte Ihnen jetzt zeigen wie Sie für die Beispielsite eine einfache mobile Version erstellen können. Denn Webseiten für mobile Geräte zu optimieren , also responsive zu machen wie man das Neudeutsch oft nennt, ist eine Wissenschaft für sich, die in einer CSS Einführung nicht wirklich abgedeckt werden kann, aber mit ein Paar grundlegenden Änderungen verhalten sich die Beispielseiten sowohl in kleinen als auch in großen Browserfenstern durchaus akzeptabel. Eine Technik die sich dieses Problems annimmt sind die in CSS 3 eingeführten Media Queries. Medientypen wie screen und print haben Sie bereits kennengelernt und die Beispielseiten haben eine mit @media print erstelle Druckversion. Media Queries gehen einen Schritt weiter und erlauben es auch zum Beispiel die Breite des Browserfensters abzufragen. Bevor es losgeht sollte man aber das Testen auf richtigen Geräten vorbereiten, wenn möglich sollten Sie dazu die Beispielseiten auf einen Webspace kopieren und dann im Smartphonebrowser die URL eingeben, das ist am einfachsten. Ansonsten ist es schwierig die Wbseiten auf das Gerät zu kriegen und dann im Browser anzuschauen. Die gute Nachricht ist, die modernen Browser verhalten sich auf Betriebsystemen wie Android oder Windows Phone recht ähnlich. Die Beispielseiten so wie sie unverändert sind würden etwas so aussehen. Und da sehen Sie schon, der Browser auf einem Smartphone zoomt die Seite einfach klein, so dass Sie komplett zu sehen ist, aber dafür kaum noch zu lesen. Das kann man hier erkennen. Er nimmt die gesamte Breite, also 720 Pixel und zoomt das so weit runter, dass man das sehen kann. Das ist also alles nur noch ungefähr halb so groß und der Text ist doch ein bisschen sehr klein. Der Benutzer könnte jetzt hier natürlich mit den Fingern pinschen und zoomen und hin und her schieben, aber so richtig benutzerfreundlich ist das nicht. Besonders beim Formular zum Beispiel ist das Ausfüllen eigentlich kaum noch möglich.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!