Kontrolė, kuri dizaineriai žino į spausdinimo terpę, ir dažnai nori į interneto terpę, yra tiesiog apie išspausdintame puslapyje ribojimo funkcija. Mes turime priimti tai, kad interneto neturi tuos pačius apribojimus ir dizainas šį lankstumą. Bet pirmiausia, turime „priimti atoslūgis ir srauto dalykų.“

Anglų architektas Christopher Wren kartą pašmaikštavo, kad jo pasirinktas laukas „siekia Eternity“ ir kažkas patraukli apie šios formulės: Skirtingai nuo interneto, kurie dažnai jaučiasi kuria kitą savaitę, architektūra disciplina labai apibrėžia jo pastovumo.

Pastato pamatai apibrėžia savo pėdsaką, kuris apibrėžia savo rėmelį, kuris formuoja fasadas. Kiekvienas architektūros proceso etapas yra nekintamas, daugiau nekintanti nei paskutinis. Kūrybiniai sprendimai gana pažodžiui formuoti fizinę erdvę, nustatant būdą, kuriuo žmonės juda per savo ribų dešimtmečius ar net šimtmečius.

Darbas internete, tačiau yra visiškai skirtingas dalykas. Mūsų darbas yra apibrėžiama pagal jos laikinumą, dažnai rafinuoti arba pakeisti per metus ar du. Prieštaringi lango plotį, ekrano rezoliucijas, vartotojų teikiama pirmenybė, ir mūsų vartotojų įdiegti šriftai, bet iš nematerialiojo turto nedaug deramės, kai mes skelbti mūsų darbą, ir per metus, mes tapo neįtikėtinai sugeba daryti.

Tačiau kraštovaizdis keičiasi, galbūt greičiau, nei mes galime patinka. Mobili naršyti tikimasi pralenks darbalaukio prieigą per tris iki penkerių metų . Du iš trijų dominuojančių vaizdo žaidimų pultai turi interneto naršykles (ir vienas iš jų yra gana gerai). Mes projektavimas pelėms ir klaviatūroms, T9 klaviatūros, nešiojamų žaidimų valdikliai, sensoriniu sąsajos. Trumpai tariant, mes susiduriame su didesniu skaičiumi prietaisų, įvesties režimais, ir naršyklių, nei kada nors anksčiau.

Pastaraisiais metais, aš susitiko su daugiau bendrovių, kurios prašo „iPhone svetainę“, kaip dalį savo projektą. Tai įdomi frazė: Iš pirmo žvilgsnio, žinoma, jis kalba mobiliuoju WebKit kokybę naršyklėje, taip pat galingas verslo CASE galvoti už stalo. Tačiau, kaip dizaineriai, aš manau, kad mes dažnai džiaukis tokias aiškias reikalavimus, nes jie leidžia mums skaldo problemas prieš mus. Mes galime karantino mobili patirtis atskirų subdomenas tarpai skirtingas ir atskiras nuo „ne“ iPhone „interneto svetainėje.“ bet kas toliau? IPad svetainėje? N90 svetainėje? Ar mes tikrai toliau įsipareigoti remti kiekvieną naują vartotojo agentas su savo užsakymą patirties? Tam tikru momentu, tai pradeda jaustis kaip nulinės sumos žaidimas. Bet kaip mes galime ir mūsų dizaino-prisitaikyti?

Lankstus pagrindas

Leiskite apsvarstyti pavyzdys dizainas . Aš sukūrėme paprastą puslapį hipotetinis žurnalo, tai paprasta dviejų stulpelių išdėstymas pastatytas ant skysčio tinklo , su ne kelių lanksčių vaizdų pagardai visoje. Kaip ilgą laiką šalininkas ne fiksuoto išdėstymo, aš seniai jautė jie buvo labiau „ateities įrodymas“, nes jie tiesiog buvo išdėstymas agnostikas. Ir tam tikra prasme, tai tiesa: lankstus dizainas nedaryti prielaidų apie narðyklës lango pločio ir prisitaikyti gražiai įrenginius, turinčius portreto ir kraštovaizdžio režimai.

Bet ne dizainas, fiksuoto arba skystosioms, svarstyklės sklandžiai nepriklausančių aplinkybių, dėl kurių ji buvo iš pradžių tikėtasi. Šie pavyzdžiai dizaino svarstyklės puikiai bei naršyklės lango didinama, bet stresas taškai greitai pasirodys mažesnės rezoliucijos. Žiūrint peržiūros mažesnio kaip 800 × 600, už logotipas iliustraciją greitai tampa apkarpyti, navigacijos tekstą galima susivynioti į nepadorus būdu, o palei dugną vaizdai pernelyg kompaktiškas pasirodyti įskaitomi. Ir tai ne tik Apatinė rezoliucijos spektro tai įtakos: žiūrint dizaino plačiaekranis ekranas, vaizdai greitai augti griozdiškas dydžių, išstūmimo supantį kontekstą. 

