Technológia vývoja webových stránok je veľmi mnohostranný proces. Všetky jeho fázy však možno rozdeliť na dve hlavné zložky - funkčnú a vonkajšiu škrupinu. Alebo, ako je medzi webmastermi zvykom, back-end, respektíve front-end. Ľudia, ktorí si objednávajú svoje weby vo web developerských štúdiách, sa často naivne domnievajú, že sa oplatí zamerať len na funkčnosť a toto bude správne rozhodnutie. Ale to platí vo veľmi, veľmi zriedkavých prípadoch, zvyčajne pre startupové projekty vo fáze beta testovania. V opačnom prípade sa od grafického dizajnu a používateľského rozhrania jednoducho vyžaduje, aby vyhovovali štandardom vývoja webu a boli pohodlné.
Prvým základným kameňom, ktorému návrhár rozhrania alebo dizajnér čelí, je šírka rozloženia stránky. Koniec koncov, na to je potrebné kresliť rozhrania. Čisto intuitívne vznikajú dva prístupy – buď vytvorte samostatné rozloženia pre každé obľúbené rozlíšenie obrazovky, alebo vytvorte jednu verziu stránky pre všetky displeje. A obe možnosti budú nesprávne, ale najskôr.
Štandardná šírka webu v pixelochpre Runet
Pred vývojom adaptívneho rozloženia bol vývoj stránky so šírkou tisíc pixelov masovým fenoménom. Tento údaj bol vybraný z jednoduchého dôvodu – aby sa stránka zmestila na akúkoľvek obrazovku. A to má svoju logiku, no vezmime si, že človek má na ploche ešte aspoň HD monitor. V tomto prípade bude vaše rozloženie pôsobiť ako maličký pásik v strede obrazovky, kde je všetko zlepené na jednej kope a po stranách je obrovský nevyužitý priestor. Teraz predpokladajme, že na vašu webovú stránku pristupuje osoba na tablete s 800px širokouhlou obrazovkou a v nastaveniach je zaškrtnutá možnosť „Zobraziť celú webovú stránku“. V tomto prípade sa vaša stránka tiež zobrazí nesprávne, pretože sa jednoducho nezmestí na obrazovku.
Z týchto úvah môžeme usúdiť, že pevná šírka pre rozloženie nám určite nevyhovuje a musíme hľadať iný spôsob. Poďme analyzovať myšlienku samostatného rozloženia pre každú šírku obrazovky.
Rozloženia pre všetky príležitosti
Ak ste sa ako stratégiu rozhodli vytvoriť rozloženia pre všetky veľkosti obrazoviek na trhu, vaša stránka bude najjedinečnejšia na celom internete. Koniec koncov, dnes je jednoducho nemožné pokryť celú škálu zariadení a snažiť sa doladiť pre každú možnosť. Ak sa však zameriate na najobľúbenejšie rozlíšenia monitorov a obrazoviek zariadení, nápad to nie je zlý. Jeho jedinou nevýhodou sú finančné náklady. Koniec koncov, keď sú dizajnér rozhrania, dizajnér a kóder nútení vykonať rovnakú prácu 5 alebo 6 krát, projekt bude stáťneúmerne vyššia ako pôvodne rozpočtovaná cena.
Len jednostránkové weby sa preto môžu pochváliť množstvom verzií pre rôzne obrazovky, ktorých účelom je predávať jeden produkt a mať istotu, že to robíte dobre. No, ak nemáte jeden z týchto vstupov, ale viacstránkový web, potom by ste mali premýšľať ďalej.
Najobľúbenejšie veľkosti stránok
Kompromisom medzi týmito dvoma extrémami je vykreslenie rozloženia pre tri alebo štyri veľkosti obrazovky. Medzi nimi musí byť rozloženie pre mobilné zariadenia. Zvyšok by mal byť prispôsobený pre malé, stredné a veľké obrazovky desktopov. Ako zvoliť šírku stránky? Nižšie uvádzame štatistiku služby HotLog za máj 2017, ktorá nám ukazuje rozdelenie popularity rôznych rozlíšení obrazovky zariadenia, ako aj dynamiku tohto ukazovateľa.
V tabuľke môžete zistiť, ako určiť veľkosť stránky, ktorú chcete použiť. Okrem toho môžeme konštatovať, že dnes najbežnejším formátom je obrazovka s rozlíšením 1366 x 768 pixelov. Takéto obrazovky sú inštalované v lacných notebookoch, takže ich popularita je prirodzená. Ďalším najpopulárnejším je Full HD monitor, ktorý je zlatým štandardom pre videá, hry a teda aj pre tvorbu rozloženia webových stránok. Ďalej v tabuľke vidíme rozlíšenie mobilných zariadení 360 x 640 pixelov, ako aj rôzne možnosti pre obrazovky stolných počítačov a mobilných zariadení.
Design layout
TakžePo analýze štatistík môžeme konštatovať, že optimálna šírka stránky má 4 variácie:
- Verzia pre laptop so šírkou 1366 pixelov.
- Full HD verzia.
- Rozloženie so šírkou 800 pixelov na zobrazenie na malých stolných monitoroch.
- Mobilná verzia stránky – šírka 360 pixelov.
Povedzme, že sme sa rozhodli, akú veľkosť použiť pre generovaný zdroj pre stránku. Takýto projekt by však bol stále nákladný. Poďme sa teda pozrieť na ďalšie možnosti, tentoraz bez použitia pevnej šírky.
Prispôsobenie rozloženia
Existuje alternatívny prístup, kedy sa oplatí prispôsobiť len minimálnej veľkosti obrazovky a samotné veľkosti stránok budú nastavené v percentách. Zároveň môžu byť také prvky rozhrania, ako sú menu, tlačidlá a logo, nastavené v absolútnych hodnotách so zameraním na minimálnu veľkosť šírky obrazovky v pixeloch. Bloky s obsahom sa naopak roztiahnu podľa zadaného percenta šírky plochy obrazovky. Tento prístup vám umožňuje prestať vnímať veľkosť stránok ako obmedzenie pre dizajnéra a šikovne prekonať túto nuansu.
Čo je zlatý rez a ako ho možno použiť na rozloženie webovej stránky?
Už v renesancii sa mnohí architekti a umelci snažili dať svojim výtvorom dokonalý tvar a proporcie. Pre odpovede na otázky o hodnotách takéhoto podielu sa obrátili na kráľovnú všetkých vied - matematiku.
Od staroveku bol vynájdený pomer, ktorý naše oko vníma ako najprirodzenejší a najelegantnejší,pretože je v prírode všadeprítomný. Objaviteľom vzorca pre takýto pomer bol talentovaný starogrécky architekt menom Phidias. Vypočítal, že ak väčšia časť podielu súvisí s menšou ako celok s väčšou, potom bude takýto podiel vyzerať najlepšie. Ale to je prípad, ak chcete objekt rozdeliť asymetricky. Tento podiel bol neskôr nazvaný zlatý rez, čo dodnes nepreceňuje svoj význam pre svetové dejiny kultúry.
Späť na webdizajn
Je to veľmi jednoduché – pomocou zlatého rezu môžete navrhnúť stránky, ktoré budú čo najviac lahodiť ľudskému oku. Výpočtom podľa definície vzorca zlatého rezu dostaneme iracionálne číslo 1, 6180339887 …, ale pre pohodlie môžeme použiť zaokrúhlenú hodnotu 1, 62. To znamená, že bloky našej stránky by mali byť 62 % a 38 % z celku, bez ohľadu na veľkosť generovaného zdroja pre stránku, ktorú používate. Príklad môžete vidieť na tomto diagrame:
Používajte nové technológie
Moderné technológie rozloženia webových stránok umožňujú presne vyjadriť myšlienku plánovača a dizajnéra, takže si teraz môžete dovoliť realizovať odvážnejšie nápady ako na úsvite internetových technológií. Už nemusíte pracne premýšľať, aká by mala byť veľkosť stránky. S príchodom takých vecí, ako je blokové adaptívne rozloženie, dynamické načítanie obsahu a fontov, sa vývoj webových stránok stal oveľa príjemnejším. Koniec koncov, tieto technológie súmenej obmedzení, hoci stále existujú. Ale ako viete, bez hraníc by nebolo žiadne umenie. Odporúčame vám použiť jeden skutočne kreatívny dizajnový prístup – zlatý rez. S ním môžete efektívne a krásne vyplniť pracovný priestor bez ohľadu na to, akú veľkosť stránok nastavíte vo svojich šablónach.
Ako zväčšiť pracovný priestor stránky
Je veľká šanca, že nebudete mať dostatok miesta na to, aby sa všetky prvky používateľského rozhrania zmestili do malého rozloženia. V tomto prípade budete musieť začať myslieť kreatívne alebo ešte kreatívnejšie ako predtým.
Uvoľnite maximálne miesto na stránke skrytím navigácie vo vyskakovacom menu. Je logické použiť tento prístup nielen na mobilných zariadeniach, ale aj na desktopoch. Používateľ sa predsa nemusí stále pozerať na to, aké nadpisy sú na vašom webe – prišiel si po obsah. A želania používateľa musia byť rešpektované.
Príkladom dobrého spôsobu skrytia ponuky je nasledujúce rozloženie (foto nižšie).
V hornom rohu červenej oblasti môžete vidieť krížik, kliknutím na ktorý sa ponuka skryje do malej ikony a používateľ tak zostane sám s obsahom webovej stránky.
Je to však voliteľné, môžete nechať navigáciu, ktorá bude vždy na očiach. Môžete z neho však urobiť krásny dizajnový prvok a nielen zoznam obľúbených odkazov na stránke. Okrem textových odkazov alebo dokonca namiesto nich používajte intuitívne ikony. je to rovnakéumožní vašej stránke efektívnejšie využívať priestor na obrazovke zariadenia používateľa.
Najlepší web je responzívny
Ak neviete, aké rozloženie stránky zvoliť, všetko je pre vás jednoduché. Ak chcete ušetriť na nákladoch na vývoj a zároveň nestratiť publikum v dôsledku zlého rozloženia niektorých zariadení, použite responzívny dizajn.
Responzívny dizajn je dizajn, ktorý vyzerá rovnako dobre na rôznych zariadeniach. Tento prístup umožní, aby bola vaša stránka zrozumiteľná a pohodlná aj na notebooku, dokonca aj na tablete, dokonca aj na smartfóne. Tento efekt sa dosiahne automatickou zmenou šírky pracovnej plochy obrazovky. Použitím responzívnych štýlov pre váš web robíte to najlepšie možné rozhodnutie.
Aký je rozdiel medzi responzívnym dizajnom a verziou webu
Responzívny dizajn sa od mobilnej verzie stránky líši v tom, že v druhom prípade používateľ dostane html kód, ktorý je odlišný od desktopového. To je nevýhoda z hľadiska optimalizácie výkonu servera, ako aj optimalizácie pre vyhľadávače. Okrem toho je ťažšie vypočítať štatistiky pre rôzne verzie stránky. Adaptívny prístup nemá tieto nevýhody.
Reakcia pre rôzne zariadenia sa dosahuje rozložením s percentom zadanej šírky alebo prenesením blokov do dostupného priestoru (vo vertikálnej rovine na smartfóne namiestohorizontálne na pracovnej ploche) alebo vytváranie individuálnych rozložení pre rôzne obrazovky.
Viac o responzívnom dizajne a vývoji sa dozviete v našich návodoch.
