Technológia vývoja webových stránok je veľmi všestranný proces. Napriek tomu sa všetky jeho štádiá dajú rozdeliť na dve hlavné zložky - funkčné a vonkajšie. Alebo, ako je bežné medzi webmasterami, backendom a frontom a koncom. Ľudia, ktorí objednávajú svoje webové stránky v štúdiách na vývoj webových aplikácií, často naivne veria, že je potrebné zamerať sa len na funkčnosť a to je správne rozhodnutie. Ale je to pravda vo veľmi zriedkavých prípadoch, zvyčajne pri štartovacích projektoch v štádiu beta testovania. V ďalšom grafickom dizajne a užívateľskom rozhraní stačí prispôsobiť sa normám vývoja webu a byť pohodlné.


Prvým základným kameňom, ktorým čelí návrhár rozhrania alebo návrhár, je šírka rozloženia lokality. Koniec koncov, pre to je potrebné konvertovať rozhrania. Existujú čisto intuitívne dva prístupy - vytvoriť samostatné usporiadanie pre každé populárne rozlíšenie obrazovky alebo vytvoriť jednu verziu lokality pre všetky zobrazenia. A oba možnosti budú nesprávne, ale všetko je v poriadku.

Štandardná šírka miesta v pixeloch pre runet

Až do vývoja adaptívneho usporiadania bol masovým javom vývoj lokality s šírkou tisícov pixelov. Tento údaj bol vybraný z jedného jednoduchého dôvodu - takže miesto bolo umiestnené na ľubovoľnej obrazovke. A to má vlastnú logiku, ale predpokladajme, že stále má osoba aspoň HD monitor na ploche. V tomto prípade sa vaše rozloženie zobrazí ako malý prúžok uprostred obrazovky, kde je všetko zasunuté do jednej hromady ana stranách obrovský nevyužitý priestor. Teraz predpokladajme, že osoba prišla na vašu webovú stránku s obrazovkou širokou 800 pixlov a v nastaveniach je zaškrtnuté políčko Zobraziť celú verziu webových stránok. V takomto prípade sa vaše stránky budú tiež zobrazovať nesprávne, pretože sa jednoducho neprilepí na obrazovku.


Z týchto úvah môžeme konštatovať, že pevná šírka rozloženia nie je pre nás presne vhodná a musíme hľadať inú cestu. Poďme analyzovať myšlienku samostatného usporiadania pre každú šírku obrazovky.

Rozloženie pre všetky príležitosti

Ak sa rozhodnete vytvoriť rozloženie pre všetky veľkosti obrazoviek, ktoré sa nachádzajú na trhu, potom sa vaše stránky stanú na internete jedinečnými. Dnes je jednoducho nemožné dosiahnuť celý rad zariadení a pokúsiť sa o presné nastavenie pre každú možnosť. Ale ak sa zameriavate na najpopulárnejšie rozlíšenie monitorov a obrazoviek zariadení, potom ide nie je zlé. Jeho jediným mínusom sú finančné výdavky. Koniec koncov, keď projektant rozhrania, projektant a montér bude nútený vykonávať rovnakú prácu 5 alebo 6 krát, projekt bude stáť oveľa viac, ako bolo pôvodne stanovené v rozpočte. Preto sa môže pýšiť veľkým počtom verzií pod rôznymi obrazovkami ako stránky s jedinou stránkou, ktorých cieľom je predať jeden výrobok a nutne to urobiť dobre. No, ak nemáte jednu z týchto vstupných stránok a viacstranovú stránku, mali by ste ďalej rozmýšľať.

Najobľúbenejšie stránky

Kompromis medzi týmito dvomi extrémami je vytvoriť rozloženietri alebo štyri veľkosti obrazovky. Medzi nimi musí byť nutne mobilné rozloženie. Zvyšok by mal byť prispôsobený pre malé, stredné a veľké obrazovky na pracovnej ploche. Ako si vybrať šírku stránky? Nižšie je pre štatistiku HotLog služby v máji 2017, čo svedčí o rozdelení popularity rôznych rozlíšenie obrazovky zariadení a dynamiky tohto ukazovateľa.
Z tabuľky sa môžete dozvedieť, ako určiť veľkosť stránky, ktorú chcete použiť. Okrem toho môžeme konštatovať, že najčastejším dnešným formátom je obrazovka 1366 o 768 bodov. Takéto obrazovky sú inštalované do notebookov s rozpočtom, takže ich popularita je prirodzená. Ďalšou popularitou je monitor Full HD, ktorý je zlatým štandardom pre videá, hry a preto vytvára rozloženie stránok. Ďalej v tabuľke vidíme rozlíšenie mobilných zariadení 360 na 640 bodoch, ako aj rôzne varianty desktopových a mobilných obrazoviek.

Navrhujeme rozloženie

Tak, analýza štatistík, môžeme konštatovať, že optimálna šírka miesta má 4 varianty:

tlačovej notebooky so šírkou 1366 pixelov.

Verzia Full HD.

Veľkosť rozloženia je široká 800 pixelov, aby sa zobrazila na monitoroch pre malé počítače.

Mobilná verzia stránky je široká 360 pixelov.

Predpokladajme, že sme určili, ktorý z nich by mal použiť veľkosť vytvoreného zdroja pre danú lokalitu. Takýto projekt však bude stále nákladný. Tak sa pozrime na ďalšie možnosti, tentoraz bez použitia pevnej šírky.

Vytvárame flexibilné usporiadanie.

Existuje alternatívny prístup, keď je nastavenie len pod minimálnou veľkosťou obrazovky a veľkosť samotných stránok bude požiadaná ako percento. Súčasne je možné nastaviť takéto prvky rozhrania, menu, tlačidiel a loga v absolútnych hodnotách so zameraním na minimálnu veľkosť šírky obrazovky v pixeloch. Obsahové bloky sa budú naopak šíriť v súlade so špecifikovanými percentami zo šírky obrazovky. Tento prístup vám umožní prestať vnímať veľkosť stránok ako obmedzenie pre dizajnéra a talentované, aby porazili túto nuansu.

Čo je zlatý oddiel a ako ho môžem použiť na rozloženie webovej stránky?

Aj v renesancii sa mnohí architekti a umelci pokúšali dať svoje diela ideálnu podobu a proporcie. Odpovedajúc na otázku významu takéhoto podielu sa obrátili na kráľovnú všetkých vied - matematiku. Od čias staroveku sa vynájdený podiel, ktorý naše oko vníma ako najprirodzenejšie a sofistikovanejšie, pretože je všade nájdený v prírode. Objaviteľ vzorca pre takýto vzťah bol talentovaný francúzsky architekt s názvom Fidium. Vypočítal, že ak je veľká časť podielu menej dôležitá, ako celok platí pre väčšie, potom tento podiel bude vyzerať najlepšie. Ale toto je prípad, ak chcete objekt rozdeliť asymetricky. Táto časť sa neskôr stala známa ako "zlatá časť, ktorá ešte neprekračuje jej význam pre svetovú kultúrnu históriu."

Návrat na web design

Všetko je veľmi jednoduché -zlatá sekcia, môžete navrhnúť stránky, ktoré budú čo najviac príjemné pre ľudské oko. Výpočet vzorec pre stanovenie zlatý rez, dostávame iracionálne číslo 16180339887, ale pre väčšie pohodlie, môžete použiť zaoblený hodnotu 162. To by znamenalo, že výkon našich stránok by mala byť 62% a 38% z celku, bez ohľadu na to, akú veľkosť generované zdroj pre stránkach ktoré používate Príklad možno vidieť v nasledujúcom schéme:

Použitie nových technológií

Moderné technológie DTP webové stránky umožňujú presne vyjadriť zámer návrhára a dizajnéra, pretože si teraz môžu dovoliť odvážnejší realizáciu myšlienky než na úsvite internetové technológie. Už netrvá veľa, aby sme prelomili hlavu nad veľkosťou stránky. S príchodom veci, ako je blok adaptívne kódovanie obsahu nahrávanie a dynamické fonty, vývoj webových stránok sa stala mnohonásobne viac zábavná. Koniec koncov, takéto technológie majú menej obmedzení, hoci stále existujú. Ale ako viete, neexistujú žiadne obmedzenia na umenie. Navrhujeme použiť jeden skutočne kreatívny prístup k dizajnu - zlatú sekciu. S ním môžete efektívne naplniť a krásne pracovného priestoru, bez ohľadu na veľkosť stránok, ktoré dal v šablónach.

Ako zvýšiť pracovný priestor stránky

Je pravdepodobné, že nebudete mať dostatok priestoru pre všetky rozloženie používateľského rozhrania v malej veľkosti. V takom prípade musíte začať premýšľať kreatívne alebo dokonca kreatívnejšie ako predtýmz toho. Môžete uvoľniť miesto na webe skrytím navigácie v rozbaľovacej ponuke. Tento prístup je logický pre použitie nielen v mobilných zariadeniach, ale aj na stolných počítačoch. Vzhľadom k tomu, že používateľ nie je vždy pozrieť sa na to, čo smeruje na svojich stránkach to prišlo na obsah. A túžba užívateľa je rešpektovaná. Ako príklad dobrý spôsob, ako skryť menu má nasledujúce rozloženie (viď obrázok nižšie). V pravom hornom rohu červeného kríža môžete vidieť, stlačením menu, ktoré sa skrýva v malej ikony, takže užívateľ sám s webovej stránky obsahu. Avšak, ak to neurobíte, môžete nechať navigáciu, ktorá bude vždy v očiach. Môžete však vytvoriť krásny dizajnový prvok, nielen zoznam obľúbených odkazov na webe. Pomocou intuitívnych ikon použite okrem alebo dokonca namiesto textových odkazov. Umožní tiež vašim stránkam efektívnejšie využívať priestor na obrazovke v zariadení používateľa.

Best Site - adaptívne

Ak neviete, ktorú zvoliť rozloženie stránky, pre vás je to jednoduché. Ak chcete ušetriť na nákladoch na vývoj a nestrácať publikum kvôli zlému rozloženie na zariadení responzívne riešenie. Adaptívne je dizajn, ktorý vyzerá rovnako dobre na rôznych zariadeniach. Tento prístup umožní, aby vaše stránky byť jasné a jednoduché aj pre laptop, zatiaľ čo v tablete, a to aj na smartphone. Tento efekt sa dosiahne automatickou zmenou šírky pracovného priestoruobrazovka. Pomocou adaptívnych štýlov stránok akceptujete správne riešenie od možných.

citlivý konštrukcia sa líši od prítomnosti rôznych verzií

reagujúce konštrukcia sa líši od mobilných webových stránok, takže v tomto prípade, používateľ dostane html kód, ktorý sa líši od pracovnej plochy. Je to nevýhoda, pokiaľ ide o optimalizáciu výkonu servera, ako aj optimalizáciu pre vyhľadávače. Okrem toho sa stáva ťažšie zvážiť štatistiky pre rôzne verzie stránky. Adaptívny prístup nemá takéto nevýhody. prispôsobivosť k rôznym zariadeniam je dosiahnuté vďaka usporiadaniu šírky percentuálne úlohy alebo odovzdávajúcim dostupný priestor (vo zvislej rovine, než na smartphone vodorovne na ploche) alebo individuálne rozloženie na rôznych obrazovkách. Viac sa dozviete o adaptivnom dizajne a jeho vývoji z učebníc.