Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Muse CC Grundkurs

Responsive Webdesign erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Nach der Fertigstellung einer Desktop-Website müssen weitere Designs für mobile Endgeräte erstellt werden. Dabei lassen sich Plan und Attribute der Website sowie die Browser-Füllung übernehmen.

Transkript

Irgendwann einmal sind Sie mit Ihrer Webseite so weit fertig. Der Kunde ist zufrieden, so weit ist also alles gut. Jetzt merkt der Kunde aber möglicherweise: Ui, wenn ich mirdieser Webseite auf meinem Smartphone anschaue, dann ist diese Webseite nur sehr-sehr schwer von dem Benutzer zu lesen, weil er häufig mit so einer Vergrößerungsgeste die Webseiten vergrößern muss und so weiter und so fort. Und der Kunde fragt, vielleicht gibt es dafür keine Lösung. Doch, dafür gibt es eine Lösung. Und die Lösung nennt sich Responsive Web-Design. Wenn man hier oben nämlich sieht, dann sehen Sie, kann man dort ein Tablett-Layout hinzufügen und auch ein Telefone-Layout hinzufügen. Bevor ich Ihnen das zeige, wie das innerhalb von Adobe Muse geht, möchte ich Ihnen aber grundsätzlich erst mal zeigen, was ist mit dem so genannten Responsive Web-Design auf sich hat. Dazu wechsle ich hier mal in den Internet-Browser und zeige hier mal die Start-Seite von dem Wochenmagazin der Focus. Die haben selbstverständlich auch eine Webseite. Und so wie man das jetzt hier auf dieser Webseite kennt, kennt man das von vielen Webseiten. Sie haben hier so ein Mehrspaltensatz, linke Spalte, eine etwas schmalere rechte Spalte, und jetzt haben wir hier sehr-sehr viele Bilder und sehr-sehr viele Punkte, die man hier anklicken kann. Man kann es sich schon vorstellen, wenn man sich diese Seite auf einem Smartphone anschaut, dann ist es nur sehr schwer zu erkennen. Das kann man auch immer so ein bisschen grob simulieren, und dazu gehe ich einfach mal hin und verkleinere jetzt hier diese Webseite in etwa auf diese Größe, und Sie sehen, sehr-sehr ansehend ist das Ganze nun nicht mehr. Ich ziehe das Ganze jetzt hier noch mal groß und stattdessen gibt es bei dem Focus und bei vielen anderen Magazinen, aber in gleicher Art und Weise, auch eine mobile Ansicht. Wenn ich die nun einmal auswähle, dann sehen Sie, diese mobile Ansicht, haben wir jetzt hier oben ein Menü. Und das ist recht aufgehornt, und Sie sehen, wenn wir jetzt hier nach unten scrollen, wir haben jetzt nun noch eine Einspaltenansicht. Weiter fällt auf, dass der Text hier so ausläuft. Na ja, auch da können wir erst mal simulieren, wie das Ganze denn ausschaut, wenn wir jetzt hier das Ganze auf einem Smartphone uns anschauen würden. Sie sehen, jetzt gibt auf einmal diese Einspaltenansicht auch wirklich Sinn. Wir haben jetzt hier oben ein sehr aufgeräumtes Menü, und haben hier unten diese Einspaltenansicht. Klar, dadurch muss man entweder dafür sorgen, dass der Benutzer sehr-sehr weit nach unten scrollen muss, oder die andere Alternative, die ich im Alltag auch empfehlen kann, ist, dass man sich überlegt, welche Inhalte möchte denn der Benutzer wirklich auf einem mobilen Gerät betrachten, vermutlich werden das gar nicht mehr alle Inhalte sein, die Sie dem Benutzer auch in der normalen Ansicht präsentieren wollen. Wechseln wir hier zurück in Adobe Muse. Bevor ich Ihnen je diese beiden Knöpfe zeige, möchte ich Ihnen erst mal noch zeigen, was denn passiert, wenn Sie eine neue Seite erstellen. Wenn ich nämlich hier auf Neue Site klicke, dann habe ich hier immer die Variante Anfängliches Layout, also was soll quasi hier Start-Layout sein. Und das steht hier auf Desktop, und das kann man aber umstellen auf Tablett. Dann würde man jetzt hier starten mit diesem Layout. Sie sehen, die Ränder sind alle auf Null gesetzt worden. Auf einem Tablett genauso wie auf einem Smartphone gibt es durchaus Sinn, weil, wenn man so will, das Gerät selber ja den Rand darstellt, so dass wir auf dem Bildschirm wirklich die Pixel fast bis ganz links, ganz nach rechts ausnützen können, bis ganz an die Ränder, sollte man auch da im Allgemein nicht gehen. Aber da können Sie wirklich sehr-sehr weit an die Ränder gehen, wie gesagt, für den optischen Eindruck haben Sie einen Rand, nämlich das Gerät selber. Und hier habe ich jetzt das anfängliche Layout Tablett. Oder ich kann auch sagen – anfängliches Layout Telefone. Ich persönlich habe die Erfahrung gemacht, dass man eigentlich so gut wie nie mit einem mobilen Layout beginnt, also fast immer mit dem Desktop Layout anfängt, dann die Webseite entwickelt, und man dann eine eher eingeschränkte Version und eine abgespeckte Version für das Telefone erstellt. Ich klicke hier auf Abbrechen, ich möchte das jetzt nicht übergehen. Ich möchte aus diesem bereits existierenden Projekt jetzt eben meine Telefonseite machen. Und dazu klicke ich hier auf Plus Telefon, und nun, sehen Sie, dass hier ein Dialogfeld entsteht und zwar habe ich jetzt hier die Möglichkeit zu sagen: die Telefon-Layout-Ansicht, da fang ich komplett von Null an. Dann wählen Sie hier aus Kopieren Ohne. Oder Sie sagen: Ne-ne, ich möchte hier bereits die Desktopvariante als Vorlage benutzen und darauf möchte ich mein Telefon-Layout ableiten. Jetzt kann man hier sagen: Site Plan Kopieren, Seiten Attribute Kopieren, das wäre zum Beispiel die Information, ob eine Seite im Menü erscheint oder nicht, und die Browservolume kopieren, das können wir ebenfalls übernehmen, da ist es hier ohnehin keine besondere Browservolume gesetzt habe, lass ich hier einfach mal leer. Ich klicke nun auf Okey. Und nun wird das Ganze übernommen. Möglicherweise sind Sie jetzt an dieser Stelle enttäuscht, dass Sie dort nicht, na ja, alles sehen, das dort quasi nicht alles übernommen worden ist. Nein-nein. Es wird jetzt hier nichts übernommen. De Facto gesehen, hat Adobe zwei Möglichkeiten, Adobe Muse zu programmieren. Möglichkeit Eins: man übernimmt alle Objekte. Dann hätten Sie jetzt aber hier alle Objekte, die Sie auch in der normalen Ansicht haben, in der Desktop Ansicht. Die passen aber ja auch hier, auf dieser Bildschirm-Seite nicht drauf. Das heißt, man müsste jetzt kürzen, ausschneiden, verkleinern, löschen und so weiter und so fort. Oder, und Adobe hat sich für diesen zweiten Weg entschieden, wie ich persönlich finde sehr sinnvoll, man hat gesagt: Nein, wir übernehmen nichts von der Desktop-Variante, es muss dann der Benutzer selbständig entscheiden, was er von der Desktop-Variante haben will. Und das gibt dann auch ein bisschen die Möglichkeit, dass Sie denn dabei direkt ausmisten. Und Sie sehen hier oben habe ich jetzt die Desktop-Variante. Da kann ich jetzt hin klicken. Jetzt bin ich in der Desktop-Ansicht. Jetzt bin ich in der Telefon-Ansicht. Ich öffne hier mal diese Homepage, in der Desktop-Ansicht. Jetzt sehen Sie hier hinten auch im eckigen Klammern immer Desktop. Wenn ich das Ganze jetzt in meiner Telefone-Ansicht mache, und, dann sehen Sie jetzt hier Home, im eckigen Klammern Telefon. Und ja, jetzt ist Ihre Arbeit gefragt, jetzt wird es für Sie aufwendig, jetzt sind Sie da gefordert, diese Objekte hier zu nehmen, immer mal hier diese beiden Objekte, dann, so mache ich es ebenfalls immer, lege sie dann in die Zwischenablage, gehe dann dort auf die Seite, wo ich sie gerne haben möchte, nämlich jetzt auf die Telefone-Ansicht, und jetzt klicke hier auf Einfügen. Und jetzt muss man sich überlegen, wie man diese Objekte hier haben möchte. Und hier, fängt man am spätesten an, sich zu überlegen, brauche ich denn wirklich alle Objekte. In diesem Fall möchte ich das mal so haben, dass ich beide Objekte habe. Aber Sie sehen, dass passt hier eigentlich nicht hin. Jetzt könnte ich die natürlich beide verkleinern, und sie beide wieder nebeneinander positionieren. Aber ich persönlich bin der Meinung in diesem Fall würde das eigentlich vielleicht sogar besser aussehen, wenn man diese Objekte nicht nebeneinander hätte, sondern untereinander. Und das mache ich hier jetzt einmal so, damit Sie einfach exemplarisch ein Gefühl dafür bekommen. Und in der Tat jetzt ist es relativ viel Arbeit, diese Objekte von der einen Seite auf die andere Seite drüber zu kopieren. Aber die meiste Arbeit hat man ja schon gemacht, weil die meiste Arbeit bei Webseitenerstellen ist gerade jetzt hier von Adobe Muse, ist es ja letztendlich sich Gedanken darüber zu machen, welche Farben möchte ich haben, welche Bilder möchte ich haben, die Bilder vorzubereiten, die Texte zu schreiben, und so weiter, und so fort. Und das müssen Sie jetzt von der Desktop-Ansicht in die normale Ansicht übertragen. Vielleicht stellen Sie irgendwann fest: Aaah, ich habe festgestellt, meine Kunden benutzen diese Telefone-Ansicht gar nicht so gerne, die finden die blöd, sie wollen diese Telefone-Ansicht wieder quitt werden. Dann können Sie hier oben, mit der rechten Maustaste, ein Klick drauf machen. Und dann haben Sie jetzt hier die Variante Layout-Telefon Entfernen. Wenn ich jetzt hier drauf klicke, bekomme ich noch eine Sicherheitsabfrage. Nehmen Sie diese Sicherheitsabfrage bitte ernst, weil wenn Sie das ausgeführt haben, können Sie das nicht rückgängig machen. Und wenn Sie jetzt hier alles bereits fertig gemacht haben, klicken auf Okey. Dann ist alles weg. Und jetzt habe ich das Ganze auf einmal bei mir gelöscht, weil in diesem Projekt ja in der Telefon-Ansicht im Moment nicht so viel zu sehen war. Wichtig noch, als letzte Worte hierzu zu sagen ist, dass Muse für Sie im Hintergrund alles andere regelt. Das heißt, die Internet-Präsenz wird auf dem Web-Server dann hochgeladen, und wenn der Benutzer später sich die Webseite anschaut, dann erkennt über CSS, über Java-Script und über HTML-Einstellungen die Webseite quasi selbstständig, ob die Webseite von einem Tablett aufgerufen wird oder von einem Telefon aufgerufen wird. Und dann wird automatisiert das richtige Layout angeliefert an das Gerät , so dass auf dem Gerät immer die ideale Ansicht angezeigt wird. Sie haben in diesem Video gesehen, was Responsive Web-Design bedeutet, und wie man das Ganze innerhalb Adobe Muse umsetzen kann.

Muse CC Grundkurs

Lernen Sie mit Muse CC Websites zu erstellen, ohne HTML beherrschen zu müssen, und erfahren Sie alle Schritte von der Planung über den ersten Entwurf bis zur Veröffentlichung.

6 Std. 55 min (66 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.07.2014

Dieses Training wurde mit dem Release von Muse CC aus dem Jahr 2014 aufgezeichnet.

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!