Projekte

Hier finden Sie eine Auswahl von mir realisierter Projekte.

schmidwidmaier.de ist responsive mit flexibler Breite. Die Bilder der Seite skalieren über die gesamte Breite des Monitors. Um die Ladezeiten für kleinere Monitore zu optimieren, werden unterschiedliche Bildgrößen vorgehalten und (moderneren) Browsern zum download angeboten.

Aufgrund der vielen, sehr großen, teilweise hochauflösenden, Bilder wird hier ein "Lazy Loader" eingesetzt. Hierbei werden zunächst nur sichtbare Bilder geladen. Beim scrollen, werden weitere Bilder nachgeladen.

Konzept & Design:
Schmid/Widmaier
www.schmidwidmaier.de

schmidwidmaier.de ist responsive mit flexibler Breite. Die Bilder der Seite skalieren über die gesamte Breite des Monitors. Um die Ladezeiten für kleinere Monitore zu optimieren, werden unterschiedliche Bildgrößen vorgehalten und (moderneren) Browsern zum download angeboten.

Aufgrund der vielen, sehr großen, teilweise hochauflösenden, Bilder wird hier ein "Lazy Loader" eingesetzt. Hierbei werden zunächst nur sichtbare Bilder geladen. Beim scrollen, werden weitere Bilder nachgeladen.

Konzept & Design:
Schmid/Widmaier
www.schmidwidmaier.de

waterwolf.de ist responsive mit flexibler Breite.

Der Inhalt der Seite ist Modular aufgebaut. Es gibt für die einzelnen Seiten keine spezifischen Vorlagen. Jede Seite kann aus vorgegebenen Modulen individuell zusammengestellt werden.

Konzept & Design:
ADGY I Visuelle Gestaltung
www.adgy.de

waterwolf.de ist responsive mit flexibler Breite.

Der Inhalt der Seite ist Modular aufgebaut. Es gibt für die einzelnen Seiten keine spezifischen Vorlagen. Jede Seite kann aus vorgegebenen Modulen individuell zusammengestellt werden.

Konzept & Design:
ADGY I Visuelle Gestaltung
www.adgy.de

carlcom.de ist responsive mit flexibler Breite.

Der Inhalt der Seite ist Modular aufgebaut. Es gibt für die einzelnen Seiten keine spezifischen Vorlagen. Jede Seite kann aus vorgegebenen Modulen individuell zusammengestellt werden.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

carlcom.de ist responsive mit flexibler Breite.

Der Inhalt der Seite ist Modular aufgebaut. Es gibt für die einzelnen Seiten keine spezifischen Vorlagen. Jede Seite kann aus vorgegebenen Modulen individuell zusammengestellt werden.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

autentic.com ist responsive mit flexibler Breite.

Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt.

Konzept & Design:
Schmid/Widmaier
www.schmidwidmaier.de

autentic.com ist responsive mit flexibler Breite.

Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt.

Konzept & Design:
Schmid/Widmaier
www.schmidwidmaier.de

neues-kollektiv.de ist responsive mit flexibler Breite.

Die Webseite ist eine "Long Page". Der gesamte Inhalt befindet auf einer Seite (von Impressum und Datenschutzerklärung abgesehen). Mit Hilfe der Navigationsleisten in den einzelnen Abschnitten "springt" man von einem Abschnitt zum nächsten. Long Pages eignen sich nur für Webauftritte mit "übersichtlichem" Inhalt, da sonst die Ladezeiten zu lang werden würden. Dies gilt insbesondere für Smartphones u.ä.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

neues-kollektiv.de ist responsive mit flexibler Breite.

Die Webseite ist eine "Long Page". Der gesamte Inhalt befindet auf einer Seite (von Impressum und Datenschutzerklärung abgesehen). Mit Hilfe der Navigationsleisten in den einzelnen Abschnitten "springt" man von einem Abschnitt zum nächsten. Long Pages eignen sich nur für Webauftritte mit "übersichtlichem" Inhalt, da sonst die Ladezeiten zu lang werden würden. Dies gilt insbesondere für Smartphones u.ä.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

lucias-laden.at ist responsive mit flexibler Breite.

Der Inhalt der Seite ist Modular aufgebaut. Es gibt für die einzelnen Seiten keine spezifischen Vorlagen. Jede Seite kann aus vorgegebenen Modulen individuell zusammengestellt werden.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

lucias-laden.at ist responsive mit flexibler Breite.

Der Inhalt der Seite ist Modular aufgebaut. Es gibt für die einzelnen Seiten keine spezifischen Vorlagen. Jede Seite kann aus vorgegebenen Modulen individuell zusammengestellt werden.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

zentraler-kaminkehrer-service.de ist responsive mit flexibler Breite.

Die Bilder werden durch den Webbrowser je nach Bildschirm-/Monitorgröße in unterschiedlicher Größe heruntergeladen (sofern der Webbrowser dieses Feature unterstützt). D.h. ein Smartphone wird ein kleineres Bild laden als ein Notebook. Dies steigert die Ladegeschwindigkeit der Webseite erheblich.

Konzept & Design:
Freibad 3
www.freibad3.de

zentraler-kaminkehrer-service.de ist responsive mit flexibler Breite.

Die Bilder werden durch den Webbrowser je nach Bildschirm-/Monitorgröße in unterschiedlicher Größe heruntergeladen (sofern der Webbrowser dieses Feature unterstützt). D.h. ein Smartphone wird ein kleineres Bild laden als ein Notebook. Dies steigert die Ladegeschwindigkeit der Webseite erheblich.

Konzept & Design:
Freibad 3
www.freibad3.de

foto-salon.de ist responsive mit flexibler Breite. Es gibt nur wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt.

Bei dieser Seite wird sog. "Parallax Scrolling" eingesetzt. Es kommen unterschiedliche Effekte zum Einsatz. Einzelne Inhalte verschieben sich gegeneinader, Hintergrund- und Schriftfarben ändern sich. Auch die Größe des Logos verändert sich. Auf kleineren Tablets und Smartphones wird der Parallax-Effekt abgeschaltet.

Konzept & Design:
Zeichen & Wunder
www.zeichenundwunder.de

foto-salon.de ist responsive mit flexibler Breite. Es gibt nur wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt.

Bei dieser Seite wird sog. "Parallax Scrolling" eingesetzt. Es kommen unterschiedliche Effekte zum Einsatz. Einzelne Inhalte verschieben sich gegeneinader, Hintergrund- und Schriftfarben ändern sich. Auch die Größe des Logos verändert sich. Auf kleineren Tablets und Smartphones wird der Parallax-Effekt abgeschaltet.

Konzept & Design:
Zeichen & Wunder
www.zeichenundwunder.de

joerg-alexander.info ist responsive mit flexibler Breite. Start- und Unterseiten haben unterschiedliche Layouts.

Auf der Startseite wird sog. "Parallax Scrolling" eingesetzt. Es kommen unterschiedliche Effekte zum Einsatz. Die verschiedenen Inhalte verschieben sich gegeneinader, bewegen sich mit unterschiedlichen Geschwindigkeiten oder bleiben kurz stehen. Auf kleineren Tablets und Smartphones wird der Parallax-Effekt abgeschaltet.

Konzept & Design:
Pfeiffer-Erne
www.pfeiffer-erne.com

joerg-alexander.info ist responsive mit flexibler Breite. Start- und Unterseiten haben unterschiedliche Layouts.

Auf der Startseite wird sog. "Parallax Scrolling" eingesetzt. Es kommen unterschiedliche Effekte zum Einsatz. Die verschiedenen Inhalte verschieben sich gegeneinader, bewegen sich mit unterschiedlichen Geschwindigkeiten oder bleiben kurz stehen. Auf kleineren Tablets und Smartphones wird der Parallax-Effekt abgeschaltet.

Konzept & Design:
Pfeiffer-Erne
www.pfeiffer-erne.com

buenker-parkett.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt.

Konzept & Design:
Isabel Große Holtforth
isabelgrosseholtforth.de

buenker-parkett.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt.

Konzept & Design:
Isabel Große Holtforth
isabelgrosseholtforth.de

achimbunz.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt.
Da Texte teilweise nur on "mouse-over" eingeblendet werden, kommt hier eine "Feature Detection" zum Einsatz (modernizr). Dadurch werden diese Texte auf Touchsrceens permanent angezeigt.

Aufgrund der vielen, sehr großen, teilweise hochauflösenden, Bilder wurde hier ein "Lazy Loader" in den Galerien eingesetzt. Hierbei werden zunächst nur wenige Bilder geladen. Klickt man sich weiter durch die Galerie werden weitere Bilder nachgeladen.

Konzept & Design:
Büro für Gestaltung Wangler & Abele
www.bfgest.de

achimbunz.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt.
Da Texte teilweise nur on "mouse-over" eingeblendet werden, kommt hier eine "Feature Detection" zum Einsatz (modernizr). Dadurch werden diese Texte auf Touchsrceens permanent angezeigt.

Aufgrund der vielen, sehr großen, teilweise hochauflösenden, Bilder wurde hier ein "Lazy Loader" in den Galerien eingesetzt. Hierbei werden zunächst nur wenige Bilder geladen. Klickt man sich weiter durch die Galerie werden weitere Bilder nachgeladen.

Konzept & Design:
Büro für Gestaltung Wangler & Abele
www.bfgest.de

ulrikefroemel.de ist responsive und in der Breite flexibel. Die Seite ist ein Relaunch einer bisher statischen Webseite. Das Layout wurde gegenüber der Vorversion nur gering verändert. Lediglich eine zusätzliche Navigationsebene und eine Galerieübersicht wurden eingefügt.

Layouts für statische Seiten in "responsive" Layouts umzuwandeln kann, sofernüberhaupt möglich und sinnvoll, recht aufwändig sein. Da das Layout relativ schmal angelegt ist, war dies hier ohne weiteres machbar.

Konzept & Design:
Life is good
lifeisgood.biz

ulrikefroemel.de ist responsive und in der Breite flexibel. Die Seite ist ein Relaunch einer bisher statischen Webseite. Das Layout wurde gegenüber der Vorversion nur gering verändert. Lediglich eine zusätzliche Navigationsebene und eine Galerieübersicht wurden eingefügt.

Layouts für statische Seiten in "responsive" Layouts umzuwandeln kann, sofernüberhaupt möglich und sinnvoll, recht aufwändig sein. Da das Layout relativ schmal angelegt ist, war dies hier ohne weiteres machbar.

Konzept & Design:
Life is good
lifeisgood.biz

sabine-pfaff.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt

.

Die Mouse-over-Effekte auf der Startseite wurden mit SVGs (Vektorgrafiken) realisiert.

Konzept & Design:
Carolin Leyck
carolin-leyck.de

sabine-pfaff.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt

.

Die Mouse-over-Effekte auf der Startseite wurden mit SVGs (Vektorgrafiken) realisiert.

Konzept & Design:
Carolin Leyck
carolin-leyck.de

kinderzahnarzt-fottner.de ist responsive mit flexibler Breite. Die Darstellung auf dem Smartphone unterscheidet sich von der auf dem Bildschirm im Wesentlichen nur in der Navigation.

Die Webseite ist für Mehrsprachigkeit bereits ausgelegt und kann ggf. ohne Weiteres ausgebaut werden. Prinzipiell lassen sich in einem Content Management System alle möglichen Funktionen jederzeit "nachrüsten". Allerdings kann dies sehr aufwändig werden. Plant man spätere Erweiterungen von vorn herein mit ein, so hält sich der Aufwand i.d.R. in Grenzen.

