18 loistavasti reagoivaa verkkokauppasivustoa

Internetin mobiilikäyttö räjähtää ja sen odotetaan ohittavan työpöydän käyttöoikeuden vuoteen 2014 mennessä. Eri näytön koot ja käytettävissä olevien laitteiden valikoima ovat ylivoimaisia, mutta verkkokauppiaiden on puututtava tähän haasteeseen.

Yksinkertaisesti sanottuna suurin osa asiakkaista ostaa pian tuotteita joko matkapuhelimelta tai tablet-laitteelta. Ottaen huomioon matkapuhelinten nopean kasvun kehitysmaissa, kuten Kiinassa, ketterät voivat jopa pystyä siirtymään uusille ja erittäin tuottoisille markkinoille.

Toimittajan huomautus: Etsitkö verkkokaupan verkkosivujen suunnittelua yrityksellesi? Jos etsit tietoja, jotka auttavat sinua valitsemaan sinulle sopivan, käytä alla olevaa kyselylomaketta saadaksesi sinulle tietoja useilta toimittajilta ilmaiseksi:



Suunnittele kerran, myydä kaikkialla

Vaikka monet suuremmat jälleenmyyjät ovat esittäneet natiivisovelluksia verkkosivustonsa täydentämiseksi, tämä vaihtoehto ei yleensä ole mahdollista pienemmille jälleenmyyjille. Joten syntyminen reagoiva web-suunnittelu - missä sivustot vastaavat tarkasteltavan laitteen yksilöllisiä vaatimuksia - tarjoaa täydellisen ratkaisun.

Monet verkkokauppasivustot kärsivät tarpeettomasta turvotuksesta, ja reagoiva lähestymistapa vaatii suunnittelijoita ja jälleenmyyjiä leikkaamaan rasvaa. Tämä tarkoittaa tiedonarkkitehtuurin tarkempaa huomioon ottamista, kassaprosessien virtaviivaistamista ja kirjallisen ja visuaalisen sisällön optimointia mobiililaitteille.

Tämän lähestymistavan edut huomioon ottaen on yllättävää, että hyviä esimerkkejä reagoivista verkkokauppasivustoista on vain vähän. Olemme kuitenkin tutkineet verkkoa etsimään parasta. Toivomme, että he kannustavat sinua käyttämään reagoivaa verkkosuunnittelua seuraavassa verkkokauppaprojektissasi ...

01. 8 kasvot

verkkokauppasivusto: 8 kasvot

Typografia-lehden 8 Faces -verkkokaupan verkkosivusto on täysin reagoiva

Internetin koti typografia aikakauslehti 8 Faces julkaistiin äskettäin, ja Paravel Inc: n ja Elliot Jay Stocksin Viewport Industries .

Suurilla kuvilla ja vielä suuremmalla typografialla varustettu verkkokaupan verkkosivusto on täysin reagoiva ja antaa lukijoille mahdollisuuden ostaa lehtiä, tulosteita ja takaisin-PDF-tiedostoja. Rakastamme jQuery Kinetic -laajennus antaa kävijöiden panoroida suuren sankarin kuvaa.

macbook pro 13 tuuman kova kuori

02. Currys

Kysyttiin, mitä meidän pitäisi sisällyttää luetteloomme, James Young , luova johtaja Offroadcode , sano hyvä sana brittiläiselle vähittäiskauppias Currysille. `` Sillä ei ehkä ole suunnittelutasoa, jota pidämme monilla toimisto- ja henkilökohtaisilla sivustoilla, mutta se on ensimmäinen todella laajamittainen verkkokauppasivusto, jonka olen nähnyt omaksuvan reagoivan suunnittelun '', hän sanoo.

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. '

03. Kershaw-veitset

verkkokauppasivustot

Verkkokauppasivusto, jolla on puhdas esteettisyys tuotteiden esittelemiseksi

Kershaw on suunnitellut ja valmistanut korkealaatuisia ja edullisia veitsiä vuodesta 1974. Tiiminsä ja suunnittelijan / käyttöliittymän kehittäjän Kershawin kanssa Jordan Sowers loi puhtaan esteettisen verkkokauppasivuston tuotteiden esittelemiseksi. 'Oppiminen esittämään ja järjestämään verkkokauppasivustoon liittyvä valtava määrä tietoa, samalla kun olemme joustavia, sai meidät ymmärtämään, että reagoiva suunnittelu on niin paljon hyvää ajoitusta varten' ', Sowers sanoo.

Tuotevalikoima hyötyy hyvin toteutetusta suodatusjärjestelmästä luettelosivulla. Suodatinluettelo näytetään useissa sarakkeissa suurissa näkymissä hyödyntämällä tilaa parhaalla mahdollisella tavalla. Suodattimet kääntyvät pienempiin näyttöihin, taittuvat alas vaakasuoraan, vieritettävään luetteloon, jossa on kankaan ulkopuolisia luettelokohteita, jotka voidaan vierittää näkymään.

04. SUOLA

Kotisivu on mittava 1,3 Mt, mutta koko kangasvalokuva on kaunis

Kotisivu on mittava 1,3 Mt, mutta koko kangasvalokuva on kaunis

SUOLA on kahden surffaajan, Tyler Wolffin ja Nabil Samadanin, yhteistyö, jotka päättivät tuoda hyvin muotoillut surffilaudat New Yorkin löytämälle kukoistavalle kohtaukselle. Verkkosivusto on pidätetty, sen kotisivulla on kauniita koko kankaalle valokuvia. Delving paljastaa inspiroivan estetiikan harkitusta typografiasta, määrätietoisesta ruudukosta ja viettelevistä tuotekuvista.

Koko kankaalle otetun valokuvan käytöstä on kustannukset: kotisivu on mittava 1,3 Mt. Reagointikuvatekniikat voivat olla hölynpölyä työskennellä, mutta maksavat osinkoja täällä. Sisäisten sivujen minimaalinen esteettisyys kuitenkin kompensoi tämän jonkin verran.

05. Kirja lisäksi

Kirja lisäksi

kuinka saada paremmin piirtämään poseja
Book Apartin verkkokauppasivusto tekee visuaalisen piirteen sen kirjojen kannista

Vaikka monet verkkokauppasivustot luottavat suuriin kauniisiin valokuviin myydäkseen tuotteitaan, A Book Apart käyttää sen sijaan väripäällysteitä näyttääkseen elävästi sarjaansa 'lyhyitä kirjoja verkkosivustoja tekeville ihmisille'. Tämä toimii erityisen hyvin, kun koko heidän kokoelmansa , saatavana nippuna.

06. Hiut Denim

Tämä ruudukkopohjainen asettelu on loistavasti reagoiva

Tämä ruudukkopohjainen asettelu on loistavasti reagoiva

Suunnitellut Stuart Hobday ja kehittänyt Jon Heslop , sivusto on täysin reagoiva. Se on kehitetty Shopify-alustalla, ja sen avulla tiimi voi julkaista syvällisempiä artikkeleita ja kävijät saavat paremman käsityksen innostavasta muotibrändistä ja tuotteiden takana olevista ihmisistä.

07. Starbucks

verkkokauppasivustot

Tyylikäs, kevyt, raikas tämä verkkokauppasivusto edustaa tuotemerkkiä hyvin

On hyvä nähdä, että Starbucksilla on reagoiva sivusto. Ominaisuuksien suhteen sillä on useimmat asiat, joita voit odottaa olevan modernilla kahvilalla: mukavat isot videot kotisivulla sekä pystysuorassa alla luetellut uutiset.

Kaupan paikannin on mielenkiintoinen, ja näkymän omistaa vain joukko kuvakkeita mobiililaitteessa. Se on melko vähäinen - toisinaan meidän oli ajateltava, mitä kukin kuvake edustaa - mutta se tekee työn, mikä mahdollistaa helpon suodatuksen esimerkiksi erilaisille kahvilatyypeille. Myös joidenkin kuvakkeiden välillä näyttää olevan hieman liikaa yhtäläisyyksiä.

Ydinnavigointia varten mobiilinäkymä tiivistää otsikon hienosti yhdistämällä kohteet yhdeksi, nyt lähes universaaliksi reagoivaksi valikkokuvakkeeksi, joka näyttää ja piiloutuu pystysuunnassa napautettaessa. Valikkokohtien ja niiden kuvausten rikkaus säilyy kaikilla puolilla, mikä on todella hyvää ja tuntuu seksikkäältä kuin useimmat herkät valikkohäiriöt.

