Tartalom
- Tervezés az ismeretlennek
- A tervezés pragmatikus megközelítése
- Az elrendezés agnosztikussá válása
- Kódolás fokozatosan
- Búvárkodás a felárba
Úgy tűnik, manapság mindenki reagáló webdesignról beszél, és jó okkal; mivel a webalapú eszközök száma folyamatosan növekszik - mindegyik eltérő képességekkel és funkciókkal rendelkezik - már nem ésszerű fix szélességű weboldalakat építeni.
Az igazság az, hogy soha nem volt az. Mindazonáltal eddig legjobb gyakorlatnak tekintették az olyan tapasztalatok tervezését, amelyek számos feltételezést tettek, legyen szó a képernyőfelbontásról, a sávszélességről vagy a beviteli módszerről. Ha valaha tervezett egy 960 képpontos méretű weboldalt, csak azért, hogy megtekinthesse azt egy ismerősének kis képernyős netbookján (és igen, itt fájdalmas tapasztalatokból írok), meg fogja érteni, miért nem volt ez különösebben okos megközelítés. A keverékbe dobott okostelefonokkal és táblagépekkel egyértelmű, hogy hagyományos módszereink már nem alkalmasak a célra.
Szerencsére a CSS médiakérdések megjelenése és annak egyre növekvő elismerése, hogy a web önálló médium, azt jelenti, hogy kezdjük átfogni a platform valódi természetét, elfogadva, hogy univerzáltsága erősség, nem pedig gyengeség.
A következő öt napban végigvezetem egy technikán, amely felismeri ezt a tényt: reszponzív webdesign. Ethan Marcotte fejlesztette ki, amely ötvözi a folyékony elrendezéseket, a rugalmas képeket és a média lekérdezéseket, hogy segítsen nekünk olyan webhelyeket létrehozni, amelyek kecsesen alkalmazkodnak bármilyen környezethez, amellyel találkoznak.
Bemutatom ezt a megközelítést, megmutatva, hogyan lehet egy egyszerű médiagalériát felépíteni. Példáimban egy kis weboldalt fogok létrehozni, amely dokumentálja egy közelmúltbeli utat, amelyet az Egyesült Államokban tettem meg, de bátran testre szabhatja a kódot és a kialakítást saját igényeinek megfelelően.
Tervezés az ismeretlennek
A bemutató nagy része az adaptív tervezés fejlesztési szempontjaira összpontosít. Mielőtt bármilyen kódba belemélyednénk, szánjunk egy percet arra, hogy gondolkodjunk el, hogyan tervezhetnénk egy weboldalt, amely elképzelhető módon végtelen elrendezésű lehet.
Most szerencsés vagyok, hogy megtervezhetek interfészeket és fejleszteni a frontend kódot, amely valóságossá teszi őket. Ez természetesen nem egyedi készség - ha magadnak dolgozol, akkor valószínűleg ugyanaz vagy. De minden bizonnyal előnyös megérteni, hogy a tartalom miként képes alkalmazkodni és visszafolyni a folyékony tervek elkészítésekor.
Egy nagyobb csapat részeként is dolgozom, ahol a szerepem specializáltabb. Ilyen környezetben a látványtervező kizárólag arra koncentrálhat, hogy a drótvázakat vonzó, vonzó (aláírt, pixel tökéletes) kompokká alakítsa át. És nem szokatlan, hogy a fejlesztők külön helyezkednek el, és ezeket az elrendezéseket egyszerű és hatékony jelölésekké és CSS-kké alakítják.
Az ilyen lineáris és szegregált munkafolyamatok azonban gyorsan lebomlanak, ha elkezdjük értékelni, hogy a tervek hogyan alkalmazkodnak a különböző környezetekhez. Bármely új eszköz vagy technológia esetében, meg kell fontolnunk az együttműködőbb és agilisabb munkamódszereket is. Az adaptív weboldalak tervezésénél felmerülő legbonyolultabb problémák közül sokat egyszerűen beszélgetéssel, kísérletezéssel és iterációval lehet megoldani.
A tervezés pragmatikus megközelítése
Ez nem azt jelenti, hogy a tervezőknek nincs lehetőségük arra, hogy elgondolkodjanak arról, hogyan működhet a design bármely adott eszköz keretein kívül.
A Clearleftnél a látványtervezést az asztal perspektívájából kezdeményezzük. Először egy átfogó tervezési nyelv és a vizuális esztétika meghatározásával kezdjük, gyakran a kezdeti feltárásokat egy alapvető tartalom köré építve. Például, ha élelmiszer-webhelyet tervezünk, akkor egy receptoldallal kezdjük; egy híroldal, egy történetoldal számára.
Ez nemcsak a webhely fontos oldala, de valószínűleg elegendő strukturált tartalmat is tartalmaz ahhoz, hogy tipográfiai palettát építsünk fel. Arra is gondolunk majd, hogy miként alkalmazkodhat az elrendezés - még akkor is, ha ebben a szakaszban csak a fejünkben jár.
A terv stressztesztjének egyik hasznos módja az, ha ilyen oldalt vesz fel, és keskenyebb (~ 320 képpont széles) képernyőhöz adaptálja. Valószínűleg felfedezi, hogy a tervezés bizonyos szempontjait át kell gondolni, hogy ilyen szélesen működjenek. Íme néhány példa:
- Tipográfia: A nagy fejlécek jól működhetnek szélesebb elrendezéseknél, de kisebb képernyőkön sok függőleges helyet foglalhatnak el, ezért további görgetést igényelnek. Mivel a vonalhossz változik, érdemes figyelembe venni a vonal magasságát és más tipográfiai kezeléseket is.
- Linkek: Hogyan fog működni a tervezése érintőképernyős eszközökön? Bár még nincs egyszerű módszerünk ezek észlelésére (vagyis a tervezés minden aspektusában figyelembe kell vennünk a figyelmünket), a keskenyebb képernyőre történő tervezés lehetőséget ad arra, hogy átgondoljuk a linkek és más interaktív elemek célterületeit. . Az iOS irányelvei azt javasolják, hogy ezek legalább 44 pixel / pont négyzet legyenek, ami jó cél a cél elérésére.
- Navigáció: Valószínűleg ez lesz a legkényelmetlenebb eleme minden adaptív tervezésnek, különösen, ha webhelyének sok szakasza és mély hierarchiája van. Brad Frost összefoglalót írt a navigáció néhány különböző megközelítéséről, amelyet jelenleg figyelembe vesznek.
- Felesleges tartalom: Bizonyos tartalom nem szükséges? Más tartalmat csak bizonyos esetekben kell megjeleníteni? Nem támogatom a tartalom elrejtését annak alapján, hogy a felhasználó milyen eszközt használ, de az olyan technikák, mint a feltételes betöltés (amelyet később a hét végén megnézünk) segíthetnek abban, hogy olyan kisebb oldalakat jelenítsünk meg, amelyek csak szükség esetén töltenek be kiegészítő tartalmat.
Két ellentétes elrendezés megtervezése megerősíti azt az elképzelést, hogy a design alkalmazkodni fog, miközben a lehetséges gotchákat korán kivasalja. Bár ez a munka megkétszereződésének tűnik, ne feledje, hogy nem minden oldalt tervezünk pixel tökéletes pontossággal. Ehelyett egy skálázható tervezési nyelv építésére összpontosítunk - amely kifejlődik, amikor elkezdjük implementálni azt a kódban, és egy, amely az egyes modulok és összetevők köré épül.
Az elrendezés agnosztikussá válása
Nem meglepő, hogy egy olyan iparág számára, amely történelmileg a webet nyomtatásként kezelte, a rögzített szélességű elrendezések sok általunk előállított terméket átjártak. Ahogy kezdjük az adaptív közeg tervezését, új megközelítéseket fontolgatunk, amelyek lehetővé teszik számunkra a problémák megoldását és az ötletek kommunikációját, miközben elismerjük a közeg folyékony jellegét. Íme néhány kedvencem:
- Oldalleírási diagramok: Míg a drótvázak gyakran elrendezést jelenthetnek (és ezáltal egy bizonyos típusú eszközt feltételezhetnek), az oldalleírási diagramok eltávolítják ezt a feltételezést, és ehelyett az egyes komponenseket írják le, a dokumentumban prioritás szerint rendezve.
- Stílus csempék: Amikor a tervezési ötleteket kommunikáljuk az ügyfelekkel, „weboldalak festményeit” mutatjuk be. Ha nem vagyunk óvatosak, az ügyfelek joggal kérik, hogy nézzenek meg olyan fogalmakat, amelyek bemutatják, hogy a dizájn hogyan fog kinézni más eszközökön is. Ez fenntarthatatlan helyzetbe sodorhat minket, ha több oldalt készítünk több eszköz számára. Samantha Warren átgondolta ezt a problémát, és stíluscsempékkel állt elő. Ezek valahol egy hangulattábla (de kevésbé homályos) és teljesen megvalósított (de kevésbé precíz) kompek között helyezkednek el, és segítenek a tipográfia, a gombstílusok és az árbockezelés kezelésében. Ösztönzik az ügyfelekkel folytatott érettebb szintű vitát is.
- Mobilizáljon játékot: Ez a gyakorlat nagyon jól működhet az együttműködő tervezői műhelyek során. Ebben a gyakorlatban mindenki felírja a Post-it jegyzetekre azokat az elemeket, amelyek egy bizonyos oldalon megjelenhetnek. Ezeket fontossági sorrendben a falhoz ragasztják, mintha lineárisan tűnnének fel egy mobiltelefonon. A megbeszélés eredményeként meglepő következtetéseket vonhatunk le. Például rájöhet, hogy a navigáció nem az oldal legfontosabb eleme. Ez folytatódhat a tervezésig, ahol az oldal tetején egy átugrási link hivatkozik a lábléc navigációjára.
Természetesen van még hely azoknak az eszközöknek, amelyeket természetesen már használunk, de egy weboldal széleskörű megtervezésekor szem előtt kell tartanunk, hogy az elrendezés már nem ismert.
Kódolás fokozatosan
Szerencsére nem kell aggódnunk a látványterv miatt a példán, amelyen dolgozunk, mivel a kemény munkát elvégezték értünk! Ehelyett arra összpontosíthatunk, hogy a tervünket egy teljesen érzékeny weboldalra kódoljuk.
Még egy dolog, mielőtt nekilátnánk. Fontos megjegyezni a médium alapelvét: az egyetemességet. Ez nemcsak azt jelenti, hogy építünk a mai webalapú eszközök számára, hanem biztosítjuk a kompatibilitást a tegnapi és a holnapi eszközökkel is. John Allsopp a következő 6 milliárd című írásában leírta, miért fontos ez az elv:
"Ez a következő hatmilliárd gyermek India vidéki vidékén, Afrikában, Kínában, ahol az áramhoz és a hálózatokhoz való hozzáférés szakaszos lehet. Valaki Szumátrában van egy évtizedes Wintel-dobozban. Olyan emberek beszélnek több száz különböző nyelven, több tucat különböző nyelvvel. írórendszerek. Családjukban elsőként tudnak írni és olvasni. Világszerte az emberek 20 százaléka nem tud írni vagy olvasni.’
Nyomon követhetjük a web megértését, ha megnézzük a különböző divatokat (jobb szó hiányában), amelyek a szakmánkban elfoglaltak: webes szabványok, hozzáférhetőség, nem feltűnő JavaScript ... mind változatok ugyanazon témában: fokozatos fejlesztés. Ugyanez igaz a reszponzív webdesignra is. A valóban A reszponzív weboldal célja, hogy olyan oldalt építsen, amely nemcsak visszafelé kompatibilis, de a jövõ számára is barátságos.
Búvárkodás a felárba
Oké, elég a preambulumból, itt az ideje megnyitni egy szövegszerkesztőt.Tervezőnk asztali orientált dizájnt biztosított számunkra, és volt kedves példákat felmutatni arra, hogy ez hogyan jelenhet meg egy szűkebb nézetablakban is.
Lehet, hogy csábító ezeket külön kódolni, de más megközelítést fogok javasolni. A rajzot alkotó különálló komponensek - vagy minták - egyetlen oldalra történő elhelyezésével minta-portfóliót hozhatunk létre. Ez lehetővé teszi számunkra, hogy az oldalak elrendezésének határain kívül komponenseket fejlesszünk ki, és adunk valamit, amire később hivatkozhatunk bármilyen regressziós tesztelés során. Nézzük meg a kezdeti jelölést néhány különböző eszközön:
Tekintse meg a megjelölt minta portfóliónkat
Nos, átkozott leszek - már van egy érzékeny weboldalunk! Tartalmaink alkalmazkodnak az egyes készülékek határaihoz, legyen az egy divatos új iPad vagy egy eldobott funkciós telefon. Ez még csak szöveges böngészőben is működik, mint például a Lynx.
Az egyetemesség alapelveinek köszönhetően a web az alapértelmezés szerint érzékeny. Ez nagyszerű, de azt is jelenti, hogy bármi, amit mostantól a kóddal teszünk, veszélyeztetheti ezt a natív alkalmazkodóképességet.
Holnap: Óvatosan lépkedünk és elkezdjük alkalmazni az adaptív tervezés első aspektusát: tipográfiát és folyadékrácsokat.
