Reagoivat verkkoasettelut mobiilinäytöille Intro, vinkkejä ja esimerkkejä

Tämä artikkeli on osa meidän "Web Responsive Design -sarja" - työkaluja, resursseja ja opetusohjelmia, joiden avulla voit luoda verkkosivustoja kaikkien alustojen käyttäjille. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

Suunnittelijat ovat kovempia kuin aikaisemmin. Meidän ei tarvitse vain suunnitella kiinteitä laitteita, vaan myös mobiililaitteita, kuten tabletteja ja älypuhelimia, ja koska puhumme paljon erilaisista näytön kooista ja resoluutioista, se on valtava tehtävä olkapäähän. Tämän valossa, reagoiva web-suunnittelu voisi olla paras ratkaisu. Se tarjoaa enemmän kuin yksinkertaisen mobiilimallin; Sen sijaan koko sivustosi asettelun on oltava riittävän joustava, jotta se sopisi mihin tahansa mahdolliseen näytön resoluutioon.

Tällaisen nestemäisen suunnittelun avulla on ilmeisiä etuja ja haittoja. Harkitse alla olevia esimerkkejäni siitä, kuinka joustava web-suunnittelu voi siirtyä mobiililaitteisiin tasaisemmaksi.

Miten reagoiva muotoilu toimii

Kun käytän sanaa “herkkä” web-suunnittelun kannalta tarkoitan, että koko asettelu vastaa käyttäjän näytön tarkkuutta. Kuvittele tämä skenaario: luet verkkosivustoa yhdellä tabletilla ja vaihdat toiseen laitteeseen jostain syystä. Selainikkuna on nyt uudelleen kokoinen. Herkkä web-suunnittelun ulkoasu tuo mukanaan kaavioita ja ulkoasua, joka hajottaa ja uudistaa itsensä uudelleen. Käytettävyysnäkökulmasta tämä on loistava tekniikka.

Reagoiva muotoilu on tarkoitettu luomaan homogeeninen kokemus selaimen tai laitteen näytön koosta riippumatta. Olen löytänyt täydellisen esimerkin "A List Apart" -toiminnosta havainnollistaakseni pistettäni, joka sisältää myös dynaamiset kuvat. Leveys asetetaan CSS: ään käyttäen prosentteina enimmäkseen kaikkia sisäisiä säiliöelementtejä. Suuremmat sivustot vastaavat myös dynaamisen sisällön, kuten JavaScriptin, poistamiseen, kun sitä ei tueta.

Miksi Design for Mobile?

On käynyt ilmi, että useammat käyttäjät ovat menossa mobiiliin, eikä pelkästään web-selaamiseen. Tablet PC: t ovat alkaneet muuttua kontekstissa, kun käyttäjät ovat verkossa luokassa. Matkaviestinnän suunnittelu on varmasti vaatimus nykyaikaisissa web-standardeissa. Ainoa ongelma on kehitystavan valitseminen ja yleisön kohdistaminen asianmukaisesti.

Kun aloitat tiettyjen näytön resoluutioiden koodauksen, päädytte liian moniin tyylitaulukoihin. CSS3: n mediakyselyjä voidaan käyttää iPhone-spesifisten ulkoasujen rakentamiseen sekä pysty- että vaaka-näkymää varten. Koska voit määrittää pikselitiheyden, voit helposti muokata minkä tahansa HTML-mallin mobiililaitteille.

(Kuvalähde: bradfrostweb)

Mutta kun koodit ulkoasun reagoivaan suunnitteluun, mobiiliasiat hoidetaan oletusarvoisesti. Sekä työpöytä- että mobiilikäyttäjille tarjotaan samanlainen kokemus, eikä sinun tarvitse huolehtia ulkoisista CSS-ominaisuuksista. Ainoa tutkimus, jonka haluat tehdä, on suunnitella pienin mahdollinen näyttö. Google Analyticsin liikennetiedot voivat olla erittäin hyödyllisiä.

Web-sivustosi ei todennäköisesti toimi 100% jokaisella laitteella, joka käyttää jokaista selainta. Voit kuitenkin kohdistaa enemmistön näytön keskimääräisen leveyden perusteella. Vanhemmat iPhone-mallit käyttävät 320 × 480 näytön tarkkuutta, joka ei ole niin uskomaton. Haluaisin ampua vähintään 240px: n leveydelle tai jopa pienemmälle, jos se mahtuu.

Oletus zoomin poistaminen

Jos olet viettänyt aikaa selaamalla Webiä älypuhelimessa, huomaat, miten verkkosivut on vähennetty näyttämään kokonaan näytössä. Tämä on käyttäjän mukavuutta, sillä useimmilla verkkosivuilla ei ole mobiilivastaajaa, joten koko asettelu on turvallisin veto.

Mutta kun pääset rakentamaan reagoivaa mobiilisuunnittelua, automaattinen zoomaus voi todella sekoittaa ulkoasun elementtejä. Kuvat ja navigointisisältö saattavat näkyä pieninä tai liian suurina ulkoasussa. On olemassa erityinen metatunniste, jonka voit lisätä asiakirjaotsikkoon, joka nollaa tämän useimmissa Android- ja iPhone-laitteissa.

