Responzívny web dizajn: Tvár internetu v roku 2016

Ponúkajte návštevníkom vašich stránok lepší user experience vďaka dizajnu prispôsobenému pre každé zariadenie. Či už ľudia idú cez počítač s myšou alebo cez mobil, vaša stránka by sa mala vždy tváriť rovnako a ponukať rovnaké funkcie. A presne o tom je responzívny dizajn webu.

Dôležité je vedieť, že kľúčová je konzistencia, nie presné kopírovanie vzhľadu. Presvedčte sa sami vďaka nasledujúcim príkladom.

1. Využívajte White Space

Stránka Vestre má konzistentný layout naprieč všetkými zariadeniami. S výnimou šírky obrázkov sa text krásne prispôsobuje. Je vždy na bielom podklade a keď sa zúži priestor, text sa presunie pod obrázok, stále na bielom, kde je možné ho jednoducho čítať.

vestre

2. Umiestňujte logo konzistentne

Epicurrence má veľa individuálnych prvkov rozmiestnených rozličnými spôsobmi tak, aby sa vždy prispôsobili displeju. Nech je ale rozlíšenie a šírka dospleja akékoľvek, čierne kruhové logo je vždy na rovnakom mieste na pravej strane stránky.

epicurrence

3. Počítajte s landscape aj portrétovou orientáciou

Landscape layout funguje najlepšie na desktope, laptope alebo iných obrazovkách na šírku a portrétové rozloženie je zase efektívne na tabletoch a smarfónoch.

Pozrite si napríklad Kekselias, ako dizajn prispôsobený pre portrétovú a landscape orientáciu pomáha odovzdať najdôležitejšie informácie v čistom a jasnom layoute.

kekselias

4. Scrollovať alebo nescrollovať

Konceptom Boone Selection stránky je navnadiť používateľa na scrollovanie dolu po stránke, ako keby sa snažil dostať na spod suda - Boone Selections predsa len predávajú víno.

Tento princíp funguje skvele na desktope, ale keďže nechcú používateľov nútiť tak veľa scrollovať na smartfónoch, dizajnéri umiestnili pár kvapiek toho najdôležitejšieho textu hneď na prvý pohľad - niekoľko slov o tom, čo spoločnosť robí.

Boone Selection

5. Navrhujte pre prsty všetkých tvarov a veľkostí

Keď navrhujete responzívny dizajn, uvažujte nad tým, ako budú používatelia narábať s buttonmi a odkazmi na stránke - či už myšou na desktope, alebo prstami na smartfónoch a tabletoch. Dávajte si pozor, tak ako si dali aj v Rudy’s Paris, aby boli buttony a odkazy veľké a použiteľné aj pre ľudí s veľkými prstami.

rudy’s paris

6. V layoute robte len nenápadné zmeny

Webstránka Uve je takmer rovnaká na všetkých zariadeniach. Len pár malých úprav, aby zaistili že budú plne funkčná. Link pre menu je vždy vľavo a button pre rezerváciu vždy vpravo. Rozdiel je v tom, že na užších obrazovkách sú zobrazené na vrchu namiesto v strede stránky tak, aby nezavadzali pri čítaní textu.

uve

7. Berte do úvahy počet znakov na riadok

Upravte veľkosť fontu v nadpisoch a texte pre každé zariadenie tak aby bol obsah vždy čitateľný, najmä ak má vaša stránka veľa textu ako napríklad The Forecaster. Desktop by mal mať okolo 60-75 znakov na riadok a smartfón 30-40.

the forecaster

8. Na menších obrazovkách odstráňte zbytočné grafické prvky

Čím menej vizuálneho obsahu na stránke, tým jednoduchšie je ju stiahnuť. Vizuálne detaily na stránkach MRAssociates sa pomaly vytrácajú na menších obrazovkách - alebo pribúdajú na väčších, ak sa na vec chcete pozrieť z iného pohľadu.

MRAssociates

9. Orezávajte obrázky proporcionálne

Dans Mon Sac má na všetkých zariadeniach rovnaký obrázok na pravej strane, ale na všetkých zariadeniach je orezaný trochu inak, aby sa prispôsobil šírke obrazovky. Takto zabezpečili, že vizuálne proporcie zostávajú konzistentné.

Dans Mon Sac