08. Kiwi penkki

verkkokauppasivustot

Pienemmillä näytöillä navigointiin pääsee off-canvas-valikosta

Pankit eivät ole kaikkein miellyttävimpiä organisaatioita, mutta kehitämme pehmeän pisteen Kiwibankille, joka on uusi-seelantilainen pankki, joka kilpailee suurempien australialaisten kilpailijoiden kanssa.

Kiwibank kysyi, kun matkapuhelinliikenne oli yli 10 prosenttia Jousikuorma auttaa heitä tulemaan laitteen agnostikoiksi. Springloadin perustaja ja johtaja Bron Thomson sanoo: 'Kiinteän leveyden paradigma on juonut tietä - viime vuonna huomasimme, että 20 ihmistä yritti liittyä Kiwibankiin PlayStation 3: lta.'

Suunnittelu perustuu voimakkaasti hyvään kopioon, joka on kauniisti ladattu Meta Serifissä. 'Sisältö on todella tärkeää. Olemme kieltäneet Lorem Ipsumin, ja Kiwibankin copywriting-tiimi työskentelee toimistossamme pari päivää viikossa '', Thomson kertoo. Pienemmillä näytöillä navigointiin pääsee off-canvas-valikosta, joka liukuu sisään oikealta, samanlainen sovellus kuin Facebook ja Path.

09. Indokino

Tuotesivut Indokiinassa

Indokiinan reagoivan sivuston tuotesivut sopeutuvat hyvin erilaisiin laitteisiin

Indochino valmistaa korkealaatuisia räätälöityjä miesten vaatteita, ja sen reagoivassa myymälässä on kauniita tuotevalokuvia yhdistettynä minimaaliseen muotoiluestetiikkaan. Vaikka koko sivusto reagoi erittäin hyvin erilaisiin ruuduihin, tuotesivujen käsittelytapa on erityisen huomionarvoinen.

10. Laiha solmiot

Navigointi toimii saumattomasti useilla näyttökokoilla Skinny Ties -sivustolla

Navigointi toimii saumattomasti useilla näyttökokoilla Skinny Ties -sivustolla

Skinny Ties on kapea verkkokauppias, joka myy vain retro-tyylisiä laihoja solmioita ja on tehnyt niin vuodesta 1997 lähtien. Sivuston ulkoasu on huolellisesti jäsennelty ja täydennetty käyttämällä upeita tuotevalokuvia ja tiivistä ja hyödyllistä tietoa yksittäisestä tuotteesta sivuja. Sivuston navigointi toimii myös saumattomasti eri ruuduissa ja antaa käyttäjille mahdollisuuden etsiä tuotteita nopeasti useilla eri vaihtoehdoilla, kuten materiaalilla ja väreillä.

yksitoista. Stury

Stury

Sturyn pystysuuntainen navigointi tiivistyy pienemmillä näytöillä tehokkaalla ja miellyttävällä tavalla

Stury on sivusto, jonka avulla ihmiset voivat vaihtaa kirjoja verkossa. Tapa, jolla pystysuuntainen navigointi- ja ruudukkopohjainen asettelu tiivistyy pienemmillä näytöillä katsottuna, on erityisen tehokas ja suunnittelumalli, joka toimisi hyvin monille muille sivustoille.

12. Sopii kehykseen

Verkkokauppa Fit For A Frame pienenee kauniisti pienemmissä mobiilinäytöissä

Verkkokauppa Fit For A Frame pienenee kauniisti pienemmissä mobiilinäytöissä

Fit For A Frame myy upeita tulosteita, jotka ovat luoneet lahjakkaat suunnittelijat ja kuvittajat. Heidän verkkokaupassa on yksinkertainen navigointi ja yhtä yksinkertainen asettelu, jotka molemmat tiivistyvät kauniisti pienempiin näyttöihin. Tässäkin on esillä mielenkiintoisia temppuja, kuten tapa, jolla kotisivun tiiliseinän taustalla olevat tulosteet siirtyvät pystysuuntaiseksi ulkoasuksi katsottuna pienemmällä näytöllä.

13. United Pixel Workers

United Pixel Workers

