Website optimieren für mobil?

08.04.2025, 22:29

P.s. ich habe eine CSS Datei für alle Seiten. außerdem habe ich noch eine CSS für die Mobile ansicht erstellt. die via <link rel="stylesheet" href="mobile.css" media="only screen and (max-width: 768px)"> geklinkt ist. diese funktioniert auch, aber egal was ich tu es sieht einfach nicht so aus wie es aussehen soll

3 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
09.04.2025, 00:41

Wenn man responsive/adaptive Seitenlayouts entwickeln möchte, sollte man für die Umsetzung schon gut im Voraus planen:

  • Es gibt viele Endgeräte mit unterschiedlichen Bildschirmgrößen. Welche gehören nun zur tatsächlichen Zielgruppe?
  • Liegt der Fokus eher auf den Support mobiler oder Desktop-Geräte?
  • Was für ein Grid wird für das geplante Layout genutzt? Inwiefern verhält es sich bei Verringern der Bildschirmbreite (werden z.B. erst Abstände zwischen Spalten reduziert, ändern Spalten ihre Reihenfolge, wie viel Spalten sollen je Bildschirmbreite auf einer Zeile liegen, etc.)?
  • Welche Inhalte müssen je Bildschirmgröße ihre Darstellungsform ändern?

Anhand der Beantwortung solcher Fragen kann man beispielsweise besser entscheiden, welche Breakpoints es braucht / welche Größenbereiche man außer Acht lassen kann und welcher Entwicklungsansatz (mobile-first / desktop-first) sich beim Bau der Webseite eignet. Bei manchen Inhalten, die je Bildschirmgröße ihre Darstellungsform ändern, kann es sogar notwendig (oder einfacher) sein, mit unterschiedlichen Strukturen im Markup zu arbeiten. Vielleicht macht es bei bestimmten Inhalten/Funktionen (z.B. eingebettete Applikationen, iFrames) auch Sinn, sie für eine bestimmte Größe komplett herauszunehmen, da sie evt. schlecht bedienbar sind oder zu viel Ladezeit fordern (also mehr Nachteile für den Nutzer bringen).

In deiner Situation ist es für einen Anfänger sicherlich einfacher, auf Themes (für CMS) oder Templates zurückzugreifen. Letztere findet man leicht via Suchmaschine (z.B. mit dem Suchquery: free html templates responsive). Ergebnisseiten sind beispielsweise HTML5 UP! oder ThemeWagon. Letzten Endes braucht man in diese dann nur noch seinen Inhalt einsetzen und evt. kleine nachträgliche Anpassungen (Farben, Schriften) vornehmen.

Ein weiteres Hilfsmittel könnten CSS-Frameworks sein, die ein Grid vorimplementieren. Es genügen an der Stelle also bereits minimalistische Frameworks wie Milligram oder Skeleton. Alternativ kannst du dir natürlich ein eigenes Grid-System schreiben. Schau dir hierzu auch CSS Grid und Flexbox an.

Wenn man diese Grid-Implementation dann von Anfang an durchgängig / konsistent beim Erstellen des Markups berücksichtigt, sollte ein großer Teil leicht erledigt sein.

Sollte es zwischen mobiler und Desktopansicht zu viele und große Unterschiede geben und deiner Meinung nach zu schwierig gestalten, dies unter einen CSS-Hut zu bringen, kannst du ebenso darüber nachdenken, zwei unterschiedliche Seiten auszuliefern (unterschiedliches HTML/CSS/JS je Gerät). Den Redirect auf die richtige Version kannst du auf unterschiedlichen Wegen implementieren:

  • serverseitig mittels eigener Dispatcher-Implementation; zur Prüfung des Geräts kann der User Agent aus dem Request ausgelesen werden
  • serverseitig mittels Konfiguration des Webservers (der User Agent dient erneut als Kriterium für die Weiche)
  • wenn es einen Proxy/CDN gibt, kann auch der die Umleitung übernehmen
  • clientseitig via JavaScript (entweder man prüft den User Agent oder die Fensterbreite)
  • ganz einfach: Binde im Headerbereich deiner Seite einen Link ein, der auf die jeweils andere Seitenversion verweist

Auf http://detectmobilebrowsers.com/ findest du für unterschiedliche Fälle ein paar Skripte, die du nutzen kannst.

Dieser Lösungsweg wäre meines Erachtens aber nur ein Notfallplan, denn er birgt auch Probleme. Wenn die Weiche nicht greift, weil ein Seitenbesucher (Crawler eingeschlossen) einen falschen User Agent übermittelt, landet der initial auf der falschen Seite. Bei einem clientseitigem Redirect (via JS oder Link) braucht ein Nutzer womöglich mehr Zeit, um auf die richtige/für ihn gut nutzbare Seitenversion zu gelangen.
Ireeb
09.04.2025, 02:55

Zwei komplett getrennte CSS Versionen zu haben macht wenig Sinn.

Es gibt ja nicht nur PC und Smartphones, es gibt...

  • Ultrawide-Bildschirme
  • Normale Bildschirme
  • Verschieden große Laptop-Bildschirme
  • Tablets im Hochformat
  • Tablets im Querformat
  • Und viele verschiedene Smartphones

Fast jeder User wird ein anderes Bildschirmformat haben, daher ist es praktisch unmöglich, die unzähligen Endgeräte mit nur 2 Breakpoints abzubilden.

Typischerweise hat man 4-5 Breakpoints, also Auflösungen, bei denen sich was ändert. Das heißt aber nicht, dass man das komplette CSS 4-5 mal schreibt, sondern man geht Modul für Modul vor. Man sollte natürlich jedes Modul von vornherein so flexibel wie möglich anlegen, aber dann schaut man, bis zu welchen Breakpoints es passt, und ab wo irgendwas geändert werden muss.

Es ist auch generell empfehlenswert, mobile-first zu arbeiten, einerseits sind Smartphones heutzutage einfach die wichtigeren Endgeräte im Web, andererseits ist es einfacher, ein Modul größer werden zu lassen, als es auf einen kleineren Bildschirm zu quetschen.

Ein CSS-Preprocessor wie SASS kann dabei helfen, CSS besser zu strukturieren, und beispielsweise aus mehreren Einzelnen Dateien eine kombinierte Datei erstellen.

Webseiten zu entwickeln, die gut aussehen, zuverlässig funktionieren, für Mobilgeräte optimiert sind und eine gute Performance haben ist nicht trivial, und auch nichts, was man mit ein bisschen ChatGPT und ein paar Zeilen Copy + Paste Code hinpfuschen kann.

Wenn man eine ordentliche Webseite haben will, braucht man auch ordentlichen Code, der ordentlich strukturiert ist, und von jemandem geschrieben wurde, der weiß, was er tut.

An den Punkt kann aber im Prinzip jeder hinkommen, allerdings braucht man dafür Übung, Erfahrung, und die richtigen Tools (wie eben SASS oder auch Build-Tools wie Vite).
Woher ich das weiß:Berufserfahrung – Tätigkeit als Webentwickler in einer Digitalagentur