Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Ein responsives Design für eine ur­alte Webpräsenz

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Screenshot
Screenshot Desktop

Eine Website aus dem Jahr 2003. Mit dem Flair der Nullerjahre. Besucher und Seiteneigner lieben es, die Seite hat einen hohen Wiedererkennungswert, und folgt keinem Modetrend. Und daran sollte sich auch nichts ändern.

Doch! Es musste sich etwas ändern. Das Design musste responsiv werden, um die inzwischen weit über 50 % der Seitenbesucher mit Smartphone zu bedienen. Ist das möglich, ohne die komplette Website neu zu erstellen?


Das mobile Design mit dem Look & Feel des Desktop-Designs. (Screencast vom iPhone)

Ja, es ist möglich. Aber nur, weil ich mich auch 2003 schon an das Prinzip "Trennung von Inhalt und Design" gehalten habe: Sauber strukturiertes Markup, und das Design in ein externes CSS. Entsprechende Kundenanfragen scheitern häufig genau an diesem Punkt. Eine Website mit Tabellenlayout responsive zu machen bedeutet fast immer ein komplettes Redesign.

Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

Kommentare

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat