Inhalt
- Entwerfen fir dat Onbekannt
- Eng pragmatesch Approche zum Design
- Layout agnostiker ginn
- Coding progressiv
- Taucht an d'Mark-Up
Et schéngt jiddereen ze schwätzen iwwer reaktiounsfäeger Webdesign dës Deeg, a mat gudde Grond; well d'Zuel vun de webbaséierte Geräter wiisst weider - jiddferee mat ënnerschiddleche Fäegkeeten a Funktiounen - et ass net méi sënnvoll Websäite mat fixer Breet ze bauen.
Wourecht ass, et war ni. Awer bis elo gouf et als bescht Praxis ugesinn fir Erfahrungen ze designen déi eng Rei Viraussetzungen gemaach hunn, sief et ëm Bildschirmaaufléisung, Bandbreedung oder Input Method. Wann Dir jeemools eng 960px breet Websäit entwéckelt hutt, nëmmen fir se op engem klengen Ecran Netbook vun engem Frënd ze gesinn (a jo, ech schreiwen hei vu schmerzhafter Erfahrung), wäert Dir verstoen firwat dëst net eng besonnesch clever Approche war. Elo, mat Smartphones a Pëllen an de Mix geworf, ass et kloer datt eis traditionell Methoden net méi fir Zweck fit sinn.
Glécklecherweis, d'Entstoe vu CSS Medienufroen an eng wuessend Unerkennung datt de Web e Medium a sengem eegene Recht ass, heescht datt mir de richtege Charakter vun der Plattform unhuelen, akzeptéieren datt seng Universalitéit eng Kraaft ass, net eng Schwächt.
Während den nächste fënnef Deeg wäert ech Iech duerch eng Technik féieren déi dës Tatsaach erkennt: reaktiounsfäeger Webdesign. Entwéckelt vum Ethan Marcotte, kombinéiert dës flësseg Layouten, flexibel Biller a Medienufroen, fir eis ze hëllefen Site ze bauen, déi sech gnädeg un all Ëmfeld upassen, wat se begéinen.
Ech demonstréieren dës Approche andeems Dir Iech weist wéi Dir eng einfach Mediegalerie baut. A menge Beispiller kreéieren ech eng kleng Websäit fir eng kierzlech Strooss Rees ze dokumentéieren, déi ech iwwer d'USA gemaach hunn, awer fille sech gratis de Code an den Design unzepassen fir Äre Besoinen unzepassen.
Entwerfen fir dat Onbekannt
Vill vun dësem Tutorial wäert ronderëm den Entwécklungsaspekt vum reaktiounsfäegen Design zentréieren. Awer ier mer an e Code gräifen, loosst eis e Moment nodenken wéi mir eng Websäit entwéckelen déi denkbar onendlech Layouten hunn.
Elo sinn ech glécklech datt ech Interfaces designen an de Frontend Code entwéckelen deen se richteg mécht. Dëst ass natierlech net eng eenzegaarteg Fäegkeet - wann Dir fir Iech selwer schafft da sidd Dir wahrscheinlech déiselwecht. Awer et ass sécher avantagéis ze verstoen wéi Inhalter sech upasse kënnen a reflektéiere beim Flëssege Design.
Ech schaffen och als Deel vun engem méi groussen Team wou meng Roll méi spezialiséiert ass. An esou engem Ëmfeld kann de visuellen Designer sech eleng op d'Iwwersetze vu Wireframes an attraktiv, engagéierend (ënnerschriwwen, pixel-perfekt) Comps konzentréieren. An et ass net ongewéinlech datt d'Entwéckler getrennt lokaliséiert sinn, dës Layouten a schlank an effizient Markup an CSS iwwersetzen.
Wéi och ëmmer, sou linear a getrennt Workflows briechen séier of, wa mer ufänken ze evaluéieren wéi Designen sech an ënnerschiddlech Ëmfeld upassen. Sou vill wéi all neit Tool oder Technologie, solle mir och méi kollaborativ a agil Weeër schaffen. Vill vun de knaschtegste Probleemer, déi beim Entwerfen vu responsive Websäiten gestouss sinn, kënnen einfach duerch Gespréich, Experimenter an Iteratioun geléist ginn.
Eng pragmatesch Approche zum Design
Dat ass net ze soen datt et net Spillraum fir Designer ze denken wéi en Design ausserhalb der Grenze vun engem bestëmmten Apparat funktionnéiere kann.
Bei Clearleft initiéiere mir visuellt Design aus der Perspektiv vum Desktop. Mir fänken un eng iwwergräifend Designsprooch a visuell Ästhetik ze definéieren, baséieren dacks initial Exploratiounen ronderëm e Kärstéck vum Inhalt. Zum Beispill, wa mir e Liewensmëttel Site designen, fänke mir mat enger Rezept Säit un; fir eng News Säit, eng Geschicht Säit.
Dëst ass net nëmmen eng wichteg Säit um Site, awer et enthält wahrscheinlech genuch strukturéiert Inhalt fir eis eng typographesch Palette opzebauen. Mir denken och drun wéi de Layout sech upasse kann - och wann et just am Réck vun eisem Geescht an dëser Etapp ass.
Een nëtzlechen Wee fir en Design ze stresstest ass sou eng Säit ze huelen an se fir en enken (~ 320px breet) Bildschierm unzepassen. Dir wäert wahrscheinlech entdecken datt verschidden Aspekter vum Design nei geduecht musse ginn fir datt se an dëser Breet schaffen. Hei sinn e puer Beispiller:
- Typographie: Grouss Iwwerschrëfte kënne gutt op méi breede Layouten funktionnéieren, awer op méi klengen Ecranen kënne se vill vertikal Plaz ophuelen an dofir zousätzlech Scrollen erfuerderen. Wéi d'Linnelängt ännert, sollt Dir och Linnhéichten an aner typographesch Behandlungen berécksiichtegen.
- Links: Wéi funktionnéiert Ären Design op Touchscreen Geräter? Wärend mir nach keen einfachen Wee hunn fir dës z'entdecken (dat heescht mir sollten an allen Aspekter vun eisem Design berécksiichtegen), kann d'Design fir e méi enke Bildschierm eis d'Méiglechkeet ginn iwwer Zielberäicher fir Links an aner interaktiv Elementer nozedenken. . D'IOS Richtlinnen empfeelen datt dës op d'mannst 44 Pixel / Punkte Quadrat sinn, wat eng gutt Figur ass fir ze zielen.
- Navigatioun: Dëst wäert wuel deen onbequemenste Bestanddeel vun all reaktiounsfäeger Design sinn, besonnesch wann Äre Site vill Sektiounen an eng déif Hierarchie huet. De Brad Frost huet e Resumé vun e puer verschidden Approche fir d'Navigatioun geschriwwen, déi aktuell berécksiichtegt ginn.
- Iwwerflëssegen Inhalt: Ass e puer Inhalter net erfuerderlech? Muss een aneren Inhalt nëmmen a bestëmmten Zeenarie weisen? Ech plädéieren net fir Inhalt ze verstoppen baséiert op wéi engem Apparat e Benotzer zoufälleg benotzt, awer Techniken wéi bedingt Luede (déi mer spéider dës Woch kucken) kënnen eis hëllefen méi kleng Säiten ze servéieren déi nëmme komplementar Inhalt lueden wann néideg.
Design vun zwee kontrastéierende Layouten verstäerkt d'Iddi datt e Design sech upasst, wärend fréi potenziell Gotchas ausgestreckt gëtt. Wärend dëst kléngt wéi eng Verdueblung vun der Aarbecht, denkt drun datt mir net all Säit op eng Pixel perfekt Präzisioun entwéckelen. Amplaz, fokusséiere mir eis op d'Schafe vun enger skalierbarer Designsprooch - eng déi evoluéiere wäert wéi mir ufänken se am Code ëmzesetzen, an eng déi ronderëm eenzel Moduler a Komponente baséiert.
Layout agnostiker ginn
Net iwwerraschend, fir eng Industrie, déi den Internet historesch wéi gedréckt behandelt huet, hu fix Breet Layouten vill vun de Liwwerungen, déi mir produzéieren, duerchsicht. Wéi mir ufänke fir en adaptabelt Medium ze gestalten, ginn nei Approche berécksiichtegt, déi et erlaben Problemer ze léisen an Iddien ze vermëttelen, wärend déi flësseg Natur vum Medium unerkannt gëtt. Hei sinn e puer vu menge Favoritten:
- Säitebeschreiwungsdiagrammer: Wärend Wireframes dacks Layout kënnen implizéieren (an doduerch eng gewëssen Aart vun engem Apparat unhuelen), ewechhuelen d'Säitbeschreiwungsdiagrammer dës Virgab an amplaz déi eenzel Komponenten ze beschreiwen, déi am Dokument a Prioritéite arrangéiert sinn.
- Stil Plättercher: Wann Dir Design Iddien mat Clienten kommunizéiert, kënne mir eis presentéieren 'Biller vu Websäiten'. Wa mir net virsiichteg sinn, froen d'Clienten zu Recht Konzepter ze gesinn déi demonstréieren wéi en Design och op aneren Apparater ausgesäit. Dëst kann eis an eng onhaltbar Situatioun forcéiere fir méi Säite fir verschidde Geräter ze produzéieren. D'Samantha Warren huet sech Gedanken iwwer dëse Problem gemaach a koum mat Stilzillen. Dës sëtzen iergendwou tëscht engem Stëmmungsplang (awer manner vague) a voll realiséierter Comps (awer manner präzis), an hëllefen eis Typografie, Knäppestiler a Masthead Behandlungen ze vermëttelen. Si encouragéieren och e méi erwuessenen Diskussiounsniveau mat eise Clienten.
- Mobilify Design Spill: Dës Übung kann wierklech gutt funktionnéieren während kollaborative Design Workshops. An dëser Übung schreift jiddereen op Post-it Notizen déi Elementer déi op enger bestëmmter Säit optriede kënnen. Dës ginn dann un d'Mauer an der Wichtegkeetuerdnung hänke bliwwen, wéi wann se op engem Handy lineariséiert wieren. Déi doraus resultéierend Diskussioun kann e puer iwwerraschend Conclusioune generéieren. Zum Beispill kënnt Dir feststellen datt Navigatioun net dee wichtegste Bestanddeel op der Säit ass. Dëst kéint no dem Design verfollegen, wou e Skip Link uewen op der Säit op d'Navigatioun am Fousszeilen verlinkt.
Et ass nach ëmmer Plaz fir d'Tools déi mir natierlech scho benotzen, awer wann Dir eng Websäit a breede Begrëffer designt, musse mir am Kapp behalen datt de Layout net méi e bekannte bekannt ass.
Coding progressiv
Glécklecherweis brauche mir eis keng Gedanken iwwer de visuellen Design am Beispill ze maachen, wéi déi haart Aarbecht fir eis gemaach gouf! Amplaz kënne mir eis op d'Kodéierung vun eisem Design an eng voll reaktiounsfäeg Websäit konzentréieren.
Eng weider Saach ier mer ufänken. Et ass wichteg e Grondsazprinzip vum Medium mat deem mir schaffen ze erënneren: Universalitéit. Dat heescht net nëmme fir d'Web-fäeg Geräter vun haut ze bauen, awer och Kompatibilitéit mat deene vu gëschter a muer ze garantéieren. De John Allsopp huet beschriwwen firwat dëse Prinzip a sengem Post Déi nächst 6 Milliarde wichteg ass:
"Dës nächst sechs Milliarde si Kanner am ländlechen Indien, Afrika, China wou Zougang zu Kraaft, an Netzwierker intermitterend kënne sinn. Et ass een am Sumatra an enger Jorzéngt aler Wintel Box. Et si Leit déi Honnerte vu verschiddene Sprooche schwätzen, mat Dosende vu verschiddene Schreifsystemer. Et si Leit, déi déi éischt an hirer Famill sinn, déi kënne liesen a schreiwen. Et sinn déi 20 Prozent vu Leit weltwäit, déi net kënne liesen oder schreiwen.’
Mir kënnen eist Verständnis vum Internet verfollegen andeems mir déi verschidde Moudes kucken (fir e bessert Wuert ze wëllen) déi an eisem Beruff festgehalen hunn: Webstandarden, Zougänglechkeet, onopfälleg JavaScript ... alles si Varianten am selwechten Thema: progressiv Verbesserung. Dat selwecht ass wouer fir reaktiounsfäeger Webdesign. Fir e bauen wierklech reaktiouns Websäit ass e Site ze bauen deen net nëmmen no hannen kompatibel ass, awer och zukünfteg frëndlech ass.
Taucht an d'Mark-Up
Okay, genuch vum Preambel, et ass Zäit en Texteditor opzemaachen.Eisen Designer huet eis en Desktop-orientéiertem Design zur Verfügung gestallt, a war frëndlech genuch fir Beispiller ze ginn, wéi dëst och an engem enke Viewport erschénge kéint.
Et kéint ufälleg sinn dës separat ze kodéieren, awer ech ginn eng aner Approche vir. Duerch déi eenzel Komponenten - oder Musteren - déi den Design op enger eenzeger Säit ausmaachen, kënne mir e Musterportfolio erstellen. Dëst erlaabt eis Komponenten ausserhalb vun de Grenze vun all Säit Layout z'entwéckelen, a gëtt eis eppes fir méi spéit fir all Regressiounstest ze bezeechnen. Loosst eis den initialen Markup an e puer verschidden Apparater kucken:
Kuckt eist markéiert Musterportfolio
Gutt, ech wäert verdammt ginn - mir hu schonn eng reaktiouns Websäit! Eise Contenu passt sech un d'Grenze vun all Apparat un, sief dat e flotten neien iPad oder e verworfent Feature-Telefon. Et funktionnéiert souguer an engem Text nëmmen Browser wéi Lynx.
Dank den zugrënnenden Prinzipien vun der Universalitéit ass de Web reagéiert par défaut. Dat ass super, awer et heescht och datt alles wat mir de Code vun elo un maachen dës natierlech Adaptabilitéit kompromitt.
Muer: Mir trëppelen suergfälteg a fänken un den éischten Aspekt vum reaktiounsfäegen Design unzepassen: Typographie a Flëssegitter.