Trumpai tariant, mūsų lanksti projektavimo darbus pakankamai gerai darbalaukyje orientuotas kontekste, dėl kurių ji buvo sukurta, bet nėra optimizuota išplėsti toli už tai.

Tapimas reaguoja

Neseniai besiformuojanti disciplina vadinama „reaguoja architektūra“ pradėjo klausia, kaip fizinės erdvės gali reaguoti į žmonių, kertančių jų buvimą. Per įterptųjų robotų technikos ir tempimo medžiagų derinys, architektai eksperimentuoti su meno įrenginių ir sienų konstrukcijų kad lenkimo, Flex ir plėstis kaip minios požiūris jiems. Judesio jutikliai gali būti suporuotas su klimato kontrolės sistemų reguliuoti kambario temperatūrą ir aplinkos apšvietimo, nes ji prisipildo žmonių. Įmonės jau pagamintas „Smart stiklo technologiją“, kuri gali automatiškai tapti nepermatomos , kai kambario keleiviai pasiekti tam tikrą tankio ribos, suteikiant joms papildomą sluoksnį privatumą.

Savo knygoje „Interaktyvioji Architektūros Michael Fox Miles Kemp aprašė šį imlesnės požiūrį kaip“ daugkartinio ciklo „sistemą, kurioje vienas patenka į pokalbį;. Nuolatinis ir konstruktyvus keitimąsi informacija“ dėmesys mano, kaip aš manau, kad tai subtilus, bet galingas skirtumas: o ne kurti nekintamas, pastovūs erdves, kurios apibrėžia tam tikrą patirtį, jie rodo, gyventojas ir struktūra gali ir turi-abipusiai veikia vienas kitą.

Tai yra mūsų kelias į priekį. Užuot siuvimo atjungtas dizaino kiekvienam vis daugėja interneto prietaisus, mes galime traktuoti jas kaip aspektų tos pačios patirtį. Galime suprojektuoti optimalaus žiūrėjimo patirtį, bet įdėti standartais paremtas technologijas į mūsų dizaino, kad jie ne tik lankstesnės, bet imlesnės žiniasklaidoje, kad teikia juos. Trumpai tariant, mes turime praktikuoti reaguoja web dizainas. Bet kaip?

Susipažinkite su žiniasklaidos užklausą

Kadangi CSS 2.1 dienų, mūsų stiliaus lapus patiko kai prietaisas sąmoningumo priemonę per žiniasklaidos rūšių . Jeigu jūs kada nors parašyta spausdinimo stilių , jūs jau esate susipažinę su sąvoka:

 <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />

Tikisi, kad mes norime būti projektavimo daugiau nei tvarkingai suformatuoti puslapis spaudinių, CSS specifikacija pateikiama mums su Bars priimtino žiniasklaidos rūšių , kurių kiekviena skirta nukreipti konkrečios klasės interneto paruoštas prietaiso. Tačiau dauguma naršyklių ir prietaisų niekada apkabino specifikacijos dvasią, paliekant daug žiniasklaidos rūšių įgyvendinama netobulai , arba apskritai ignoruojami.

Laimei, W3C sukūrė žiniasklaidos užklausas kaip dalis CSS3 specifikacijos, gerinant nuo žiniasklaidos tipų pažadą. Žiniasklaidos užklausos leidžia mums nukreipti ne tik tam tikrų įrenginių klasių, bet iš tiesų tikrinti fizinių savybių prietaiso padaryti mūsų darbą. Pavyzdžiui, po neseniai auga mobiliojo WebKit, žiniasklaidos užklausas tapo populiarus kliento pusėje technika už perduodamą pritaikytą stilių į iPhone, Android telefonai ir jų ilk. Norėdami tai padaryti, mes galime įtraukti užklausą į link k Style Sheet yra media atributas:

 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

Prašymas yra du komponentus:

1. laikmenos tipas ( screen ), ir
2. Tikrasis užklausą uždara skliausteliuose, su tam tikru žiniasklaidos funkcija ( max-device-width ) tikrinti, po tikslinės vertės ( 480px ).

Aiškia anglų kalba, mes prašome prietaisą, jeigu jos Horizontali raiška ( max-device-width ) yra lygus arba mažesnis nei 480px . Jei patikra pavyko, kitais žodžiais tariant, jei mes žiūrite mūsų darbą dėl mažo ekrano prietaiso kaip iPhone tada prietaisas bus įkelti shetland.css . Priešingu atveju, link yra apskritai ignoruojama.

