Mobile Ansicht einer bestehenden Webseite

[ArtBrainer]

Grüß Euch,
meine Homepage ist schon ein älteres model, die interaktionen sind ganz ok möchte jedoch eine Mobile ansicht haben die meinen ansprüchen und vorstellenungen gerecht wird.
Wie kann ich das umsetzen ? was muss man beachten ? wo fängt man da an wenn man eine bestehende HP schon hat ?

LIebe Grüße
DAB

 

[Mat]

Weil du bei so gut wie allen Elementen deiner Seite ids oder einzigartige Klassen vergeben hast, kannst du sie gezielt in Media-Queries überschreiben. Also zum Beispiel @media(width < 600px) { ... } für spezielle Regeln, die nur bei kleinen Bildschirmen angewendet werden.

Da aber auch sehr viel JavaScript im Spiel ist, das CSS überschreibt, musst du JS ebenfalls im Hinterkopf behalten.

Wenn Media Queries nicht ausreichen, muss ein neues Design her. Um das alte nicht zu velieren, kannst du eine Kopie der Seite unter mobil.deine-seite.com oder https://www.deine-seite.com/mobil/ anlegen und da mit einem "Mobile First"-Design anfangen. Kannst dann entscheiden, ob du das neue Design auch für den Desktop übernimmst, oder ob du die alte Seite behältst und Handynutzer immer auf mobile umleitest.

 

[Mupfel]

Wenn ich mich recht erinnere, kann man auch CSS-Dateien anhand der Medienbreite einbinden. Bis zu einer bestimmten Größe wird Datei 1 genutzt und ab einer bestimmten Größe Datei 2. Googlen und überfliegen ergab bei mir: https://www.w3schools.com/tags/att_link_media.asp

 

[JR Cologne]

Wie schon geschildert wurde, sind Media Queries eins der zentralen Mittel.

Ich würde dabei allerdings nicht aus den Augen verlieren, dass deine gesamte Seite (HTML, CSS, JS und ggf. serverseitig PHP oder was auch immer du einsetzt, habe es mir nicht näher angeschaut) vermutlich stark veraltet ist und sich manche Dinge dementsprechend nicht einfach so anpassen lassen werden, weil früher z.B. Webseiten fest für eine bestimmte Bildschirmgröße entwickelt wurden und daher z.B. alles mit hardgecodeten Pixelwerten umgesetzt sein könnte.
Das ließe sich allein mit Media Queries schwer beheben/umgehen.

Tendenziell würde ich also empfehlen, die Website nahezu von Grund auf neu aufzusetzen und von Anfang an responsive zu entwickeln, wenn du bereit bist, etwas mehr Zeit darein zu investieren und vielleicht auch selbst Lust auf einen neuen, moderneren Anstrich hast.

Ansonsten könnte das in einem ziemlich schwierigem Spagat ausarten, wenn du versuchst, die alten Sachen möglichst unangetastet zu lassen, aber für mobile Endgeräte anzupassen und auf der anderen Seite eine ordentliche responsive Website hinzubekommen.

Eine komplett separate Website für Mobilgeräte zu entwickeln, ist zwar eine Option, aber letztendlich sorgt das meist für ein Missverhältnis zwischen Desktop und Mobilansicht, was die User Experience betrifft.
Ich kenne kaum eine Mobilansicht, wenn sie nicht responsive ist, die wirklich gut funktioniert.
Und wenn die mobile Ansicht ordentlich responsive aufgezogen wird, dann kann man es eigentlich schon gleich richtig machen und dann auch noch die paar Anpassungen für Desktop vornehmen, sodass es am Ende eine einheitliche Sache ist.

Zudem muss man einfach sagen, dass man es mit modernem CSS wesentlich leichter hat, eine Website zu gestalten, die sich dynamisch ohne tausende Media Queries und kleine Anpassungen schön an beliebige Geräte(-größen) anpasst.
In deinem bisherigen Layout wirst du ohne eine grundsätzliche Überarbeitung wahrscheinlich wenige moderne Techniken anwenden können, ohne das bisherige Layout kaputt zu machen.

Aber das ist nur meine Vermutung. Müsste man sich halt näher anschauen. Letztendlich kannst du es natürlich versuchen, eine stückweise Anpassung vorzunehmen bzw. erstmal die gröbsten Probleme zu beseitigen.