25 parasta reagoivaa verkkosivustoa

Vuonna 2012 reagoiva verkkosuunnittelu meni todella valtavirtaan. Kaksi vuotta sen jälkeen Ethan Marcotten keskeinen artikkeli A List Apartista , se ei ollut enää vain käsite. Olemme pyytäneet joitain johtavia valoja sisään reagoiva web-suunnittelu - Löydät luettelon artikkelin lopusta - voit valita parhaat reagoivat verkkosivustot, jotka ovat käynnistäneet viimeisten 12 kuukauden aikana, ja tässä on mitä he ovat keksineet.

Se on vaikuttava sekoitus, joka vaihtelee henkilökohtaisista projekteista, jotka voivat vapaasti vaeltaa ilman, että asiakas hengittää kaulassaan, innovatiiviseen asiakastyöhön, kuten Microsoft, Disney, Currys ja Starbucks, sekä BBC: n, The Seuraava verkko ja aika. Tässä he ovat aakkosjärjestyksessä ...



01. Ableton

'En ole koskaan nähnyt Futuraa niin rohkeasti käytettynä!' huudahtaa suunnittelija, puhuja ja kirjailija Elliot Jay Varastot / Edenspiekermann työ Berliinissä asuvan musiikkiohjelmiston kehittäjän hyväksi Ableton . 'Se toimii kuitenkin yhdistettynä rohkeisiin kuviin ja eloisaan väripalettiin.'



Paras reagoiva verkkosivusto: Ableton

Stephanie Rieger , suunnittelija ja yhteisomistaja Yiibu Edinburghissa toimiva pieni mobiilisuunnittelukonsultti on samaa mieltä: 'Tämä [on] upea, hauska ja ilahduttava tuotemerkkisivusto. Osa sivustosta on hieman raskas, mutta mielestäni he ovat tehneet mahtavaa työtä, kun otetaan huomioon yleisö, tuotemerkin luonne sekä tarve sisällyttää musiikkia ja videoita. Muista etsiä monia pieniä luovia (ja käytännöllisiä) muotoiluja - kuten pyöriviä saraketarroja ohjelmistojen vertailutaulukossa, jotta ne sopivat paremmin pienempiin näyttöihin. '



02. Adobe ja HTML

' Tämä sivusto, joka esittelee Adoben verkkoon liittyviä tuotteita , on oikeastaan ​​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.

Paras reagoiva verkkosivusto: Adobe ja HTML

Siksi mainitsen tämän sivuston täällä on se, että sekä mukautuva asettelu että sisällön signaali, jonka Adobe, painosuunnitteluohjelmiston behemoth, alkaa tunnustaa nykyaikaisen verkon ja sen suunnittelijoiden tarpeet. Adobella, jolla on suunnittelun juuret, on mahdollisuus muuttaa tämä sivusto graafisesti houkuttelevaksi, täydelliseksi reagoivaksi suunnitteluksi. '



kuinka maalata märälle märälle öljylle

03. Tapahtuma lisäksi

'Äskettäin uudistettu Tapahtuma lisäksi on paitsi upea myös upeasti muotoiltu ”, sanoo Tim Kadlec , web-kehittäjä ja kirjoittaja Reagoivan suunnittelun toteuttaminen . '[Kehittäjät] käyttävät SVG-kuvakkeita, kun he voivat, ja palaavat takaisin PNG: iin, jos heidän on pakko.

Paras reagoiva sivusto: Tapahtuma

Kuvat ovat laiskoja ladattaessa, kun ne tulevat näkyviin. Esimerkiksi kun vierität alas tapahtumasivu näet kaiuttimien kuvien hiukan hiipuvan. Kaikki tämä sekä houkutteleva ja puhdas muotoilu! '

04. BBC News

'' Vuoden 2012 paras reagoiva sivusto oli BBC News mobiilisivusto , sanoo Paul Robert Lloyd , suunnittelija Clearleft ja .netin kuukausittaisen Reagoiva-sarakkeen kirjoittaja. 'Vaikka se ei vielä ole skaalautunut työpöydän selaimiin asettelun suhteen, se on reagoiva sanan todellisessa merkityksessä.

