it-swarm-eu.dev

Je pro weby lepší mít rozvržení s proměnnou šířkou nebo s pevnou šířkou?

Z důvodu různých rozlišení obrazovky se může uživatelská procházení webových stránek lišit. Je lepší rozložit web s pevnou šířkou? (a pokud ano, měly by existovat různé statické šířky pro standardní rozlišení?) Nebo by měl být web vždy uspořádán s proměnnou šířkou?

32
txwikinger

Nemyslím si, že je zde snadná odpověď, protože v konečném důsledku záleží na tom, co budujete a pro koho stavíte. Místa s pevnou šířkou i místa s proměnnou šířkou mají své výhody a nevýhody.

Jedna věc, na kterou bych měl poukázat, nebudu mluvit o mobilních zážitcích pro pevné/tekuté weby, protože mobilní weby jsou nejlepší, když je design specifický pro mobilní zařízení, ne port desktopového počítače na mobilní platformu.

Pevná šířka - výhody

Web s pevnou šířkou je konzistentnější a vývoj se rychleji vyvíjí než web s proměnnou šířkou. Umožňuje také návrháři mít větší kontrolu nad prezentací, protože můžete nastavit tvrdé hodnoty pro šířky, délky čar, velikosti typografie atd. Je také v konečném důsledku snazší údržba než u stránek s proměnnou šířkou.

Pevná šířka - nevýhody

Na druhé straně, když se objeví případy hran, začínají návrhy pevné šířky selhat. Právě teď je velmi běžné, že lidé navrhují weby pro monitor s rozlišením šířky 1024px, ale stále existují lidé se stroji s nižším rozlišením. Právě teď pracuji na aplikaci, která byla navržena pomocí mřížky 960px; Dnes jsem se podíval na analytiku a všiml jsem si, že 3% uživatelů bylo na monitorech 800 x 600, a asi 5% celkem bylo v rozlišení pod 1024 x 768. Tito uživatelé pravděpodobně dostanou docela špatný zážitek, protože web je pevná šířka .

Šířka kapaliny - výhody

Šířka kapaliny umožňuje navrhnout rozšíření na základě uživatelských nastavení; design se jim přizpůsobí, což je dobrá věc. To umožňuje webu udržovat poměrný záporný prostor, takže se web nikdy necítí příliš nepřehledně nebo příliš otevřeně (pokud to nebylo takto navrženo).

Šířka kapaliny - nevýhody

Bohužel ani návrhy šířky tekutin nejsou nepropustné ani pro Edgeovy případy. Když jsou šířky příliš hubené nebo příliš široké, mohou se stát špatné věci, zejména s textem. Délky vedení, které jsou příliš krátké nebo příliš dlouhé, jsou v podstatě nečitelné. Kromě toho je v provedeních s šířkou tekutiny obtížné škálovat mnoho forem médií, jako jsou obrázky nebo objekty Flash; IE vyžaduje, aby pro změnu velikosti obrázků Javascript, jinak se pixelovaly).

Citlivý webdesign

Několik lidí uvedlo příklady, ale dosud se na tuto techniku ​​neukazovalo podle jména. Ethan Marcotte nedávno vytvořil tento termín, aby popsal rozvržení tekutin, která se mohou zcela změnit na základě rozlišení obrazovky uživatele (viz podrobnosti zde ). Jedná se o hybrid s pevnou šířkou a šířkou tekutiny - umožňuje vám nastavit minima a maxima tak, aby se média nebo délky linií nedostaly mimo kontrolu, a také umožňuje, aby se návrh přizpůsobil uživatelským nastavením. Tato technika má samozřejmě také své vlastní výhody a nevýhody. Přestože je rozvržení specificky zvoleno pro nastavení uživatele, tento typ webu je obtížné rozvíjet. Ne všechny prohlížeče podporují mediální dotazy potřebné k tomu. Navíc vyvíjíte v podstatě více rozvržení a prodlužujete tak čas potřebný k vytvoření a údržbě.

Věřím, že je nemožné rozložit přikrývku „Vždy použít“ nebo „Nikdy nepoužívat“; Řekl bych, že byste měli vždy vyhodnotit své potřeby, než se rozhodnete. Cítím ve většině případů, že rozvržení s pevnou šířkou bude sloužit vašim účelům, ale že rozvržení s pružnou nebo responzivní úpravou může poskytnout mnohem lepší uživatelský dojem, a to pouze za cenu mimořádných obtíží.

17
RussellUresti

Problém s použitím 100% proměnné šířky je v tom, že se skutečně nezobrazuje dobře uživatelům s nejmenší a největší obrazovkou. Obecně navrhnu svou hlavní obsahovou část pro normu stanovením šířky min/max a poté vystředím důležitý (pevný) obsah. Poté můžete mít konstrukční prvky s proměnnou šířkou (protože nejsou tak důležité), které se natahují/zmenšují tak, aby vyplňovaly obrazovku.

Tímto způsobem se důležité informace vždy (doufejme) zobrazují správně, zatímco v mnoha rozlišeních vypadají dobře.

