Sisältö
- 1. Ableton
- 2. Adobe ja HTML
- 3. Tapahtuma lisäksi
- 4. BBC News
- 5. Rakenna 2012
- 6. Sisältö
- 7. CSS-temppuja
- 8. Currys
- 9. dConstruct 2012
- 10. Disney.com
- 11. Fray, numero 3
- 12. Gov.uk
- 13. Herokun tila
- 14. Lotta Nieminen
- 15. Microsoft
- 16. Monikulmio
- 17. mellakka
- 18. Laiha solmiot
- 19. Starbucks
- 20. Tattly
- 21. Seuraava verkko
- 22. Suunnittelun muoto
- 23. Aika
- 24. United Pixelworkers
- 25. Notre Damen yliopisto
Vuonna 2012 reagoiva web-suunnittelu meni todella valtavirtaan. Kaksi vuotta Ethan Marcotten A List Apart -artikkelin jälkeen se ei ollut enää vain käsite. Suuret tuotemerkit alkoivat omaksua sen, ja monet ovat edustettuina Roundupissa.
Olemme pyytäneet joitain reagoivan verkkosuunnittelun johtavia valoja - löydät luettelon artikkelin lopusta - valitsemaan suosikki reagoivat sivustot, jotka käynnistettiin viimeisten 12 kuukauden aikana, ja tässä he ovat keksineet. Se on vaikuttava sekoitus, joka vaihtelee henkilökohtaisista projekteista, jotka voivat vaeltaa ilman asiakkaan kaulassa hengittämistä, innovatiiviseen asiakastyöhön, kuten Microsoft, Disney, Currys ja Starbucks, sekä BBC: n The Seuraava verkko ja aika.
Tässä ne ovat aakkosjärjestyksessä:
1. Ableton
"En ole koskaan nähnyt Futuraa käytettyä niin rohkeasti!" huudahtaa suunnittelija, puhuja ja kirjailija Elliot Jay Stocks Edenspiekermannin teoksesta berliiniläiselle musiikkiohjelmistojen kehittäjälle Abletonille. "Se toimii kuitenkin yhdistettynä rohkeisiin kuviin ja eloisaan väripalettiin."
Stephanie Rieger, suunnittelija ja omistaja Yiibussa, Edinburghissa toimiva pienikokoinen mobiilisuunnittelukonsultti, on samaa mieltä: "Tämä on upea, hauska ja ilahduttava tuotemerkkisivusto. Sivuston osat ovat hieman raskaita, mutta antavat yleisölle , tuotemerkin luonne sekä tarve sisällyttää musiikkia ja videoita, luulen, että he ovat tehneet mahtavan työn. Muista etsiä monia pieniä luovia (ja käytännöllisiä) muotoiluja - kuten pyöriviä sarakeetikettejä ohjelmistojen vertailutaulukossa pienempiin näyttöihin. "
2. Adobe ja HTML
"Tämä sivusto, joka esittelee Adoben verkkoon liittyviä tuotteita, on itse asiassa enemmän mukautuva asettelu pikemminkin kuin todellinen reagoiva muotoilu ", selittää suunnittelija ja kehittäjä Stephen Hay." Suorituskykyä voitaisiin parantaa merkittävästi, enkä pidä siitä, että navigointi vie suurimman osan sivun yläosassa olevasta tilasta matkapuhelimessa. Siksi mainitsen tämän sivuston täällä on se, että sekä mukautuva asettelu että sisältöviesti, jonka Adobe, painosuunnitteluohjelmiston behemoth, on alkanut tunnustaa nykyaikaisen verkon ja sen suunnittelijoiden tarpeet. Adobella, jolla on suunnittelun juuret, on mahdollisuus muuttaa tämä sivusto graafisesti houkuttelevaksi, täydelliseksi reagoivaksi suunnitteluksi. "
3. Tapahtuma lisäksi
"Äskettäin uudistettu An Event Apart ei ole vain upea, vaan myös upeasti muotoiltu", kertoo Tim Kadlec, web-kehittäjä ja kirjan kirjoittaja. Reagoivan suunnittelun toteuttaminen. "[Kehittäjät] käyttävät SVG-kuvakkeita mahdollisuuksien mukaan ja palaavat takaisin PNG-tiedostoihin, jos heidän on pakko. Kuvat ladataan laiskasti, kun ne näkyvät. Esimerkiksi vierittäessäsi tapahtumasivua näet kaiutinkuvat hienovaraisesti kaikki tämä sekä houkutteleva ja puhdas muotoilu! "
4. BBC News
"Vuoden 2012 paras reagoiva sivusto oli BBC News -mobiilisivusto", kertoo Clearleftin suunnittelija ja .netin kuukausittaisen Responsive-sarakkeen kirjoittaja Paul Robert Lloyd. "Vaikka ulkoasu ei vielä ole skaalautunut työpöydän selaimiin, se on reagoiva sanan todellisessa merkityksessä.
"Suunniteltu mobiilin ensin-mentaliteetilla, se skaalautuu vastaamaan kauniisti laitteen eri ominaisuuksia. Se on loistava esimerkki progressiivisesta parannuksesta. Reagoivien kuvien ympärillä on paljon keskustelua, mutta BBC: n lähestymistapa on erittäin käytännöllinen. Merkinnät viittaavat vain yhteen kuvaan. , että otsikkotarinan ja ehdollisen lataamisen ansiosta vain paremmin kykenevät laitteet saavat erittäin optimoituja kuvia muille tarinoille. Sivusto ei ole pelkästään pääsy millä tahansa laitteella, vaan myös räjähtävän nopeasti.
"Ensi vuonna haluaisin nähdä enemmän keskittymistä suorituskykyyn visuaalisen suunnittelun ja ulkoasun suhteen. Tältä osin BBC News -mobiilisivusto on loistava esimerkki muille seurattaville."
5. Rakenna 2012
"Yksi suosikkini osuuksistani vuodessa on nähdä, mitä Andy McMillan ja Kyle Meyer keksivät uudelle Build-konferenssisivustolle", innostaa Reagan Ray, pääsuunnittelija ja kolmasosa Paravelista. "He suhtautuivat reagoivasti vuoden 2012 versioon, ja mielestäni se on heidän paras ponnistelunsa tähän mennessä. En voi odottaa, että voimme nähdä vuoden 2013."
Valitettavasti vuoden 2013 konferenssi on viimeinen koontiversio. Lue haastattelumme Andy McMillanin kanssa.
6. Sisältö
"Contents-lehdellä voi olla epäoikeudenmukainen etu Ethan Marcotten kanssa itse luovan johtajana - mutta kukaan ei sanonut, että minun valintojeni on oltava oikeudenmukaisia", kertoo Mat Marquis, suunnittelija / kehittäjä Filament Groupissa Bostonissa sekä Reagoivien kuvien yhteisön perustaja ja puheenjohtaja Ryhmä W3C: lle.
"Sisällöllä on kaunis typografia ja yleinen muotoilu, joka pitää sisällönsä - kuten voisi odottaa - edessä ja keskellä missä tahansa koossa. Suunnittelua tukevat lehden numerot, jotka ympäröivät kopiota eri tavoin murtumispisteestä riippuen. parantaa muotoilua, mutta älä koskaan häiritse sitä. On todellinen ilo lukea, ja oikeastaan tämä "web-suunnittelu" on kyse. "
7. CSS-temppuja
"Jälleen: Kun valitset sivuston, jossa on Chris Coyierin nimi, tuntuu vähän kuin huijata, mutta oikeudenmukainen messuilla - kaveri on peto, ja hän teki helvetin työtä uudelleensuunnittelulla", Mat Marquis nauraa. "Chris hallitsee mielettömän määrän hyödyllistä tietoa sivustollaan, ja hän tekee sen suunnittelulla, joka ei ole vain looginen ja käyttökelpoinen kaikilla ruuduilla, mutta jolla on paljon persoonallisuutta.
"Kunnianarvo mainitaan täällä Chrisin codepen.io-tiedostolle (ei vielä täysin reagoiva muokkauksessa), joka on uskomattoman hyödyllinen työkalu nopeiden demojen ja testitapausten luomiseen. Siellä on hämmästyttävää työtä."
8. Currys
"Currysillä ei ehkä ole sitä suunnittelun tasoa, jota meillä on monilla toimisto- ja henkilökohtaisilla sivustoilla, mutta valitsen sen sen merkityksen vuoksi, että se reagoi reagoivien suunnittelutekniikoiden laajempaan käyttöön. Se on ensimmäinen todella laajamittainen verkkokauppasivusto Olen nähnyt, että se on omaksunut reagoivan suunnittelun ", kertoo James Young, Offroadcoden luova johtaja ja julkaisun" Alkuun reagoivat verkkosuunnittelun ongelmat ... ja kuinka välttää niitä! ".
"Se tarjoaa hyvän kokemuksen useista laitteista ja käsittelee valtavaa määrää kaikenlaista sisältöä ja tuotteita, ja sisältää helppokäyttöisen ostoprosessin - kaikki yhdessä koodikannassa, joka on selkeästi otettu huomioon. Currys-verkkotiimi. "
9. dConstruct 2012
"Uskomattoman kaiutinkokoonpanon lisäksi dConstruct-sivusto itsessään on kauniisti muotoiltu reagoiva kokemus", sanoo pienen Ohiossa toimivan Sparkbox-viraston puheenjohtaja Ben Callahan. "Suosikkini sivuston yksityiskohdista on navigointi. Huomaa lisätty ikonografia pienemmän näkymäkokemuksen saamiseksi. Tämä osoittaa, että kosketuskohde-alueelle annettiin todellinen varovaisuus ja se merkitsee implisiittistä arvoa [sijoitettu] käyttäjille, jotka katselevat sivustoa pienemmillä laitteilla. - ensin mobiili-mentaliteetti.Hyvin tehty @clearleft! "
10. Disney.com
"Kun Disneyn media monimutkainen sivusto muuttui reagoivaksi, se todella osoitti lähestymistavan pätevyyden multimediasisällön toimittamiseksi verkkoon", muistelee Scott Jehl, Filament Groupin verkkosivujen suunnittelija / kehittäjä. "Sivuston aliarvioitu, puhdas muotoilu korostaa Disney-elokuvien ja television rikkaita kuvia, joita voidaan katsella sivustossa, sekä Ajaxin ja historia.pushState tekee hienovaraisista, mutkattomista sivusiirtymistä. Sivusto kertoo myös mukavaa asiayhteyteen liittyvää vuorovaikutteisuutta, kuten kosketuslaitteiden eleohjatut karusellit ja sivun työntäminen navigoinnista pienillä näytöillä. "
11. Fray, numero 3
"Numero 3 of the Fray," verkon alkuperäinen tarinankerronta-lehti ", oli suosikkini reagoiva muotoilu, jonka näin tänä vuonna, ja ehkä suosikkini koskaan", muistelee Scott Jehl. "Sen kauniin reagoivan kansisuunnittelun lisäksi, jossa kansikuvan muotoiluelementtejä käytetään uudelleen koko asettelussa, jokaisella lehden artikkelilla on oma ainutlaatuinen mukautettu taiteellinen suunnitelma, aivan kuten näemme painetuissa lehdissä, mutta harvemmin verkossa. Monet asettelut sisältävät hienosti viritetyn CSS: n kauniiksi, kuten "Braces" -artikkelin vinon otsikon ja viivan, ja tasoittavat pulloteet kaikkialla. Vain varoitus: sivuston aihe on suunnattu aikuisille. "
12. Gov.uk
Stephen Hay sanoo: "Gov.uk-suunnittelu on visuaalisesti yksinkertainen (käytännössä ei kuvia), mutta on selvää, mikä sen tarkoitus on: auttaa sinua löytämään tietoa nopeasti. Hallituksen verkkosivustoille tämä ei ole helppo tehtävä. Rakastan, että tämä sivusto on paitsi reagoiva, myös täydellinen esimerkki siitä, kuinka hyvin harkittu sisältö ja rakenne voivat johtaa selkeämpään käyttökokemukseen käytetystä laitteesta riippumatta. On niin tärkeää, että viranomaiset esittelevät tietonsa helposti; olen varma, että tämän sivuston yksinkertaisuus on esimerkki, jota muut hallitusjärjestöt seuraavat. "
13. Herokun tila
"Heroku on verkkosovellusten käyttöönottopalvelu, joten tämä sivusto on vinossa kohti hyvin teknistä yleisöä", sanoo Scott Jehl toisesta valinnastaan. "Herokun tilasivusto on vain paikka palvelun käyttöajan seurannalle, ja siinä on tilailmoituksia kaikista nykyisistä tapahtumista ja raporttien aikataulu. Pienellä näytöllä esitys on konservatiivinen, mutta erittäin toimiva ja semanttisesti rikas, ja siinä on puhdas muotoilu. , laajemmissa näkymissä aikajana muuttuu vertikaaliseksi tietojen visualisoinniksi, jossa tapahtumat ruudutetaan ja linkitetään ajankohtiin kaarevilla HTML5-kankaalle piirretyillä viivoilla, mikä tekee sisällöstä houkuttelevamman. "
14. Lotta Nieminen
"Lottan älykäs sivusto kannustaa etsintään, koska näytön vasen ja oikea puoli kiusaa vierekkäisten osien sisältöä", innostaa Elliot Jay Stocks. "Odotin puoliksi, että tämä rikkoutuu eri leveydellä, mutta käyttäytyminen pysyy jatkuvasti tasaisena ja yhdistää mediakyselyt JavaScriptiin yksittäisten sarakkeiden pinoamiseksi ja koon muuttamiseksi järkevästi."
15. Microsoft
"Uusi Microsoft-sivusto on minulle mielenkiintoinen monista syistä", Ben Callahan paljastaa. "Microsoftin kaltaisen jättiläisen näkeminen reagoivan verkkosuunnittelun takana tällä tavalla osoittaa todella kuinka pitkälle olemme menneet kahden viime vuoden aikana. Suunnittelu kattaa selvästi Metro-tyylin ja antaa meille puhtauden ja tilan, joka puuttuu useimmista yrityssivustot. Siellä on myös huomattava määrä navigointia, mikä voi olla todellinen haaste tehdä käyttökelpoiseksi monenlaisissa näkymissä ja vuorovaikutusmalleissa. Rakastan sitä, että pudotusvalikot ovat takana klikkaus tai kosketus [tapahtumat] toisin kuin : hiiren osoitin. Uskon, että näemme paljon enemmän tästä lähitulevaisuudessa, jopa suuremmilla päätöslauselmilla. Hyvin tehty @paravelinc! "
Sivustolla työskennellyt Reagan Ray sanoo: "Trent ja Dave ovat liian vaatimattomia Paravelin sarven tuottamiseen, joten aion tehdä. Olimme iloisia voidessamme pelata pienen osan Microsoftin niin jännittävässä ajassa. Mielestäni se on hieno esimerkki. suuren yrityksen omaksuvan reagoivan suunnittelun. "
16. Monikulmio
"Polygon on mielettömän rikas reagoiva pelisivusto, joka häpäisee isoveljensä (IGN, Gamespot ja niin edelleen)", kehuu Dave Rupert, Paravelin pääkehittäjä ja ShopTalkin isäntä Chris Coyierin kanssa. "Suuri grafiikka saa pelaajan aistien kihelmöimään. Sisätilat ovat hämmästyttävä sekoitus taidetta ja reagoivaa arkkitehtuuria."
17. mellakka
Elliot Jay Stocks kommentoi: "Yksinkertaiset, keskitetyt, yhden sivun sivustot saattavat tuntua siltä, että ne kääntyvät helposti reagoivaan suunnitteluun, mutta vaatii taitoa, harkintaa ja tarkkaa silmää, jotta kaikki sopeutuu saumattomasti. Riotin sivusto tekee juuri sen."
18. Laiha solmiot
"Vaikka minulla ei ole mitään laihoja siteitä, lukuun ottamatta kourallista 80-luvun jäännöksiä, jotka on sijoitettu jonnekin säilytyslokeroon, uskon, että tämä sivusto on toteutettu kauniisti", sanoo Ben Callahan. "On myös rohkaisevaa nähdä, että reagoivia tekniikoita käytetään monimutkaisemmilla sivustoilla: tässä tapauksessa verkkokaupan kokemus. Tämän sivuston navigointi on ainutlaatuinen kaikissa näkymän tarkkuuksissa, mutta toimii poikkeuksellisen hyvin taajuuksien pienessä päässä. Sen visuaalinen luonne on täysin järkevä tämän kokoiselle myymälälle ja se on edelleen käyttökelpoinen tuotteen käytöstä huolimatta : hiiren osoitin kosketuslaitteissa. Hyvin tehty @falkowski! "
19. Starbucks
"Reagoiva Starbucks.com on loistava, mutta mikä on meille entistä inspiroivampaa, on sen mukana tuleva verkkopohjainen tyyliopas", Paravelin perustaja Trent Walton huomauttaa. "Se välittää juoksevan / reagoivan asettelun voiman paljon paremmin kuin .psd tai .pdf voi."
20. Tattly
"Olen juuri sisällyttänyt tähän luetteloon vaarallisen aikahyödyn", varoittaa Mat Marquis tästä väliaikaisesta tatuointisivustosta, joten pyydän anteeksi etukäteen sinua ja / tai pomoasi. Olen polttanut kiusallisen paljon aikaa selatessani suunnittelee Tattlylle eri laitteilla, enkä koskaan jätä haluamaan kokemusta, jonka saan vain tietyllä katkaisupisteellä. He ovat tehneet hienoa työtä varmistaen, että heidän verkkosivustonsa kääntyy hyvin valtavaksi valikoimaksi laite- / ikkunakokoja, ja ehkä vielä tärkeämpää on, että ne tarjoavat minulle varmuuden tavan saada minut näyttämään pahalta. Tiedät, muutaman päivän kerrallaan, joka tapauksessa. "
21. Seuraava verkko
"Vaikka en vieläkään ole fani tarttuvasta sivupalkista, tämä sivusto on melko hämmästyttävä", Dave Rupert myöntää. "Tila ja typografia luovat todella rennon ympäristön. Olen iloinen helpotuksesta, kun vierailen TNW: llä tabletilla: sillä on hieno tunne ja hyvä lukukokemus."
22. Suunnittelun muoto
"Frank Chimeron omaksuminen reagoivasta lukukokemuksesta on inspiroivaa kaikilla tasoilla", Trent Walton sanoo. "Hänen online-versionsa The Shape of Designista on ilo lukea. Esteettömän luvun navigointi toimii hyvin ja media-kysely Fonttikoko skaalaus pitää kaiken ihanan verrannollisena. "
23. Aika
"The Boston Globe -näytön seurauksena Time on toteuttamisensa ansiosta leimattu reagoivien uutissivustojen maailmassa", suosittelee Stephen Hay. "Se, että maailmassa on yksi vähemmän uutissivustoa, joka tarjoaa meille linkin" koko verkkosivustolle "mobiililaitteilla, on jo tarpeeksi, mutta sivusto näyttää todella hyvältä mobiililaitteilla: se on aika-identiteetti läpi ja läpi. Jotkut teksti saattaa olla hiukan pieni joillakin laitteilla, mutta kehittäjät ovat jättäneet skaalauksen: aina hyvä idea. Joitakin vaiheita voidaan parantaa suorituskyvyn suhteen, kuten skaalattujen kuvien näyttäminen [mutta] se on kuitenkin askel oikeaan suuntaan. "
24. United Pixelworkers
"Olen fani United Pixelworkersin rohkeasta yksinkertaisuudesta ja vankka ruudukon asettelu ja navigointikäsittely pienille näytöille toimii hyvin", sanoo James Young. "Kuten Currys-sivustossakin, tämä on verkkokauppasivusto, jonka avulla päätehtäväni - herkkujen ostaminen - on helppo suorittaa millä tahansa laitteella.
"On sääli, että hyppäät Shopifysta loppuun ostoksesi, ja haluaisin nähdä pian ainakin tuotemerkkikassan valmistumissivun, mutta t-paitojesi ostaminen on silti erittäin helppoa."
"Reagoiva verkkokauppa on vaikeaa, mutta Pixelworkers näyttää olevan selvittänyt sen", lisää Dave Rupert. "Loistava kotisivu, upeat tuotesivut, hyvä kassavirta. Jos etsit, luo upea reagoiva verkkokauppasivusto, tämä on sinun palkkisi."
25. Notre Damen yliopisto
"Rakastan joitain asioita, joita Notre Damen yliopisto on käynnissä konepellin alla", raivoaa Tim Kadlec. "Se käyttää RESS-toimintoa pienentääkseen sivun painoa pienillä näytöillä. Se käyttää myös maantieteellistä sijaintia kampuskiertueominaisuuden parantamiseen. Jos sivusto havaitsee, että olet kampuksella, se tunnistaa lähimmät sijainnit ja tarjoaa kävelyohjeet. Se on hyödyllinen tapa käyttäjän kontekstin ja laitteen ominaisuuksien käyttäminen kokemuksen parantamiseksi. "
Paljon kiitoksia kaikille avustajillemme siitä, että he valitsivat tämän artikkelin vuoden 2012 suosikki reagoivat sivustot: Ben Callahan, Elliot Jay Stocks, Tim Kadlec, Paul Robert Lloyd, Mat Marquis, Scott Jehl, Stephanie Rieger, Stephan Hay, James Young ja koko Paravelista: Trent Walton, Dave Rupert ja Reagan Ray.
Toivomme, että olet saanut inspiraation tarkistaa joitain sivustoja. Kerro meille, mitä mieltä olet valinnastamme kommenteissa ja mitkä sivustot olivat omia suosikkejasi tänä vuonna.