Dizaineriai eksperimentavo su raiška-Aware maketai praeityje, daugiausia remiasi JS varomo sprendimų, pavyzdžiui, Cameron Adams „puikų scenarijų . Tačiau žiniasklaida užklausą specifikacija suteikia daug žiniasklaidos funkcijų priimančiosios kuri tęsiasi toli už ekrano rezoliuciją, labai išplėsti, ką mes galime patikrinti, su mūsų užklausas taikymo sritį. Kas daugiau, galite išbandyti keletą ypatybių reikšmes į vieną užklausą, susiejami juos kartu su and raktažodžio:

 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

Be to, mes ne tik įtraukti žiniasklaidos užklausas mūsų link s. Mes galime įtraukti juos į mūsų CSS arba kaip dalis @media taisyklę:

 @media screen and (max-device-width: 480px) { .column { float: none; } }

Arba kaip dalis @import direktyvos:

 @import url("shetland.css") screen and (max-device-width: 480px);

Tačiau kiekvienu atveju poveikis yra tas pats: Jei prietaisas pereina testus pasidengti mūsų žiniasklaidos užklausą, susijusi CSS taikomas mūsų žymėjimui. Žiniasklaidos užklausos yra, trumpai tariant, sąlyginės komentarus dėl mums visiems. Užuot nukreipti tam tikrą versiją konkrečiu naršykle, mes galime chirurginiu būdu spręsti problemas su mūsų išdėstymo nes ji svarstyklės, viršydami savo pradinio, idealiai rezoliucijos.

Pritaikyti reaguoti, ir įveikti

Leiskite savo ruožtu mūsų dėmesį į ne mūsų puslapyje bazę vaizdus. Savo numatytąjį išdėstymą, svarbu CSS šiuo metu atrodo taip:

 .figure { float: left; margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */ width: 31.121642969984202211%; /* 197px / 633px */ }li#f-mycroft, li#f-winter { margin-right: 0; }

Aš praleisti daug tipografinių savybių skaičių sutelkti dėmesį į išdėstymo: Kiekvienas .figure elementas yra parenkamas ne maždaug trečdalį sudėtyje stulpelyje su dešinėje marža nulis už dviejų paveikslėlių kiekvienos eilutės pabaigoje ( li#f-mycroft, li#f-winter ). Ir tai veikia gana gerai, kol peržiūros sritis yra arba gerokai mažesnis arba didesnis už mūsų originalaus dizaino. Su žiniasklaidos užklausas, mes galime taikyti rezoliucijos konkrečių spotfixes, pritaikant mūsų dizainas geriau reaguoti į pasikeitimus ekrane.

Pirmiausia, tegul linearize mūsų puslapyje kartą peržiūros srities nukritus žemiau tam tikros rezoliucijos riba-tarkim, 600px . Taigi ne mūsų stiliaus lapo apačioje, galime sukurti naują @media blokas, štai taip:

 @media screen and (max-width: 600px) { .mast, .intro, .main, .footer { float: none; width: auto; } }

Jei jūs peržiūrite mūsų atnaujintą puslapį modernaus kompiuterio naršyklėje ir sumažinti savo lange žemiau dydis 600px , žiniasklaidos užklausa išjungti plūdės nuo dizaino pagrindinių elementų, krovimas kiekvieną bloką ant kito į dokumentų srautas. Taigi, mūsų miniatiūrines dizainas formuoja gražiai, bet vaizdai vis dar susiaurinti, kad protingai. Jei mes pristatome kitos medijos užklausą, mes galime pakeisti jų išdėstymą atitinkamai:

 @media screen and (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 48.341232227488151658%; /* 306px / 633px */ } li#f-watson, li#f-moriarty { margin-right: 0; } }

Ar ne tai negražus procentais; mes tiesiog perskaičiuojant į plotį skysčio tinklą , siekiant atsižvelgti į naujai linearized maketą. Trumpai tariant, mes pereiti nuo trijų stulpelių išdėstymo dviejų stulpelių maketą , kai peržiūros plotį mažesnis nei 400px, todėl vaizdai ryškesni. 

Mes iš tikrųjų gali laikytis tokio paties požiūrio dėl plačiaekranių monitorių, taip pat. Dėl didesnių rezoliucijų, mes galime priimti šešių visoje gydymą mūsų vaizdus, pateikiant juos visus toje pačioje eilutėje :

 @media screen and (min-width: 1300px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 13.902053712480252764%; /* 88px / 633px */ } }

