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

Technologie tvorby webových stránek

První základní kámen, kterým čelí návrhář rozhraní nebo návrhář, je šířka rozvržení stránky. Koneckonců, je nutné pro ně vytvořit rozhraní. Čistě intuitivně existují dva přístupy - buď pro vytvoření samostatného rozvržení pro každé populární rozlišení obrazovky nebo pro vytvoření jedné verze webu pro všechna mapování. A obě možnosti budou nesprávné, ale o všechno v pořádku.

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

Před vývojem adaptivní uspořádání masivní jev byl vývoj místa o šířce tisíce pixelů. Tato částka byla vybrána z jednoho jednoduchého důvodu - že místo se vejde do jakékoliv obrazovky. A to má svou vlastní logiku, ale předpokládejme, že ten člověk stále má alespoň HD monitor na ploše. V takovém případě se vaše uspořádání bude zdát jako malý pás ve středu obrazovky, kde je vše nahromaděno v jedné hromadě a na stranách je obrovský neobsazený prostor. Nyní předpokládejme, že na vašem webu přišel někdo z tabletu s obrazovkou o šířce 800 pixelů a v nastavení je zaškrtnuto "Zobrazit plnou verzi webu". V takovém případě se vaše stránky také zobrazí nesprávně, protože se jednoduše nezapadá do obrazovky.

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

Uspořádání pro každou příležitost

Pokud jste si vybrali jako strategii pro vytvoření rozvržení všech velikostí obrazovky, které se na trhu objeví, bude se vaše stránky stát nejvíce jedinečným na celém internetu. Je prostě nemožné pokrýt celou řadu zařízení dnes, snaží se provést přesné nastavení pro každou možnost. Ale pokud se soustředíte na nejoblíbenější rozlišení monitorů a obrazovky zařízení, pak to není špatná myšlenka. Jediným mínusem jsou finanční náklady. Koneckonců, když projektant rozhraní, designér a layout designer jsou nuceni dělat stejnou práci 5 nebo 6 krát, bude projekt stojí nevýslovně více než cena původně stanovená v rozpočtu.

Proto se může pochlubit množstvím verzí pro různé obrazovky s výjimkou jediných stránek, jejichž účelem je prodávat jeden produkt a nutně to dělat dobře. No, pokud nemáte jednu z těchto přistání a vícestranové stránky, pak stojí za to diskutovat dále.

Nejoblíbenější velikosti stránek

Kompromis mezi těmito dvěma extrémy je kreslení rozvržení pro tři nebo čtyři velikosti obrazovky. Mezi nimi musí být model pro mobilní zařízení. Zbytek by měl být přizpůsoben pro malou, střední a velkou pracovní plochu. Jak vybrat šířku stránky? Níže jsou uvedeny statistiky služby HotLog pro květen 2017, které nám ukazují distribuci popularity různých rozlišení obrazovky zařízení a také dynamiku této změny indikátoru.

Z tabulky se můžete dozvědět, jak zjistit velikost webu, který chcete používat. Dále můžeme konstatovat, že nejběžnější formát dnes je obrazovka 1366 na 768 bodech. Takové obrazovky jsou instalovány do notebooků s rozpočtem, takže jejich popularita je přirozená. Další nejoblíbenější je monitor Full HD, který je zlatým standardem pro videoklipy, hry a tím i pro vytváření rozvržení stránek. Dále v tabulce vidíme rozlišení mobilních zařízení 360 v 640 bodech, stejně jako různé možnosti pro stolní a mobilní obrazovky po něm.

Navrhování rozvržení

Takže po analýze statistik můžeme usoudit, že optimální šířka webu má 4 varianty:

1. Verze pro notebooky o šířce 1366 pixelů.
2. Verze Full HD.
3. Rozložení na šířku 800 pixelů pro zobrazení na malých stolních monitorech.
4. Mobilní verze webu má šířku 360 pixelů.

Řekněme, že jsme se rozhodli, jak použít velikost vytvořeného zdroje pro daný web. Ale takový projekt bude stále nákladný. Takže zvážíme více možností, tentokrát bez použití pevné šířky.

Vytváření rozložení je flexibilní

Existuje alternativní přístup, když je nutné upravit pouze minimální velikost obrazovky a velikost stránek bude nastavena podle procent. V takovém případě lze takovéto prvky rozhraní, jako jsou nabídky, tlačítka a loga, nastavit v absolutních hodnotách, se zaměřením na minimální velikost šířky obrazovky v pixelech. Bloky s obsahem se naopak roztahují podle specifikovaných procent šířky plochy 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.

Jaký je zlatý poměr a jak ho aplikovat na rozložení webových stránek?

