Big Vs. Pienet: haasteet reagoivaa Web-suunnittelua
Koska määrä ja valikoima laitteita, joista käytämme internet kasvaa, uudet web design haasteet esille.
Se ei enää riitä mobiiliversioon ja selaimen versioon. Nyt meidän on harkittava, käykö sivustomme käyntiä tablet-laitteesta, älypuhelimesta (ja onko kyseisellä älypuhelimella korkealaatuinen näyttö) vai nettikirjasta, pöytätietokoneesta tai täysikokoisesta kannettavasta tietokoneesta (ja onko se yksi korkean res: n tai pienen res: n näytöllä) tai jonkin muun laitteen kokonaan.
Ja optimaalinen kokemus kaikille näistä eri mahdollisuuksista on tulossa entistä odotetuimpien internetin käyttäjien keskuudessa.
Muutama vuosi sitten suunnittelija olisi tutkinut laitteiden luetteloa, jonka he suunnittelivat, ja sitten asensivat luomaan yksittäisiä verkkosivustojen malleja kullekin laitteelle. Mutta kun laitteiden lukumäärä ja määrä lisääntyy, siitä tulee epäkäytännöllinen, aikaa vievä ehdotus.
Sen sijaan suunnittelijoiden tulisi luoda malleja, jotka sopeutuvat kunkin selaimen tarpeisiin riippumatta laitteesta.
Paljon näyttöjä tulee yhä suuremmaksi
Työpöydän ja kannettavan tietokoneen näyttöpäätöslauselmat pysyvät entisestään. Vain muutama vuosi sitten 1280 x 800 pikselin resoluutio näytti suurelta. Nyt se on melko alhainen yleisimpiä näyttöpäätteitä kannettavissa tietokoneissa, eikä ole harvinaista, että uudet näytöt saavat täyden HD-näytön resoluutiot (1920 x 1080 pikseliä).
Olemme saavuttaneet monitorin käytännölliset ylärajat (nykyisellä rajapintatekniikalla, vaikka tuleva kehitys saattaa muuttaa sitä), mutta jopa 1920 pikselin leveyden suunnittelu on paljon erilainen kuin suunnitella vain 1024 pikselin leveä näyttö. Tai ainakin se pitäisi olla.
Mahdollisiin suurten näytöksien ongelmien lisääminen on se, että monet pelijärjestelmät ja uudet televisiot ovat nyt internetissä valmiina. Joillakin näistä on todella hyvät sisäänrakennetut selaimet, joten on täysin mahdollista, että jotkut sivustosi kävijät katsovat sivustosi 55 tuuman HD-televisiossa.
Mutta sitten on mobiililaitteita
Taajuusalueen vastakkaisella puolella on valtava määrä Internetin käyttäjiä, jotka nyt käyttävät verkkoa lähinnä älypuhelimestaan, tabletistaan tai netbookistaan. Näiden laitteiden näytöt voivat vaihdella noin 240 x 320 pikselin (joidenkin alhaisimpien ja vanhempien älypuhelinten) välillä 1024 x 600 tai 768 (joissakin netbook- ja tablet-laitteissa).
Ilmeisesti 1280 + pikselin leveälle näytölle suunniteltu sivusto ei näytä oikealta ruudulta, joka on vain 320 pikseliä leveä. Tai jopa yksi, joka on 600 tai 800 pikseliä leveä. Vaaka vieritys, erityisesti kosketusnäyttölaitteilla, on ääneen parhaimmillaan.
Mobiilisivuston suunnitteleminen oli suositeltava ratkaisu erilaisiin näytön erotteluun. Mutta koska nyt on valtava valikoima kokoja, eikä vain "normaali" ja "pieni", se ei ole paras idea enää. 240 x 320 pikselinäyttöä varten suunnitellut mobiilisivustot eivät näytä hyvältä iPadilta (tai uudelta iPhonelta, jossa on Retina-näyttö). Ja jos suunnittelet Retina-näyttöä tai vastaavia korkealaatuisia laitteiden näyttöjä, voit vieraantua useilla vierailijoilla käyttämällä muita älypuhelimia, joilla ei ole tällaisia suuriresoluutioisia näyttöjä.
Joustava perusta
Aloittaminen joustavalla pohjalla on tärkeää. Säleikkö ei yksin riitä. Tarvitset myös ruudukon tai ulkoasun, joka voi muuttua näytön tarkkuuksien ja laitetyyppien perusteella. Yksinkertaisten asettelujen vuoksi se ei ole niin korkea järjestys. Mutta jos haluat jotain, joka on hieman monimutkaisempi ja vaihtelee useita sarakkeita näytön leveydestä riippuen, on muutamia asioita, jotka sinun on otettava huomioon.
Joustavat asettelut
Nestemäisen verkon luominen on loistava tapa luoda enemmän reagoiva muotoilu . Paras nesteverkko yhdistää tarpeen mukaan koon muuttamisen ja uudelleen sijoittamisen sisällön, koska ruudun leveys muuttuu. (Toinen loistava työkalu nestekidenäyttöjen luomiseen on Pieni nestekerros , jonka avulla voit tehdä verkkoja jopa 1200px suurimmilla leveyksillä ja perustuu 1 kt: n ruutuun.)
Esimerkiksi niin kauan kuin näytön tarkkuus on yli 800 sivun suuruinen, 3-sarakkeen ulkoasu jäisi 3 sarakkeeseen, yksinkertaistaen kunkin sarakkeen leveyttä sisällön parhaiten palvelemiseksi. Mutta kun näytön leveys laskee alle 800 pikseliä, kolmas sarake saattaa pudota toisen sarakkeen alle niin, että kukin sarake voi olla helposti luettavissa oleva leveys.
Jos näyttö muuttuu entistä kapeammaksi, sanotaan 480px (tyypillinen useille älypuhelimille), koko rakenne putoaa yhteen sarakkeeseen, kun toinen ja kolmas sarake näkyvät pääosan alle. Jos navigointi sisältyi johonkin näistä sarakkeista, se saattaa siirtyä sivun yläosaan, joten se on edelleen helposti saatavilla.
CSS3-mediakyselyjen avulla voimme kohdistaa paitsi tietyn luokan laitteisiin (kuten mobiililaitteisiin), mutta myös näiden laitteiden erityispiirteisiin. Joten meillä voisi olla erilliset tyylitaulukot eri kokoisille laitteille.
Media-kyselyjen kauneus CSS3: ssa on kuitenkin se, että niitä voidaan käyttää myös CSS: n sisällä. Joten jos kaikki, mitä tarvitsemme, on sarakkeiden määrä tai jotain vastaavaa, voimme vain määrittää a @media sääntöä tyylitaulukossa. WebDesignerWall on hyvä yleiskuva siitä, miten CSS3-mediakyselyt voidaan käyttää.
Nesteiset kuvat
Kuvien luonti, joka mukautuu sarakkeen tai divin koolle, on toinen tärkeä näkökohta, kun luodaan reagoivampi muoto fluidiasettelussa. Koska sarakkeiden koko muuttuu, niiden sisältämät kuvat voivat muuttua siten, että ne vielä sopivat sarakkeen rajoituksiin.
Tässä on muutamia keinoja: voit saada kuvan kokonaan alaspäin tai voit dynaamisesti leikata kuvaa vain tärkeimpien osien näyttämiseksi. Joissakin tapauksissa käyttämällä näiden kahden tekniikan yhdistelmää (niin, että tietyn koon yläpuolella kuva vain kutistuu, mutta kun se tulee alle sen koon, se alkaa viljellä) voi tuottaa halutuimmista tuloksista.
Pysäyttämätöntä Robot Ninja on yksinkertainen skripti, joka automaattisesti muuttaa kuvien kokoa. Jos haluat piilottaa osia kuvasta dynaamisesti (tehokkaasti rajaamalla ne), Zomigi.com on loistava tapa tehdä niin. Heillä on myös menetelmä luoda liukuvat komposiittikuvat joka voi olla hyödyllinen nestemallien kannalta.
Laajemmat näytön näkökohdat
Mukaan StatOwl , yli 73% ei-mobiileista internet-käyttäjistä käytti viimeisten kolmen kuukauden aikana tietokoneita, joiden resoluutio oli suurempi kuin 1024 x 768. Ja jos katsot erityisesti 1024 x 768: n tilastoja, näet, että se menettää markkinaosuuttaan. On selvää, että suuret näytön resoluutiot ovat jo suunnattoman muuttuneet, sillä suunnittelijat saattaisivat olla varoittamatta jättämään huomiotta.
Tietenkin vain siksi, että siellä on joitain käyttäjiä, jotka ovat siirtyneet laajempaan näytön resoluutioon, ei tarkoita sitä, että jokainen suunnittelija pitäisi hypätä laaja-leveydelle ja aloittaa uudelleen suunnitteleminen asiakkailleen. Mobile adoption on tällä hetkellä tärkeämpi kuin laajemmat leveydet. Mutta koska olemme toivottavasti vakuuttaneet teille, että reagoiva muotoilu on tapa lähestyä uusia verkkosivustojen malleja ja uudelleensuunnittelua, on tärkeää harkita, miten verkkosivustot toimivat laajemmalla leveydellä.
Kuka käyttää laajempaa resoluutiota?
Jokainen, joka työskentelee suunnittelussa tai luovassa kentässä, todennäköisesti on vähintään 1280 pikseliä (jos ei paljon laajempi). Tähän kuuluvat web- ja graafinen suunnittelija, elokuvantekijät, valokuvaajat ja muut. Myös tekniikkaohjaajat käyttävät todennäköisemmin suuremman tarkkuuden näyttöjä, koska he todennäköisemmin päivittävät tietokonelaitteitaan säännöllisesti.
Varakkaat kuluttajat ovat toinen ryhmä, joka todennäköisesti käyttää suurempia tarkkuusmonitoreita. Samoin kuin tech-savvy-käyttäjät, tämä johtuu siitä, että ihmiset, joilla on enemmän käytettävissä olevia tuloja, todennäköisemmin ostavat uusimpia tietokoneita säännöllisesti. Tietenkin tämä vaikutus moninkertaistuu kuluttajien kanssa, jotka ovat sekä varakkaita että teknisiä tunteita.
Mac-fanit olisivat toinen ryhmä, joka todennäköisemmin käyttää suurempaa näytön resoluutiota, koska uusimmat MacBookit, iMacsit ja muut Applen tietokoneet ovat vähintään 1280 x 800 näytön resoluutiot. Tietenkin tämä sulkee pois ne tuotteet, joita heillä on käynnissä iOS: ssä (iPhone, iPod Touch ja iPad).
Kuka ei käytä laajempia res-näyttöjä?
Vaikka käyttäjillä on paljon käyttäjiä korkean resoluution näytöissä, on vielä paljon käyttäjiä, jotka eivät ole. Nämä kuuluvat muutamiin eri ryhmiin.
Opiskelijat ovat luultavasti yksi suurimmista pienempien käyttäjien ryhmistä. Koulun on usein tehtävä tietokoneiden kanssa viisi tai kymmenen vuotta, ja monissa tapauksissa tietokoneilla, joita heillä ei ole, eivät edes ole huippuluokkaa, kun he ostavat niitä. Jos verkkosivustosi kohdistuu oppilaitoksiin (mukaan lukien koulun tiedekunta ja ylläpitäjät, opiskelijoiden lisäksi), luultavasti katselet paljon käyttäjiä, joiden näytöt ovat vain 1024 pikseliä leveä ja ehkä jopa joidenkin näyttöjen arvo on 800 pikseliä leveä.
Netbook-käyttäjät ovat toinen suuri ryhmä, jolla on yleensä pienempiä näyttöjä. Useimmat netbookit, etenkin alemmat, ovat 1024 x 600 tai 728 pikselin resoluutiot. Sama koskee iPadia (1024 × 768) ja monia muita markkinoilla olevia tabletteja, joista osa on jopa pienempi näytön resoluutio.
Vähemmän kehittyneissä maissa ihmiset käyttävät todennäköisesti vanhempia tai alempaa tietokoneita. Jos kohdistat käyttäjiä, jotka eivät ole Pohjois-Amerikassa tai Länsi-Euroopassa tai alueilla, joilla Internet-kahviloita käytetään yleisesti Internet-yhteyden kautta (kuten monissa kehitysmaissa), olet todennäköisesti tarkastelemassa useimpia käyttäjät, jotka katselevat sivustoasi 1024: ssä 768: ssa tai vastaavissa näytön tarkkuuksissa.
Yrityksen käyttäjillä on usein myös alhaisemmat näytön resoluutiot. Monet ei-tekniikkayritykset jumittuvat tietokonelaitteisiin, ennen kuin ne ovat täysin vanhentuneita ennen päivittämistä. Ja on järkevää, varsinkin kun otetaan huomioon kymmenien tai sadan tietokoneiden päivittämisen kustannukset kerralla. Jos kohdistat yrityskäyttäjiä, kannattaa kiinnittää 1024-leveyden mukaiseen muotoiluun.
Viimeinen ryhmä, jolla todennäköisesti on pienikokoisemmat näytöt, ovat ihmisiä, jotka eivät arvosta teknologiaa. Vaikka nämä ihmiset eivät ole koskaan vaivautunut tietokoneiden kanssa, monet näkevät nyt arvoa siitä, että heillä on PC kotona. Mutta he eivät myöskään todennäköisesti voi mennä ulos ja viettää enemmän kuin muutama sata dollaria tietokoneella tai he saattavat saada käytetyn tietokoneen perheenjäseneltä tai luokitelluista mainoksista. Jos sivustosi on keskittynyt ei-teknisiin kuluttajiin, etenkin maaseutualueisiin, sinun on harkittava tarkkaan, mitä todennäköiset näytön resoluutiot ovat, ja suunnittele sen mukaisesti.
Seuraa kävijöitäsi
Kaikki yllä mainitut vievät meidät yhteen tärkeimmistä toimenpiteistä, jos harkitset laajemman näytön resoluution suunnittelua: seuraa kävijöitä, jotka tulevat sivustoosi ja katsovat, mitä näytön tarkkuutta he käyttävät. Kaikki hyvät analyysiohjelmat antavat sinulle nämä tiedot, ja se on uskomattoman arvokas tekemään tällaisia päätöksiä.
Jos huomaat, että valtaosa käyttäjistä on peräisin tietokoneista, joilla on korkeammat näytön resoluutiot, voit luultavasti suunnitella sivustosi niille käyttäjille ilman, että näet liikaa vaikutusta. Mutta jos huomaat, että suuri määrä kävijöistä käyttää edelleen 1024: n tai kapeammat näytön resoluutiot, kannattaa harkita uudelleen.
Laajemmat leveydet ovat tärkeitä innovaatioille
Olen varma, että siellä on paljon suunnittelijoita, jotka eivät oikeastaan näe pisteitä laajemmissa leveyksissä. He onnistuvat suunnittelemaan 960 pikseliä. Heillä on käytössään järjestelmät, jotka on suunniteltu suunnittelemaan niissä leveyksissä. Heillä on ennalta valmistettuja CSS-tiedostoja, jotka kaikki asetetaan 960 pikseliksi. Miksi he haluaisivat mennä laajemmalle? Varsinkin kun suuri internet-käyttäjien osuus toimii edelleen näytöissä, jotka ovat 1024 pikseliä leveä.
Yksinkertainen vastaus on se, että kunhan suunnittelemme 1024: n ajan, ei ole kannustinta useimpien kuluttajien päivittämiseen. Ja tämä tarkoittaa, että valmistajat eivät juuri kannusta luomaan tuotteita, joilla on korkeammat resoluutiot.
Esimerkiksi jos 1280 oli standardi ja jos suurin osa verkkosivustoista oli 1140 pikseliä leveä tai laajempi, iPad olisi todennäköisesti kehitetty vähintään 1280 tarkkuudella. Mutta koska 1024 on standardi, iPad ei ei tarvitse olla korkeampia kuin tämä. Sama periaate koskee netbookeja. Koska web on suunniteltu 1024 pikselin leveyden ympärille, ensisijaisesti web-käyttöön tarkoitettujen laitteiden ei tarvitse olla korkeampia kuin edellä.
Painamalla verkkosivujen malleja laajemmille leveydelle kannustamme päivityksiä ja innovaatioita. Lisäksi ylimääräiset 180 pikseliä (ero 960 ja 1140 välillä) voivat avata uusia mahdollisuuksia käyttöliittymän suunnittelussa ja käyttökokemuksessa. Aivan kuten 160 pikseliä, jotka saatiin vaihdettaessa 800: sta 960: een, saatiin enemmän mahdollisuuksia.
Alasajat ovat leveitä
Vaikka laajempien mallien luomisessa onkin selviä etuja, käytännössä on myös tiettyjä haasteita. Jotkut näistä ovat helposti voitettavissa, mutta on tärkeää olla tietoinen siitä, mitä he ovat, jos he odottavat estävän heitä.
Laajan viivan pituudet vähentävät luettavuutta
On houkuttelevaa luoda laajempaa muotoilua, jotta voit hyödyntää kaikkia ylimääräisiä näytön kiinteistöjä, jotta pääsisältöalueesi laajennettaisiin. Tämä ei kuitenkaan ole aina hyvä asia. Pitempät viivapituudet on vaikeampi lukea, koska silmän on matkustettava edelleen viivan päähän päästäkseen seuraavan rivin alkuun, mikä tarkoittaa, että lukija voi helposti kadota ja päätyä väärällä viivalla. Tätä pienentävät pienemmät koot. On tärkeää löytää hyvää keskitasoa rivien pituuden, kirjasimen koon ja rivin korkeuden välillä.
On pari erilaisia menetelmiä oikean linjan pituuden laskemiseksi. Ensimmäinen on aakkoston ja puolen säännön, jonka tuloksena on 39 merkin pituinen rivi (26 aakkosia x 1,5). Muokkaa fonttikokoa siten, että valittuun viivan pituuteen sopii noin 39 merkkiä (tai päinvastoin).
Toinen optimaalisen rivin pituuden laskentamenetelmä on soveltaa pisteiden "kaksi kertaa" -sääntöä. Tämä on maalaus tulosta maailmasta, mutta se voidaan helposti mukauttaa verkkoon. Tämän säännön avulla otat fonttisi pistekokoa, kerrotte sen kahdella ja tee linjat, joiden pituus on picas (joka on 12 pistettä). Joten laskea rivien pituudet pikseleissä, otat fonttisi koon ja kerrot sen 24: llä (12-pisteen fontilla olisi pituus 288 pikseliä).
Voit laskea rivin pituudet molemmilla menetelmillä ja vertailla niitä. Tee viimeisen rivin pituudet jonnekin näiden kahden välissä.
Tiedon ylikuormitus
Laajemmat sisältöalueet voivat helposti vaikuttaa siihen, että sivuillasi on tylsää ja kuten on liikaa. Sen avulla on myös helpompi lisätä ylimääräisiä sarakkeita, widgetejä tai muita sisältöjä, jotka eivät todellakaan lisää mitään arvoa sivulle. On tärkeää säilyttää hyvän sisällön suunnittelun periaatteet, kun luot sivustosi. Runsaasti valkoista tilaa on hyödyllistä myös varmistaessasi, että sivustosi ei näytä sekaisin.
Laajemmat leveydet antavat sinulle enemmän vaihtoehtoja suunnittelun suhteen, mutta se myös moninkertaistaa mahdollisuudet tehdä huonoja suunnittelupäätöksiä. Siirry liian minimalistiseen ja se voi näyttää tylsältä ja tyhjältä. Liian paljon menossa ja se vain näyttää kiireiseltä ja sekavalta.
Kiinnitä huomiota mittakaavaan, valkoiseen tilaan, osuuteen ja hierarkiaan malleissasi erinomaisen lopullisen tuotteen takaamiseksi. Ja ole varovainen, että laajemmat mallisi eivät pääty liian yleisesti.
Joten miksei kaikki ole vastuussa suunnittelusta?
Vaikka reagoiva suunnittelu puhuu paljon ydinasioista, joita Internetin käyttö edellyttää monenlaisia laitteita, se voi myös luoda uusia ongelmia.
Käytä esimerkiksi mobiililaitteita. Jos henkilö pääsee elokuvateatteri-verkkosivustoon älypuhelimellaan, on todennäköistä, että heidän ensisijainen huolenai- suutensa on näyttämöajat, teatterin suunnat tai ehkä puhelinnumero teatteriin. He haluavat välittömän pääsyn tällaisiin tietoihin. Koko sivuston lataaminen, joka sisältää myös elokuvakatselmuksia ja muita tietoja, vain piilottaa sen hyvä osa siitä mobiilikäyttäjältä on resurssien tuhlausta.
Joten on tärkeää tarkastella reagoivaa suunnittelua tapauskohtaisesti selvittääkseen, onko se paras ratkaisu tietylle verkkosivustolle. Monissa tapauksissa se on, mutta on vielä joitakin tapauksia, joissa perinteisemmät mobiilisivustot saattavat olla suositeltavia.
Suunnittelijoina on kuitenkin tärkeää ymmärtää reagoiva muotoilu ja tietää, milloin se on sopiva ratkaisu projekteihisi. Koska paljon reagoivaa suunnittelua rakennetaan luomaan hyvin muodostettuja ja joustavia verkkosivustoja, se voi toimia eräänlaisena parhaimpana käytännöllisenä oppaana suunnittelijoille, kun siirrymme web-suunnitteluun ja web-standardeihin.
Lisää resursseja herkkien mallien luomiseen
- Flurid : Flurid on nestekidenäytön muoto, joka sopeutuu erilaisiin ikkunan leveyksiin. Vaikka se ei ole itsenäinen (lukuun ottamatta sarakkeen leveyksiä), se voi toimia reaktorisivuston luomisen selkäranka.
- Nestemäiset verkot : Tämä artikkeli A List Apart käsittelee etuja ja tietoja työskennellä nestesäiliöiden kanssa.
- Fluid Grid System : Toinen nestekerroskehys.
- Hardboiled CSS3-mediakyselyt : Toinen hieno opas mediakyselyihin.
Esimerkkejä reagoivista verkkosivustojen malleista
Kaikki alla olevat mallit eivät sopeudu suoraan mobiilikokoja, mutta jotkut tekevät, ja he kaikki voivat antaa sinulle ideoita siitä, miten voit mukauttaa verkkosivustosi malleja, jotta ne toimisivat paremmin laitteissa.
Sarakkeet tässä pinoavat ruudun leveyden perusteella, mutta ne ovat aina vähintään 4-kokoisia.
Tämä verkko järjestää itsensä uudelleen ja muuttaa sarakkeet dynaamisesti sopivimpaan selaimen ikkunaan.
Tämä järjestää myös kuvat uudelleen parhaiten täyttääksesi selainikkunasi.
CSS-trikkeihin sopeutuu laajempaan näytön tarkkuuteen, kun taas sivupalkki siirtyy kapeammille näytöille pääosan kohdalla.
Abduzeedo siirtää sisällön verkkosivun ympärille selaimen leveyden mukaan.
Psdtuts + -sivusto (yhdessä kaikkien muiden Tuts + sivustojen kanssa) kokoaa ja palauttaa sivupalkinsa selainikkunan leveyden perusteella. Ne myös muuttavat päätietopaketin leveyttä erilaisten koon mukaan.
Ruutu siirtyy neljästä pylväästä kahteen ruutuun näytön leveyden perusteella.
Asettelu täältä säätää kuvan kokoa leveyden perusteella sekä siirtää sarakkeita ympärille kapeammille näytöille.
Erinomainen esimerkki ulkoasusta, jossa sarakkeet muuttavat sijaintia pienemmille näytön tarkkuuksille.
Työviraston rakenne siirtyy nesteen leveydestä ja kiinteistä pylväsleveyksistä hyvin laaja-alaisille näytöille kiinteän leveyden muotoon useimmille näytön kokoille eri nesteenä kapeammille leveydelle.
Kirjoitettu yksinomaan WDD: lle Cameron Chapman .
Ovatko omat suunnitelmasi laajempia näyttöjä ja reagoivaa muotoilua varten? Jaa kommentit!