Dabar mūsų vaizdai dirba gražiai abiejuose rezoliucijos spektro galuose , optimizuoti jų išdėstymo pakeitimus langų pločių ir prietaiso geba vienodai.

Bet tai tik pradžia. Darbas iš žiniasklaidos užklausas mes įterptųjų mūsų CSS,mes galime pakeisti daug daugiau nei kelių vaizdų rodymą: galime pristatyti naujus, pakaitinius maketai pritaikyti kiekvieno rezoliucijos diapazoną, galbūt todėl navigaciją ryškesnis plačiaekranis nuomone, ar perskirstymas jį virš dėl mažesnių ekranų logotipu. 

Bet reaguoja dizainas yra ne tik išdėstymo pakeitimus. Žiniasklaidos užklausos leidžia mums praktikuoti tam tikrą neįtikėtinai tiksliai koregavimo mūsų puslapiuose pertvarkyti save: mes galime padidinti tikslinę zoną ant nuorodos mažesnių ekranų, geriau laikytis Fitso dėsnio palietus įrenginių; pasirinktinai rodyti arba slėpti elementus, kurie gali padidinti puslapio navigaciją, galime net praktiškai reaguoja mašininis palaipsniui pakeisti dydį ir pirmaujanti mūsų tekste, optimizuoti skaitymo patirtį teikiantis jį. 

Po kelių techninės pastabos

Reikėtų pažymėti, kad žiniasklaidos užklausas mėgautis neįtikėtinai tvirtą paramą tarp šiuolaikinių naršyklių. Staliniai naršyklių, tokių kaip Safari 3 + Chrome „,“ Firefox 3.5 + „ir“ Opera 7 + ŪLL gimtoji išanalizuoti žiniasklaidos užklausas, kaip ir naujesnes mobiliųjų naršyklių, tokių kaip „Opera Mobile“ ir mobiliojo WebKit „. Žinoma, senesnės versijos šių kompiuterių naršyklėms nepalaiko žiniasklaidos užklausas. Ir nors „Microsoft“ įsipareigojo žiniasklaidos užklausą paramos IE9 , Internet Explorer „šiuo metu nesiūlo gimtoji įgyvendinimą.

Tačiau, jei jus domina įgyvendinant palikimas naršyklės paramą žiniasklaidos užklausas, yra Javaskriptą, tonuotas sidabro pamušalas:

• JQuery įskiepiai nuo 2007 siūlo šiek tiek ribotą medijos užklausos paramą, įgyvendinant tik min-width ir max-width žiniasklaidos savybes, kai pridedamas prie atskirų link elementais.
• Visai neseniai, CSS3-mediaqueries.js buvo išleista, biblioteka, kuri žada „padaryti IE 5 +, Firefox 1 +“ ir „Safari“ 2 skaidriai apdoroti, bandymo, ir taikomas css3 žiniasklaidos užklausas „, kai įtrauktas per @media blokus. Nors labai daug 1.0 laida, aš asmeniškai rasti, kad ji būtų gana tvirtas, ir aš planuoju žiūrėti jo plėtrą.

Tačiau, jei naudojate „JavaScript“ nėra kreipiamės, tai visiškai suprantama. Tačiau, kad stiprėja, statybos maketą viršuje lanksti tinklo , užtikrinant, jūsų projektas turi tam tikrą lankstumą žiniasklaidai užklausą aklų naršyklių ir prietaisų priemonę.

Kelias pirmyn

Skysčių grotelės, lankstūs vaizdai ir žiniasklaidos užklausas yra trys techniniai ingredientai reaguoja web dizainas, bet ji taip pat reikalauja skirtingo mąstymo būdo. Užuot karantiną mūsų turinį į skirtingų, prietaisas konkrečių patirtimi, mes galime naudoti žiniasklaidos užklausas palaipsniui pagerinti mūsų darbą per skirtingų žiūrėjimo kontekstuose. Tai nereiškia, kad nėra verslo atveju skirtingas vietas nukreiptos į konkrečius prietaisus, pavyzdžiui, jei vartotojas tikslai mobilųjį svetainėje yra labiau ribota nei darbastalio ekvivalentu, tada tarnauja kitoks turinys kiekvienas gali būti geriausias požiūris.

Bet tai dizaino mąstymas nebūtinai turi būti mūsų nutylėjimą. Dabar labiau nei bet kada, mes kuriame darbas skirtas būti peržiūrėtas išilgai skirtingos patirties nuolydžiu. Patvirtinantys web dizainas suteikia mums kelią į priekį, galiausiai leidžia mums „dizainas atoslūgis ir srauto dalykų.“