Frage von ascharkowski, 33

Website-Optimierung für verschiedene Bildschirmauflösungen?

Hallo!

Ich habe eine Webseite: https://www.alexander-scharkowski.de/index.html Ich möchte sie nun so optimieren, dass sie aussieht wie auf meinem 1366 x 768 Pixel Laptop so aus, wie ich es möchte aber anders sieht sie einfach nur sche*** aus. Was kann ich machen?

LG Alex

P.S. Wenn ihr ein Programm kennt, indem man virtuelle Bildschirme erstellen kann sagt bescheid :D

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Minilexikon, 25

Du kannst mit MediaQuerys arbeiten:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Bootstrap arbeitet zum Beispiel mit folgenden Angaben zur Bildschirmauflösung. Hiermit kannst du dein Layout schon einmal grundsätzlich anpassen und auf verschiedene Maße reagieren.

Antwort
von Erigalus, 26

Zumindest im Firefox (im Chrome und anderen Browsern wahrscheinlich auch, hab's da aber noch nicht getestet, da ich ein FF-User bin) kann man über die Konsole (Strg. + Shift + K) verschiedene Auflösungen austesten. Hierzu einfach in der Konsole in der rechten oberen Ecke auf das 2. Symbol von links klicken und im Dialogfenster die gewünschte Auflösung aussuchen.

Antwort
von medmonk, 22

Das eine Website auf allen Devices gleich aussieht, ist nicht möglich. Allein schon weil der nötige Platz fehlt oder die Seite unbrauchbar skaliert wird. Daher solltest du dich mit Responsive Webdesign respektive mit der Umsetzung einer responsiven Website auseinandersetzen. Idealerweise auch gleich das Mobile-first Konzept verinnerlichen.  

CSS3 Media Queries sind da vor allem gefragt. Ebenso ist es sinnvoll ein Grid System zu verwenden. Jenes kann die Arbeit deutlich erleichtern und sorgt gleichzeitig für eine rein optisch bessere Wahrnehmung. Bevor du dich in in ein Framework wie Bootstrap oder Foundation einarbeitest, sollte elementares Grundlagenwissen zu/über HTML und CSS vorhanden sein. 

Lg medmonk 

  

Antwort
von sniggelz, 28

Informiere dich über responsive Design und CSS 3, speziell über den Viewport.

Noch ein Hinweis: Man erstellt Webseiten heutzutage nicht mehr so, dass sie überall gleich aussehen, sondern dass sie auf jeder Plattform einfach bedienbar sind...

Antwort
von perhp, 11

Für das, dass du auf deiner Webseite für CSS wirbst, kennst du dich damit ziemlich wenig aus. Schon mal was von Media Queries gehört? Das gehört bei responsiven Webseiten einfach dazu und sollte jeden ein Begriff sein.

Antwort
von MarinusWillet, 23

http://mattkersley.com/responsive/

Viel Spaß bei der Optimierung. ;)

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten