Huomautus: Seuraava artikkeli auttaa sinua: Mikä on Mobile First Design?
Mikä on Mobile First?
“Mobile First Design”:n merkitys näkyy sen nimessä: muotoilu, joka on suunniteltu “Mobile Firstille”.
Tiedät luultavasti, että Verkkosivusto tulee suunnitella erikokoisille näytöille, kuten työpöydän suunnitteluun, mobiilisuunnitteluun, tablettien suunnitteluun jne., jotta käyttäjät, joilla on mikä tahansa alusta ja WiFi, voivat tarkastella verkkosivustoa hyvin. Tätä web-suunnittelun konseptia kutsutaan responsiiviseksi suunnitteluksi, johon sinun on tutustuttava ymmärtääksesi mobiilikäsitteen ensin. Seuraava artikkeli opastaa sinut mobiililähtöiseen lähestymistapaan tai mobiililähtöiseen suunnitteluun.
Kun sivujen suunnittelu mobiililaitteille on suunnittelijan prioriteetti suunnittelun alussa, sitä kutsutaan “mobiili ensiksi suunnitteluksi”. Tällä tavalla verkkosivujen suunnittelijan tulee ensin harkita sivuasettelua pienempiä näyttökokoja varten, suunnitella ensin pienin koko ja sitten laajentaa suunnittelua suurempiin tukiin.
Mobile First -sivuston suunnittelu on lähestymistapa, jossa verkkosivujen suunnittelussa huomioidaan mobiilikäyttäjien suunnittelun prioriteetti ja tehdään kaikkensa pienempiin ja suurempiin mittoihin tavalla, joka eroaa alkuperäisestä mobiilisuunnittelusta. Se pitäisi rakentaa. Sama tarkoittaa, että käyttöliittymän kauneuden ja toteutuksen sekä oikeanlaisen käyttökokemuksen priorisointi on tärkeämpää mobiilikävijöille.
Lopuksi, jos verkkosivusto on hyvin suunniteltu, sen pitäisi olla katsottavissa kaikissa koossa ja kaikilla laitetyypeillä. Sekä matkapuhelimissa, joissa näytön leveys on pienin, että pöytätietokoneissa tai tableteissa, mutta myös suuremmissa mitoissa, kuten kannettavissa Tietokoneissa ja suuremmissa näytöissä, joilla on suurempi leveys. Aiemmin verkkosivusto suunniteltiin pöytäkoneille ja suurille näytöille, ja verkkosivuston suunnittelija yritti parhaansa mukaan standardoida suunnittelun pienempiä laitteita varten. Kuten mainittiin, se on suunniteltu reagoimaan.
Suunnittele ensin mobiililaitteille.
Tämäntyyppinen suunnittelu eroaa Desktop First Designista, jossa verkkosivustot on suunniteltu työpöytänäytöille ja optimoitu pienemmille näytöille ohjelmointitekniikoiden avulla.
Tällä hetkellä maailmassa mobiili-first-lähestymistapa ja -menetelmä puolestaan vaatii alusta alkaen verkkosivujen suunnittelijaa; Riippumatta työpöydällä käytetyistä ylimitoista, kokonaisen suunnittelun tulisi olla hyvin toteutettu pienessä koossa. Jos se on sopiva ja siinä on hyvä suunnitelma ja viimeistely, se tulee tehdä asteittain suurempia mittoja ja näyttöjä kohti.
Miksi meidän pitäisi käyttää Mobile First -sopimusta?
Kuten tiedät, yhä useammat ihmiset käyttävät älypuhelimia joka vuosi. Statistan voimassa oleva tilastokaavio näyttää älypuhelinten käyttäjät vuodet 2016–2020. Nämä tilastot ovat saatavilla myös vuodelle 2021, ja vuodelle 2022 voit saada ennustetilastoja tältä sivulta. Katso myös
Miksi meidän pitäisi käyttää Mobile First -sopimusta?
Se, että älypuhelimien käyttö lisääntyy joka päivä ja huomattava osa verkkosivustoista katsotaan vain matkapuhelimilla, on yksi syy mobiilien ensisuunnittelun suosioon. Joka vuosi yhä useammat käyttäjät vaihtavat älypuhelimiin, mikä mahdollistaa haun suorittamisen saman matkapuhelimen avulla. Tästä syystä verkkosivustosi kävijöiden määrä mobiililaitteiden kautta kasvaa joka vuosi.
Vuodesta 2012 lähtien älypuhelinten myynti on ylittänyt kannettavien. Mobiilikäyttäjät käyttävät myös enemmän aikaa Internetissä surffaamiseen. Kaikki tämä saa web-suunnittelijan siirtymään ensisijaiseen mobiilisuunnitteluun. Ero mobiiliversion ja pöytäkoneen ensimmäisen suunnittelun välillä koodissa
Kun kirjoitat HTML:ää, sivun koolla ei ole paljon väliä palvelinpuolen ohjelmointi Kielet, koska CSS määrittää, miten kukin HTML-tunniste näytetään kussakin näkymässä.
Siirrytään koodiin ymmärtääksesi enemmän. Oletetaan, että haluat antaa taustalle eri värin mobiili- ja työpöytänäytöissä. Seuraavaa koodinpätkää käytetään Mobile First -teemassa:
//Tätä koodia käytetään välillä 0px – 600pxbody { background: red; }
// Tätä koodia käytetään alkaen 600 pikselistä{@media (min leveys: 600 pikseliä)Body { tausta: vihreä; } }
Yllä olevassa koodissa olemme ottaneet taustan punaisen värin. Jos näytössä on yli 600 pikseliä, muutamme taustavärin vihreäksi. Siksi tämä lähestymistapa oli alun perin mobiilisuunnitelma. Kiinnitä nyt huomiota seuraavaan koodinpätkään.
body { tausta: vihreä; }
// Tätä koodia käytetään välillä 0px – 600px{@media (max-width: 600px)body { background: red; }}
Yllä olevassa koodissa olemme aluksi valinneet taustan vihreän värin. Sitten asetimme vaiheet lukemiseen mobiilinäytöltä. Tämä tarkoittaa, että se suunniteltiin alun perin työpöytätyyliin ja oli toisin kuin mobiiliversio.
Tämä on tietysti yksinkertainen ja ei-toiminnallinen esimerkki. Web-suunnittelijan Web-sivuston suunnittelussa kohtaamat monimutkaiset ongelmat voivat sisältää sivuston navigoinnin tai tuoteluettelon, kuvan liukusäätimiä, uutisia ja artikkeleita sekä monimutkaisempia osia. Kuten verkkosivuston ylä- tai alatunnisteen, sen pitäisi olla haastava. Joissakin tapauksissa mobiiliystävällinen suunnittelu eroaa suuresti työpöytäsuunnittelusta, ja web-suunnittelijan on haastavaa vangita kaikki tilanteet hyvin.
Toinen mobiililähtöiseen suunnitteluun keskittymisen etu on se, että Google on käyttänyt algoritmejaan kiinnittääkseen enemmän huomiota mobiiliystävällisiin verkkosivustoihin. Tietenkin tämä tapa johtuu tarpeesta, ja käyttäjät ovat luoneet sen tarpeen. Joten vaikka orgaanisen liikenteen saaminen hakukoneilta on olennaista useimpien yritysten menestykselle, Googlen algoritmi priorisoi sen hyödyt hakukoneoptimoinnissasi ja liiketoiminnan kasvussa. Sinun tulisi ymmärtää tämä uusi lähestymistapa ennen verkkosivustosi suunnittelua. Kysy tästä sivustosi suunnittelijalta.
Kaukaisessa menneisyydessä responsiivista verkkosivustoa pidettiin eduna, ja Google piti responsiivisista verkkosivustoista enemmän, mutta uusi lähestymistapa on tehnyt tästä vaatimuksesta välttämättömän. Voit myös nähdä merkkejä mobiililähtöisen suunnittelun eduista Search Consolessa. Mobiiliystävällisyys on yksi tärkeimmistä teknisistä kysymyksistä. Jos mobiilinäytössä on ongelma, Google näyttää sinulle virheilmoituksen ja kehottaa korjaamaan ongelman välittömästi. Ongelman ratkaisemiseksi.
Diplomi
Mobiiliystävällisyys voi olla nyt etu, mutta siitä tulee pian pakollinen, kuten myös responsiiviset toiminnot. Joten suunnittele verkkosivustosi ensin mobiililaitteille.