Konzept & Design:
Carolin Leyck
carolin-leyck.de

kinderzahnarzt-fottner.de ist responsive mit flexibler Breite. Die Darstellung auf dem Smartphone unterscheidet sich von der auf dem Bildschirm im Wesentlichen nur in der Navigation.

Die Webseite ist für Mehrsprachigkeit bereits ausgelegt und kann ggf. ohne Weiteres ausgebaut werden. Prinzipiell lassen sich in einem Content Management System alle möglichen Funktionen jederzeit "nachrüsten". Allerdings kann dies sehr aufwändig werden. Plant man spätere Erweiterungen von vorn herein mit ein, so hält sich der Aufwand i.d.R. in Grenzen.

Konzept & Design:
Carolin Leyck
carolin-leyck.de

kindermachenmusik.de ist responsive mit flexibler Breite. Durch die seitlich angeordnete Navigation gibt es etliche "Breakpoints".

Eine seitliche Navigation ist im Responsive Design immer ein wenig herausfordernd. Zumindest dann, wenn sie eine Mindestbreite hat und sich neben Inhalt mit dynamischer Breite (= x% der Gesamtbreite) befindet. Hier ließ sich dies mit relativ wenig Aufwand lösen, da die Navigation im Verhältnis zum Inhalt sehr breit ist und auch selber etwas skalieren kann.

Konzept & Design:
Isabel Große Holtforth
isabelgrosseholtforth.de

kindermachenmusik.de ist responsive mit flexibler Breite. Durch die seitlich angeordnete Navigation gibt es etliche "Breakpoints".

Eine seitliche Navigation ist im Responsive Design immer ein wenig herausfordernd. Zumindest dann, wenn sie eine Mindestbreite hat und sich neben Inhalt mit dynamischer Breite (= x% der Gesamtbreite) befindet. Hier ließ sich dies mit relativ wenig Aufwand lösen, da die Navigation im Verhältnis zum Inhalt sehr breit ist und auch selber etwas skalieren kann.

Konzept & Design:
Isabel Große Holtforth
isabelgrosseholtforth.de

cafeunterzucker.de ist ein "Klon" von richardoehmann.de.

Die Webseite liegt im selben Content Management System wie richardoehmann.de und ist sozusagen eine Kopie. Beide Seiten können hier zentral verwaltet werden. Anders als bei lamagoverlag.de/edition-weiterleben.de wurde dies erst nachträglich geplant und umgesetzt. Aufgrund des Aufbaus der beiden Seiten war dies jedoch ohne großen Aufwand umsetzbar.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

cafeunterzucker.de ist ein "Klon" von richardoehmann.de.

Die Webseite liegt im selben Content Management System wie richardoehmann.de und ist sozusagen eine Kopie. Beide Seiten können hier zentral verwaltet werden. Anders als bei lamagoverlag.de/edition-weiterleben.de wurde dies erst nachträglich geplant und umgesetzt. Aufgrund des Aufbaus der beiden Seiten war dies jedoch ohne großen Aufwand umsetzbar.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

richardoehmann.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints". Bei der Smartphoneversion werden teilweise Bilder ausgeblendet.

Einige grafische Elemente bestehen aus SVGs (Vektorgrafiken). Diese werden als "Code" an den Browser übertragen, erheblich schneller als Grafikdateien. Zudem sind sie skalierbar ohne dass die Qualität der Darstellung leidet. Nachteil: Ältere Browser, wie z.B. der Internet Explorer 8, können SVGs nicht darstellen. Das Layout sollte den "Verlust" also vertragen können, oder durch z.B. "Browserweichen" angepasst werden. Diese Art des Vorgehens wird auch als graceful degradation bezeichnet.

cafeunterzucker.de ist ein "Klon" dieser Seite.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

richardoehmann.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints". Bei der Smartphoneversion werden teilweise Bilder ausgeblendet.