United Pixel Workersin ostoskori- ja valikkopainikkeet on sijoitettu huomaavaisella tavalla, mikä auttaa sitä toimimaan hyvin monissa laitteissa

United Pixel Workers myy web-suunnitteluyhteisön luomia T-paitoja ja lisävarusteita ja ottaen huomioon asiakkaiden teknisen tajuuden, ei ole yllättävää nähdä, että heidän verkkosivustonsa ovat reagoivia. Sivusto käyttää yksinkertaista ruudukkosuunnittelua ja suurta typografiaa, mikä tarkoittaa, että se sopeutuu poikkeuksellisen hyvin pienemmillä näytöillä katsottuna. Tapa, jolla kärry- ja valikkopainikkeet on järjestetty kapeammille laitteille, on myös hyvin harkittu.

14. Tattly

Tatuointikauppa Tattly

Tatuointikauppa Tattlyn ulkoasu muuttuu kauniisti pienille näytöille

Tattly myydä johtavien suunnittelijoiden ja kuvittajien luomia 'Designy Temporary Tatuointeja'. Verkkokaupassa on yksinkertainen ruudukkorakenne, jota täydentää yksivärinen väripaletti, joka estää käyttöliittymää heikentämästä esillä olevia tuotteita. Taustalla olevan ruudukon joustavuus tarkoittaa, että asettelun koko muuttuu kauniisti, kun sivustoa tarkastellaan pienemmillä näytöillä.

kuinka saada akryylimaalia harjoista

viisitoista. Nixon

Nixon on yksi harvoista valtavirran tuotemerkeistä, jolla on reagoiva myymälä

Nixon on yksi harvoista valtavirran tuotemerkeistä, jolla on reagoiva myymälä

Nixon on yksi harvoista vakiintuneista tuotemerkeistä, jolla on reagoiva verkkokauppa, ja se on poikkeuksellisen hyvin tehty. Se toimii niin hyvin yksinkertaisen ja minimalistisen asettelun ansiosta, ja kuten monet muutkin tämän esityksen sivustot, ruudukkorakennetta käytetään kaikkialla. Nixonin upeilla tuote- ja elämäntapakuvilla on suuri merkitys muotoilun yhdistämisessä. Pienemmällä näytöllä katsottuna myös lennonavigointi- ja kassaprosessi toimivat erityisen hyvin.

16. Kansanomainen

Vaikka monimutkainen, Folksy

Vaikka Folksyn ulkoasu on monimutkainen, se sopeutuu hyvin mobiililaitteisiin

Folksy on brittiläisten suunnittelijoiden ja valmistajien online-foorumi myydä käsintehtyjä tuotteita verkossa. Asettelu on monimutkaisempi kuin monet muut tässä esitetyt, mutta tapaa, jolla se vastaa erilaisten katseluympäristöjen vaatimuksiin, käsitellään taitavasti.

17. Viisi yksinkertaista vaihetta

Viisi yksinkertaista vaihetta

Viiden yksinkertaisen vaiheen minimaalinen verkkosivuston asettelu on ilo käyttää

Five Simple Steps on pieni riippumaton julkaisija käytännön kirjoja verkkosivujen suunnittelun ammattilaisille. Sen verkkokauppa käyttää yksinkertaista ja vähäistä ulkoasua ja käyttöliittymää, mikä tekee siitä ilahduttavan.

18. Puku

Suit Supply

Suit Supplyn reagoiva sivustosuunnittelu on raskasta laadukkaille valokuville

SuitSupply on miesten online-muotiliike, jonka herkkä myymäläsuunnittelu hyödyntää yksinkertaista minimaalista ulkoasua yhdistettynä korkealaatuiseen tuotekuvaukseen. Työpöytäsivusto sisältää tavalliset navigointi- ja tuotesuodattimet, mutta mielenkiintoisella tavalla he ovat päättäneet joko poistaa tai yksinkertaistaa näitä elementtejä, kun sivustoa tarkastellaan pienemmillä näytöillä.

Sanat: Nathan Leigh Davis , Paul Lloyd , Jerome ribot , Jordan Moore

Kuten tämä? Lue nämä!

Onko sinulla suosikki verkkokauppasivusto? Kerro meille siitä kommenttikentässä!