Standardní velikosti stránek: funkce, požadavky a doporučení

Technologie pro vývoj webových stránek je velmi všestranný proces. Ale přesto je možné všechny jeho stupně rozdělit na dvě hlavní součásti - funkční a vnější. Nebo, jak je běžné mezi webmastery, backendem a frontem a koncem. Lidé, kteří objednávají své webové stránky ve studiích pro vývoj webových aplikací, často naivní věří, že je třeba se soustředit pouze na funkčnost a to je správné rozhodnutí. To ale platí ve velmi ojedinělých případech, obvykle při spouštěcích projektech v beta testování. V dalším grafickém designu a uživatelském rozhraní stačí přizpůsobit se standardům pro vývoj webových aplikací a být pohodlné.


První základní kámen, kterým čelí návrhář rozhraní nebo návrhář, je šířka rozvržení stránky. Koneckonců je pro to nutné převádět rozhraní. Existují čistě intuitivní dva přístupy - vytvořit samostatné rozvržení pro každé populární rozlišení obrazovky nebo vytvořit jednu verzi webu pro všechny obrazovky. A obě možnosti budou nesprávné, ale vše je v pořádku.

Standardní šířka místa v pixelech pro runet

Až do vývoje adaptivního uspořádání byl masový jev vývoj lokality s šířkou tisíce pixelů. Toto číslo bylo vybráno z jednoho jednoduchého důvodu - takže místo bylo umístěno na libovolné obrazovce. A to má vlastní logiku, ale pojďme předpokládat, že stále člověk má na monitoru alespoň HD monitor. V takovém případě se vaše rozložení objeví jako malý proužek ve středu obrazovky, kde je vše nařízeno do jedné hromady ana stranách obrovský nevyužitý prostor. Nyní předpokládejme, že osoba přišla na vaše webové stránky s obrazovkou o šířce 800 pixelů av nastaveních je zaškrtávací políčko "Zobrazit plnou verzi webových stránek". V takovém případě se vaše stránky také zobrazí nesprávně, neboť se prostě na obrazovce nepřipojí.


Z těchto úvah můžeme usoudit, že pevná šířka rozvržení není pro nás přesně vhodná a musíme hledat jinou cestu. Pojďme analyzovat myšlenku samostatného uspořádání pro každou šířku obrazovky.

Rozvržení pro každou příležitost

Pokud se rozhodnete vytvořit rozvržení pro všechny velikosti obrazovky, které se na trhu objeví, vaše stránky se stanou nejvíce unikátními na internetu. Dnes je prostě nemožné dosáhnout celé řady zařízení a pokusit se o přesnou úpravu pro každou možnost. Ale pokud se soustředíte na nejoblíbenější rozlišení monitorů a obrazovek zařízení, pak to není špatné. Jeho jediným mínusem jsou finanční výdaje. Koneckonců, když projektant rozhraní, návrhář a montér bude nucen provést stejnou práci 5 nebo 6 krát, bude projekt stát mnohem více, než bylo původně nastaveno v rozpočtu.
Proto se může pochlubit velkým počtem verzí pod různými obrazovkami, které mohou být jako stránky s jedním stránkem, jejichž účelem je prodat jeden výrobek a nutně to udělat dobře. Pokud nemáte jednu z těchto vstupních stránek a mnohostránkový web, měli byste dále myslet.

Nejoblíbenější stránky

Kompromisem mezi těmito dvěma extrémy je vytvoření rozvrženítři nebo čtyři velikosti obrazovky. Mezi nimi musí být nutně mobilní uspořádání. Zbytek by měl být přizpůsoben malým, středním a velkým obrazovkám na ploše. Jak vybrat šířku stránky? Níže najdete statistiky služby HotLog pro květen 2017, které nám ukazují distribuci popularity různých rozlišení obrazovky zařízení, stejně jako dynamiku změny tohoto indikátoru.
Z tabulky se můžete dozvědět, jak zjistit velikost webu, který chcete používat. Dále můžeme usoudit, že nejběžnějším dnešním formátem je obrazovka 1366 o 768 bodů. Tyto obrazovky jsou instalovány v notebooku s rozpočtem, takže jejich popularita je přirozená. Další v popularitě je monitor Full HD, který je zlatým standardem pro videa, hry a tudíž i pro tvorbu rozvržení stránek. Dále v tabulce vidíme rozlišení mobilních zařízení 360 o 640 bodů, stejně jako různé varianty desktopových a mobilních obrazovek.

Návrh uspořádání

