mobirise.com

Barrierefreies Webdesign: 
EINE RESPONSIVE INTERNETSEITE SIEHT IMMER GUT AUS.

Beim responsive Webdesign wird der Code so angelegt, dass sich das Seiten-Layout der Fenstergröße oder dem Gerät anpasst. 

Bei unserem Web handelt es sich ebenfalls um eine responsive Internetseite.
Bitte testen Sie selbst: Verändern Sie die Fenstergröße ihres Browsers und Sie werden sehen, dass sich die Darstellung sofort anpasst.

Es gibt verschiedene Möglichkeiten, barrierefreies Webdesign umzusetzen. Da diese Entscheidung ganz am Anfang steht erklären wir die Möglichkeiten unterhalb von diesem Block ganz genau.

- Responsive Webdesign über Breakpoints mit CSS Mediaquery

- Adaptive Webdesign mit Browserweiche

- mobile Website mit Liquid Webdesign


Responsive Webdesign
über Breakpoints mit CSS Mediaquery


Beim klassischen Responsive Webdesign wird die Homepage zunächst, wie beim Liquid Webdesign, variabel und stufenlos dargestellt. Über die sogenannten Breakpoints wird dann der Seiteninhalt bei bestimmten Fensterbreiten wieder auf's Neue angepasst und macht dabei einen Sprung. So kann man die Vorzüge aus einer stufenloser liquiden Darstellung und der genau gesteuerten Inhalten des Adaptive Webdesign genießen.
Je nach Gerät und Fensterbreite können auch teilweise unterschiedliche Seiteninhalte geliefert werden. So kann man z.B. die PC-Version eine Diashow haben, in der Darstellung für das Smartphone befindet sich stattdessen ein statisches Bild.
Ein guter Kompromiss und deshalb auch eine populäre Lösung für mobile Websites. Je nach Bildschirmbreit und Gerät wird Ihre responsive Internetseite nie schlecht, meistens gut, oft auch perfekt aussehen.

+ Responsive Webdesign per CSS Mediaquery

+ ein Code - ein Web
+ Optimal, wenn eine komplett neue Website erstellt werden soll
+ unabhängiges Aussehen für die jeweiligen Fenstergrößen
+ Darstellung kann genau gesteuert werden
+ Der für Mobilgeräte optimierte Code wird automatisch erstellt

- Responsive Webdesign per CSS Mediaquery

- die Gestaltung und Programmierung ist anfangs aufwändiger
- bedingte stufenlose Anpassung an Fenstergröße wg. Breakpoints
- längere Entwicklungszeit
- manchmal Mängel in der Bildqualität und Ladezeit

TRENDY WEBSITE BLOCKS

Choose from the large selection of latest pre-made blocks - full-screen intro, bootstrap carousel, content slider, responsive image gallery with lightbox, parallax scrolling, video backgrounds, hamburger menu, sticky header and more.

Tab heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Tab heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Tab heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Adaptive Webdesign
mit Browserweiche


Bei einer Browserweiche haben Sie mindestens zwei Websites vorliegen: Eine für den Desktop-PC und eine mobile Website für Geräte wie Tablets und Smartphones. Über einen speziellen Code wird das Gerät, das Ihre Seite besucht, zuerst ermittelt und dann auf die entsprechende Website umgeleitet. So kann man genau steuern, welches Gerät die Desktop-Version und welches die mobile Website zu sehen bekommt..

+ Adaptive Webdesign mit Browserweiche

+ unabhängiges Aussehen und Inhalte für die jeweiligen Geräte
+ Darstellung kann genau gesteuert werden
+ Optimal für vorhandene Webseiten ohne mobile Version
+ Der Inhalt kann mehrfach beschrieben werden. Google mag das.

- Adaptive Webdesign mit Browserweiche

- mehrere Webs werden benötigt: doppelte Seiten, doppelte Arbeit.
- keine stufenlose Anpassung an Fenstergröße
- längere Entwicklungszeit

TRENDY WEBSITE BLOCKS

Choose from the large selection of latest pre-made blocks - full-screen intro, bootstrap carousel, content slider, responsive image gallery with lightbox, parallax scrolling, video backgrounds, hamburger menu, sticky header and more.

Tab heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Tab heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Tab heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Mobile Website
mit Liquid Webdesign


Die kostengünstigste und technisch einfachste Lösung.
Die Darstellung der Website wird hierbei über prozentuale, nicht-statische Angaben im CSS gesteuert. So kann sich diese Form des responsive Webdesigns stufenlos an die gewünschte Fensterbreite anpassen.
Eingriffe in den Automatismus sind allerdings aufwändig oder unmöglich.

+ Liquid Webdesign 

+ ein Code - ein Web
+ passt sich stufenlos der Fenstergröße an
+ nicht auf ein spezifisches Gerät ausgelegt
+ kostengünstig, automatisch, unkompliziert

- Liquid Webdesign 

- Die Übergänge sind zwar fließend, sehen aber manchmal gestalterisch nicht perfekt aus, z.B. gibt es oft ewig lange Textblöcke auf Handys.
- wenig Kontrolle über die Anordnung von Seitenelementen

TRENDY WEBSITE BLOCKS

Choose from the large selection of latest pre-made blocks - full-screen intro, bootstrap carousel, content slider, responsive image gallery with lightbox, parallax scrolling, video backgrounds, hamburger menu, sticky header and more.

Tab heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Tab heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Tab heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis quam in risus pulvinar ultrices eget non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae proin accumsan odio.

Zum Thema Webdesign:
WUSSTEN SIE SCHON?

Mit Webdesign ist die Gestaltung von Internetseiten gemeint. Die bezieht sich sowohl auf das visuelle Design, als auch das Website-Layout und deren Funktionen. Der Begriff Webdesign kann dabei auch mit dem Screendesign verglichen werden, welches die ausschließlich grafische Darstellung und Gestaltung am Bildschirm meint.

Seit dem Auftauchen der ersten kommerziellen Browsern in den 90ern gewann das Internet immer mehr an Bedeutung. So auch das Gestalten von Webseiten, um den breiten Massen Informationen nicht nur in reiner Text- und Codeform (HTML), sondern dank CSS möglichst ästhetisch zu präsentieren. In den letzten Jahren hat sich der Bereich Webdesign rasant weiter entwickelt.

Ganz toll kann man sich diese Entwicklung auf Fabian Burghardt's The Evolution of Webdesign anschauen, wo man zwischen Webgestaltung von 1991 bis 2015 switchen kann.