Responsives Webdesign, was ist die beste Praktik?

[Nevada208]

Hallo zusammen,

ich steh vor der Aufgabe ein Redesign für einen Webshop zu machen. Dabei soll das Design gleich responsive gemacht werden.

Der Schwerpunkt liegt dabei im CSS. Es gibt verschiedene Möglichkeiten, ich möchte gern wissen was die praktischste Variante ist.

Eine CSS-Datei für Mobil, Tablet und Desktop oder für jedes Gerät eine separate CSS-Datei? Was sind sinnvolle Breakpoints?

Die derzeitige CSS-Datei umfasst ca. 5000 Zeilen.

Gruß Nevada

[gfoidl]

Hallo,

Was sind sinnvolle Breakpoints?

Ich würde mich da z.B. an Bootstrap orientieren und ähnliche / gleiche Breakpoints verwenden, da anzunehmen ist dass die Entwickler von Bootstrap genügend UX-Forschung betrieben haben.

Eine CSS-Datei für Mobil, Tablet und Desktop oder für jedes Gerät eine separate CSS-Datei?

5k Zeilen sind nicht übermäßig viel, da sollte die minifizierte (und gezippte) css-Datei nicht allzugroß sein, so dass eine (fertige) Datei wohl passt.
Schreibt ihr das css direkt od. verwendet ihr sass / less und ein Build-Tool? Für die Entwicklung würde ich es schon aufteilen (nach Breakpoints), da es übersichtlicher und leichter zu warten wird.

Wenn das "css-bundle" zu groß für eine Datei ist, erst dann würde ich ein Aufsplitten überlegen und im html je nach Breakpoint laden

<link rel="stylesheet" media='screen and (min-width: 140px) and (max-width: 380px)' href="phone.css" />
<link rel="stylesheet" media='screen and (min-width: 381px) and (max-width: 700px)' href="tablet.css" />
<link ... />

Warum würde ich eine css-Datei vorziehen?
Stell dir folgendes Szenario vor: Ein Benutzer besucht mit dem Handy euren Shop im Hochformat und wechselt dann ins Querformat das zufälligerweise in einen anderen Bereich (Breakpoint) fällt.
Bei einer css-Datei sind die Stile für den anderen Breakpoint bereits geladen und es gibt keine Verzögerungen. Bei mehreren Dateien muss die andere erst geladen werden und kann u.U. zu schlechterer UX führen.
(Es sei denn die css-Dateien für die anderen Dateien werden per Preload, ServiceWorker, etc. bereits im Hintergrund geladen.)

mfG Gü