Paras reagoiva verkkosivusto: BBC News

'Suunniteltu mobiilin ensin-mentaliteetilla, se skaalautuu vastaamaan kauniisti eri laitteen 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, otsikkotarinaa varten, ja ehdollinen lataaminen tarkoittaa, että vain tehokkaammat laitteet vastaanottavat erittäin optimoituja kuvia muita tarinoita varten. Sivusto ei ole käytettävissä vain millä tahansa laitteella, mutta myös nopeasti.

'' Seuraavan vuoden aikana haluaisin nähdä enemmän huomiota suorituskykyyn verrattuna visuaaliseen suunnitteluun ja ulkoasuun. Tältä osin BBC News -mobiilisivusto on loistava esimerkki muille seurattaville. '

05. Rakenna 2012

'' Yksi suosikkini osuuksistani vuodessa on nähdä, mitä Andy McMillan ja Kyle Meyer keksivät uudelle Rakenna konferenssisivusto , innostaa Reagan Ray , pääsuunnittelija ja kolmasosa Paravel .

Paras reagoiva verkkosivusto: Rakenna

`` He menivät reagoimaan vuoden 2012 versioon, ja mielestäni se on heidän paras ponnistelunsa tähän mennessä. ''

06. Sisältö

' Sisältö-lehti voi olla epäoikeudenmukainen etu itse Ethan Marcotten kanssa heidän luovana johtajana - mutta kukaan ei sanonut, että minun valintojeni on oltava oikeudenmukaisia ​​'', Mat Marquis , suunnittelija / kehittäjä työskentelee Filament Group Bostonissa ja. perustaja ja puheenjohtaja Reagoivien kuvien yhteisöryhmä W3C: lle.

Paras reagoiva verkkosivusto: Sisältö


'Sisältö ylpeilee kauniilla typografialla ja kokonaissuunnittelulla, joka pitää sisällön - kuten luulisi - edessä ja keskellä missä tahansa koossa. Suunnittelua tukevat painokohtaiset kuvitukset, jotka kietoutuvat kopion ympärille eri tavoin rikkoutumispisteestä riippuen. Kuvat parantavat muotoilua, mutta eivät koskaan häiritse. On todellinen ilo lukea, ja juuri tästä 'web-suunnittelusta' on kyse. '

07. CSS-temppuja

'Jälleen: valitsemalla sivusto, jossa on Chris Coyierin nimi tuntuu vähän kuin huijata, mutta messujen messut - kaveri on peto, ja hän teki helvetin työtä tällä 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.

Paras reagoiva sivusto: CSS-temppuja

'Arvoisa maininta kuuluu Chrisille' codepen.io (ei vielä täysin reagoi muokkauksen yhteydessä), joka on uskomattoman hyödyllinen työkalu pikademojen ja testitapausten luomiseen. Siellä on upeaa työtä. '

08. Currys

' Currys ei ehkä ole sellaista suunnittelun tasoa, jota pidämme monilla toimisto- ja henkilökohtaisilla sivustoilla, mutta valitsen sen sen merkityksen vuoksi, että reagoiva suunnittelutekniikka otetaan käyttöön laajemmin. Se on ensimmäinen todella laajamittainen verkkokauppasivusto, jonka olen nähnyt ja joka omaksuu reagoivan suunnittelun '', selittää James Young , luova johtaja Offroadcode .

Paras reagoiva verkkosivusto: Currys

'Se tarjoaa hyvän kokemuksen useista laitteista samalla, kun käsitellään valtavaa määrää kaiken muotoisia ja kokoisia sisältöjä ja tuotteita, ja sisältää helppokäyttöisen ostoprosessin - kaikki yhdessä koodikannassa, joka on selkeästi otettu huomioon. Currys-verkkotiimi. '

09. dConstruct 2012

Uskomattoman kaiuttimien lisäksi The dConstruct itse sivusto on kauniisti muotoiltu reagoiva kokemus '', sanoo Olen Callahan , pienen Ohiossa toimivan viraston puheenjohtaja Sparkbox .