Tätä kutsutaan nimellä viewportin metatunniste joka määrittää joitakin mukautettuja muuttujia sisällön sisällä. Applella on dokumentointisivu, joka koskee muutamia muita metakoodeja, joita sinun pitäisi tutkia, vaikka ne on suunnattu erityisesti iOS-sivustoille. ensimmäinen mittakaavan arvo on tärkeä, koska tämä määrittää Web-sivuston täyden 100% zoomauksen.

Viimeinen arvo käyttäjän skaalautuva poistaa tämän zoomaustoiminnon kokonaan, joten käyttäjä ei voi muuttaa ulkoasun kokoa. Tämä lukitsee mallin yhdeksi kooksi laitteen koko leveyden perusteella. Huomaa, että vaikka zoomaustoiminto poistettaisiin käytöstä, hyvä reagoiva muotoilu sopeutuu aina, kun siirryt muotokuvasta maisemaan millä tahansa laitteella! Mutta on järkevää lukita reagoiva suunnittelu ja poistaa yleiset skaalausvaihtoehdot.

Dynaaminen kuvan skaalaus

Kuvat ovat toinen tärkeä osa käytännöllisesti katsoen jokaista verkkosivustoa. Mobiilikäyttäjät eivät ehkä etsi videoita, mutta valokuvat ovat täysin erilainen tarina. Nämä ovat myös suurimpia syyllisiä, kun kyse on laatikkomallista poikkeavista ulkoasuista.

img max-leveys: 100%;

CSS: n standardisääntö on soveltaa max-width-ominaisuutta kaikkiin kuviin. Koska ne ovat aina 100%, et koskaan huomaa vääristymiä. Kun käyttäjä kokoa selaimen ikkunan pienemmäksi kuin kuvasi pystyy käsittelemään, se säätää automaattisesti 100% leveyden, joka on pienennetty. Ongelmana on se, että Internet Explorer ei ymmärrä tätä ominaisuutta, joten sinun on koottava yhteen IE-tyyppinen tyylitaulukko leveys: 100%;.

Joustavat kuvat ovat myös mahdollisia, jos käytät JavaScript- tai jQuery-laajennuksia. On olemassa todella älykkäitä kehittäjiä, jotka ovat asettaneet aikaa rakentaa uskomattoman reagoivaa kuvan sisältöä. Tämä kierre on vain yksi monista Stackin ylivuoto -ominaisuuksista, joissa on äärimmäisen miellyttävä tapa ratkaista IE6 / 7-virheitä.

Haluaisin henkilökohtaisesti suositella kiinni CSS-kuvan luonnolliseen koon muuttamiseen. Jos sivustosi on käynnissä mobiiliselaimessa, jossa JavaScript on käytössä, se voi myös tukea CSS: ää. Jos haluat todella kaivaa syvemmälle, tutustu tähän 24 tapaan, jossa on kuvia kuvista Adaptive Designs…

Suunnittelun koskettaminen

Web-kehittäjät voivat unohtaa, että mobiilikäyttäjät eivät enää ole BlackBerrys-puhelimissa, kuten puhelimissa. Suurin osa älypuhelimista käyttää nykyään kosketusnäyttöliittymiä, jotka muuttavat skenaarion hiiren ja näppäimistön asetuksista.

Sinun täytyy näin ollen harkita vaihtoehtoisia ratkaisuja mobiilielementteihin. Pudotusvalikot voivat toimia paremmin, kun ne näytetään yhtenä valikkona oikealla puolella. Useimmat käyttäjät pystyvät napauttamaan oikealla puolella olevia linkkejä helpommin kuin vasemmalla, mutta kumpikin sarake toimii tilan lievittämiseksi. Käyttämällä marginaaleja, on helppo tunnistaa linkin hierarkia ilman mitään jQuery-koodia.

On myös hyvä käytäntö lisätä näiden navigointilinkkien kokoa. Mobiilikäyttäjillä ei ole ylellisyyttä suurista näytöistä, jotka on tarjolla pöytätietokoneilla tai jopa kannettavilla tietokoneilla. Sinun on pidettävä tekstiä suurena, etupuolella, pystyttävä ja luettavissa kaikin kustannuksin. Saatat jopa haluta muuttaa kokoa, jos käyttäjä vaihtaa muotokuvan ja maisemanäkymän välillä - melko yleinen toistuminen mobiiliverkon selaamisen aikana.

Mukautetut CSS-asettelut

Yleensä on parasta mukauttaa ulkoasua ja sallia sisällön luonnollinen huonontuminen. Jos sinulla on sivupalkki ja sisältöalue, sinun tulee asettaa ne prosentti- tai ems-leveydeksi, mikä tahansa, joka koosta uudelleen selainikkunassa. Jos käytät a min-leveys tämä lopulta katkeaa osan ulkoasusta; nyt sivupalkin sisältö näkyy sivun sisällön yläpuolella.

