Einführung: Flat Design und Responsive Webdesign Layouts

 5317 Mal gelesen

Seit langem mal wieder ein Artikel :)
Diesmal mit Themen aus dem Webdesign und der Onpage Optimierung, also allem, was man auf der eigenen Webseite tun kann, um Vorteile in der Trafficgenerierung über Suchmaschinen zu haben. Und gleich los!

Flat Design: Das neue Webdesign 2013

Bestimmt schon gehört, oder? Ich bin selbst von der Optik noch nicht begeistert, aber von den technischen Vorteilen. Flat Design ist der Begriff für Webdesign ohne Texturen-Grafiken, 3D-CSS3-Hacks, glossy Effekte oder Schatten. Bei Flat Design wird einfach alles weggelassen und mit klaren Abgrenzungen in Sachen Farbe und Schriftart sowie Schriftgröße gearbeitet. Dadurch spart man sich natürlich viel Codingarbeit, wodurch Zeit übrig ist, um mehr an Funktionalität und Nutzerfreundlichkeit (Usability) zu tüfteln. Auch können Datentransferraten niedrig gehalten werden, da keine 3 Grafikdateien mehr pro Rahmen oder Navigationspunkt übertragen werden. Die freakige Frickelei mit Sprites ist auch passé.

Es gibt einen WIRKLICH grandiosen, sehr logisch aufgebauten Artikel über den Wandel vom opulenten durch Apple geprägten Skeuomorphismus zum gerade jetzt im kommenden Flat Design (englisch) von Sacha Greif. Der Artikel ist zwar sehr LANG, aber nicht LANGweilig. Es sind außerdem viele Beispiele darin, also große Bilder zum Ankucken. 😉 Drauf gestoßen bin ich über den deutschsprachigen Artikel von Benjamin Miller bei giga.de. Sicher kennt Ihr alle den Look des neuen Windows 8 (auch Windows RT). Das ist so ungefähr das aktuell bekannteste Beispiel für modernes Flatdesign. Microsoft waren es übrigens, die mit ihrer „Designsprache“ namens Metro angefangen haben. Metro heißt jetzt inzwischen Modern UI (moderne grafische Benutzeroberfläche). Hier noch schnell ein Video zur neuen Designsprache, vorgestellt von einem CEBIT Moderator:

Es mag gewöhnungsbedürftig sein, nicht mehr von greifbaren Buttons, durchsichtigen Schiebereglern und Schatten werfenden Rändern visuell verwöhnt zu werden. Aber kurz mit so einer Seite, zum Beispiel der von Microsoft selbst, gespielt und schon beruhigt sich das neue Gefühl. Irgendwie wirkt es tatsächlich… modern. Moderner, als gestreifte Hintergründe und shiny Trennbalken. 😉

Bildquellen: Bild1, Bild 2

Weitere Beispiele wären Facebook, Spotify, Google Mail, USA Today, Feedly und viele mehr.

Responsive Webdesign

Durch die Anwendung der minimalistischen Designsprache bei der Gestaltung von Webseitenlayouts wird responsives Webdesign möglich. Responsiv oder auch adaptiv geschriebene Seitentemplates sind aus HTML Elementen zusammengebaut, die ihre Position und Größe in Abhängigkeit des zur Verfügung stehenden Platzes wählen und ändern können.

Es variieren zum Beispiel die Breite des Contentbereichs und die Größe der Schriftart relativ zur Größe des Browserfensters. Ist das von den Webentwicklern geschickt umgesetzt, kann die Seite immer funktionabel dargestellt werden, egal ob ein Nutzer mit großem Monitor und hoher Auflösung zu Besuch ist, oder ein Nutzer mit kleinem Monitor, niedriger Auflösung und vielen installierten Browsertoolbars. Auch beim Verkleinern oder Vergrößern des Fensters, um zum Beispiel zwei Programme auf einem Monitor nebeneinander anzuzeigen, passt sich ein responsiv layout dynamisch an. Außerdem spart es die Entwicklungskosten und den Stress mit dem Updaten für Apps, die für die verschiedenen Smartphone Betriebssysteme erstellt werden müssten. Denn unsere Webseiten würden auch von Kunden an mobilen Endgeräten aufrufbar und perfekt anzeigbar sein, obendrein sogar schneller laden, als die nicht optimierten, schwerfälligen und oft zu breiten Designs. Google schätzt für den mobilen Einsatz konzipierte Seiten und zeigt sie in der mobilen Suche oft bevorzugt an. So optimierte Websites würden also eher aufgerufen, als lang ladende, schwer zu bedienende Seiten = mehr Traffic.

Beispiele für Responsive Layouts

Vorteile von Responsive Flat Design Layouts

  • übersichtlich, schnell zu erfassen
  • gute Kontraste, hohe Lesbarkeit
  • Geringer Datendurchsatz, schnelle Ladezeit
  • flexibel anpassungsfähige Darstellung auf unterschiedlichen Anzeigegeräten, dadurch hoher Wiedererkennungswert beim Nutzer/Kunden
  • leicht zu erweitern bzw zu relaunchen, weil keine Grafiken und Sprites neu gemacht werden müssen

Diese positiven Eigenschaften sind natürlich nur Vorteile von gut gemachten Responsive Flat Design Layouts. Einfach keine Grafiken zu verwenden, lässt eine Oberfläche eher unfertig, als gewollt aufgeräumt aussehen. 😉

Downloads und seouxindianer Relaunch

Zum Schluss noch eine Ressource für Webdesigner: Hier gibt es einige PSD Vorlagen für modern UI Blogtemplates, Icons, Login Felder, Tools und Widgets kostenlos zum Download. Ich selbst hab mir schon ein neues Theme für seouxindianer.de/blog ausgesucht. Wenn das im XAMPP rockt und ich alles hinbekomme, was ich mir vorstelle, relaunche ich vorm Sommer wieder einmal. Dann lädt das alte Ding auch schneller und ich muss nicht mehr das Carrington Mobile Theme nutzen. Ein Updaterequest sowie eine Fehlerquelle weniger. 😉 Im selben Atemzug organisiere ich die bestehenden Artikel neu, was langfristig bei der Themensuche und Navigation hilft. So wie das hier historisch gewachsen ist, will ich es nicht lassen.

Gleich teilen:

  • Twitter
  • Google Plus
  • Facebook
  • LinkedIn
  • Email
  • RSS


+Benjamin Wingerter ist Inhouse-SEO und Affiliate seit 2008. Er hat zwei Steckenpferde: Conversion Rate Optimierung und Suchmaschinenoptimierung. Seit 2011 spricht er auf Fachkonferenzen, wie der SEO Campixx.

Advertisement

EmailEmail