it-swarm.com.de

reaktionsschnelle Website min-width?

Nach meiner Erfahrung haben die meisten reaktionsschnellen Websites keine Mindestbreiten. Wenn die Größe auf eine winzige Größe (z. B. ein 100-Pixel-Fenster) geändert wird, verschraubt sich der Inhalt selbst und wird unleserlich.

beispiel: http://alistapart.com/article/responsive-web-design

Ich mag die Flexibilität von RWD, implementiere aber normalerweise eine Mindestbreite auf meinen Websites, da mir die Website-Präsentation nicht gefällt, wenn sie zu klein wird. Viele Websites, die nicht reagieren, lassen Sie scrollen, und ich habe mich gefragt, ob es ein guter Kompromiss wäre, eine Mindestbreite zu haben, und ob dies überhaupt die Benutzerfreundlichkeit beeinträchtigt. Beispiele https://theartofdining.co.uk/

30
benbyford

Bei Webdesign ging es immer darum, ein Publikum auszuwählen, das Ihnen am Herzen liegt. Sie können Pflege für jeden einzelnen verwendeten Browser verwenden und sich entweder auf den minimalen Satz gemeinsamer Funktionen verlassen oder Techniken zur progressiven Verbesserung/ordnungsgemäßen Verschlechterung verwenden, um die modernen Funktionen zu nutzen, sofern diese verfügbar sind. Der spätere Ansatz erfordert viel Ressourcen.

Persönlich mache ich mir nur Sorgen um Geräte mit einer Breite von 320px oder mehr. In gewisser Hinsicht interessieren mich kleinere Geräte nicht sonderlich, obwohl ich davon ausgehe, dass Websites, die ich erstelle, in jedem Browser einige (möglicherweise reduzierte) Funktionen aufweisen.

30
obelia

Erstens : Sie können eine großartige reaktionsfähige Site mit Min- oder Max-Breiten laden oder sie sogar in derselben Medienregel verwechseln. Menschen haben unterschiedliche Ansätze, wenn sie ein responsives Stylesheet schreiben.

Lassen Sie Ihre Medienabfragen alle schreiben mit:

@media screen and (min-width : 320px) {
}
@media screen and (min-width: 680px) {
}
@media creen and (min-width : 1024px) {
}

Bedeutet, dass dieses CSS angewendet wird, wenn der Anzeigebereich größer als 320, 680 bzw. 1024 ist.

Obwohl, wenn Sie haben:

@media screen and (max-width: 320px) {
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 1024px) {
}

Bedeutet, dass dieses CSS angewendet wird, wenn der Anzeigebereich kleiner als 320, 680 und 1024 ist.

Zweitens : Sie können sogar eine spezifischere Medienabfrage haben:

@media screen and (min-width: 680px) and (max-width: 1024px) {
}

darin heißt es: Wenn der Anzeigebereich zwischen 680 und 1024 Pixel liegt, gelten diese Stile.

Wenn Sie nicht viele Websites mit Medienabfragen mit minimaler Breite sehen, bedeutet dies nicht, dass sie nicht so gut funktionieren wie die mit maximaler Breite. Möglicherweise ist die Person, die das Antwortbit geschrieben hat, mit maximaler Breite komfortabler.

10

Ob sich dies auf die Benutzerfreundlichkeit auswirkt oder nicht, hängt von Ihrer Zielgruppe, dem verwendeten Gerät und der Entscheidung für eine Mindestbreite ab.

Bei den meisten Smartphones können Sie scrollen und zoomen. Daher möchten Sie möglicherweise Ihre Mindestbreite auf die niedrigste Breite einstellen, die Ihren Inhalt nicht behindert. Der gesamte Zweck des reaktionsschnellen Designs besteht jedoch darin, Ihr Layout in verschiedenen Breiten zu ändern, sodass Sie Inhalte anpassen können. Sie sollten in der Lage sein, eine Layoutlösung für nahezu alle Größen zu finden, es sei denn, große Bilder oder Diagramme sind Teil Ihrer Inhalt.

In beiden Fällen mache ich mir im Allgemeinen keine allzu großen Sorgen um Breiten unter 320 Pixel, und die meisten Webdesigner scheinen dies auch nicht zu tun.

2
Eric