Takže po analýze statistik můžeme usoudit, že optimální šířka webu má 4 varianty:
  • Verze pro notebooky o šířce 1366 pixelů.
  • Verze Full HD.
  • Velikost rozvržení o šířce 800 pixelů, která se zobrazuje na malých monitorech.
  • Mobilní verze webu má šířku 360 pixelů.
  • Předpokládejme, že jsme zjistili, který z nich by měl pro daný web použít velikost vytvořeného zdroje. Ale takový projekt bude stále nákladný. Takže se podívejme na další možnosti, tentokrát bez použití pevné šířky.

    Provádíme flexibilní uspořádání.

    Existuje alternativní přístup, když je nastavení pouze pod minimální velikostí obrazovky, a velikost samotných stránek se bude ptát jako procento. Současně je možné tyto prvky rozhraní, menu, tlačítek a loga nastavit v absolutních hodnotách se zaměřením na minimální velikost šířky obrazovky v pixelech. Obsahové bloky se naopak roztahují v souladu se stanovenými procenty ze šířky obrazovky. Tento přístup vám umožní přestat vnímat velikost stránek jako omezení pro návrháře a talentované, abyste porazili tuto nuanci.

    Co je to zlatá část a jak ji aplikovat na rozvržení webové stránky?

    I v renesanci se mnozí architekti a umělci snažili dát svým dílům ideální podobu a proporci. Při zodpovězení otázky významu takového podílu se obrátili na královnu všech věd - matematiku. Od doby starověku byl vynalezen poměr, který naše oko vnímá jako nejpřirozenější a nejmodernější, protože je všude v přírodě. Objevitel vzoru pro takový vztah byl talentovaný francouzský architekt jménem Fidium. Vypočítal, že pokud je většina podílu méně relevantní, než celá se vztahuje na větší, pak tento poměr vypadá nejlépe. Ale je tomu tak, pokud chcete objekt rozdělit asymetricky. Tento poměr se později stal známý jako "zlatý úsek, který ještě nepředjímá jeho význam pro světové kulturní dějiny."

    Návrat na web design

    Všechno je velmi jednoduché - pomocízlatý řez, můžete navrhovat stránky, které budou nejvíce lahodí lidskému oku. Výpočet vzorec pro stanovení zlatý řez, dostáváme iracionální číslo 16180339887, ale pro větší pohodlí, můžete použít zaoblený hodnotu 162. To by znamenalo, že výkon našich stránek by měla být 62% a 38% z celku, bez ohledu na to, jakou velikost generované zdroj pro stránkách které používáte Příklad lze vidět v následujícím schématu:

    Použití nových technologií

    Moderní technologie DTP webové stránky umožňují přesně vyjádřit záměr návrháře a designéra, protože si nyní mohou dovolit odvážnější realizaci myšlenky než na úsvitu internetové technologie. Žádné další tvrdé puzzle, nad nímž by měla být velikost místa. S příchodem věci, jako je blok adaptivní kódování obsahu nahrávání a dynamické fonty, vývoj webových stránek se stala mnohonásobně více zábavná. Koneckonců, takové technologie mají méně omezení, i když stále existují. Ale jak víte, žádné umění by nemělo žádné omezení. Navrhujeme použít jeden skutečně kreativní přístup k designu - zlatý řez. S ním můžete efektivně naplnit a krásné pracovního prostoru, bez ohledu na velikost stránek, které dal v šablonách.

    Jak zvýšit pracovní prostor webu

    Je velmi pravděpodobné, že nebudete mít dostatek prostoru pro umístění všech prvků rozhraní v malém uspořádání. V takovém případě musíte začít myslet tvůrčí nebo dokonce kreativnější, než jste dělali předtímz toho. Můžete uvolnit místo na webu tím, že skryjete navigaci v místní nabídce. Tento přístup je logický nejen pro použití v mobilních zařízeních, ale i na stolních počítačích. Koneckonců, uživatel nemusí vždy zkontrolovat, jaké části vašeho webu přišli za obsah. A přání uživatele je třeba respektovat. Příkladem dobrého způsobu, jak skrýt nabídku, je následující rozložení (obrázek níže).
    V horním rohu červené oblasti můžete vidět kříž, klepnutí na které skryje nabídku na malé ikoně, takže uživatel sám o obsahu webu. Nicméně, pokud tak neučiníte, můžete nechat navigaci, která bude vždy v dohledu. Ale můžete vytvořit krásný designový prvek, nejen seznam oblíbených odkazů na webu. Pomocí ikon můžete použít i intuitivní ikony nebo dokonce namísto textových odkazů. Umožní také vašemu webu efektivnější využití plochy obrazovky v zařízení uživatele.

    Nejlepší web - Adaptivní

    Pokud nevíte, které rozvržení stránek je pro vás snadné. Chcete-li ušetřit na vývojových nákladech, aniž byste ztratili publikum kvůli špatnému uspořádání zařízení, použijte adaptivní design. Adaptivní je design, který vypadá stejně dobře na různých zařízeních. Tento přístup umožní, aby vaše stránky byly jasné a pohodlné i na notebooku, ačkoli na tabletu, a to i na smartphonu. Tento efekt je dosažen automatickou změnou šířky pracovního prostoruobrazovce. Pomocí přizpůsobivých šablon stránek můžete přijmout správné řešení od možných.

    citlivý konstrukce se liší od přítomnosti různých verzí

    reagující konstrukce se liší od mobilních webových stránek, takže v tomto případě, uživatel obdrží html kód, který se liší od pracovní plochy. To je nevýhoda, pokud jde o optimalizaci výkonu serveru i optimalizace pro vyhledávače. Kromě toho je obtížnější zvážit statistiky pro různé verze webu. Adaptivní přístup nemá takové nevýhody.
    přizpůsobivost k různým zařízením je dosaženo díky uspořádání šířky procentní úkolu nebo předávajícím dostupný prostor (ve svislé rovině, než na smartphone vodorovně na ploše) nebo individuální rozložení na různých obrazovkách. Více se dozvíte o adaptivním designu a jeho vývoji z učebnic.

    Související publikace