Odpovědný webový design se stal na internetu téměř všudypřítomným buzzword. Zkuste hledat #rwd na Twitteru, abyste našli stejný obsah dílů a Twitter spam. To je společná fáze dozrávání nové myšlenky. Vzpomínám si, když AJAX byl zuřivý; termín se dostal do země. Nyní málo lidí mluví o AJAXu, ale knihovny jako jQuery jsou plně obsaženy v pracovním postupu vývojáře.
Zdá se, že to odpovídá tomu, co se děje s citlivým webovým designem. Termín je všude. Můj přítel je v publikování časopisů, nedávno chodila na konferenci a redaktor známého nového časopisu hovořil o nadcházejících trendech a uvedl citlivý webový design. Redaktoři nemusí být weboví profesionálové, ale znají buzzwords.
Vzhledem k tomu, že citlivý webový design získal pary, změnil se způsob vytváření webových stránek. Vzhledem k tomu, že termín se přechází z buzzword na společnou součást každého projektu webového designu, musíme změnit způsob, jakým pracujeme jako weboví profesionálové. S ohledem na tuto skutečnost musíme položit několik nových základních pravidel pro to, jak pracujeme.
Když vám někdo řekne, "podívejte se na tuto citlivou stránku", co je první věc, kterou děláte? Pravděpodobně měříte okno a zjistíte, jak se změní rozložení. Pravděpodobně to nebudu otevřít v telefonu a tabletu a začnu měnit orientace nebo spustit testy rychlosti stránky. Přehodnocuji si prohlížeč a pokračuji svým dnem. To jsou naše zkušenosti jako návrháři a vývojáři, ale ne jako uživatelé. Když navštívím stránku jako uživatele, nemám žádnou trpělivost. Je mi jedno, jestli lokalita pěkně vyprchá; Chci jen to, co chci.
"Squishy" je lineární měřítko webové stránky. Prochází web z křehkého na tučný? Namísto lineárního měřítka by se citlivý webový design měl zaměřit na vytváření jádra webu a postupné načítání od něj na základě schopností. Představte si web, který musel být vybudován pro malý mobilní telefon s IE7 v síti EDGE. To by mělo být vaše hlavní místo a pak se zvětšovat na základě velikosti obrazovky a schopností.
Odpovědný návrh webových stránek je komplikovaný. Tak to je. Přál bych si, abych vám něco řekla, abyste to ulehčili, ale není. Většina lidí reagovala na citlivý návrh webových stránek tím, že přidala něco do svých pracovních postupů, ať už je to nová dodávka nebo jen jde o vývojáře a ptá se, zda jejich design bude reagovat citlivě.
Mám kamaráda, který pracuje na citlivém místě pro klienta. Staví web ve Photoshopu ve velikosti desktopu. Po pár mockups na některých stránkách chtěla ukázat, jak by to vypadalo v tabletu a v smartphonu, a tak i ty modely. Po předvedení klientovi dostala několik kreativních vylepšení. V tomto okamžiku existuje asi 50 PSD souborů pro tuto stránku. Trvá několik dní, než změní rozvržení.
Snaha o přidání nových návrhů sama o sobě bude mít za následek časově náročný a nekonzistentní proces. Jedním z nejlepších způsobů, jak toto vyřešit, je prototypování drátových rámů a jejich prezentace vašemu klientovi. To vám dává přednost, abyste mluvili přímo k rozvržení stránky, aniž byste současně mluvili o návrhu. Nadace ZURB je skvělý nástroj pro rychlé vytváření prototypů.
Jednoduché přidávání prototypů do pracovního postupu však nebude postačující. Abyste uspěli v budování citlivých stránek, musíte se přizpůsobit, což nás přivádí k dalšímu pravidlu.
Když jsem poprvé začal stavět webové stránky, použil jsem dva nástroje, Photoshop a GoLive. Nyní mám alespoň šest programů, které absolutně potřebuji k vybudování místa. Stále používám Photoshop pro tvorbu grafických prvků, ale většinou navrhuji v prohlížeči s Sublime Text 2 a používám vývojářské nástroje Safari pro prohlížení prvků v iOSu 6. Také používám Codekit ke kompilaci mého předem zpracovaného CSS a Terminálu pro kontrolu verzí v Git.
Odpovědný webový design také znamená změnu způsobu, jakým navrhujete. Místo toho, abych celou fotku v Photoshopu položil, používám Samantha Warrenova stylová dlažba k artikulaci vizuálního designu. Vytvořením vizuální značky a prvků rozhraní webu mimo skutečné uspořádání můžete přímo propojit návrh a spojit jej s uspořádáním z prototypu, abyste vytvořili svou citlivou stránku v prohlížeči.
Předprocesory CSS jsou také obrovskou pomocí v jakémkoli reagujícím pracovním postupu. Jednoduše řečeno, preprocesory mohou být použity k rozvinutí některých komplikací vytváření webu a zjednodušování hodně zopakování dědí pracovat v CSS. Já osobně preferuji SCSS, ale LESS je lepší alternativou pro některé, protože má nižší vstupní bariéru a má lepší dokumentaci.
[Web] by měl být přístupný z jakéhokoli hardwaru, který se může připojit k internetu: stacionární nebo mobilní, malá nebo velká. - Tim Berners-Lee
HTML a CSS jsou neodmyslitelně citlivé. Od počátku HTML byl web určen jako dostatečně flexibilní, aby pracoval na jakémkoli hardwaru s připojením k internetu. Teprve až jsme se jako návrháři a vývojáři přestěhovali na pevné rozvržení, které se změnily. Při pokusu o uložení pevných rozměrů na webové stránky jsme omezili web na stolní počítače.
Odpovídající web je takový, který abstrahuje to, co máte říkat, jak to říkáte. Vezměte například například nedávný přechod NPR k obsahu založenému na rozhraní API. Přesunutím do rozhraní API pro poskytování obsahu společnost NPR mohla konzistentně spravovat sbírku aplikací a webů. Jediná věc, která se mění, je prezentační vrstva.
To je to, na čem by měla být odpovězená webová stránka. Zjistěte, co máte říkat, a nechte to, jak říkáte, že to bude řízeno. Design je o uspokojování potřeba způsobem, který je vizuálně příjemný, ale také usiluje o uspokojení potřeb uživatele.
To je to, o čem je odpověď na web, uživatelské webové stránky, které pracují pro lidi, kteří je používají, ale mají přístup k obsahu. Vytváření stránek, které se mohou refaktorovat pro malé obrazovky, je jen začátek.
Už jste přjímali citlivý web design? Jaká pravidla pro citlivý design byste chtěli přidat? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, velikost obrazu přes Shutterstock.