Ihre Templates individuell, hand-coded & Responsive
Wir optimieren Ihre Webpages für das mobile Web.
- Viele Endgeräte werden abgedeckt
- Inhalt und Funktion der Desktop-Variante können größtenteils übernommen werden
- Sie pflegen Ihre Inhalte zentral
- Das Layout kann nachträglich angepasst werden, unabhängig von Ihren Inhalten
- Überzeugen Sie Ihre Kunden mit einer flexiblen Umsetzung Ihres Designs, die sich allen gängigen mobilen Endgeräten anpasst.
Die Basis
Sie haben sich entschieden, Ihre Webseiten responsive umsetzen zu lassen? Dann müssen Sie nur noch beachten, dass jedes Layout, das Sie in Photoshop oder Fireworks entwerfen, in mehreren Ausführungen angefertigt wird – mindestens eines pro gewünschter Ansicht. In etwa so wie in dieser Grafik:
Wie wird nun aus einer Photoshop-Datei eine funktionsfähige responsive Webseite? Hier helfen Ihnen unsere erfahrenen Entwickler weiter: Einfach Ihr Design bei uns hochladen – und nach nur wenigen Arbeitstagen laden Sie ihr fertiges HTML-Template herunter und starten mit Ihrem Webprojekt durch.
RWD – Ein Überblick
Beim Erstellen einer Website muss heutzutage beachtet werden, dass immer mehr Nutzer über ihre mobilen Geräte mit kleineren Displays das Internet nutzen. Eine Website sollte aber bei der Wiedergabe mit einem Smartphone anderes aufgebaut sein, als auf einem Computerbildschirm. Responsive Web Design macht genau das möglich: Mit dynamischen Inhaltselementen passt sich ein Webauftritt an die verschiedenen Displaygrößen und Auflösungen an. Die Vorteile liegen auf der Hand. Doch was sind die Voraussetzungen für Responsive Web Design?
Zunächst einmal sind die Herausforderungen an Responsive Web Design sehr groß: Das Layout einer Website muss so dynamisch und flexibel anlegt werden, dass es auf dem Computerbildschirm den Inhalt genauso sinnvoll vermittelt, wie auf einem Tablet- und Smartphone-Display. Die Benutzerfreundlichkeit sollte also trotz Einschränkungen durch ein kleineres Display nicht leiden. Dafür ist Responsive Web Design zuständig: Es reagiert auf die Anforderungen jedes Ausgabegeräts und optimiert den strukturellen Aufbau, Navigationselemente und Grafiken für jedes Display.
Warum keine separate mobile Website?
Separate mobile Websites benötigen für die vielen unterschiedlichen Auflösungen und Bildformate der mobilen Endgeräte einen vergleichsweise hohen Aufwand. Zudem müssen bei separaten Websites für die verschiedenen Endgeräte unterschiedliche Websites gepflegt werden. Man muss also stets darauf achten, dass inhaltliche Aktualisierungen auf beiden Auftritten gleichermaßen durchgeführt werden und es zu keinen Diskrepanzen kommt. Responsive Web Design reduziert also – insbesondere für Websites mit häufig wechselnden Inhalten – den Arbeitsaufwand beträchtlich. Daher lohnt es sich, eine Website direkt im Responsive Web Design coden zu lassen.
Und so funktioniert’s…
Responsive Web Designs verwenden CSS 2.1/3, JavaScript und natürlich HTML5 oder auch XHTML und arbeiten mit relativen Werten. Das heißt, in unterschiedlichen Displaygrößen und -auflösungen erhalten die verschiedenen Elemente immer den optimalen Prozentanteil im Gesamtlayout. Für ein optimales Design sollten Webdesigner die drei Grundzutaten des Responsive Web Designs beachten:
- Flexibles Grid
- Flexible Bilder
- Media Queries
Flexible Grids sind die Grundlage dafür, dass eine Website nicht in einer fixen Größe angelegt wird, sondern die Elemente sich der Bildschirmgröße anpassen. Hierbei werden feste Pixelwerte in relative Prozente umgewandelt. Flexible Bilder passen sich in Höhe und Breite an, damit sich Spalten und Texten nicht verschieben. Das Zauberwort heißt schließlich Media-Queries: Über sie werden Eigenschaften des Endgeräts abgefragt wie z. B. die Größe des Displays oder die Eingabemöglichkeiten.
Media-Queries legen fest, Styles nur dann einzusetzen, wenn das Ausgabemedium bestimmte Voraussetzungen aufweist, wie z. B. Orientierung (Hoch- oder Querformat), Eingabemöglichkeiten und Bildschirmauflösung. Diese Parameter sollten von den Webdesignern bei der Gestaltung des Layouts und Designs berücksichtigt werden. Der wichtigste Nutzen von Media Queries liegt in der Änderung des Flusses von Inhaltselementen im Dokument. Eine Website, die in der vollen Desktopauflösung noch dreispaltig ist, kann auf Tablets so abgewandelt werden, dass sich z.B. die rechte Spalte unterhalb der beiden ersten Spalten anordnet. Das verbessert nicht nur den Lesefluss, es verhindert auch lästiges Heranzoomen, um unnötig kleine Schrift noch entziffern zu können. Für Smartphones könnten dann z.B. alle Spalten untereinander angeordnet werden und zusätzlich mit Ein- bzw. Ausklappfunktion versehen werden. Zusätzlich lassen sich unwichtige Sekundärinformationen für das mobile Erlebnis auch direkt ausblenden oder reduzieren.
Im Gegensatz zu der Gestaltung statischer Websites bedeutet Responsive Web Design für den Designer zusätzlichen Aufwand, da verschiedene Zustände einer einzigen Seite gestaltet werden müssen. Darüber hinaus bedarf es eines Wandels in seiner Einstellung: Man muss sich von dem Gedanken verabschieden, dass das Endergebnis exakt so aussehen wird, wie in den Layouts. Denn da sich die fertige Seite ständig im Fluss befindet, ist die Pixel-Perfectness – lange Zeit das Maß der Dinge in Sachen Webgestaltung – stark in ihrer Bedeutung abgeschwächt. Layouts für Responsive Designs können immer nur Richtlinien für Momentaufnahmen, niemals aber starre Vorgabe sein.
Front-End-Frameworks
Eine weitere Entwicklung, die die effektive und effiziente Erstellung von Websites vereinfachen soll, sind Front-End-Frameworks. Zu den bekanntesten zählen Twitter-Bootstrap, Foundation und das Responsive Grid System. Die Frameworks bieten aufbereitetes CSS, tolle Javascripts und ein solides HTML-Grundgerüst. Besonders bei der Nutzung von CSS-Grids können die Frameworks punkten, da sich damit große Seiten schnell rastern lassen. Somit wird den Entwicklern viel Schreibarbeit abgenommen und entsprechend Zeit gespart.
Doch neben all den Vorteilen können Frameworks Webentwickler und Designer auch in ihrer Kreativität einschränken, da sie Richtlinien vorgeben, an die man sich halten sollte. Im schlimmsten Fall kann das sogar dazu führen, dass man einer Website direkt ansehen kann, dass ein Framework verwendet wurde. Natürlich können auch in einem Framework individuelle Anpassungen durchgeführt werden, jedoch ist das mit hohen Kosten verbunden. Ein weiterer Nachteil ist, dass Frameworks häufig nicht mit älteren Browsern funktionieren. So wird der IE7 teilweise überhaupt nicht mehr unterstützt. Denken Sie hier an Ihre Nutzergruppe: Wird die Website von IE7-Nutzern mit Auflösungen von mehr als 800px x 600px ebenso besucht wie von Nutzern mit höheren Auflösungen? Natürlich kann dies auch durch Hacks und Anpassungen nachgerüstet werden, jedoch kann im Voraus keine Garantie für die Eins-zu-eins Umsetzung gegeben werden. So können hohe Kosten anfallen und auch die Performance der Website kann darunter leiden.
Wer aus diesen Gründen das Responsive Web Design ohne Framework umsetzen möchte, hat mit der flexibleren Gestaltung seines Layouts grundsätzlich eine gute Entscheidung getroffen.
Ob die Umsetzung ohne Framework für Sie die richtige ist, können sie mit der folgenden Entscheidungshilfe erkennen:
|
Vorteile customized Responsive Web Design |
Vorteile frameworked Responsive Web Design |
|---|---|
|
|
Egal für welche Methode sie sich entscheiden – für die Umsetzung einer Website in Responsive Web Design braucht es erfahrene Entwickler, auch unter vereinfachenden Frameworks. Daher wenden Sie sich lieber an einen Profi. Die XD Solution GmbH bietet Ihnen erfahrene Entwickler – nicht nur für Responsive Web Design, sondern auch für gutes Qualitätsmanagement (besonders im mobilen Bereich aufwendig) und solide Ergebnisse. Senden Sie uns einfach Ihre Layouts und Spezifikationen und wir erstellen Ihnen ein individuelles Festpreis-Angebot.