10. Zamerajte sa na najdôležitejší obsah

Zoberte si príklad od Stephen Caver stránok a strategicky sa rozhodnite čo na stránke zostane a čo pôjde preč na menších obrazovkách. Sústreďte sa na najdôležitejší obsah a prezentujte ho tak, aby bol najlepšie čitateľný.

Stephen Caver odstránil na smarfónoch čierne boxy a zobrazil najdôležitejšie odkazy na vrchu.

Stephen Caver

11. Prispôsobte počet stĺpcov

The Design School of Canva majú 4 stĺpce na desktope, 2 široké na tabletoch a len 1 na smarfónoch. Vďaka tomu je layout čistý, text čitateľný a na odkazy je ľahké klikať. Počet stĺpcov sa prispôsobuje aj keď zmenšujete veľkosť okna prehliadača.

the design school of canva

12. …Alebo zachovajte počet stĺpcov

Na rozdiel od Canva a ich premenlivého počtu stĺpcov si ETQ-Amsterdam zachováva 2 stĺpce na všetkých zariadeniach, čím dodávajú dizajnu konzistetný a minimalistický vzhľad, ktorý sa hodí k ich brand-u. A keďže pri obrázkoch nie je žiaden text, nemusia prispôsobovať stĺpce tak, aby boli čitateľné.

ETQ-Amsterdam

13. Rozhodnite sa, či budete veci animovať alebo nie

Five Foot Six majú na úvodke pre desktop animáciu, ale na tabletoch a smarfónoch statický obrázok.

Animácie musia fungovať na všetkých zariadeniach dokonale a vzhľadom na rozličné orientácie, hustotu pixelov a rozmery obrazoviek robia na smartfónoch problémy. Uvažujte nad tým, či sú na smartfónoch takéto animácie potrebné a ak nie, nájdite alternatívu.

Five Foot Six

14. Uvažujte nad obrázkom na pozadí

Jeden obrázok nemusí byť vizuálne ideálny pre všetky zariadenia.

Edwin-Europe používa dva odlišné obrázky - jeden pre desktop, a iný pre smartfóny a tablety. Keby len orezali desktopový obrázok tak aby sedel pre menšie obrazovky, obrázok by stratil efekt - na pochopenie ho potrebujete vidieť celý.

Edwin-Europe

15. Vyberte mieru priblíženia obrázka

62Models používa na tabletoch a smartfónoch obrázky orezané tak, aby bolo vidieť čo najviac detailov, pričom na desktope sú obrázky bez orezu a s množstvom voľného priestoru. Záber z blízka nemusí byť na desktope tak efektívny, a naopak.

62Models

16. Prispôsobte veľkosť písma

Stránka Andre do Amaral je čistá a používa len čierny text na bielom pozadí.

Keďže text je hlavným obsahom, je dôležité, aby bola veľkosť fontu prispôsobená a.) pre každé zariadenie a b.) pre okno prehliadača. Font sa zväčšuje a zmenšuje proporčne s veľkosťou okna prehliadača.

Andre do Amaral

17. Zostručnite text

Weblounge má čím ďalej tým menej detailov a informácií na menších obrazovkách. Na smartfónoch vybraný text spolu s vizuálmi odstránili úplne, aby mohli podať len tie najdôležitejšie údaje.

Weblounge

18. Poprehadzujte menu

Menu na stránkach Oliver Bonas je horizontálne na desktope a vertikálne na smartfónoch a tabletoch. Navyše na menších obrazovkách nie je menu vždy viditeľné tak ako tomu je na desktope.

Výberom fontu a dostatočným white-space ale udržiavajú konzistentný vzhľad a vďaka zväčšenému priestoru medzi riadkami je na menších zariadeniach jednoduché klikať na buttony.

Oliver Bonas

19. Dbajte na konzistentnosť

Hardgraft je skvelým príkladom konzistentnej webky na všetkých zariadeniach, ktorá sa prispôsobuje širke obrazovky - počet stĺpcovh sa zvyšuje a znižuje, rovnako sa mení počet znakov na riadok a menu je na smartfónoch prístupné pod ikonkou.

Hardgraft

20. Dajte nadpisy veľké a čitateľné

Na webke Urban Influence sú všetky nadpisy blogových článkov jasné a čitateľné vďaka meniacemu sa počtu stĺpcov pre každé zariadenie a bezpätkovému písmu.