Einige grafische Elemente bestehen aus SVGs (Vektorgrafiken). Diese werden als "Code" an den Browser übertragen, erheblich schneller als Grafikdateien. Zudem sind sie skalierbar ohne dass die Qualität der Darstellung leidet. Nachteil: Ältere Browser, wie z.B. der Internet Explorer 8, können SVGs nicht darstellen. Das Layout sollte den "Verlust" also vertragen können, oder durch z.B. "Browserweichen" angepasst werden. Diese Art des Vorgehens wird auch als graceful degradation bezeichnet.

cafeunterzucker.de ist ein "Klon" dieser Seite.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

carolin-leyck.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt. Für die Tablet- und Smartphoneversion wird nur das Navigationsmenü verändert.

Die Templates bei carolin-leyck.de sind teilweise so aufgebaut, das sie der Kunde die Struktur aus verschiedenen "Teil-Vorlagen" selber "zusammenklicken" kann. Auf diese Weise kann eine Seite z.B. an beliebigen Stellen ein- oder mehrspaltig sein.

Konzept & Design:
Carolin Leyck
carolin-leyck.de

carolin-leyck.de ist responsive mit flexibler Breite. Es gibt nur sehr wenige "Breakpoints", angepasst an den jeweiligen Seiteninhalt. Für die Tablet- und Smartphoneversion wird nur das Navigationsmenü verändert.

Die Templates bei carolin-leyck.de sind teilweise so aufgebaut, das sie der Kunde die Struktur aus verschiedenen "Teil-Vorlagen" selber "zusammenklicken" kann. Auf diese Weise kann eine Seite z.B. an beliebigen Stellen ein- oder mehrspaltig sein.

Konzept & Design:
Carolin Leyck
carolin-leyck.de

ennokapitza.de ist responsive und in der Breite flexibel. Die Seite ist ein Relaunch einer bisher statischen Webseite. Das Layout wurde gegenüber der Vorversion nicht verändert. Das Besondere: Bis auf wenige Anpassungen ist das Layout für alle Breiten gleich.

Die Bildergalerien sind flexibel in der Breite und für Touchscreens "wischbar".

Konzept & Design:
Life is good
lifeisgood.biz

ennokapitza.de ist responsive und in der Breite flexibel. Die Seite ist ein Relaunch einer bisher statischen Webseite. Das Layout wurde gegenüber der Vorversion nicht verändert. Das Besondere: Bis auf wenige Anpassungen ist das Layout für alle Breiten gleich.

Die Bildergalerien sind flexibel in der Breite und für Touchscreens "wischbar".

Konzept & Design:
Life is good
lifeisgood.biz

fraeuleinpfeiffer.de ist responsive mit fixierter Breite. Es gibt 2 Layouts (Screen/Tablet und Smartphone) mit 2 "Breakpoints" (3 auf 2 Spalten und 2 Spalten auf Smartphone).

Die Darstellung der Inhalte der verschiedenen Layouts unterscheidet sich nur wenig. Die Smartphone-Navigation ist gegenüber der Screen- und Tabletversion vereinfacht und erscheint zudem zusätzlich am Fuß der Seite. Dies erleichtert dem Besucher den Zugriff auf weitere Inhalte. Außerdem wird das Hintergrundbild durch ein Pattern ersetzt.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de

fraeuleinpfeiffer.de ist responsive mit fixierter Breite. Es gibt 2 Layouts (Screen/Tablet und Smartphone) mit 2 "Breakpoints" (3 auf 2 Spalten und 2 Spalten auf Smartphone).

Die Darstellung der Inhalte der verschiedenen Layouts unterscheidet sich nur wenig. Die Smartphone-Navigation ist gegenüber der Screen- und Tabletversion vereinfacht und erscheint zudem zusätzlich am Fuß der Seite. Dies erleichtert dem Besucher den Zugriff auf weitere Inhalte. Außerdem wird das Hintergrundbild durch ein Pattern ersetzt.

Konzept & Design:
Nadja Weber
fraeuleinpfeiffer.de