24
LoganGoesPlaces

Nejsem webdesignér, ale myslím si, že byste v ideálním případě měli vytvořit rozvržení tekutin. To je rozvržení, které se automaticky (a dynamicky) změní podle aktuální šířky. Tímto způsobem jsou pěkně podporována úzká zařízení, jako jsou telefony, stejně jako všechny různé šířky displeje.

Blogový příspěvek Konečně, tekutina Hicksdesign vysvětluje a domonstruje techniku. Má 3 sloupce, 2 sloupce a jedno rozložení sloupců, které jsou vybírány podle šířky okna prohlížeče.

7
whybird

Jakmile je délka řádku příliš dlouhá, je obtížné přečíst text. Pro všechny weby s proměnnou šířkou tedy musí být pro všechny textové oblasti alespoň maximální šířka, aby byla zachována čitelnost.

Je mnohem těžší, aby web s proměnnou šířkou vypadal dobře.

6
Mongus Pong

Záleží na tom, na čem pracuji, ale stále se přikláním k místům s pevnou šířkou. Důvodem je to, že vám umožňuje lépe ovládat UI a udržovat jej konzistentní napříč velikostmi obrazovky. Spousta webů o šířce tekutin vypadá hrozně na větších/menších monitorech (v závislosti na tom, pro co byly navrženy).

Obecné pravidlo pro mě:

  • Pokud je použitelnost webu do značné míry závislá na rozhraní a/nebo je obsah většinou text: pevná šířka
  • Pokud má web minimální rozhraní, ale obsah je do značné míry vizuální (například weby s fotografiemi nebo aplikace s mapami), pak se snažím o tekutinu.

Zde je skvělý rozpis některých výhod/nevýhod: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- pro vás /

2
Ryan

Kdykoli to budu moci, snažím se nenastavovat konkrétní výšku a šířku objektu v px, ale v %

1
megubyte

Navrhl bych započítat proměnnou šířku nebo poskytnout alternativní rozvržení pro širší obrazovky.

Pokud máte pevnou šířku - ujistěte se, že to není maličká! Viděl jsem některé weby o šířce 500 nebo 600 pixelů, které umožňují čtení stránky, jako je skenování žlutých stránek.

Dlouho jsem byl fanouškem přístupu The Man In Blue k poskytování alternativních rozvržení založených na dostupné šířce: viz live demo zde

1
scunliffe

Možná budete chtít navrhnout rozvržení svého webu v orientaci na šířk. Používá se stále více širokoúhlých monitorů, s velkým rozlišením 1920 x 1080 (tento je nejběžnější). Už jste někdy zkusili maximalizovat okno prohlížeče zobrazující portrét s pevným rozvržením? Je to jako polovina až dvě třetiny obrazovky plné barvy pozadí/obrázku.

Je příjemné, že systém Windows 7 umožňuje rychle změnit velikost okna na polovinu obrazovky a přilepit jej na stranu: WindowsKey + Left/Right

1
Mircea Chirea

Variabilní šířka je pravděpodobně způsob, jak jít, protože s pevnou šířkou si někteří lidé mohou myslet, že váš web je pro jejich monitor příliš malý a někteří si mohou myslet, že je příliš velký pro jejich monitor.

0
David

Závisí to na obsahu webové stránky. Pokud má mnoho textu, má proměnná šířka větší smysl, protože se text může šířit a uživatelé jej mohou číst efektivněji. Pokud je to spíše jako marketingový web, kde je vzhled důležitější, pak jděte s pevnou šířkou, protože je mnohem těžší udělat skvělý web s pevnou šířkou.

0
Kai Chan

Některé předpoklady, které při navrhování rozvržení pevné velikosti učiníte, jsou pro některé z vašich uživatelů nesprávné. Jediným způsobem, jak zajistit uspokojivý zážitek pro každého, je použít flexibilní a pohotový design.

Dva problémy (snaží se zabránit duplicitě):

  • Nelze předpokládat, že je prohlížeč na celé obrazovce; analytiky, které hlásí rozlišení obrazovky, vypráví pouze část příběhu.

  • Nelze předpokládat, že uživatelé používají stejné velikosti písma, jaké používáte. Řádky, které jsou příliš široké na to, aby se daly přečíst ve vaší velikosti písma, nemusí být příliš široké na čtení pro někoho, kdo musel zvětšit velikost písma o několik zářezů; naopak, sloupec, pro který nastavíte pevnou šířku na základě nastavení písma, může znamenat, že uživatel uvidí pět slov na řádek nebo tak něco.

Aby byl webový design použitelný pro všechny uživatele, musí využívat vše a pouze prostor, který vám prohlížeč dává. Věřte uživateli, že jeho prohlížeč přizpůsobil tak, aby optimalizoval jeho vlastní zážitek; pak byste měli pracovat v těchto mezích. Tento přístup funguje na 30 "monitorech a 7" tabletech (a dokonce i na telefonech, pokud jste neprovedli mobilní verzi).

0
Monica Cellio