Reagoivat otsikot ja logot - vinkkejä ja haittaa

Herkän web-suunnittelun käsite on läpäissyt webin ja siitä on tullut etupaneelin kehittäjille. Nykyaikaisessa maailmassa ei ole kyseenalaista muotoilun arvoa, mutta on vaikea ymmärtää täysin, miten suunnitellaan reagoivaa ulkoasua oikein.

Aihe voi jatkua pitkällä aikavälillä, koska verkkosivuston ainutlaatuisia alueita on niin paljon, mutta yksittäisiin elementteihin keskittyminen voi auttaa sinua ymmärtämään paremmin käyttäjän tavoitteet ja miten nämä tavoitteet voidaan saavuttaa vastaavalla suunnittelulla.

Haluaisin kattaa otsikot, logot, ja navigointivalikot, koska ne koskevat herkkää suunnittelua. Ota nämä ehdotukset huomioon omassa työssäsi ja suunnittele rajapinnat käyttäjän käyttäytymistä ajatellen.

Ohuemmat navat

Suurissa näytöissä on normaalia olla suuret otsikot, ehkä jopa ylisuuret otsikot, joissa on monitasoiset linkkikerrokset. Mutta pienemmillä näytöillä ei ole samaa tilaa, ja niitä tulisi rajoittaa tarpeen mukaan.

Koska alkuperäisissä mobiilisovelluksissa on tyypillisesti kiinteät otsikot, tämä on yleinen käytäntö myös reagoivassa suunnittelussa. Kiinteä otsikko pitäisi myös kutistua pienemmissä laitteissa: tämä jättää enemmän tilaa sisällölle, mutta antaa lukijoille suoran pääsyn otsikkoon ja navigointiin.

Ota esimerkiksi Cartoon Brew -asettelu täysikokoisella näytöllä ja mobiililaitteella.

600 pikselin katkaisupisteessä navigointi kutistuu lähes puoleen sen korkeudesta sivulla. Tämä tekee sekä logon että napsautettavan nav-valikon pienemmäksi, mutta ne ovat paljon suhteellisempi suhteellisen näytön tilaan.

Harkitse myös, että Cartoon Brew -laitteessa on avattava valikko, joka on reagoiva valikko mobiilinäytössä. Tämä tarkoittaa sitä peittää sisällön sivulla, kun se avataan, joten on tärkeää jättää runsaasti tilaa tähän.

Samanlainen esimerkki löytyy Jacksonville Art Walk -sivustolta. Ylin navbar pysyy kiinteänä vierityksen aikana kutistuu pienemmille laitteille. Tämä on parempi reagoivaan suunnitteluun, koska ohuempi navbar jättää enemmän tilaa sisällölle pienemmässä mobiilinäytössä.

Jokaisessa navbarin linkissä on siihen liittyvä kuvake, joka on liitetty tekstilinkkiin. Tämä näyttää hyvältä laajakuvanäytössä, mutta se on liian yksityiskohtainen pienemmille näytöille.

Art Walkin navigointi muuttuu pudotusvalikkoon, jossa on kiinteät yhteydet 770px: n katkaisupisteen ympärille. Kuvakkeet piilotetaan avattavasta valikosta, koska ne olisivat liian pieniä ja liian pieniä pienempiin laitteisiin.

Suunnittelemalla vasteellinen otsikko on aina otettava huomioon koko näytön tilaa samalla kun muotoilet navbaria. Jos et halua, että otsikko pysyy kiinteänä, se on täysin kunnossa, mutta silti ehkä haluat kutista se vähän säästää tilaa sivun yläreunassa.

Iconify Logo

Useimmat logot sisältävät jonkin verran tekstiä ja kuvaketta tai kuvaa, joka edustaa tuotemerkkiä. Tämä tarkoittaa, että voit aina iconify (kyllä ​​se on todellinen sana) tällaisia ​​logoja alas symboliin sen täysversio.

Tämä on tehokas tekniikka reagoiville otsikoille, koska ei ole aina tarpeeksi tilaa täydelle logolle. Menetät osan täysikokoisen logon glitz & glamourista, mutta se on hinta, joka sinun on ehkä maksettava puhtaasta reagoivasta ulkoasusta.

Tutustu Web Designer News -logoon ja katso, miten se muuttuu selaimen kokoa muutettaessa.

Ehkä kaikki eivät tunnista tätä kuvaketta, kun vierailet sivustolla, mutta kiitos hahmontunnistus tämä ei ole suuri ongelma.

Ihmiset ovat olleet Internetissä tarpeeksi kauan tietää, että sivun vasen yläkulma on yleensä varattu logolle. Tämä pieni vaaleanpunainen kuvake on myös käytössä faviconissa, joten on helppo tehdä joitakin johtopäätöksiä kaivamatta liian pitkälle sivustoon.

