Sisältö
- 01. Breakingnews
- 02. ValintaVastausta
- 03. Luo digitaalinen media
- 04. CSS-temppuja
- 05. Hiut Denim
- 06. Lancasterin yliopisto
- 07. Narullinen
- 08. Runoilija
- 09. Käänteinen Büro
- 10. Smashing Magazine
- 11. Sony
- 12. Pallo
- 13. Starbucks
- 14. Teema Loom
- 15. Treehouse
- Piditkö tästä? Lue nämä!
Muutama kuukausi sitten päätimme nimetä mag-esittelygallerian "Mobile" -osion uudeksi reagoivaksi. Olitpa samaa mieltä Jakob Nielsenin tai Josh Clarkin kanssa tai jos olet jossain keskellä, Responsiivinen web-suunnittelu on tärkeä käsite, ja yhä useammat yritykset ottavat harppauksen. Se on kehitys, joka ei mene pois ja ansaitsee enemmän kattavuutta.
Tässä kootaan parhaat reagoivat sivustot, jotka Antony ja Jerome Ribot ovat sisällyttäneet sarakkeeseensa viimeisten kuuden kuukauden aikana. Ne sisältävät pienempiä salkkuja ja henkilökohtaisempia projekteja korkean profiilin asiakastyön ohella.
01. Breakingnews
Reaaliaikaiset uutiset eivät ole koskaan olleet niin hauskoja! Breakingnews.com - itse asiassa käynnistys msnbc.com -sivustolta - on hieno, live-yhdistävä tarina useista uutislähteistä.
Se on jaettu kolmeen pääosaan, joista kaksi on uutiskulutuskuvia. 'Suosittu' tarjoaa hienoja isoja kuvia uutisista. Tavanomaisempi "Viimeisin" -alue näyttää viimeisimmät tarinat ("aiheet"). Se auttaa ajattelemaan aiheita eräänlaisena Twitter-hashtagina, mutta luonteeltaan ihmisille paremmin ymmärrettävänä, lauseen kaltaisena.
Useimmat käyttäjät saattavat unohtaa sen, mutta reagoivat nörtit arvostavat sujuvaa liikettä, kun sivun asettelu mukautuu laskevaan sivuleveyteen. Ei liian monet sivustot tekevät niin.
02. ValintaVastausta
ChoiceResponse antaa sinun luoda yhden napsautuksen vastaussähköpostit. Palvelun kolmen sivun sivuston suunnitteli ja kehitti Atlantis Technologyn tiimi.
Haasteiden osalta suunnittelija Zhuosho Xie korostaa kuvia reagoivan suunnittelun haastavimpana puolena: "Tekstin on helppo järjestää itseään eri leveydellä, mutta kuvien skaalaaminen hienosti suhteessa asetteluun oli vaikeampi. Ja siellä oli myös kysymys siitä, olisiko heistä tullut liian pieniä näkemään. "
03. Luo digitaalinen media
Kaikkia digitaalisia palveluyrityksiä ei ole luotu tasa-arvoisiksi, ja Create Digital Media lisää polttoainetta tähän lausuntoon uudella sivustollaan, jonka on suunnitellut Mike Kus ja jonka on kehittänyt Ryan Taylor.
Pääsivulla on hienoja CSS3-animaatioita. Ne näyttävät hyvältä työpöydällä ja yllättävän hyvin myös korkeamman tason iOS-laitteissa. Joitakin muita huomionarvoisia yksityiskohtia ovat reunan oheneminen, joka näyttää hyvältä ja paksulta laajasta näkymästä, kaventamalla sitä alaspäin, kun näytön leveys tekee saman, kiva priorisoitu projektitietojen uudelleenjärjestäminen Työ-sivulle mobiilinäkymässä, ja typografian vakaa käyttö leveyden muuttuessa.
04. CSS-temppuja
Visuaalisten huijausten ytimessä CSS-Tricksin uudenlainen alustojen välinen ulkoasu ei tuota pettymystä. Ja on joitain hienoja rakenteellisia yksinkertaistuksia, kuten otsikkonavigointi siirtyy vaakasuoraan luettelopohjaiseen ulkoasuun erittäin viileäksi vaihtoehtojen ruudukoksi matkapuhelimessa. Lisäksi jokaisen viestin vieressä oleva suuri typografinen päivämäärä ja kommenttiruutu heikkenee sulavasti pienemmillä näyttökokoilla.
On myös hienoja hienovaraisia herkkuja, kuten näkyvät online-oppimisresurssin Treehouse-ilmoitukset, jotka tekevät muutakin kuin yksinkertaisesti muuttavat mittasuhteita - myös niihin liittyvät eläinkuvitukset muuttuvat, mikä on niin hieno kosketus. Tämän lisäksi otsikkonavigointikohteet antavat monivärisen matriisi-animaation, kun se on valittu, joten haluat napauttaa uudestaan ja uudestaan! Erityisesti tämä toimii yhtä hyvin matkapuhelimessa.
05. Hiut Denim
Hiut Denimin uudella sivustolla on runsaasti valokuvaa, historiaa ja tunteita. Upeat, teräväpiirtovalokuvat, jotka osoittavat valitsemasi pukeutumisen, näyttävät upeilta, ja me rakastamme kuinka ne on asetettu mobiililaitteisiin.
"Olemme todella hikoillut vuorovaikutussuunnittelusta pienissä kooissa, jotta reagoiva versio toimisi yhtä hyvin kuin mikä tahansa oma mobiilisivusto", sanoo Alex Morris Mark Boulton Designista, joka rakensi ja suunnitteli sivuston Nick Boultonin kanssa Markin luovalla ohjauksella. Boulton. ”Todiste vanukasta oli, kun onnistuimme tekemään tilauksen kävelemällä kadulla! Käyttämällä herra Clarken 320 ja sitä uudempaa ideaa varmistimme, että suuria kuvia ei näytetä mobiililaitteille, ja suurempia kuvia vedettiin suurempiin mediakyselyihin. "
06. Lancasterin yliopisto
Lancaster Universityn uusi sivusto, jonka ovat luoneet Tom Knowles ja muut ihmiset
The Roundhouse tarjoaa joustavan käyttökokemuksen, joka vastaa suurimman osan ydinkokemuksesta. Ei merkitystä, kun otetaan huomioon tällaisten laitosten koko näinä päivinä.
Kiitettävää on siis se, miten sivusto mukautuu mobiililaitteisiin; ydin, tuotemerkki ja rakenne säilyvät kunnioittavasti. "Uusi IA on erittäin joustava - se on suunniteltu tarkoituksellisesti evoluutiota ajatellen", Knowles sanoo. Tämä sivusto on sisällöltään ja rakenteeltaan suuri, mutta harkittu lähestymistapa antaa sen todella pienentää tyylikkäästi.
07. Narullinen
Kaikkien suosikki web-tech-pariskunta Natalie Downe ja Simon Willison ovat työskennelleet Lanyrdin parissa jo jonkin aikaa.
Työpöydän käyttökokemus ylläpidetään enimmäkseen mobiililaitteissa: kolmen ja kahden sarakkeen näkymät tuodaan linjaan, mutta IA- ja typografinen rakenne tuntuu samalta. Testattu Android-matkapuhelimella, teksti ja valittavat elementit tuntuvat pieniltä. Myös tapahtumakalenteri voisi hyödyntää leveyttä paremmin työpöydällä - se tuntui kuitenkin täydelliseltä mobiililaitteilla.
08. Runoilija
Rakastamme hyvää haiku: vähäistä, puhdasta ja mielekästä. Aivan kuten PoetFreak, reagoiva sivusto, johon tällaiset luomukset sijoitetaan. Sivuston tavoitteena on tuoda yhteen samankaltaiset sanasepät ja antaa heidän ilmaista sisäistä runoilijaansa.
Sivusto koostuu kahdesta ydinnäkymästä - runoluettelosta ja yksityiskohtaisesta näkymästä, joka sisältää luomuksen sekä mahdolliset kommentit tai asiaan liittyvät kirjoitukset - sekä mobiililaitteella että työpöydällä, ja ylläpitää rauhallista yksinkertaisuutta. IPhonessa saat joskus vahvan tunteen luettavuudesta tai Safarin Reader-toiminnosta, mikä minimoi näytön sisällön tehokkaalla tavalla.
09. Käänteinen Büro
Sveitsiläinen Reverse Büro -sivusto on miellyttävä. Olitpa sitten pöytätietokoneella tai mobiililaitteella, suunnittelija Loïc Dupasquier -salkku näyttää raikkaalta, siistiltä ja harkitulta. Albumin kuvitus, T-paidat, taitettavat tulosteet ja upeat sivustot, jotka näkyvät 27 Applen näytössä, ovat ristikkäin, ja kaikki näyttää hyvältä erilaisista sisältötyypeistä huolimatta.
Ylös-alas-navigointi istuu sisäkkäin näytön alareunassa. Sen sijaan, että selaat sivua alaspäin eleiden avulla, navigoit projektissa pystysuunnassa ylös ja alas-nuolilla oikeassa alakulmassa. Oikeassa yläkulmassa oleva yksinkertainen sisältökartta näyttää sijaintisi salkussa, ja voit käyttää sitä jokaisen projektin galleriassa vasemmalle ja oikealle.
10. Smashing Magazine
Jatkoa suuntaukselle siitä, että yksinkertaiset sivustot ovat reagoivan liikkeen ainoa suurlähettiläs, verkkosuunnittelublogi Smashing Magazine käsittelee sen rakenteellista monimutkaisuutta armon ja tyylikkyyden kanssa. Siinä on vähintään viisi näyttötilaa, ja se sopii jokaiselle kitalaelle.
Tavanomaisessa työpöydän leveydessä mainokset ovat hajallaan oikealla puolella, mutta ne katoavat nopeasti tableteilla ja kapeammilla leveyksillä. Myös typografia pysyy jatkuvasti kauniina.
11. Sony
On hienoa nähdä iso brändi, kuten Sony, omaksuvan reagoivan vallankumouksen.
Ollakseen selkeä alusta alkaen, reagoivuus on syvyydeltään vain polvipitkä, se on yksi sivu, ja tuloksena olevat sivun napsautukset tekevät ulkoasun perinteisissä verkkokäytännöissä.
Reagoivia komponentteja on kahdeksan: otsikko, kiiltävä roiske, avattava luokan valitsin, jossa on näkyvää sisältöä, sekä sisäkkäinen teksti. Tämän alapuolella on runsaasti suhteellisen turhia elementtejä (Share Your Story, New Sony Rewards), jota seuraa typografisesti vahva uutiskalenteri, sosiaaliset linkit ja lopuksi alatunniste.
12. Pallo
Sphero on hauska, robottipallo, jota voit hallita älypuhelimellasi ja pelata yhä enemmän pelejä. Kevin Menzie ja Slice of Lime -pojat ovat luoneet sivun, joka on minimalistinen ja tarjoaa progressiivisen määrän tietoa käyttäjän liikkuessa syvemmälle.
"Koska tämä on ensiluokkainen tuote, päätimme viedä melkein koko kiinteistön sivulle, jossa HTML5-video näyttää Spheron toiminnassa", Menzie kertoo. Mutta oli yksi erityinen haaste: ”Kehityksen aikana iPhone ja iPad lopettivat videon automaattisen toiston tukemisen. Tämän torjumiseksi tarjoamme sen sijaan animoidun gifin tietyille laitteille. Käytämme animoitua gifiä myös työpöydällä, jos yhteysnopeus on liian hidas. "
13. Starbucks
On hyvä nähdä, että Starbucksilla on reagoiva sivusto. Ominaisuuksien suhteen sillä on useimmat asiat, joita voit odottaa olevan modernilla kahvilalla: mukavia isoja videoita kotisivulla sekä pystysuorassa alla luetellut uutiset.
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. Ruokalistan kohtien ja niiden kuvausten rikkaus säilyy kaikilla puolilla, mikä on todella hyvää ja tuntuu seksikkäältä kuin useimmat herkät valikkohäiriöt.
14. Teema Loom
Reagoivan liikkeen luonnollinen eteneminen on avata se mahdollisimman monelle ihmiselle. Organisaationa sinun ei tarvitse tietää kuinka rakentaa reagoivia sivustoja voidaksesi hyötyä niistä. Theme Loom ymmärtää tämän ja tarjoaa reagoivia teemoja WordPress-pohjaisille sivustoille.
Sivusto on luonnollisesti reagoiva, ja niillä on tarjolla erilaisia teemoja, sekä vanhoja että uusia, joita käyttäjä voi esitellä sivustolla. Sekä "Xi" että "Pure", jotka on rakennettu reagoivasti, toimivat kuin herkku ja näyttävät hyvältä.
15. Treehouse
Treehouse on verkko-opetusympäristö web- ja mobiilisuunnitteluun ja -kehitykseen. Vastaavasti sivusto toimii todella hyvin. Kun selaimen leveys pienenee, hienot taustan puuhaaran kuvitukset, jotka kutovat tiensä kotisivulle ja ohjaavat sinut Treehousen perusteiden läpi, jätetään pois.
Treehousen Tyson Rosage korostaa kuitenkin, että kaikkea ei ollut mukana matkapuhelimessa: "Koodihaastomoottori oli oikeastaan ainoa sivuston ominaisuus, joka ei ollut kovin käytännöllistä saada työtä mobiililaitteilla", hän sanoo. "Tämä johtuu siitä, että tällaiset laitteet eivät sovellu hyvin koodin kirjoittamiseen, koska näppäimistöä ei ole optimoitu hyvin. Koodihaasteohjelman käyttöliittymä ei myöskään realistisesti hajoaisi hyvin mobiilimuotoon. "
Antony ja Jerome Ribot ovat Ribot-suunnittelulaboratorion perustajia, joka on erikoistunut pienen näytön käyttöliittymiin ja kokemuksiin. Antony opiskeli muurahaisia, mehiläisiä ja termiittejä yliopistossa, ja Jerome johtaa suunnittelua ja strategiaa virastossa. ribot.co.uk
Piditkö tästä? Lue nämä!
- Illustrator-oppaat: upeita ideoita kokeilla tänään!
- Hyviä esimerkkejä doodle-taiteesta
- Loistava Wordpress-opetusohjelman valinta
- Ilmaiset tatuointifontit suunnittelijoille
- Suosikkiverkkofontimme - ja ne eivät maksa penniäkään
Oletko nähnyt hämmästyttävän reagoivan sivuston viime aikoina? Vai työskenteletkö itse sellaisen parissa? Kerro meille kommenteissa!