kuinka valita kaikki kerroksen pikselit Photoshopissa

Paras reagoiva verkkosivusto: DConstruct

'Suosikkini sivuston yksityiskohdista on navigointi. Huomaa lisätty ikonografia pienemmän näkymäkokemuksen saamiseksi. Tämä osoittaa, että kosketuskohde-alueelle annettiin todellinen hoito ja se merkitsee implisiittistä arvoa [sijoitettu] niille käyttäjille, jotka katselevat sivustoa pienemmillä laitteilla - ensin mobiili-mentaliteetti. Hyvin tehty @helsinki ! '

10. Disney.com

'Kun sivusto, jonka media on monimutkainen, on Disney meni reagoivaksi, se todella osoitti lähestymistavan pätevyyden multimediasisällön toimittamiseksi verkkoon '', muistelee Scott Jehl , verkkosivujen suunnittelija / kehittäjä Filament Groupissa. 'Sivuston hillitty, puhdas muotoilu korostaa Disney-elokuvien ja television rikkaita kuvia, joita voidaan katsella inline-sivustossa, sekä Ajaxin ja historia.pushState tekee hienovaraisista, mutkattomista sivusiirtymistä.

Paras reagoiva verkkosivusto: Disney.com

miten pitää yksityiset kuvat Facebookissa

'Sivusto kertoo myös mukavaa asiayhteyteen liittyvää vuorovaikutteisuutta, kuten kosketuslaitteiden eleohjatut karusellit ja sivulta työntävä navigointi kankaasta pienillä näytöillä.

11. Fray, numero 3

' Frayn numero 3 , '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.

Paras reagoiva verkkosivusto: Fray

'Monet asetteluista 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ää, mitä 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 ei ole vain reagoiva, vaan täydellinen esimerkki siitä, kuinka hyvin harkittu sisältö ja rakenne voivat johtaa selkeämpään käyttökokemukseen käytetystä laitteesta riippumatta.

Paras reagoiva verkkosivusto: Gov.uk

'On niin tärkeää, että hallitukset esittävä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 vinoutuu hyvin teknisen yleisön suuntaan', kertoo Scott Jehl toisesta valinnastaan. ' Herokun tilasivusto on vain paikka palvelun käyttöajan valvomiseksi, ja siinä on tilailmoituksia kaikista nykyisistä tapahtumista ja raporttien aikataulu.

Paras reagoiva verkkosivusto: Heroku

'Pienen ruudun esitys on konservatiivinen, mutta erittäin toimiva ja semanttisesti rikas, ja siinä on puhdas muotoilu. Laajemmissa näkymissä aikajana muuttuu pystysuoraksi datan visualisointiksi, jossa tapaukset ruudutetaan ja linkitetään ajankohtiin kaarevilla HTML5-kankaalle piirretyillä viivoilla, mikä tekee sisällöstä houkuttelevamman. ''

14. Lotta Nieminen

' Lottan fiksu sivusto kannustaa etsintään, sillä näytön vasen ja oikea puoli kiusaa vierekkäisten osien sisältöä, innostaa Elliot Jay Stocks.

Paras reagoiva verkkosivusto: Lotta Nieminen

`` Odotin puoliksi, että tämä rikkoutuu eri leveydellä, mutta käyttäytyminen pysyy jatkuvasti yhtenäisenä 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 selkeästi Metro-tyylin ja antaa meille puhtauden ja tilan, joka puuttuu useimmista yrityssivustoista. Siellä on myös huomattava määrä navigointia, mikä voi olla todellinen haaste tehdä käyttökelpoiseksi monenlaisissa näkökentissä 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 ! '

Paikalla työskennellyt Reagan Ray sanoo: 'Trent ja Dave ovat liian vaatimattomia Paravelin sarvea tuottamaan, joten aion. Olemme iloisia voidessamme pelata pienen osan niin jännittävässä ajassa Microsoftille. Mielestäni se on hieno esimerkki siitä, että suuri yritys omaksuu reagoivan suunnittelun. '

16. Monikulmio

