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

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

Technologie pro vývoj webových stránek je velmimnohostranný proces. Ale všechny jeho stupně lze rozdělit na dvě hlavní součásti - funkční a vnější. Nebo, jak je obvyklé u webmasterů, backend a front-end, resp. Lidé, kteří objednávají své webové stránky z webových studií, často naivně věří, že stojí za to zaměřit se pouze na funkčnost a toto bude správné rozhodnutí. Ale to je pravda ve velmi, velmi vzácných případech, obvykle pro spouštěcí projekty na beta scéně. V jiných ohledech je grafický design a uživatelské rozhraní jednoduše vyžadovány, aby vyhovovaly standardům pro vývoj webových aplikací a byly uživatelsky přívětivé.

První základní kámennávrhář rozhraní nebo návrhář, který čelí, 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ího uspořádání masového jevubyl 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 usouditPevná šíř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 zvolili jako strategii pro vytvoření rozvrženívšechny velikosti obrazovky, které se na trhu objeví, pak se vaše stránky stanou nejvíce jedinečnými na internetu. Koneckonců, 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.

velikosti stránek

Proto se můžete pochlubit množstvím různých verzíobrazovky s výjimkou jediných stránek, jejichž účelem je prodávat jeden výrobek a ujistěte se, že to uděláte 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

Rozpor mezi těmito dvěma extrémy jeNakreslete 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.

standardní šířka místa v pixelech

Z tabulky se můžete dozvědět, jak určit velikoststránky, kterou chcete použít. 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, co je nezbytnépoužijte 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, kdyNastavení je nutné pouze v minimální velikosti obrazovky a velikost stránek se nastaví 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, mnoho architektů aumělci se 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 počátku starověkupoměr, který naše oko vnímá jako nejpřirozenější a elegantnější, protože je všude 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é sekce, vymůžete navrhnout stránky, které budou lidskému oku nejvíce příjemné. 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:

šířka místa v pixelech

Používejte nové technologie

Moderní technologie designu webových stránekumožňují vám přesně sdělit myšlenku návrháře a designéra, takže si nyní můžete dovolit provádět více odvážné nápady než na ú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 pravděpodobné, že nebudete mítdostatek prostoru pro všechny prvky rozhraní 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).

velikost vytvořeného zdroje pro web

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.

Nicméně to nemusíte dělat, můžeteNechte navigaci, která bude vždy v dohledu. 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.

jak vybrat šířku webu

Nejlepší stránky - adaptivní

Pokud nevíte, který rozložení si pro daný web zvolíte,pak je vše pro vás jednoduché. 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.

Adaptivní 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í.

optimální šířku místa

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

Adaptivní návrh se liší od verze pro mobilní zařízeníže v druhém případě uživatel obdrží html kód, který se liší od kódu 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.

jaká velikost by měla být

Adaptabilita pro různá zařízení je dosaženavzhledem k šířce rozvržení nebo procentech přes přenosové bloky do zbývajícího volného místa (ve svislé rovině místo horizontální smartphone na pracovní ploše), nebo jednotlivé rozvržení vytvořením různých obrazovek.

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

Přečtěte si více: