Technologie vývoje webových stránek je velmi mnohostranný proces. Ale přesto lze všechny jeho fáze rozdělit na dvě hlavní složky - funkční a vnější plášť. Nebo, jak je mezi webmastery zvykem, back-end, respektive front-end. Lidé, kteří si objednávají své weby u web developerských studií, se často naivně domnívají, že se vyplatí zaměřit se pouze na funkčnost a bude to správné rozhodnutí. Ale to platí ve velmi, velmi vzácných případech, obvykle u začínajících projektů ve fázi beta testování. V opačném případě musí grafický design a uživatelské rozhraní jednoduše odpovídat standardům vývoje webu a být pohodlné.
Prvním základním kamenem, kterému návrhář rozhraní nebo návrhář čelí, je šířka rozvržení webu. Koneckonců, pro to je nutné kreslit rozhraní. Čistě intuitivně vyvstávají dva přístupy – buď vytvořit samostatné rozvržení pro každé oblíbené rozlišení obrazovky, nebo vytvořit jednu verzi webu pro všechny displeje. A obě možnosti budou špatné, ale nejdřív to.
Standardní šířka webu v pixelechpro Runet
Před vývojem adaptivního rozvržení byl vývoj webu o šířce tisíc pixelů masovým jevem. Tento údaj byl zvolen z jednoho prostého důvodu – aby se web vešel na jakoukoli obrazovku. A to má svou logiku, ale předpokládejme, že člověk má na ploše stále alespoň HD monitor. V tomto případě bude vaše rozložení působit jako malinký proužek uprostřed obrazovky, kde je vše nalepeno na jednu hromadu a po stranách je obrovský nevyužitý prostor. Nyní předpokládejme, že na váš web člověk přistupuje na tabletu s 800px širokoúhlou obrazovkou a v nastavení je zaškrtnuto „Zobrazit celý web“. V tomto případě se vaše stránky také nebudou zobrazovat správně, protože se jednoduše nevejdou na obrazovku.
Z těchto úvah můžeme usoudit, že pevná šířka pro rozložení nám rozhodně nevyhovuje a musíme hledat jinou cestu. Pojďme analyzovat myšlenku samostatného rozvržení pro každou šířku obrazovky.
Rozvržení pro všechny příležitosti
Pokud jste zvolili jako strategii vytvoření rozvržení pro všechny velikosti obrazovek na trhu, budou vaše stránky nejunikátnější na celém internetu. Koneckonců, dnes je prostě nemožné pokrýt celou řadu zařízení a snažit se vyladit pro každou možnost. Pokud se ale zaměříte na nejoblíbenější rozlišení monitorů a obrazovek zařízení, pak nápad není špatný. Jeho jedinou nevýhodou jsou finanční náklady. Koneckonců, když jsou návrhář rozhraní, návrhář a kodér nuceni dělat stejnou práci 5krát nebo 6krát, projekt bude státnepoměrně vyšší než původně rozpočtovaná cena.
Pouze jednostránkové weby se proto mohou chlubit množstvím verzí pro různé obrazovky, jejichž účelem je prodat jeden produkt a mít jistotu, že to uděláte dobře. No, pokud nemáte jedno z těchto přistání, ale vícestránkový web, měli byste přemýšlet dále.
Nejoblíbenější velikosti stránek
Kompromisem mezi těmito dvěma extrémy je vykreslení rozložení pro tři nebo čtyři velikosti obrazovky. Mezi nimi musí být rozvržení pro mobilní zařízení. Zbytek by měl být přizpůsoben pro malé, střední a velké desktopové obrazovky. Jak vybrat šířku webu? Níže uvádíme statistiky služby HotLog za květen 2017, které nám ukazují rozložení oblíbenosti různých rozlišení obrazovky zařízení a také dynamiku tohoto ukazatele.
Z tabulky můžete zjistit, jak určit velikost webu, který chcete používat. Navíc můžeme konstatovat, že nejběžnějším formátem je dnes obrazovka 1366 x 768 pixelů. Takové obrazovky jsou instalovány v levných laptopech, takže jejich popularita je přirozená. Dalším nejoblíbenějším je Full HD monitor, který je zlatým standardem pro videa, hry a tedy i pro tvorbu vzhledu webových stránek. Dále v tabulce vidíme rozlišení mobilních zařízení 360 x 640 pixelů a dále různé možnosti pro obrazovky stolních počítačů a mobilních zařízení.
Design layout
TakžePo analýze statistik můžeme dojít k závěru, že optimální šířka webu má 4 varianty:
- Verze pro notebook s šířkou 1366 pixelů.
- Full HD verze.
- Rozložení široké 800 pixelů pro zobrazení na malých stolních monitorech.
- Mobilní verze webu – 360 pixelů na šířku.
Řekněme, že jsme se rozhodli, jakou velikost použít pro generovaný zdroj pro web. Ale takový projekt by byl stále nákladný. Pojďme se tedy podívat na další možnosti, tentokrát bez použití pevné šířky.
Přizpůsobení rozvržení
Existuje alternativní přístup, kdy se vyplatí přizpůsobit pouze minimální velikosti obrazovky a samotné velikosti stránek budou nastaveny v procentech. Zároveň lze takové prvky rozhraní, jako jsou nabídky, tlačítka a logo, nastavit v absolutních hodnotách se zaměřením na minimální velikost šířky obrazovky v pixelech. Bloky s obsahem se naopak roztáhnou podle zadaného procenta šířky plochy obrazovky. Tento přístup vám umožňuje přestat vnímat velikost stránek jako omezení pro návrháře a dovedně překonat tuto nuanci.
Co je zlatý řez a jak jej lze použít na rozvržení webové stránky?
I v renesanci se mnoho architektů a umělců snažilo dát svým výtvorům dokonalý tvar a proporce. Pro odpovědi na otázky o hodnotách takového poměru se obrátili na královnu všech věd - matematiku.
Od starověku byl vynalezen podíl, který naše oko vnímá jako nejpřirozenější a nejelegantnější,protože je v přírodě všudypřítomná. Objevitelem vzorce pro takový poměr byl talentovaný starořecký architekt jménem Phidias. Vypočítal, že pokud větší část podílu souvisí s menším, zatímco celek souvisí s větší, pak takový podíl bude vypadat nejlépe. Ale to je případ, kdy chcete objekt rozdělit asymetricky. Tento podíl byl později nazýván zlatým řezem, což dodnes nepřeceňuje svůj význam pro světové dějiny kultury.
Zpět na web design
Je to velmi jednoduché – pomocí zlatého řezu můžete navrhnout stránky, které budou lidskému oku co nejpříjemnější. Výpočtem podle definice vzorce zlatého řezu dostaneme iracionální číslo 1, 6180339887 …, ale pro usnadnění můžeme použít zaokrouhlenou hodnotu 1, 62. To bude znamenat, že bloky naší stránky by měly být 62 % a 38 % z celku, bez ohledu na velikost generovaného zdroje pro web, který používáte. Příklad můžete vidět na tomto diagramu:
Používejte nové technologie
Moderní technologie rozvržení webových stránek umožňují přesně vyjádřit myšlenku plánovače a designéra, takže si nyní můžete dovolit realizovat odvážnější nápady než na úsvitu internetových technologií. Už nemusíte složitě přemýšlet, jaká by měla být velikost webu. S příchodem takových věcí, jako je blokové adaptivní rozložení, dynamické načítání obsahu a fontů, se vývoj webových stránek stal mnohem příjemnějším. Koneckonců, tyto technologie jsouméně omezení, i když stále existují. Ale jak víte, bez hranic by nebylo umění. Doporučujeme vám použít jeden skutečně kreativní přístup k designu – zlatý řez. S ním můžete efektivně a krásně vyplnit pracovní prostor bez ohledu na to, jakou velikost webu nastavíte ve svých šablonách.
Jak zvětšit pracovní prostor webu
Je velká šance, že nebudete mít dostatek místa na to, aby se všechny prvky uživatelského rozhraní vešly do malého rozvržení. V tomto případě budete muset začít myslet kreativně nebo ještě kreativněji než dříve.
Maximálně uvolněte místo na webu skrytím navigace ve vyskakovacím menu. Je logické používat tento přístup nejen na mobilních zařízeních, ale také na desktopech. Koneckonců, uživatel se nemusí neustále dívat na to, jaké nadpisy jsou na vašem webu – přišel si pro obsah. A přání uživatele musí být respektováno.
Příkladem dobrého způsobu, jak skrýt nabídku, je následující rozvržení (foto níže).
V horním rohu červené oblasti můžete vidět křížek, na který kliknete, skryje menu do malé ikony, takže uživatel zůstane s obsahem webu sám.
Toto je však volitelné, můžete opustit navigaci, která bude vždy na dohled. Můžete z něj ale udělat krásný designový prvek a nejen seznam oblíbených odkazů na webu. Kromě textových odkazů nebo dokonce místo nich používejte intuitivní ikony. je to stejnéumožní vašemu webu efektivněji využívat prostor na obrazovce v zařízení uživatele.
Nejlepší web je responzivní
Pokud nevíte, jaké rozložení stránky zvolit, pak je pro vás vše jednoduché. Chcete-li ušetřit na nákladech na vývoj a zároveň nepřijít o publikum kvůli špatnému rozvržení některých zařízení, použijte responzivní design.
Responzivní design 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 srozumitelné a pohodlné i na notebooku, dokonce i na tabletu, dokonce i na chytrém telefonu. Tohoto efektu je dosaženo automatickou změnou šířky pracovní plochy obrazovky. Používáním responzivních stylů pro váš web děláte to nejlepší možné rozhodnutí.
Jaký je rozdíl mezi responzivním designem a verzemi webu
Responzivní design se od mobilní verze webu liší tím, že v druhém případě uživatel obdrží html kód, který se liší od desktopového. To je nevýhoda z hlediska optimalizace výkonu serveru i optimalizace pro vyhledávače. Navíc je obtížnější vypočítat statistiky pro různé verze webu. Adaptivní přístup tyto nevýhody nemá.
Reakce pro různá zařízení je dosažena rozložením s procentem zadané šířky nebo přenesením bloků do dostupného prostoru (ve svislé rovině na chytrém telefonu namístovodorovně na ploše), nebo vytváření individuálních rozvržení pro různé obrazovky.
Další informace o responzivním designu a vývoji v našich výukových programech.
