Obsah
- Navrhovanie pre neznámeho
- Pragmatický prístup k dizajnu
- Stáva sa agnostickým
- Kódovanie postupne
- Ponorte sa do prirážky
Zdá sa, že v dnešnej dobe všetci hovoria o responzívnom webovom dizajne, a to z dobrého dôvodu; keďže počet zariadení s povoleným webom neustále rastie - každé s rôznymi schopnosťami a vlastnosťami - už nie je rozumné vytvárať webové stránky s pevnou šírkou.
Pravda je, že nikdy nebola. Doteraz sa však osvedčilo navrhovať skúsenosti, ktoré vychádzajú z množstva predpokladov, napríklad rozlíšenia obrazovky, šírky pásma alebo vstupnej metódy. Ak ste niekedy navrhli web so šírkou 960 pixelov, iba aby ste si ho mohli pozrieť na netbooku s malou obrazovkou priateľa (a áno, píšem tu z bolestivých skúseností), pochopíte, prečo to nebol obzvlášť dômyselný prístup. Teraz, keď sú do mixu vložené inteligentné telefóny a tablety, je jasné, že naše tradičné metódy už prestávajú vyhovovať účelu.
Našťastie, nástup mediálnych otázok CSS a rastúce uznanie, že web je samo osebe médiom, znamená, že začíname prijímať skutočnú podstatu platformy a pripúšťame, že jej univerzálnosť je sila, nie slabosť.
Počas nasledujúcich piatich dní vás prevediem technikou, ktorá rozpozná túto skutočnosť: responzívny webdizajn. Toto vyvinul Ethan Marcotte a kombinuje prehľadné usporiadanie, flexibilné obrázky a mediálne dotazy, ktoré nám pomáhajú vytvárať stránky, ktoré sa ladne prispôsobia každému prostrediu, s ktorým sa stretnú.
Tento prístup ukážem tým, že vám ukážem, ako vytvoriť jednoduchú galériu médií. V mojich príkladoch vytvorím malú webovú stránku na zdokumentovanie nedávneho výletu po USA, ktorý som absolvoval, ale kľudne si prispôsobím kód a dizajn tak, aby vyhovovali vašim potrebám.
Navrhovanie pre neznámeho
Veľká časť tohto tutoriálu sa sústredí na vývojový aspekt responzívneho dizajnu. Ale predtým, ako sa pustíme do nejakého kódu, urobme si chvíľu na rozmyslenie, ako by sme mohli navrhnúť web, ktorý by mohol mať nekonečné rozloženie.
Teraz mám šťastie, že môžem navrhovať rozhrania a vyvinúť front-end kód, vďaka ktorému budú skutočné. Toto samozrejme nie je jedinečná zručnosť - ak pracujete pre seba, ste pravdepodobne rovnakí. Určite je však výhodné pochopiť, ako sa obsah môže prispôsobiť a preformátovať pri vytváraní plynulých návrhov.
Pracujem tiež ako súčasť väčšieho tímu, kde je moja rola špecializovanejšia. V takom prostredí sa vizuálny dizajnér môže sústrediť iba na preklad drôtových modelov do atraktívnych, pútavých (odhlásených, dokonalých pixelov) kompilov. A nie je nič neobvyklé, že vývojári sú umiestnení osobitne a prekladajú tieto rozloženia do štíhlych a efektívnych značiek a CSS.
Takéto lineárne a segregované pracovné toky sa však rýchlo rozpadnú, hneď ako začneme hodnotiť, ako sa návrhy prispôsobia rôznym prostrediam. Rovnako ako akýkoľvek nový nástroj alebo technológia, mali by sme zvážiť aj spôsoby spolupráce a pružnejšie fungovanie. Mnoho z najnáročnejších problémov, s ktorými sa stretnete pri navrhovaní responzívnych webových stránok, je možné vyriešiť jednoducho konverzáciou, experimentovaním a iteráciou.
Pragmatický prístup k dizajnu
To však neznamená, že neexistuje priestor pre dizajnérov, aby premýšľali o tom, ako môže dizajn fungovať mimo hraníc konkrétneho zariadenia.
V spoločnosti Clearleft iniciujeme vizuálny dizajn z pohľadu pracovnej plochy. Začíname definovaním zastrešujúceho dizajnérskeho jazyka a vizuálnej estetiky, ktoré sa pri počiatočných skúmaniach často opiera o jadro obsahu. Napríklad, ak navrhujeme web o potravinách, začneme stránkou receptov; pre spravodajský web príbehová stránka.
Toto je nielen dôležitá stránka na webe, ale pravdepodobne obsahuje aj dostatok štruktúrovaného obsahu na to, aby sme vytvorili typografickú paletu. Zamyslíme sa tiež nad tým, ako sa môže rozloženie prispôsobiť - aj keď je to v tejto fáze iba v pozadí.
Jedným z užitočných spôsobov záťažového testu dizajnu je zobrať takúto stránku a prispôsobiť ju pre užšiu (~ 320px širokú) obrazovku. Pravdepodobne zistíte, že niektoré aspekty dizajnu budú musieť byť premyslené, aby fungovali pri tejto šírke. Tu je niekoľko príkladov:
- Typografia: Veľké nadpisy môžu dobre fungovať na širších rozloženiach, ale na menších obrazovkách môžu zaberať veľa vertikálneho priestoru a preto si vyžadujú ďalšie rolovanie. Pretože sa dĺžky riadkov menia, mali by ste brať do úvahy aj ich výšky a ďalšie typografické úpravy.
- Odkazy: Ako bude váš návrh fungovať na zariadeniach s dotykovou obrazovkou? Aj keď zatiaľ nemáme ľahký spôsob, ako ich zistiť (čo znamená, že by sme mali brať ohľad na všetky aspekty nášho dizajnu), návrh pre užšiu obrazovku nám môže dať príležitosť premýšľať o cieľových oblastiach odkazov a iných interaktívnych prvkov. . Pokyny pre iOS odporúčajú, aby to boli štvorce s veľkosťou najmenej 44 pixelov / bodov, čo je dobrý údaj, na ktorý sa treba zamerať.
- Navigácia: Toto bude pravdepodobne najtrápnejšia súčasť každého responzívneho dizajnu, najmä ak má váš web veľa sekcií a hlbokú hierarchiu. Brad Frost napísal zhrnutie niekoľkých rôznych prístupov k navigácii, o ktorých sa v súčasnosti uvažuje.
- Nadbytočný obsah: Nie je potrebný nejaký obsah? Je potrebné, aby sa iný obsah zobrazoval iba v určitých scenároch? Nie som zástancom skrývania obsahu na základe toho, aké zariadenie používateľ náhodou používa, ale techniky ako podmienené načítanie (na ktoré sa pozrieme neskôr tento týždeň) nám môžu pomôcť zobraziť menšie stránky, ktoré načítajú doplnkový obsah, iba ak je to potrebné.
Návrh dvoch kontrastných usporiadaní posilňuje myšlienku, že dizajn sa prispôsobí, zatiaľ čo včasné nažehlenie potenciálnych vecí. Aj keď to znie ako zdvojnásobenie práce, pamätajte na to, že nenavrhujeme každú stránku na dokonalú pixelovú presnosť. Namiesto toho sa zameriavame na budovanie škálovateľného návrhového jazyka - jedného, ktorý sa bude vyvíjať, keď ho začneme implementovať v kóde, a druhého, ktorý je založený na jednotlivých moduloch a komponentoch.
Stáva sa agnostickým
Nie je prekvapením, že pre priemysel, ktorý v minulosti spracovával web ako tlač, rozloženia s pevnou šírkou prenikli do mnohých dodávok, ktoré vyrábame. Keď začneme navrhovať prispôsobiteľné médium, zvažujú sa nové prístupy, ktoré nám umožnia vyriešiť problémy a komunikovať nápady, pričom treba uznať plynulú povahu média. Tu je niekoľko mojich obľúbených položiek:
- Schémy popisu stránky: Zatiaľ čo drôtové rámy môžu často znamenať rozloženie (a teda predpokladať určitý typ zariadenia), diagramy popisu stránky tento predpoklad odstraňujú a namiesto toho popisujú jednotlivé komponenty usporiadané v dokumente z hľadiska priority.
- Štýlové dlaždice: Pri komunikácii dizajnových nápadov s klientmi sa môžeme ocitnúť v prezentácii „obrazov webových stránok“. Ak nebudeme opatrní, klienti oprávnene požiadajú o zoznámenie sa s konceptmi, ktoré demonštrujú, ako bude dizajn vyzerať aj na iných zariadeniach. To nás môže prinútiť do neudržateľnej situácie pri vytváraní viacerých stránok pre rôzne zariadenia. Samantha Warren sa nad týmto problémom zamyslela a prišla so štýlovými dlaždicami. Sedia niekde medzi náladovou doskou (ale menej vágnou) a plne realizovanými kompami (ale menej presnými) a pomáhajú nám komunikovať typografiu, štýly tlačidiel a úpravy v tiráži. Podporujú tiež zrelšiu úroveň diskusie s našimi klientmi.
- Mobilify design game: Toto cvičenie môže počas seminárov o spolupráci skutočne dobre fungovať. V tomto cvičení si každý zapisuje príspevky, ktoré si môžu všimnúť na stránke. Tieto sú potom prilepené k stene podľa dôležitosti, akoby sa na mobilnom telefóne javili ako linearizované. Výsledná diskusia môže priniesť niekoľko prekvapivých záverov. Napríklad si môžete uvedomiť, že navigácia nie je najdôležitejšou súčasťou stránky. To by mohlo viesť až k dizajnu, kde odkaz na preskočenie v hornej časti stránky odkazuje na navigáciu v päte.
Samozrejme stále existuje priestor pre nástroje, ktoré už používame, ale pri širšom navrhovaní webových stránok si musíte uvedomiť, že rozloženie už nie je známe.
Kódovanie postupne
Našťastie sa nemusíme starať o vizuálny dizajn v príklade, na ktorom pracujeme, pretože pre nás bola vykonaná tvrdá práca! Namiesto toho sa môžeme sústrediť na kódovanie nášho dizajnu do plne responzívneho webu.
Ešte predtým, ako začneme, ešte jedna vec. Je dôležité pamätať na základný princíp média, s ktorým pracujeme: univerzálnosť. To znamená nielen budovanie dnešných webových zariadení, ale tiež zabezpečenie kompatibility so zariadeniami včera a zajtra. John Allsopp vo svojom príspevku The Next 6 Billion opísal, prečo je táto zásada dôležitá:
"Týchto ďalších šesť miliárd tvoria deti na vidieku v Indii, Afrike a Číne, kde môže byť prerušovaný prístup k energii a sieťam. Je to niekto na Sumatre v desaťročnom boxe Wintel. Sú to ľudia, ktorí hovoria stovkami rôznych jazykov a desiatkami rôznych jazykov." systémy písania. Sú to ľudia, ktorí sú prvými v ich rodine, ktorí dokážu čítať a písať. Je to 20 percent ľudí na celom svete, ktorí nevedia čítať alebo písať. Napriek tomu.’
Naše porozumenie webu môžeme vysledovať pri pohľade na rôzne spôsoby (pre lepšie slovo), ktoré sa v našej profesii uchytili: webové štandardy, prístupnosť, nenápadný JavaScript ... všetko sú varianty na rovnakú tému: progresívne vylepšovanie. To isté platí pre responzívny webový dizajn. Postaviť a skutočne responzívnou webovou stránkou je vytvoriť web, ktorý je nielen spätne kompatibilný, ale aj v budúcnosti priateľský.
Ponorte sa do prirážky
Dobre, dosť preambuly, je čas otvoriť textový editor.Náš dizajnér nám poskytol dizajn zameraný na pracovnú plochu a bol natoľko láskavý, že poskytol príklady toho, ako by sa to mohlo javiť aj v užšom výreze.
Môže byť lákavé kódovať ich osobitne, ale navrhnem iný prístup. Umiestnením samostatných komponentov - alebo vzorov - tvoriacich dizajn na jednu stránku, môžeme vytvoriť portfólio vzorov. To nám umožňuje vyvíjať komponenty mimo hraníc ľubovoľného rozloženia stránky a dá nám niečo, na čo sa budeme neskôr odvolávať pri akomkoľvek regresnom testovaní. Pozrime sa na úvodné označenie v niekoľkých rôznych zariadeniach:
Prezrite si naše portfólio označených vzorov
No, budem sakra - už máme responzívny web! Náš obsah sa prispôsobuje obmedzeniam každého zariadenia, či už ide o nový efektný iPad alebo vyradený funkčný telefón. Funguje dokonca aj v textovom prehliadači, ako je Lynx.
Vďaka základným princípom univerzálnosti web je v predvolenom nastavení responzívne. To je skvelé, ale tiež to znamená, že čokoľvek, čo odteraz urobíme s kódom, môže túto natívnu adaptabilitu narušiť.
Zajtra: Budeme šliapať opatrne a začneme uplatňovať prvý aspekt responzívneho dizajnu: typografiu a plynulé mriežky.
