HĽADANIE STRÁNOK

Štandardné veľkosti stránok: funkcie, požiadavky a odporúčania

Vývoj webovej technológie je veľmiviacfarebný proces. Ale všetky jeho štádiá možno rozdeliť na dve hlavné zložky - funkčné a vonkajšie. Alebo, ako je obvyklé medzi webmasterami, zadným koncom a predným koncom. Ľudia, ktorí objednávajú svoje webové stránky z webových štúdií, často naivne veria, že je potrebné zamerať sa len na funkčnosť a to bude správne rozhodnutie. Ale to platí vo veľmi, veľmi zriedkavých prípadoch, zvyčajne pri začínajúcich projektoch v etape beta testovania. V opačnom prípade sa grafické riešenie a používateľské rozhranie jednoducho vyžadujú, aby spĺňali štandardy vývoja webu a boli pohodlné.

Prvý základný kameň, s ktorýmktorým čelí návrhár rozhrania alebo dizajnér, je šírka rozloženia lokality. Koniec koncov, je potrebné, aby kreslil rozhrania. Čisto intuitívne existujú dva prístupy - buď vytvoriť samostatné rozloženia pre každé populárne rozlíšenie obrazovky alebo vytvoriť jednu verziu lokality pre všetky zobrazenia. A obe možnosti budú zlé, ale najprv veci ako prvé.

Štandardná šírka webových stránok v pixeloch pre runet

Pred vývojom adaptívneho usporiadania masového javubol vývoj lokality so šírkou tisíce pixelov. Tento údaj bol vybraný z jedného jednoduchého dôvodu - miesto bolo umiestnené na ľubovoľnej obrazovke. A to má vlastnú logiku, ale predpokladajme, že človek stále má aspoň HD monitor na ploche. V tomto prípade sa vaše rozloženie bude zdajú ako malý prúžok v strede obrazovky, kde je všetko uviaznuté a na stranách je obrovský nevyužitý priestor. Teraz predpokladajme, že na vašu webovú stránku prišla osoba z tabletu s šírkou obrazovky 800 pixlov a v nastaveniach je zaškrtnuté políčko "Zobraziť plnú verziu webovej stránky". V takom prípade sa vaše webové stránky zobrazia aj nesprávne, pretože sa jednoducho nezmestí na obrazovku.

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

Usporiadanie pri všetkých príležitostiach

Ak ste si vybrali stratégiu na vytvorenie rozloženia prevšetkých veľkostí obrazoviek na trhu, potom bude vaša stránka jedinečná v celom internete. Koniec koncov je dnes jednoducho nemožné pokryť celý rad zariadení a pokúsiť sa o jemné ladenie pre každú možnosť. Ak sa však zameriavate na najobľúbenejšie rozlíšenia monitorov a obrazoviek zariadení, táto myšlienka nie je zlá. Iba jeho negatívne - finančné náklady. Koniec koncov, keď projektant rozhrania, dizajnér a dizajnér rozloženia bude nútený robiť rovnakú prácu 5 alebo 6 krát, projekt bude stáť neúmerne viac ako pôvodne rozpočtovaná cena.

veľkosti stránok

Preto sa môže pochváliť množstvom verzií pre rôzneobrazovky môžu byť iba stránky s jedným stránkom, ktorých účelom je predať jeden produkt a uistite sa, že to urobíte dobre. No, ak nemáte jednu z týchto pristátí, ale viacstranovú webovú stránku, potom stojí za to premýšľať ďalej.

Najobľúbenejšie veľkosti stránok

Rozpor medzi dvoma extrémmi jerozloženie výkresov 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ú plochu obrazovky. Ako si vybrať šírku stránky? Nižšie sú uvedené štatistické údaje o službe HotLog za máj 2017, čo nám ukazuje rozloženie popularity rozličných rozlíšení obrazovky zariadení, ako aj dynamiku tohto indikátora.

štandardná šírka v pixeloch

