Für mobile Geräte optimieren
Prima, wir haben mittlerweile unsere erste Website erstellt, – was jetzt noch fehlt? Wir müssen die Seite für die mobilen Geräte, insbesondere für das Smartphone, optimieren.
Wir gehen also zu unserer Seite, in meinem Beispiel die Testseite. Und drücken auf „Bearbeiten“. Unsere fertige Seite erscheint. Oben links finden wir den Punkt „Mobile“ und klicken ihn. Jetzt optimieren wir die mobile Ansicht und wie wir sehen, sind erstmal alle Elemente von unserer Website neben das Handy verschoben. Unsere Aufgabe ist jetzt also, die Elemente einzeln zu sortieren. Aber keine Sorge, hier bekommen wir Hilfe, und zwar gehen wir dazu auf „anpassen“.
Dort haben wir verschiedene Möglichkeiten: Wir können alle Elemente anpassen, also inklusive Kopf- und Fußzeile. Wir können auch Elemente ausblenden, oder wir können sagen, wir wollen den Desktop soweit wie möglich auch in der mobilen Ansicht kopieren. Das funktioniert aber nur dann, wenn deine Desktopansicht auch entsprechend gestaltet ist. Sobald du mit mehreren Spalten arbeitest, sieht das schon komisch aus.
Elemente anordnen
Wir müssen, was die Elemente angeht, ein bisschen feintunen. Oben ist unser Logo, das können wir lassen, dann kommt das Menü, – da gehen wir auf: die Ansicht für Endgeräte bearbeiten. Wir sehen, dass wir nun in der Ansicht „Mobile“ sind. Auswählen, speichern, bestätigen. Du kannst aus verschiedenen Vorlagen wählen. Du siehst dort, wie dein Menü aussehen könnte. Auswählen und damit ist dein Menü auch schon fertig eingerichtet. Die weiteren Elemente können wir jetzt auch entsprechend anpassen: „Anpassung mobil“ Die Schrift kann für die mobilen Geräte meist kleiner sein. Es folgt: z.B. Video hochziehen, einpassen, Button – fertig. Das hat den Vorteil, dass am Ende wirklich alles so aussieht, wie man das auf dem Smartphone haben möchte.
Und hier wird nochmal wichtig, warum ich vorher gesagt habe: Arbeitet immer mit diesen Bannern, denn dann könnt ihr hier diese ganzen Sektion schneller hin- und her schieben, was das Arbeiten deutlich vereinfacht. Wenn eihrr alles zurecht geschoben habt, könnt ihr oben auf Vorschau gehen. Dort bekommt ihr jetzt die Handyansicht zu sehen und könnt prüfen, ob alles so ist, wie euch das gefällt. Jeder kann sein Layout nach eigenem Gusto durcharbeiten. Auf diese Weise erstellt ihr eure komplette Web-Version, speichert sie zum Schluss, – das ist wie immer wichtig. Und wenn wir jetzt zurück zur Desktop-Ansicht geht, seht ihr, dass diese unverändert geblieben ist.
0 Kommentare