Website-Konzeption: Mobile first und responsive Sites

Axure RP – Tablet-Version anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Axure RP stellt ein weiteres Programm für die Erstellung von Wireframes dar. Dabei unterstützt die Software den Entwickler bei der responsiven Konzeption, indem Elemente automatisch in verschiedenen Ansichten gezeigt werden.
12:13

Transkript

Wie ich die Wireframes der Tablet-Ansicht erstelle, das zeige ich Ihnen jetzt mit dem Programm Axure, damit Sie auch sehen, wie das aussieht. Der große Vorteil von Axure ist hier, dass es mich bei der responsiven Konzeption unterstützt. Das hat sogenannte Adaptive Views, mit denen Elemente automatisch in den verschiedenen Ansichten gezeigt werden und die Änderungen, die ich in dem einen View mache, schlagen dann durch auf die anderen Versionen. Wie das in der Praxis aussieht, sehen Sie hier, da es schwierig ist, das theoretisch zu erklären. Wenn Sie das einmal gesehen haben, wissen Sie, warum das eine große Arbeitserleichterung ist. Wichtig ist dabei, dass Sie immer zuerst eine Version weitgehend fertig anlegen, sonst machen Sie sich am Ende sehr viel Arbeit, Dinge zu kopieren, die Sie am Anfang einmal für alle Versionen hätten machen können. Bei dem Ansatz Mobile First also machen Sie als aller erstes eine Smartphone-Version. Die habe ich hier jetzt schon vorbereitet. Das sieht schon ganz anders aus als in OmniGraffle. Das liegt an den Templates, die ich in Axure zur Verfügung habe, die sind einfach nicht ganz so schick, wie die in OmniGraffle. Um jetzt die anderen Größen anzulegen, gehe ich hier auf "Project" und wähle dort "Adaptive Views". Da habe ich jetzt keinen darin, was daran liegt, dass die Grundansicht bei jedem Dokument immer drin ist, die muss ich nicht anlegen, mit der habe ich ja schon gearbeitet. Ich lege also die nächste Ansicht an, die für Tablets. Ich gehe auf das grüne Plus, dann kann ich einen Namen vergeben und nenne es "Tablet". Dann kann ich jetzt einstellen, ab welcher Größe diese Version angezeigt werden soll. Das heißt, bei "Condition" ist "less than or equals" falsch, ich möchte die ja, wenn etwas größer als ein bestimmter Wert ist. Ich gebe jetzt die Breite an, ab der diese Tablet-Version angezeigt werden soll. Da nehmen wir die 480 Pixel, das heißt, das soll größer oder gleich 480 sein. 480 ist aber das, wo ich gesagt habe, das soll am Smartphone gerade noch gezeigt werden. Hier ist die Kondition aber nur "greater than or quals", was heißt, dass ich ein Pixel mehr auswählen und sage muss: "Ist der Wert 481 oder größer, dann zeige mir die Tablet-Version." Dann gehe ich auf "OK" und sehe oben, dass ich ein kleines Feld dazu bekommen habe. Ich habe einen Button, der "Base" heißt, das ist meine Grund- oder Basisversion. Und ich habe hier einen Button, der mir die 481 anzeigt. Wenn ich drauf klicke, scheint sich erst nichts zu ändern. Es hat sich aber etwas geändert, denn alle Elemente aus meiner Base View wurden jetzt auch übertragen in diese zweite View, die in meinem Fall eben 481 ist. Für die Tablet-Version möchte ich die Maximalbreite von 768 Pixlen angeben, das heißt, ich hole mir jetzt hier von der Seite eine Führungslinie und die setze ich auf 768, damit ich ungefähr weiß, wie groß der Platz ist, den ich zur Verfügung habe. Über diese Größen kann man sich jetzt natürlich streiten, ab wann ein Gerät ein Tablet ist. Es gibt Laptops, die kleinere Bildschirme haben, es gibt Tablets mit sehr großen Bildschirmen. es gibt auch die Phablets, die Mischung aus "Phone" und "Tablet", die große Bildschirme haben, wenn man sie als Telefone ansieht, aber als Tablet eher kleine Bildschirme. Das alles ist eigentlich gar nicht so interessant, wichtig ist, wenn Sie Ihre Konzeption machen, dann denken Sie eher daran, wie sich der Inhalt aufteilt. Das heißt, Sie stellen an irgendeiner Stelle fest, dass das Layout so nicht funktioniert. Zwei Spalten sehen in der Ansicht zum Beispiel nicht mehr gut aus. Da ist jetzt in der Größe aber mein sogenannter "Breakpoint", die Stelle, wo ich eigentlich umbrechen wollte, da, wo eigentlich das andere View gezeigt werden sollte, dann ändern Sie das einfach. Es kommt ja nicht auf das Gerät an, auf dem es letztlich läuft, sondern es kommt darauf an, wie der Inhalt aussieht und ob der gut nutzbar ist. Das heißt, alle diese Breakpoint-Angaben sind immer nur ungefähr und sollten nie in Stein gehauen werden. Sie können sich von Design zu Design unterscheiden und nachdem man eh nicht alle Geräte testen kann, ist es sinnvoll, auf gewisse Breiten und nicht auf gewisse Geräte zu testen. Jetzt kann ich also daran gehen, die Tablet-Version zu gestalten und gehe hier von diesen Elementen aus und ziehe das auf die ganze Breite, damit ich den Platz schön ausnutzen kann. Dann schaue ich mir an, was mit meiner Base-Version passiert ist. Die Elemente der Smartphone-Version, die hinüber kopiert wurden, sind unabhängig von den Elementen, die für die Smartphone-Version verwendet werden. Das ist eben das Schöne, Sie müssen nicht alles kopieren und noch einmal neu anlegen, sondern sie können sozusagen mit diesen Vorgaben sehr schnell ihre Tablet-Version erstellen. Wenn wir sagen, wir machen das zum Beispiel nur größer oder wir schieben das einfach hinüber, und wollen hier lieber ein größeres Bild haben, dann geht das Arbeiten hier wirklich sehr schnell von der Hand und Sie haben die Möglichkeit, ganz schnell viele verschiedene Versionen anzulegen, so viele, wie für Ihr Konzept gerade notwendig sind. Ein weiterer großer Vorteil von "Adaptive Views" ist, dass die Änderungen über alle Views hinweg vorgenommen werden. Wenn ich hier zum Beispiel nur ein Logo stehen haben möchte, dann ändere ich das in einem View und automatisch ist es dann in anderen Views auch gleich geändert. Das spart einem, wie gesagt, sehr viel Arbeit. Bis jetzt habe ich die Tablet-Version eigentlich nur geändert, indem ich die Bilder breiter und die Texte anders angeordnet habe, was aber eigentlich eine sehr gute Möglichkeit ist. Ich könnte zum Beispiel auch das Logo größer machen oder das Bild höher stellen als in der Smartphone-Ansicht. Aber das ist natürlich hauptsächlich Kosmetik, die Usability beeinflussen könnte ich aber zum Beispiel, indem ich dieses Element, das Formular ändere. Das muss jetzt hier nicht alles nebeneinander gequetscht sein, ich könnte es zum Beispiel auch nehmen und diese Elemente hier in eine zweite Spalte bringen. Ich würde das zum Beispiel hier so hinsetzen, das wäre dann eine logische Gliederung, denn die Dinge sind jetzt nicht einfach untereinander, sondern ich habe einmal den Wunschtermin mit der Website, was logisch zusammengehört, und den Namen und die E-Mail. Der Button zur Anfrage ist der wichtigste Teil dieses Formulars. Buttons zum Abschicken oder "OK" sollten immer unten rechts sein, also hier an dieser Stelle. Da hat er nichts verloren, dort erwarten ihn die Nutzer nicht. Das heißt, der kommt entweder hier hin, wo er schon war, oder sogar noch weiter rechts, damit er noch mehr auffällt. Das gefällt mir jetzt alles ganz gut. Ich schaue noch einmal nach dort hinten, da haben wir noch Bilder, die den Platz nicht gut ausnutzen. Das könnte man zum Beispiel so anlegen, dass man sagt, hier auf meiner Tablet-Version möchte ich sie untereinander haben, das gefällt mir in dem Fall besser. Dann ordne ich sie so an, dass das Ganze nachher so aussieht. Den Text mache ich noch breiter, damit er die Breite ausnutzt. Wobei ich hier meinen Sicherheitsabstand zum Rand von zehn Pixeln brauche, deshalb schiebe ich sie noch einmal zehn Pixel weiter nach innen. Den hier lasse ich an genau dieselbe Position rutschen. Auch das Bild mache ich noch einmal so groß, wie die anderen. Damit ist jetzt meine Tablet-Version erst einmal fertig, ich bin damit zufrieden und kann mit der Desktop-Darstellung weitermachen.

Website-Konzeption: Mobile first und responsive Sites

Konzipieren Sie Websites, die für unterschiedlichste Geräte – vom Smartphone bis zum Fernseher – geeignet sind und lernen Sie die Werkzeuge und Programme kennen, die hier zum Einsatz kommen.

1 Std. 32 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Erscheinungsdatum:17.12.2014
Aktualisiert am:14.07.2017

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!