Z tabuľky môžete zistiť, ako určiť veľkosť.miesto na použitie. Okrem toho môžeme konštatovať, že najčastejší formát je dnes obrazovka 1366 o 768 pixelov. Takéto obrazovky sú inštalované v notebookoch s rozpočtom, takže ich popularita je prirodzená. Ďalším najpopulárnejším je monitor Full HD, ktorý je zlatým štandardom pre videá, hry a preto pre vytváranie rozložení stránok. Ďalej v tabuľke vidíme rozlíšenie mobilných zariadení 360 o 640 bodov, ako aj rôzne možnosti pre stolné a mobilné obrazovky po nej.

Návrhové usporiadanie

Takže analýzou štatistiky môžeme konštatovať, že optimálna šírka stránky má 4 varianty:

  1. Verzia pre notebooky so šírkou 1366 pixelov.
  2. Verzia Full HD.
  3. Rozlíšenie s rozmermi 800 pixelov pre zobrazenie na malých stolných monitoroch.
  4. Mobilná verzia stránky - šírka 360 pixelov.

Povedzme, že sme sa rozhodli, čo je potrebnépoužite veľkosť vytvoreného zdroja pre danú lokalitu. Takýto projekt by však bol stále drahý. Preto zvážte viac možností, tentokrát bez použitia pevnej šírky.

Zjednodušenie rozloženia

Existuje alternatívny prístup, keďstojí za to prispôsobiť len minimálnej veľkosti obrazovky a samotné veľkosti stránky budú nastavené ako percentá. Súčasne je možné v absolútnych hodnotách nastaviť prvky rozhrania, ako sú ponuky, tlačidlá a logo, so zameraním na minimálnu veľkosť šírky obrazovky v pixeloch. Na rozdiel od toho sa bloky s obsahom roztiahnu podľa znázorneného percenta šírky plochy obrazovky. Tento prístup vám umožní zastaviť vnímanie veľkosti webových stránok ako obmedzenie pre návrhárov a talentovane poraziť túto nuanciu.

Aký je zlatý pomer a ako ho aplikovať na rozloženie webových stránok?

Späť v renesancii veľa architektov aumelci sa snažili dať svojim tvorbám ideálnu podobu a proporcie. Pre odpovede na otázky týkajúce sa hodnôt takéhoto podielu sa obrátili na kráľovnú všetkých vied - matematiku.

Už od dávnych čiaspodiel, ktorý naše oko vníma ako najprirodzenejší a elegantnejší, pretože je v prírode všadeprítomný. Objaviteľ vzoru pre takýto vzťah bol talentovaný staroveký grécky architekt s názvom Phidias. Vypočítal, že ak sa veľká časť pomeru vzťahuje na menšie, ako celok súvisí s väčšími, potom tento podiel bude najlepšie. Ale toto je prípad, ak chcete objekt rozdeliť asymetricky. Tento pomer sa neskôr nazýval zlatým úsekom, ktorý ešte neprekračuje jeho význam pre svetové dejiny kultúry.

Späť na web design

Je to veľmi jednoduché - pomocou zlatého pomeru, vyMôžete navrhnúť stránky, ktoré budú čo najviac príjemné pre ľudské oko. Po vypočítaní definícií zlatej sekcie získame iracionálne číslo 1,6180339887 ... ale pre pohodlie môžeme použiť zaokrúhlenú hodnotu 1,62. Znamená to, že bloky našej stránky by mali byť 62% a 38% celku bez ohľadu na veľkosť vytvoreného zdroja pre stránky, ktoré používate. Príklad, ktorý môžete vidieť v tejto schéme:

šírka stránky v pixeloch

Použite novú technológiu