Sinun ei tarvitse aina luottaa grafiikkaan tässä tiivistetyssä logon tekniikassa. Young And Hungryn otsikko käyttää kirkas vihreää tekstiä logolle, joka lopulta tiivistyy tekstiin "Y&H".

Tämä ei välttämättä toimi jokaisella sivustolla, jos tuotemerkkiä ei ole helppo tunnistaa yksittäisiksi kirjaimiksi. Mutta se osoittaa, että logot voidaan tehdä yksinkertaisemmaksi osaksi sekä grafiikkaa että tekstiä ja molempia vaihtoehtoja vie vähemmän tilaa pienemmissä näytöissä.

Koko näytön taustojen käsittely

Monet aloitussivut käyttävät koko näytön taustoja kiinnittämään enemmän huomiota. Tämä on tehokas tekniikka, mutta usein se toimii parhaiten suurilla monitoreilla.

Joten miten käsittelet tätä pienemmällä näytöllä? Yleensä suunnittelijat poista taustakuva tietyn katkaisupisteen tai itse kuvan saa uudelleen mahtuu ikkunaan.

Cap Radio Raffle käyttää tätä tekniikkaa kotisivullaan. Taustakuva pitää yhteyspisteen aina, riippumatta siitä, kuinka paljon näyttöä muutetaan.

Tällainen ratkaisu on tyypillisesti vaatii jonkin CSS-paikannuksen mutta se on todella helppoa, kun pääset siihen. Vain säilyttää yhteyspiste aina, ja muuttaa kuvan säiliön kokoa sopii suhteessa laitteeseen.

Saatat myös käyttää suuria kuvia sivun sisällölle suurten taustojen takia esteettisistä syistä. Mashablein kotisivulla on esillä olevan kuvan taustakuva, joka sisältää koko ulkoasun.

Heidän herkkä ulkoasunsa pakkaa kuvan sillä aikaa keskeinen yhteyspiste. Tämän tekeminen on vaikeaa, koska kuvassa näkyvä kuva muuttuu, kun tarina muuttuu, joten kuvat on kehitettävä huolellisesti. Mashablein ratkaisu on edelleen erinomainen tapa käsitellä koko näytön valokuvia blogien ja aikakauslehtien asetteluihin, kun ne on suunniteltu oikein.

Yksinkertaista navigointia

Kun uusit pienempiä näyttöjä, pitää mahdollisimman monta linkkiä navigoinnissa, ja helposti. Tämä tarkoittaa, että saatat joutua ojentamaan muutamia linkkejä, jos sinulla on monitasoinen pudotusvalikko.

Vaikka sinulla on oikea strategia, on kuitenkin mahdollista pitää kaikki pudotusvalinnat taktisina. Esimerkiksi Kidscreen käyttää a flyout-valikko pienillä nuolikuvakkeilla osoitetaan aliverkot reagoivassa valikossa.

Monet ihmiset kiistelevät hampurilaisvalikkoa, mutta olen tullut hyväksymään sen välttämättömänä kohteena pitkille nav-valikoille. Se toimii yksinkertaisesti ja useimmissa älypuhelinten käyttäjissä on yleisesti ymmärretty "valikkopainikkeeksi".

Itse asiassa, olisit vaikeasti löytänyt reagoivaa sivustoa, joka ei luota kolmen baarin hampurilaisvalikkoon. CyberChimps on hyvä esimerkki käyttää pystysuoraa pudotusvalikkoa pikemminkin kuin dia.

CyberChimpsin navigointirakenne järjestetään uudelleen, jotta se liukuu alas sivun yläreunaan. Valikko putoaa ylhäältä suuria lohkoelementtejä.

Kanssa lisää napsautettavaa aluetta ja suurempi linkin teksti, sivujen navigointiprosessi on paljon yksinkertaisempi. Tavoitteena on seurata tätä filosofiaa koko vastaavan otsikon kanssa, ja mallit paranevat huomattavasti.

Rakenna omasi

Näiden vihjeiden avulla sinun ei pitäisi olla vaikeuksia rakentaa käyttökelpoisia reagoivia otsikoita. Vaikka on paljon työkaluja, jotka auttavat sinua, ainoa tapa todella ymmärtää on käytännössä.

Joten ota nämä tekniikat mukaasi ja aloita sivustojen rakentaminen! Olen myös luetellut muutamia muita resursseja reagoiville otsikoille, joita voit tarkistaa alla.

• Luo Mobile CSS: n perusherkkä navigointivalikko (Teamtreehouse.com)
• Paras käytäntö verkkosivujen otsikkoriville (Ux.stackexchange.com)
• Miten voin tehdä otsikkokuvan oikein? (Stackoverflow.com)