Dokonce i v renesanci se mnozí architekti a umělci snažili dát svým výtvorům ideální tvar a poměr. Po zodpovězení otázek o významu tohoto 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 elegantnější, protože je všeobecně nalezeno v přírodě. Objevitel vzorce tohoto poměru byl talentovaný starověký řecký architekt Phidias. Vypočítal, že pokud se větší část podílu týká méně, protože celá se vztahuje k větším, pak tento poměr vypadá nejlépe. Ale je tomu tak, pokud chcete objekt rozdělit asymetricky. Tento poměr byl později nazýván zlatým úsekem, který ještě nepředjímá jeho význam pro světové dějiny kultury.

Zpět na web design

Je to velmi jednoduché - pomocí zlaté části můžete vytvořit stránky, které budou co nejvíce příjemné lidskému oku. Při výpočtu podle vzorce zlaté sekce získáme iracionální číslo 1.6180339887 ..., ale pro pohodlí můžeme použít zaokrouhlenou hodnotu 1.62. To znamená, že bloky naší stránky by měly činit 62% a 38% celku, bez ohledu na velikost zdrojového kódu pro stránky, které používáte. Příklad, který můžete vidět v tomto schématu:

Používejte nové technologie

Moderní technologie designu webových stránek umožňuje přesně sdělit myšlenku návrháře a designéra, takže si nyní můžete dovolit zavádění odvážnějších nápadů než za úsvitu internetových technologií. Již není nutné vážně hádat o tom, jakou velikost by mělo být místo. S příchodem takových věcí, jako je blokové adaptivní uspořádání, dynamické načítání obsahu a písem, se vývoj webu stalo mnohokrát příjemnějším. Koneckonců, takové technologie mají méně omezení, i když jsou. Ale jak víte, bez omezení by nebylo umění. Doporučujeme použít jeden skutečně kreativní přístup k designu - zlatý řez. Díky tomu můžete efektivně a dobře zaplnit pracovní prostor bez ohledu na to, jaké velikosti stránek zadáte ve svých šablonách.

Jak zvýšit pracovní plochu webu

Je velice pravděpodobné, že nebudete mít dostatek místa, aby se všechny prvky rozhraní rozložily do malého rozměru. V takovém případě musíte začít myslet tvůrčí, nebo dokonce více kreativně než předtím.

Maximalizovat prostor na webu může být skrytí navigace v rozbalovací nabídce. Tento přístup je logický nejen pro mobilní zařízení, ale i pro stolní počítače. Koneckonců, uživatel nemusí po celou dobu hledat, jaké kategorie jsou na vašem webu - přišel za obsah. Musí být respektovány touhy uživatele.

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ím na něj skryjete nabídku na malé ikoně a necháte uživatele s obsahem webu.

Není to však nutné, můžete nechat navigaci, která bude vždy viditelná. Ale vy můžete udělat krásný design element, a ne jen seznam populárních odkazů na místě. Pomocí ikon můžete použít i intuitivní ikony, nebo dokonce namísto nich. To také umožní vašemu webu efektivněji využívat prostor na obrazovce v zařízení uživatele.

Nejlepší stránky - adaptivní

Pokud nevíte, které rozvržení si můžete vybrat pro daný web, pak je vše pro vás snadné. Chcete-li ušetřit na vývojových nákladech a přesto neztratit publikum z důvodu špatného uspořádání zařízení, použijte adaptivní design.

Adaptive se nazývá design, který vypadá na různých zařízení stejně dobře. Tento přístup umožní, aby vaše stránky byly srozumitelné a pohodlné i na notebooku, alespoň na tabletu, a to i na smartphonu. Tento efekt je dosažen automatickými změnami šířky pracovního prostoru obrazovky. Používáním přizpůsobivých listů stylů pro danou lokalitu činíte co nejpřesnější rozhodnutí.

Jaký je rozdíl mezi adaptivní konstrukcí a dostupností různých verzí webu

Adaptivní návrh se liší od mobilní verze webu tím, že v druhém případě uživatel získá html kód, který se liší od verze pro stolní počítače. To je nevýhoda, pokud jde o optimalizaci výkonu serveru, stejně jako optimalizace pro vyhledávače. Kromě toho je mnohem obtížnější počítat statistiky v různých verzích webu. Adaptivní přístup postrádá takové nedostatky.

Adaptabilita pro různá zařízení se dosahuje rozvržením s procento šířky nebo přenesením bloků do volného místa (ve vertikální rovině na smartphonu namísto horizontální na pracovní ploše) nebo vytvářením individuálních rozvržení pro různé obrazovky.

Více informací o adaptivním designu a jeho vývoji můžete získat z učebnic.