(Image Source: Pepperson)

Kun harkitset, miten tämä vaikuttaa kokonaissuunnitteluun, on ulkoisten tyylitaulukoiden kehittäminen helpompaa. Voit kuitenkin joutua näytön resoluutioihin, jotka ovat aivan liian pieniä, jotta ulkoasu voidaan tehdä. Tämä on täydellinen skenaario mukautettujen CSS-ominaisuuksien lisäämiseksi sivun osien poistamiseksi tai sisällön alustamiseksi kokonaan.

Vaihda ylimääräistä sisältöä päälle / pois

Esimerkkejä suurista sisällön lohkoista ovat web-lomakkeet, dynaamiset valikot, kuvan liukusäätimet ja muut vastaavat ideat. Sen sijaan, että nämä elementit poistettaisiin kokonaan, ulkoasu pienenee, miksi et yksinkertaisesti piilota niitä a “minimoitu” sisältö div? Voit käyttää muokkauksia käyttämällä joko CSS- tai JavaScript-versiota, mutta lopulta tarvitset JS-koodin, jotta voit luoda vaihtopainikkeen.

Tämä vaihtoehto on täydellinen pitämään kotisivusi dynaamisena ja täynnä runsaasti web-mediaa. Voit piilottaa sen pudotusvalikosta tai sivun rakenteen uudelleen järjestämisen sijasta piilottaa sen sisällön div. Jos käyttäjä haluaa näyttää linkkinsä, avaa / sulje valikko napauttamalla vaihtopainiketta.

Tämä muotoilu on yksinkertainen, intuitiivinen ja helppokäyttöinen kosketusnäyttölaitteissa. Divin sisällä voit sijoittaa jokaisen pudotusvalikon vierekkäin sarakkeen muodossa. Kun ikkuna muuttuu pienemmäksi, ne laskevat luonnollisesti toistensa alle ja lisäävät sivukorkeutta. Silti koko valikon romahtaminen on helposti saavutettavissa ja vain yksi kosketus. Tämä toggle div sopii myös kuvien liukusäätimille yhteistyössä dynaamisen valokuvan uudelleenmittauksen kanssa.

Media-kyselyjen käyttäminen

Jos mobiilinäyttö rikkoo 2 tai 3-sarakkeen asettelua, pääset jokaisen sisältöalueen pinoon toistensa päälle. Koko sivusto näyttäisi vuotavan, ja se voi tulla hyvin hämmentäväksi ilman erottuvia lohkoalueita. Parempi idea on lisätä alaraja jokaiselle sarakkeelle, vain mobiililaitteille, käyttämällä ulkoista tyylitaulukkoa mobile.css.

Näillä uusilla tyyleillä sisältö on jaettu jaettaviksi osiksi. Yllä oleva mediaattribuutti on suunniteltu kohdistamaan vanhempiin iPhone-laitteisiin maisemanäkymässä. Mutta se koskee myös laitteita, joiden näytöt ovat pienempiä kuin 480 pikseliä. Käytä tätä eduksi, jotta voit määrittää, missä vaiheessa asettelu on “hajoaa”.

Laitteen suunnan havaitsemiseksi on muutamia muita vaihtoehtoja. Tämä fantastinen opas CSS-medioissa voi antaa sinulle muutamia ideoita. Lisäksi uusi mobiiliprojekti 320 ja ylös tarjoaa kattilan mobiilille CSS: lle @media tyylejä. Nämä voidaan liittää suoraan samaan mobile.css-tiedostoon ja soveltaa sääntöjä moniin eri laitteisiin.

 / * Älypuhelimet (muotokuva ja maisema) ----------- * / @media vain näyttö ja (min-laite-leveys: 320px) ja (max-laitteen leveys: 480px) / * Tyylit * / / * Älypuhelimet (maisema) ----------- * / @media vain näyttö ja (min-leveys: 321px) / * tyylit * / / * älypuhelimet (muotokuva) ---- ------- * / @media vain näyttö ja (max-leveys: 320px) / * Tyylit * / / * iPadit (muotokuva ja maisema) ----------- * / @ vain media-näyttö ja (min-laite-leveys: 768px) ja (max-device-width: 1024px) / * Styles * /

(Lähde: Hardboiled CSS3 Media Queries)

Hyödyllisiä työkaluja

Luuranko - kaunis kotelo Responsive Mobile Designille
Siirtyminen mukautuvasta täysin reagoivaan

Showcase: Kauniita reagoivia malleja

Toivon, että nämä vinkit ja suunnittelutekniikat rohkaisevat sinua siirtymään kohti mielenkiintoisia, mielenkiintoisia ulkoasuja paitsi mobiilinäytöille, mutta myös kaikille tavallisille laitteille, joissa on Web-selailu. Jotta voisimme pitää luovat mehut virtaavina, olen koonnut pienen esityksen reagoivista mobiilisovelluksista. Muista tarkistaa joitakin ainutlaatuisempia ominaisuuksia ja jakaa ajatuksiasi keskustelualueen suunnittelusta tai aiheesta.

ripustaa kuu