Urban Influence

21. Zjednodušujte

Stránky Studio Alto sa skladajú z pár vybraných elemetov - červený blok, čierno-biela stránka, brand, text a menu. To im pomáha navrhnút jednoduchú navigáciu, layout, a minimalizovať content a dosiahnuť tak čistú stránku na každom zariadení.

Studio Alto

22. Minimalizujte detaily

Používatelia na My Deejo kustomizujú svoj nôž kombinovaním viacerých dizajnových možností. Na desktope a tablete sú všetky možnosti viditeľné, ale na smartfóne sú všetky detaily minimalizované a úhľadne zhrnuté vo footer menu.

My Deejo

23. Používajte identické menu

Menu na Brian Hoff Design stránkach je identické na všetkých zariadeniach - čierne, s tučným bielym bezpätkovým textom a jemná priehľadnosť umožňuje vidieť obrázok pod menu.

Brian Hoff Design

24. Vyberte či swipe alebo scroll

Z výskumov bolo zistené, že na smartfónoch sa používatelia radšej pohybujú horizontálnym swipovaním, ale na desktope im je pohodlnejšie scrollovať.

Teye Denkwerk si tento rozdielny prístup uvedomujú a navrhli stránku tak, aby užívatelia na smartfónoch swipovali a na desktope scrollovali.

Teye Denkwerk

25. Spravte z menu stránku

Pre Impossible Bureau, ich menu je úvodka. 4 odkazy, každý z nich vedie na najdôležitejší obsah webu, sú rozložené horizontálne alebo vertikálne v závislosti od rozlíšenia obrazovky.

Impossible Bureau

26. Ukotvite header

Ukotvite header a zjednodušíte navigáciu, keďže používatelia nebudú musieť tak veľa scrollovať.

Podobne sa k dizajnu postavil aj web Nine Sixty - pás s navigáciou sa stratí keď scrollujete dolu a znova sa objaví keď scrollujete naspäť hore. Vďaka tomu dosiahli konzistentný vzhľad a funkcionalitu na všetkých zariadeniach.

Nine Sixty

27. Uvažujte nad viditeľnou časťou webu

(Pozn.: Fold = Časť stránky viditeľná pri prvom načítaní bez potreby scrollovať nižšie)

Keď dizajnujete content stránky, premýšľajte aj nad foldom. Rozdielne zariadenia budú ale mať rozdielny fold a rovnaký problém sa objaví aj pri zmene orientácie z portrétovej na landscape.

Jova Constructions aj napriek tomu pri návrhu berie ohľad na fold a zvažujú aj to, aký obsah uvidia používatelia pri prvom načítaní stránky pred tým, než začnú scrollovať.

Jova Constructions

28. Rozpohybujte obrázky

Powerhouse Company má na desktope pohyblivý obrázok so silným horizontálnym dôrazom, ktorý zdôrazňuje budovu na obrazovke.

Pohyblivý obrázok ani jeho orientácia by však nefungovali tak efektívne na smartfóne alebo tablete, a tak na iných zariadeniach navrhli inú možnosť.

Powerhouse Company

29. Preusporiadajte layout

Content na stránkach Van Gogh Museum je rozmiestnený na každom zariadení trochu inak.

Na širokej obrazovke desktopu sú text a obrázky vedľa seba, na užšom displeji tabletu sú uložené nad sebou a na smartfónoch obrázok vôbec nie je, aby bol viditeľný len ten najdôležitejší obsah.

Van Gogh Museum

30. Vyhýbajte sa veľkým a komplikovaným grafickým prvkom

Ak máte podobne ako Resn na webe komplexné a pohyblivé grafické prvky, ktoré nebudú vyzerať dobre na menších obrazovkách, tak ich jednoducho na menších obrazovkách nezobrazujte. Resn to vyriešil tak, že zobrazuje len kontaktné údaje.

Resn

…A teraz je rad na vás

Na trh prichádzajú neustále nové zariadenia. Váš web testujte na viacerých zariadeniach, softvérových verziách a rozlíšeniach obrazovky, aby vždy vyzeral dobre bez ohľadu na to, kto a kde si ho pozerá.

--

Preklad článku: Rebecca Gross: Responsive web design: What the Internet looks like in 2016