Webové stránky modernej technológie rozloženiaumožňujú presne vyjadriť myšlienku návrhára a dizajnéra, takže teraz si môžete dovoliť implementáciu ambicióznejších myšlienok ako na začiatku internetových technológií. Už nemusíte zápasiť s hlavou o tom, akú veľkosť stránky by mala byť. S nástupom takých vecí, akými sú blokové prispôsobivé usporiadanie, dynamické načítanie obsahu a písiem, sa vývoj stránky stal mnohonásobne príjemnejším. Koniec koncov, takéto technológie majú menšie obmedzenia, hoci stále existujú. Ale ako viete, bez obmedzenia by nebolo žiadne umenie. Navrhujeme vám použiť jeden skutočne kreatívny dizajnový prístup - zlatú sekciu. S ním môžete efektívne a krásne vyplniť pracovný priestor bez ohľadu na to, akú veľkosť stránok zadáte vo svojich šablónach.

Ako zvýšiť pracovný priestor lokality

Je pravdepodobné, že nebudete maťDostatok miesta, aby sa všetky prvky rozhrania zmestili do malého rozloženia. V takomto prípade musíte začať uvažovať kreatívne alebo dokonca kreatívnejšie ako predtým.

Maximálny voľný priestor na webe môže byťskrytie 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. Koniec koncov, používateľ nepotrebuje celú dobu, aby sa pozrel na to, aké rubriky sú na vašej stránke - prišiel na obsah. A želania užívateľa musia byť rešpektované.

Príkladom dobrého spôsobu skrytia ponuky je nasledujúci rozvrh (obrázok nižšie).

veľkosť vytvoreného zdroja pre danú lokalitu

V hornom rohu červenej oblasti môžete vidieť kríž, kliknutím na ktoré skryjete ponuku na malú ikonu a ponecháte užívateľa sám s obsahom webovej stránky.

To však nie je potrebné, môžetenechajte navigáciu, ktorá bude vždy v očiach. Ale môžete to urobiť krásnym dizajnovým prvkom a nielen zoznamom obľúbených odkazov na stránkach. Pomocou intuitívnych ikon použite okrem textových odkazov alebo dokonca namiesto nich. Umožní tiež vašim stránkam efektívnejšie využívať obrazovkový priestor na zariadení používateľa.

ako si vybrať šírku stránky

Najlepšie miesto - prispôsobivé

Ak neviete, ktoré rozloženie chcete vybrať pre danú lokalitu,potom je pre vás všetko jednoduché. Ak chcete ušetriť na vývojových nákladoch a zároveň neztratiť publikum kvôli zlému rozloženiu pre žiadne zariadenie, použite adaptívny dizajn.

Adaptívne sa nazýva dizajn, ktorývyzerá rovnako dobre na rôznych zariadeniach. Tento prístup vám umožní, aby boli vaše stránky jasné a pohodlné aj na prenosnom počítači, dokonca aj na tablete, dokonca aj na smartphone. Tento efekt sa dosiahne automatickou zmenou šírky pracovnej plochy obrazovky. Pomocou odpovedajúcich šablón štýlov pre danú lokalitu urobíte správne rozhodnutie.

optimálna šírka stránky

Aký je rozdiel medzi adaptívnym dizajnom a prítomnosťou rôznych verzií stránky?

Odpovedajúci dizajn sa líši od mobilnej verzie.stránka, ktorá v druhom prípade prijíma html kód, ktorý sa líši od pracovnej plochy. To je nevýhoda, pokiaľ ide o optimalizáciu výkonu servera, ako aj o optimalizáciu pre vyhľadávače. Okrem toho sa stáva ťažšie počítať štatistiky pre rôzne verzie stránky. Adaptívny prístup nemá takéto nevýhody.

aká by mala byť veľkosť stránky

Adaptabilita pre rôzne zariadenia je dosiahnutána úkor rozloženia s percentuálnym nastavením šírky buď prenesením blokov do dostupného priestoru (vo vertikálnej rovine na inteligentnom telefóne namiesto horizontálnej na pracovnej ploche), alebo vytvorením jednotlivých rozložení pre rôzne obrazovky.

Viac sa dozviete o adaptivnom dizajne a jeho vývoji z učebníc.

  • vyhodnotenia:



  • Pridať komentár