' Monikulmio on mielettömän rikas reagoiva pelisivusto, joka asettaa isot veljensä ( IGN , Gamespot ja niin edelleen) häpeään ', kehuu Dave Rupert , johtava kehittäjä Paravel ja isäntänä Työasioista puhuminen Chris Coyierin kanssa. 'Suuri grafiikka saa pelaajan aistit kihelmöimään. Sisätilat ovat hämmästyttävä sekoitus taiteen suuntaa 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. Mellakka Sivusto tekee juuri niin. '

18. Laiha solmiot

'Vaikka en omista yhtään laihat siteet , paitsi kourallinen 80-luvun jäännöksiä, jotka on sijoitettu jonnekin säilytyslokeroon, luulen, 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 hieno, mutta mikä on vielä inspiroivampaa meille, on verkkopohjainen tyyliopas sen mukana, ' Trent Walton , Paravelin perustaja, 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 ajankäytön '', varoittaa Mat Marquis tästä väliaikaisesta tatuointisivustosta, joten pyydän anteeksi etukäteen sinua ja / tai pomoasi. Olen polttanut kiusallisen paljon aikaa selatessani malleja Tattly eri laitteilla, enkä koskaan jää haluamaan kokemusta, jonka voin saada 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ää, he tarjoavat minulle varman tavan saada minut näyttämään pahalta. Tiedän, muutaman päivän kerrallaan. '

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 iloisesti helpottunut, kun vierailen TNW tabletilla: sillä on hieno tunnelma ja hyvä lukukokemus. '

22. Suunnittelun muoto

'Frank Chimeron omaksuminen reagoivasta lukukokemuksesta on inspiroivaa kaikilla tasoilla', sanoo Trent Walton. Hänen verkkoversio Suunnittelun muoto on ilo lukea. Huomaamaton luvun navigointi toimii hyvin ja media-kysely Fonttikoko skaalaus pitää kaiken ihanan verrannollisena. '

23. Aika

'The Boston Globen johdolla, Aika on pannut merkkinsä reagoivien uutisverkkosivustojen maailmaan käyttöönotollaan, suosittelee Stephen Hay. 'Se, että maailmassa on yksi vähemmän uutissivustoja, jotka tarjoavat meille linkin' koko verkkosivustolle 'mobiililaitteella, on jo tarpeeksi, mutta sivusto näyttää todella hyvältä mobiililaitteilla: se on aika-identiteetti läpi ja läpi. Osa tekstistä saattaa olla hieman pieni joillakin laitteilla, mutta kehittäjät ovat jättäneet skaalauksen päälle: aina hyvä idea. Joitakin vaiheita voidaan parantaa suorituskyvyn suhteen, kuten skaalattujen kuvien tarjoaminen [mutta] se on kuitenkin askel oikeaan suuntaan. '

on sega tekemässä uutta konsolia

24. United Pixelworkers

'' Olen faneja rohkeasta yksinkertaisuudesta United Pixelworkers ja kiinteä ruudukon asettelu ja navigointikäsittely pienille näytöille toimii hyvin '', James Young kertoo. '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 Shopifylle viimeistelemään ostoksesi, ja haluaisin nähdä pian ainakin tuotemerkillä tehdyn kassan 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, hyvät tuotesivut, hyvä kassavirta. Jos haluat luoda upean reagoivan verkkokauppasivuston, tämä on sinun palkkisi. '

25. Notre Damen yliopisto

'Rakastan joitain asioita Notre Damen yliopisto on jatkunut konepellin alla ', raivoo Tim Kadlec. 'Se käyttää RESS-toimintoa pienentääkseen sivun painoa pienillä näytöillä. Se käyttää myös maantieteellistä sijaintia Campus Tour -ominaisuuden parantamiseen. Jos sivusto havaitsee, että olet kampuksella, se tunnistaa lähimmät sijainnit ja tarjoaa kävelyohjeet. Se on hyödyllinen tapa käyttää käyttäjän kontekstia ja laitteen ominaisuuksia parantamaan kokemusta. '

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.

Piditkö tästä? Lue nämä!