Standardní rozměry místa: Vlastnosti, požadavky a doporučení

Vývoj technologie webové stránky - velmi rozmanitý proces. Přesto všech stupních může být rozdělena do dvou hlavních částí - funkční a vnějšího pláště. Nebo, jak ve střednědobém webmaster Beg End a Front End, resp. Lidé, kteří si koupili své webové stránky na vývoj webových aplikací ateliérech, často naivně domnívají, že je třeba se zaměřit pouze na funkční, a bude to správné rozhodnutí. Ale je to pravda, ve velmi, velmi vzácných příležitostech, obvykle začínajících projektů ve fázi beta testování. Zbytek grafického designu a uživatelské rozhraní jsou jednoduše povinni dodržovat standardy webových rozvoje a být pohodlné.

Prvním kamenem čelí návrhář rozhraní, nebo designéra - je šířka rozvržení webu. Koneckonců, je nutné vypracovat rozhraní pro ni. Intuitivně existují dva přístupy - buď vytvářet samostatné rozvržení pro každý z populárních rozlišeních obrazovky, nebo můžete vytvořit jednu verzi stránek pro všechny mapy. Obě možnosti by bylo špatné, ale hezky popořádku.

Standardní šířka v pixelech pro lokalitu budete někdy potřebovat

Prior k rozvoji masový jev adaptivní rozložení byl vývoj webu s tisíci pixelů na šířku. Tento údaj byl vybrán z jednoho prostého důvodu - že na místě byl umístěn na libovolné obrazovce. A tam je určitá logika, ale předpokládejme, že osoba je ještě alespoň HD monitor na ploše. V tomto případě bude vaše layout zdát malý pruh ve středu obrazovky, kde je vše tvarované v jedné hromadě a na bocích obrovské mimo prostor. Nyní předpokládejme, že člověk přišel na vaše webové stránky z tablet s obrazovkou o 800 pixelů na šířku a je kontrolována v nastavení „Zobrazit webových stránkách plnou verzi.“ V tomto případě se vaše webové stránky budou také zobrazeny nesprávně, jak jednoduše nevejdou na obrazovku.

Z těchto úvah lze konstatovat, že s pevnou šířkou pro rozvržení, my prostě nevejdou a chcete najít jinou cestu. Pojďme analyzovat myšlenku samostatného rozložení pro každou šířku obrazovky.

Rozvržení pro každou příležitost

Pokud jste si vybrali jako strategie pro vytvoření rozvržení na velikosti k dispozici po celý displej na trhu, pak se vaše stránky budou nejunikátnější na internetu. Koneckonců, dnes je to prostě nemožné pokrýt celou řadu zařízení ve snaze učinit přesné nastavení pro každou možnost. Ale pokud se soustředíte na nejpopulárnější rozlišením monitoru a displejem, tato myšlenka je dobrá. Jeho Jedinou nevýhodou - finanční náklady. Koneckonců, když projektant designer rozhraní a kodér bude nucena 5 nebo 6 krát vykonávat stejnou práci, projekt bude stát nepřiměřeně původně vysazeny v rozpočtu ceny.

Z tohoto důvodu se mohou pochlubit hojnost verzí pro různých obrazovkách může být kromě toho, že místa, odnostranichniki, jehož cílem - prodat jeden výrobek a ujistěte se, že to dobře. No, pokud nejste jedním z těch přistání, multi-site, to dá rozum dále.

Nejoblíbenější velikosti stránek

Kompromis mezi těmito dvěma extrémy je nákres uspořádání pro tři nebo čtyři velikosti obrazovky. Mezi nimi, jeden musí být rozložení pro mobilní zařízení. Zbytek musí být přizpůsobena pro malé, střední a velké pracovní plochy. Jak si vybrat šířku Online? Níže představujeme HotLog statistiky služeb za květen 2017, které nám ukazuje rozložení popularity různých rozlišení obrazovky zařízení, jakož i dynamiku změny v tomto ukazateli.

Z tabulky je možné se naučit, jak určit velikost stránky, kterou chcete použít. Kromě toho lze vyvodit závěr, že nejčastější formát je dnes na obrazovce v roce 1366 x 768 bodů. Tyto obrazovky jsou instalovány v rozpočtu notebook, takže jejich popularita je přirozené. Příští nejpopulárnější je Full HD monitorů, což je zlatý standard pro filmy, hry, a proto vytvořit rozvržení stránky. Dále v tabulce vidíme dovolit mobilní zařízení 360 x 640 pixelů, stejně jako různá provedení desktop a mobilní obrazovky později.

layout design

Takže, po analýze statistik, můžeme konstatovat, že optimální šířka místa má 4 varianty:

1. Verze notebooky s 1366 pixelů na šířku.
2. Full HD-version.
3. 800 pixelů na šířku rozložení velikosti pro zobrazení na malé stolní monitory.
4. Mobilní verze stránek - 360 pixelů na šířku.

Předpokládejme, že jsme se rozhodli, co chcete použít velikost generovaného zdrojového kódu pro danou lokalitu. Ale takový projekt bude stále dražší. Takže zvážit další možnosti, tentokrát bez použití pevné šířky.

Make flexibilní uspořádání

Tam je alternativní přístup, který je třeba nastavit pouze pro minimální velikost obrazovky, a naprostá velikost míst bude požádán procenta. V tomto případě jsou prvky rozhraní jako menu, tlačítka a loga, je možno definovat v absolutních hodnotách, se zaměřením na minimální velikost šířky obrazovky v pixelech. Bloky s obsahem, naopak, bude roztažen podle zadaného procenta šířky oblasti obrazovky. Tento přístup umožňuje nezjistí velikost místa jako omezení pro návrháře a talent k překonání této nuance.

Jaký je zlatý poměr, a jak používat webové stránky k rozvržení?

Dokonce i v renesanci mnoho architektů a umělců se pokusil dát jeho výtvory dokonalý tvar a proporce. Odpovědi na otázky o důsledcích takových rozměrů, že se obrátil na královna všech věd - matematiky.

Od té doby dnů starověku byl vynalezen v poměru, který naše oko vnímá jako nejpřirozenější a elegantní, protože je všudypřítomný v přírodě. Objevitel vzorce tohoto poměru byl talentovaný řecký architekt jmenoval Phidias. Je vypočítáno, že když většina z proporcí týká nízké jako celek poskytuje větší, pak se tento podíl bude vypadat dobře. Ale v tomto případě, pokud budete chtít rozdělit asymetricky objekt. Tento podíl se později stal se nazývá zlatý poměr, který ještě nemá přeceňovat její význam pro světové kulturní historie.

Vraťme se k návrhu internetových stránek

Je to velmi jednoduché - pomocí zlatý poměr, můžete navrhovat stránky, které budou nejvíce lahodí lidskému oku. Vypočítá podle vzorce zlatého řezu, zjistíme, iracionální číslo 1,6180339887 ..., ale pro větší pohodlí můžete použít zaoblený hodnotu 1,62. To znamená, že naše strana bloků by měla být 62% a 38% z celku, bez ohledu na to, jakou velikost generované zdrojový kód pro web, který používáte. Příklad vidíte na následujícím schématu:

Využívání nových technologií

Moderní vzhled technologie webové stránky umožňují přesně vyjádřit myšlenky projektanta a designéra, takže teď si můžete dovolit realizaci odvážnější nápady, než na úsvitu internetové technologie. již nebudou muset tolik lámou hlavu, co by mělo být velikost místa. S příchodem takových věcech, jako je blok rozložení adaptivní, dynamického zatížení obsahu a písma, vývoj webových stránek se stala mnohonásobně více zábavná. Konec konců, tyto technologie mají méně omezení, i když jsou. Ale jak víte, bez omezení, by nebylo umění. Doporučujeme použít skutečně kreativní přístup k navrhování - zlatého řezu. S ním budete moci efektivně a příjemně vyplní pracovní plochu, bez ohledu na to, jakou velikost či stránky jste požádáni v šablonách.

Jak zvýšit web pracovního prostoru

Je pravděpodobné, že nebudete mít dostatek prostoru pro uložení všech prvků rozhraní v rozložení na malou velikost. V tomto případě budete muset začít přemýšlet kreativně, nebo dokonce více kreativní, než jste předtím.

Maximální uvolnit prostor na místě, jak je to možné, skrývá navigaci v pop-up menu. Tento přístup je logické použít nejen mobilní, ale také na pracovní ploše. Koneckonců, uživatel nepotřebuje po celou dobu, aby se podíval, co má záhlaví na vašich webových stránkách - to přišlo na obsah. Uživatel si přeje být respektována.

Jako příklad dobrý způsob, jak skrýt menu je následující rozložení (na obrázku níže).

V pravém horním rohu červené oblasti, můžete vidět kříž, klepněte v nabídce, která se skrývá v malé ikony, takže uživatel sám s webovým stránkám.

Nicméně, to není povinné, můžete nechat navigaci, která je stále v nedohlednu. Ale můžete dělat to krásný designový prvek, ne pouze seznam odkazů na oblíbené stránky. Použijte intuitivní ikony kromě textových odkazů, nebo dokonce nahradit. To také umožní vaše stránky efektivnější využití prostoru obrazovky na vašem zařízení.

Nejlepší webové stránky - adaptivní

Pokud si nevíte, který z nich si vybrat rozvržení pro web, vše jen pro vás. Chcete-li ušetřit náklady na vývoj a zároveň neztrácí publikum kvůli špatnému rozložení pro některé zařízení, použijte responzivní design webu.

Adaptivní nazývá design, který vypadá na různých zařízeních stejně dobře. Tento přístup umožní, aby vaše stránky být jasné a snadné i pro notebook, alespoň pokud jde o tabletu, a to i na smartphone. To dosáhlo tohoto efektu je způsobeno automatickými změnami pracovního prostoru šířky obrazovky. Pomocí adaptivní stylů pro web, užíváte správné rozhodnutí je to možné.

Co odlišuje adaptivní design Informace o dostupnosti různých verzí svých webových stránkách

Citlivý design je odlišný od mobilního webu, takže v takovém případě uživatel obdrží html kód, který je odlišný od pracovní plochy. To je nevýhodné z hlediska optimalizace výkonu serveru, stejně jako optimalizace pro vyhledávače. Kromě toho, tím obtížnější se stává pro Zkoumání statistik podle různých verzí na webu. Adaptivní přístup je bez nedostatků.

Přizpůsobivost pro různá zařízení je dosaženo díky šíř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.

Můžete se dozvědět více o citlivý designu a rozvíjet můžete z knih.