Webseite für "responsive Design" anpassen

R.Carlos

Neu angemeldet
Registriert
26 Dez. 2015
Beiträge
189
Hallo, ich habe mal ne Frage, wenn ich eine Webseite habe, die nicht für mobile Endgeräte optimiert ist, wie mache ich das am Besten mit responsive Design? Ist das schwer? Is tdas umfangreich? Klar, je nach Webseite, aebr ich meine allgemein.
 
Das kommt ganz auf die Webseite und deren Struktur(en) an. Ist die Seite klar gegliedert und Elemente sind so angelegt das man nur ein paar Layouteinstellung über CSS ändern muß, geht es relativ schnell. Wenn die Strukturen nicht da sind und man muß den HTML Code auch noch mit Javascript "versuchen" umzuschreiben, ist es aufwendig.

Mein Kredo daher, es kommt wirklich auf die Seite👎 an die du mobil anpassen willst. Eine allgemeingültige Aussage (einen Tag, zwei Tage, immer drei Tage) gibt es leider nicht. Ich würde grundsätzlich immer einen Tag mehr einplanen da man nie 100% abschätzen kann ob nicht ein Wunsch/Umsetzung nicht doch komplizierter ist. Kommt aber aufs Layout an.

Wenn dann noch Sachen wie eine mobile Navigation dazukommen, muß auch extra Arbeit geleistet werden. Und wenn du was spezielles umsetzen wollen würdest, dauert das entsprechend länge, falls man das Rad neu erfinden muß und dies muß dann auch noch extra getestet werden auf verschiedenen Geräte / Auflösungen.

Oder man nimmt fertige Lösungen (zum Beispiel eine mobile Navigation) die schon für viele/alle Geräte getestet worden sind. Was ja vermutlich auch in 98% aller Fälle "okay" sein kann.
 
In der Regel erstellst du ein Grid, was sich dann an die Größe des Endgerätes anpasst.

Wie ist die Website technisch aufgebaut? CMS?

Allgemein hängt es von der Umsetzbarkeit des Designs in ein passendes Layout ab. Heutige Webdesigner machen sich vor dem Design Gedanken, wie es später auf verschiedenen Endgeräten aussehen soll.

Ich arbeite gerne mit , um Grids zu erstellen.
 
Hallo, ich habe mal ne Frage, wenn ich eine Webseite habe, die nicht für mobile Endgeräte optimiert ist,…

Ich versteh jetzt die Argumentationskette zwischen Responsive Design und mobile Endgeräte nicht. Responsive Design funktioniert genauso bei Desktop-Rechnern.

Ansonsten ist vermutlich das, was du willst.
 
Prinzipiell ist es nicht schwer und nicht aufwändig. Du benötigst einen kleinen schnipsel im head der es ermöglicht, das auf kleineren Endgeräten nicht skaliert wird.

[src=html5]
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
[/src]

und ein die Anpassung deiner eigentlichen CSS mit "media queries" diese erwarten höhen oder breiten angaben.

[src=css]
@media (min-width: 20em) {
// dein css code hier
}
[/src]

Testen kannst du das ganze mit jedem Browser, entweder indem du ihn einfach verkleinerst oder indem du die Entwicklertools öffnest, dort gibt es einen Schalter, um die Website in diversen Größen darzustellen.

Ein gutes responsive design sollte mobile first sein, heißt: du fängst mit der minimalen breite an, arbeitest dich dann mit verschiedenen media queries an die Desktop größe heran.
 
Zurück
Oben