Bestehende Webseite in responsive machen
Hallo Zusammen,
ich möchte eine bestehende HTML-Seite nun gerne für mobil responsive machen. Ist eine reine HTML-Seite. Auf Desktop soll sie aussehen wie immer.
Wenn jemand mit Smartphone die Seite besucht, dann soll entsprechend je nach Auflösung die Seite angezeigt werden. Ich möchte jetzt aber nicht grundlegend den HTML-Code überarbeiten, sondern lediglich ein paar Anpassungen an der CSS vornehmen.
Gibt es da eine Vorlage ? Habt ihr ein paar Tipps für mich ?
Vielen Dank Goldi
4 Antworten
Hallo Goldi!
Ich kann Volleyexperte nur zustimmen. Das Konzept sollte umgekehrt erfolgen. Das heißt: zunächst sollte das html-Grundgerüst mittels responsive Design oder besser gleich mobile first erstellt werden. Dabei sollte bedacht werden, dass für smartphones häufig anders angeordnete Menüs benötigt werden (oder sinnvoll sind). Minimal benötigt man zwei media queries, je nach den Bedürfnissen auch mehr. Die Seitenbesucher haben ja nicht nur Smartphones, sondern auch Tablets, ebook reader, Laptops, etc. Das Ganze umgekehrt anzugehen bedeutet meist mehr Arbeit, aber das hängt ja letztlich auch von der Webseite ab.
Gute Beispiele (links) wurden schon gegeben.
Viel Erfolg!
Technisch wurde das von den oben antwortenden schon erklärt. Aber als Ergänzung vielleicht dieses:
Vorlagen / Templates für responsive Webseiten und ein Testtool zum Simulieren von mobilen Geräten findet man auch auf der Homepage der web-designwerkstatt.
Zum Umschreiben bestehender Webseiten und zum Nachrüsten eines responsives CMS mit direkter Bearbeitung im Browser gibt es dort auch jede Menge zu lesen.
Responsive Webseiten macht man mal nicht eben durch ein paar CSS-Anpassungen. Da muss das ganze HTML-Gerüst richtig konzeptioniert sein. Ich kenne es so dass man immer ungekehrt anfängt . Man baut erst die Responsive-Seiten für Smartphones baut und sie dann nach und nach erweitert bis zu Desktopversion.
Vorlagen direkt gibt es keine. Aber eine Menge Tutorials:
http://www.lingulo.com/de/tutorials/css/how-to-build-a-html5-website-from-scratch
Lies mal nach auf Seite http://stackoverflow.com/questions/11510232/viewport-meta-tags-vs-media-queries