10 Jaw Odkrývání citlivých vstupních stránek
"Response" je nejnovějším pohybem ve vývoji webových stránek - a ten, který je potřebný docela špatně. Každý den narůstá počet zařízení, platforem a prohlížečů používaných k přístupu na internet. A zatímco většina uživatelů stále přistupuje k webu z tradičních platforem, poptávka po fluidních a adaptivních webových stránkách je silnější než kdy předtím.
Mnoho návrhářů tuto změnu do srdce a vytváří některé velkolepé kusy, které se daří v mobilních, tabletových a stolních prostředích.
Následující místa spojí krásu s citlivými technikami webového designu a skutečně předvedou, co lze dosáhnout s malou inovací. Uchopte nějaký popcorn a poznámkový blok, budete chtít věnovat pozornost.
StephenCaver.com
Když se otevřete tato stránka na ploše, je to okamžitě okouzlující. Odvážná, černá, ospravedlnitelná záležitost kontrastuje s téměř jakousi akvarelovou kvalitou pozadí pouště Mojave. Když se tato stránka přizpůsobí mobilní velikosti, změna je významná a web stále vypadá skvěle.
FoodSense.is
S jeho širokým rozložením, čistými liniemi a jednoduchou strukturou tato stránka je fantastickým příkladem minimalistického webového designu. Při pohledu na tabletu nebo mobilní zařízení se upravuje bez kompromisů ve složení nebo průtoku.
Warface.co.uk
Použití barvy je nápadné a inovativní umístění 3D figurky v popředí stránky skutečně zaujme diváka. Stránka je jedinečný a vzrušující a žádný z těchto dopadů se v mobilu neztratí.
DanielVane.com
Znovu zde návrhář umožňuje jeho práci mluvit sama za sebe. Vstupní stránka je krásná v plnohodnotné jednoduchosti, která se přesně pohybuje na mobilním telefonu a zanechává jednu obzvláště zatýkací ikonu, která obsahuje jemné logo.
SasquatchFestival.com
Tato stránka je zábavná a hravá a jedinečná mezi dalšími místy tohoto seznamu. Oni se zříkají čisté jednoduchosti, aby se bavit s barvou, obrazy a ikony způsobem, který stále dodává styl. To může být obtížné dělat v malém prostoru, ale designéři Sasquatchu řídí bez námahy.
GravitateDesign.com
Použití tvaru v tato stránka okamžitě vystupuje. Tím, že se vyhneme používání hranic a obsahových schránek, podařilo se jim vytvořit stránky, které předvádějí svou práci co nejlépe.
VisualSupply.co
Podobně jako u Warspace, je to právě obraz, který opravdu funguje na této webové stránce . Je dokonale strukturovaný a vypadá krásně na každém zařízení.
StudioMds.co
Tmavé barvy mohou být někdy přehlíženy v web designu, ale Studio Mds zdokonalit jejich obsah s jejich odvážným rozhodnutím. Rozvržení se přizpůsobí tak, aby se vešla menší velikost obrazovky a ztrácejí nic než nadbytečné odkazy.
ForefathersGroup.com
Tato stránka má skvělý, vinobraní pocit a využívá textura, obrazy a písmo k vytvoření toho. Krásně se snižuje (ale je škoda ztrácet tu opici).
MapBox.com
Barevné schéma a použití fotografií dávají Mapbox čistý prostor, ve kterém je možné prezentovat svůj produkt. Opět jednoduchost vyhrává složitý nebo rozrušený design a to je přesně důvod, proč funguje dobře na menší obrazovce.
Věci, které je třeba vzít v úvahu při návrhu
Takže teď, když jste se podívali na některé hvězdně reagující stránky, jste pravděpodobně svědčící, abyste začali navrhovat své vlastní. Ale než vyběhnete, je několik věcí, které si musíte zapamatovat.
Fotky
Jednou z překážek reagujícího návrhu je to, jak zařízení zobrazují fotografie. MacBook Pro se sítnicovým displejem vykreslí obraz mnohem vyšší rozlišení než mobilní telefon, což může často způsobit problémy. Jedním ze způsobů, jak tento problém vyřešit, je nahrát kopie vašich fotografií ve vysokém i nízkém rozlišení. Pomocí služby CSS můžete určit, který snímek je načten na základě rozlišení obrazovky zařízení. Používáte-li fotografické fotografie, ujistěte se, že se vám líbí možnost vyšší rez.
Určení bodů zlomu
Často reagující návrhy jsou postaveny na tom, co jsou známé jako "zlomové body" - nebo rozlišení, při kterém se změna rozvržení - zakládá především na běžných velikostech obrazovky zařízení. Problém s tímto přístupem však spočívá v tom, že nezohledňuje, jak jsou skutečně rozmanité velikosti obrazovky. Neexistuje žádná "univerzální" velikost. Takže namísto předdefinování zlomových bodů na 360px (mobilní), 768px (tablet) a 1024px (stolní) je lepší nechat svůj design mluvit sama za sebe. Začněte s dokončeným rozvržením a poté změňte velikost okna, dokud se konstrukce nezlomí - tuto jednu z vašich bodů zlomů a poté pokračujte. Zjistíte, že váš web proudí mnohem hladší.
Potkal jste fantastickou citlivou vstupní stránku? Navrhli jste sami sebe? Dejte nám vědět v komentářích.