{"id":249520,"date":"2023-05-07T15:29:00","date_gmt":"2023-05-07T12:29:00","guid":{"rendered":"https:\/\/inform.click\/mobile-first-designs-tarkeys-ja-uusimmat-trendit\/"},"modified":"2023-05-07T15:29:00","modified_gmt":"2023-05-07T12:29:00","slug":"mobile-first-designs-tarkeys-ja-uusimmat-trendit","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/mobile-first-designs-tarkeys-ja-uusimmat-trendit\/","title":{"rendered":"Mobile First Designs \u2013 t\u00e4rkeys ja uusimmat trendit"},"content":{"rendered":"<p>\n  Kuten nimest\u00e4 voi p\u00e4\u00e4tell\u00e4, mobiili ensisijainen suunnittelu antaa etusijalle verkkosivuston tai sovelluksen suunnittelun mobiililaitteille ennen ty\u00f6p\u00f6yt\u00e4versioita.\n<\/p>\n<p>\n  Mobile First Designs on kehitysalan uusin trendi. Kuten kaikki tied\u00e4mme, matkapuhelink\u00e4ytt\u00e4jien markkinat kasvavat merkitt\u00e4v\u00e4sti, matkapuhelimen k\u00e4ytt\u00e4j\u00e4n tarpeisiin keskittyv\u00e4n kehityksen priorisointi parantaa tavoittavuutta ja latauksia.\n<\/p>\n<h5>\n  Mik\u00e4 siis periaatteessa on Mobile First?<br \/>\n<\/h5>\n<p>\n  Vuoteen 2019 menness\u00e4 \u00e4lypuhelinten k\u00e4ytt\u00e4jien kokonaism\u00e4\u00e4r\u00e4n odotetaan nousevan 2,7 miljardiin, kun taas matkapuhelink\u00e4ytt\u00e4jien kokonaism\u00e4\u00e4r\u00e4n odotetaan ylitt\u00e4v\u00e4n viiden miljardin rajan.\n<\/p>\n<p>\n  T\u00e4st\u00e4 syyst\u00e4 matkapuhelinten k\u00e4ytt\u00e4jien m\u00e4\u00e4r\u00e4n eksponentiaalisessa kasvussa kaikkialla maailmassa on mobiiliyst\u00e4v\u00e4llisten verkkosivustojen ja sovellusten kysynt\u00e4 lis\u00e4\u00e4ntynyt.\n<\/p>\n<p>\n  Historiallisesti aina, kun joku halusi rakentaa verkkosivuston tai sovelluksen, h\u00e4n keskittyi ty\u00f6p\u00f6yt\u00e4version luomiseen pit\u00e4en mobiiliyst\u00e4v\u00e4llisen version toissijaisena vaihtoehtona.\n<\/p>\n<p>\n  Uusin l\u00e4hestymistapa, joka keskittyi mobiilien ensisuunnitteluun, ei ainoastaan \u200b\u200bluo lis\u00e4\u00e4 mahdollisuuksia yritykselle, vaan lis\u00e4\u00e4 my\u00f6s k\u00e4ytt\u00f6kokemusta.\n<\/p>\n<p>\n  Aloittaminen ensin pienest\u00e4 n\u00e4yt\u00f6st\u00e4 ja sitten p\u00e4\u00e4seminen suurempaan n\u00e4ytt\u00f6\u00f6n tunnetaan progressiivisena parannuksena. Tarkoituksena on keskitty\u00e4 kompaktiin n\u00e4ytt\u00f6\u00f6n t\u00e4rkeimm\u00e4n sis\u00e4ll\u00f6n tarjoamiseksi k\u00e4ytt\u00e4j\u00e4lle ja sitten lis\u00e4t\u00e4 parannuksia suurempaan n\u00e4ytt\u00f6\u00f6n.\n<\/p>\n<h5>\n  Mobile Firstin merkitys<br \/>\n<\/h5>\n<p>\n  Nyky\u00e4\u00e4n ihmiset k\u00e4ytt\u00e4v\u00e4t Interneti\u00e4 matkapuhelimillaan enemm\u00e4n kuin p\u00f6yt\u00e4tietokoneita tai kannettavia tietokoneita. Matkapuhelimien k\u00e4ytt\u00f6 on lis\u00e4\u00e4ntynyt merkitt\u00e4v\u00e4sti viimeisten 5-10 vuoden aikana ostoksista lukemiseen, ty\u00f6st\u00e4 pelien pelaamiseen, ja sen odotetaan ylitt\u00e4v\u00e4n p\u00f6yt\u00e4tietokoneiden k\u00e4yt\u00f6n.\n<\/p>\n<p>\n  Siksi on eritt\u00e4in t\u00e4rke\u00e4\u00e4 keskitty\u00e4 verkkosivuston tai sovelluksen mobiiliasetteluun ennen kuin ty\u00f6skentelet ty\u00f6p\u00f6yd\u00e4ll\u00e4 tai suuremmalla n\u00e4yt\u00f6ll\u00e4.\n<\/p>\n<p>\n  Mobiilisuunnittelussa\/layoutissa ei juurikaan ole mahdollisuutta laittaa pienelle n\u00e4yt\u00f6lle kaikkea mit\u00e4 haluamme, vaan vain t\u00e4rke\u00e4n sis\u00e4ll\u00f6n, jonka t\u00e4ytyy tavoittaa k\u00e4ytt\u00e4j\u00e4.\n<\/p>\n<p>\n  T\u00e4m\u00e4 lis\u00e4\u00e4 k\u00e4ytt\u00f6kokemusta ja lis\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4n mahdollisuuksia pysy\u00e4 verkkosivustollasi, mik\u00e4 v\u00e4hent\u00e4\u00e4 poistumisprosenttia.\n<\/p>\n<p>\n  Mobile First katsotaan my\u00f6s Content Firstiksi, koska pieni n\u00e4ytt\u00f6 mahdollistaa vain merkitt\u00e4v\u00e4n ja t\u00e4rke\u00e4n sis\u00e4ll\u00f6n tarjoamisen k\u00e4ytt\u00e4j\u00e4lle parantaen k\u00e4ytt\u00f6kokemusta maksimaalisesti. Matkapuhelimen k\u00e4ytt\u00e4j\u00e4 odottaa verkkosivuston tai sovelluksen olevan nopea, kevyt ja laadukas tarjoamalla juuri sen, mit\u00e4 h\u00e4n haluaa n\u00e4hd\u00e4.\n<\/p>\n<h5>\n  Kuinka Mobile First toimii?<br \/>\n<\/h5>\n<p>\n  Mobile First -l\u00e4hestymistapa on se vahva perusta, joka vahvistaa suunnittelua suuremmille n\u00e4ytt\u00f6versioille, kuten p\u00f6yt\u00e4tietokoneille ja tableteille.\n<\/p>\n<p>\n  Mobile First l\u00e4hestymistapa keskittyy sis\u00e4lt\u00f6\u00f6n navigoinnin sijaan. Toisin sanoen se korostaa k\u00e4ytt\u00f6kokemusta sis\u00e4ll\u00f6n ja tietojen nopeammasta p\u00e4\u00e4syst\u00e4 ilman paljon vierityst\u00e4.\n<\/p>\n<p>\n  Kun pisteen tiedot ovat k\u00e4ytt\u00e4j\u00e4n saataville, se lis\u00e4\u00e4 konversioprosenttia ja latauksia, mik\u00e4 tuottaa voittoa yrityksellesi.\n<\/p>\n<p>\n  Mobiili ensimm\u00e4inen muotoilu rajoittaa suunnittelijan k\u00e4ytt\u00e4m\u00e4\u00e4n vain sit\u00e4 sis\u00e4lt\u00f6\u00e4, jota k\u00e4ytt\u00e4j\u00e4 eniten tarvitsee, poistaen ylim\u00e4\u00e4r\u00e4iset elementit.\n<\/p>\n<p>\n  Ylim\u00e4\u00e4r\u00e4iset elementit eiv\u00e4t ole v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4, vaan niit\u00e4, joita ei tarvitse n\u00e4ytt\u00e4\u00e4 mobiilik\u00e4ytt\u00e4jille. N\u00e4it\u00e4 elementtej\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 ty\u00f6p\u00f6yt\u00e4-\/tablettiversioissa.\n<\/p>\n<p>\n  On ymm\u00e4rrett\u00e4v\u00e4\u00e4, ett\u00e4 mobiilik\u00e4ytt\u00e4j\u00e4ll\u00e4 on erilaiset vaatimukset kuin p\u00f6yt\u00e4koneen k\u00e4ytt\u00e4j\u00e4ll\u00e4. Mobiilik\u00e4ytt\u00e4j\u00e4t pit\u00e4v\u00e4t pienest\u00e4 tiedosta ja rajoitetuista mutta t\u00e4rkeist\u00e4 ominaisuuksista verrattuna p\u00f6yt\u00e4koneiden k\u00e4ytt\u00e4jiin, jotka vaativat perusteellista tietoa ja lis\u00e4ominaisuuksia.\n<\/p>\n<h5>\n  N\u00e4kyvi\u00e4 esimerkkej\u00e4 Mobile First -malleista<br \/>\n<\/h5>\n<ol>\n<li>\n<p>\n      <strong>YouTube<\/strong> \u2013 YouTuben ty\u00f6p\u00f6yt\u00e4versio on YouTube-sovelluksen laajennettu versio. Lis\u00e4ksi sivustolla on responsiivinen muotoilu, mik\u00e4 tarkoittaa, ett\u00e4 jos pienenn\u00e4t selaimen kokoa tai resoluutiota, se mukautuu pienemp\u00e4\u00e4n n\u00e4ytt\u00f6versioon.\n    <\/p>\n<p>\n      Mobiiliyst\u00e4v\u00e4llinen ominaisuus \u2013 y\u00f6tila, tekstin\u00e4ytt\u00f6\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Applen mobiilisivusto<\/strong> \u2013 Applen verkkosivuston mobiiliversio on hyv\u00e4 esimerkki sis\u00e4lt\u00f6pohjaisesta ulkoasusta. Navigointipainikkeen sijaan se antaa k\u00e4ytt\u00e4j\u00e4n yksinkertaisesti vieritt\u00e4\u00e4 n\u00e4ytt\u00f6\u00e4, mik\u00e4 on melko helppoa ja k\u00e4tev\u00e4\u00e4. Tarvittava ostoskassi tulee n\u00e4kyviin, jolloin k\u00e4ytt\u00e4j\u00e4 saa tietoa ja ostomahdollisuuden heti ensi silm\u00e4yksell\u00e4.\n    <\/p>\n<p>\n      Mobiiliyst\u00e4v\u00e4llinen ominaisuus \u2013 helppo ja k\u00e4tev\u00e4 vieritysnavigointi\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Facebook<\/strong> \u2013 Facebook keskittyy t\u00e4ysin k\u00e4ytt\u00f6kokemukseen. Facebook-sivuston tarjoamat animaatiot on toteutettu Facebook-sovelluksessa ja jopa Facebook Lite -sovelluksessa, joka on paljon kevyempi kuin Facebook-sovellus. Facebook-sovelluksen Lite-versio tarjoaa Facebookin tarvittavat ominaisuudet v\u00e4hemm\u00e4n tilaa viem\u00e4ll\u00e4 puhelimessasi ja se on nopeampi, mik\u00e4 helpottaa k\u00e4ytt\u00f6\u00e4 jopa hitaalla internetill\u00e4. Jopa Facebookin mobiilisivusto tukee nyt animaatioita hymi\u00f6iss\u00e4, mik\u00e4 helpottaa ihmisten tunteiden v\u00e4litt\u00e4mist\u00e4 niiden kautta riippumatta siit\u00e4, mill\u00e4 versiolla olemme.\n    <\/p>\n<p>\n      Mobiiliyst\u00e4v\u00e4llinen ominaisuus \u2013 tehokas animaatio, v\u00e4hemm\u00e4n tilaa, kevyt ja nopea\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Evernote<\/strong> \u2013 Evernote tarjoaa asiakirjojen s\u00e4ilytyspalvelun periaatteessa kaikilla alustoilla. Evernoten mobiiliversio on melko samanlainen kuin ty\u00f6p\u00f6yt\u00e4versio selke\u00e4ll\u00e4 k\u00e4ytt\u00f6liittym\u00e4ll\u00e4. Evernoten tuore ja puhdas k\u00e4ytt\u00f6liittym\u00e4 tekee siit\u00e4 edullisimman muistiinpanopalvelun mobiililaitteilla.\n    <\/p>\n<p>\n      Mobiiliyst\u00e4v\u00e4llinen ominaisuus \u2013 Puhdas ja tuore mobiilik\u00e4ytt\u00f6liittym\u00e4\n    <\/p>\n<\/li>\n<\/ol>\n<h5>\n  Uusimmat trendit mobiilien ensimm\u00e4isen suunnittelun k\u00e4ytt\u00f6\u00f6n<br \/>\n<\/h5>\n<ol>\n<li>\n<p>\n      <strong>Yksinkertaistaa k\u00e4ytt\u00f6kokemusta jommallakummalla seuraavista tavoista<\/strong> :\n    <\/p>\n<p>\n      Lineaarinen kulku \u2013 antaa k\u00e4ytt\u00e4j\u00e4n suorittaa vaihe kerrallaan antamalla heille tietyn alun, keskikohdan ja lopun. Esimerkiksi taksivaraussovellukset, kuten Uber.\n    <\/p>\n<p>\n      Progressiivinen luovuttaminen \u2013 tietojen paljastaminen vain silloin, kun k\u00e4ytt\u00e4j\u00e4 sit\u00e4 tarvitsee. Esimerkiksi pelisovellukset, joiden avulla k\u00e4ytt\u00e4j\u00e4 voi napsauttaa tai napauttaa n\u00e4hd\u00e4kseen tiedot.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Elepohjaiset animaatiot<\/strong>\n    <\/p>\n<p>\n      Animaatioita, joissa on tekstiohjeita, siirtymi\u00e4 ja palautetta eleist\u00e4. Esimerkiksi pyyhk\u00e4iseminen Tinderiss\u00e4, diaesityksi\u00e4 galleriassa jne.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Sis\u00e4lt\u00f6keskeinen kokemus<\/strong>\n    <\/p>\n<p>\n      Helposti saatavilla oleva sis\u00e4lt\u00f6, jossa on olennaisimmat ja tarpeellisimmat tiedot, tekev\u00e4t mobiilisovelluksesta houkuttelevan k\u00e4ytt\u00e4jille. T\u00e4m\u00e4 voidaan tehd\u00e4 kahdella tavalla:\n    <\/p>\n<p>\n      Tyhjennys \u2013 Ep\u00e4olennaisten tietojen poistaminen ja olennaisen sis\u00e4ll\u00f6n priorisointi parantavat k\u00e4ytt\u00f6kokemusta. Visuaalisen sotkun poistaminen ja sis\u00e4ll\u00f6n asettaminen etusijalle helpottaa viestin v\u00e4litt\u00e4mist\u00e4 parhaalla mahdollisella tavalla.\n    <\/p>\n<p>\n      Selke\u00e4 visuaalinen hierarkia \u2013 Puhtaat ja selke\u00e4t visuaaliset elementit tekev\u00e4t k\u00e4ytt\u00f6liittym\u00e4st\u00e4 n\u00e4ytt\u00e4v\u00e4mm\u00e4n ja helpommin ymm\u00e4rrett\u00e4v\u00e4n. Visuaaliset merkit, kuten toimintakehotuspainikkeiden kontrastiv\u00e4rit, ohjaavat k\u00e4ytt\u00e4j\u00e4\u00e4 saamaan t\u00e4rkeit\u00e4 tietoja.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Koko n\u00e4yt\u00f6n kokemukset<\/strong>\n    <\/p>\n<p>\n      Nyky\u00e4\u00e4n \u00e4lypuhelimien n\u00e4yt\u00f6n koon uusin trendi on Infinity Display. Samsung Galaxy S8:n ja iPhone X:n kaltaisilla puhelimilla on enemm\u00e4n n\u00e4ytt\u00f6tilaa k\u00e4ytt\u00e4j\u00e4lle, ja he odottavat siit\u00e4 maksimaalista kokemusta. N\u00e4in ollen HD-kuvien ja -videoiden tarjoaminen, jotka eiv\u00e4t pikseloidu mobiilin\u00e4yt\u00f6ll\u00e4, parantaa k\u00e4ytt\u00f6kokemusta.\n    <\/p>\n<\/li>\n<li>\n<p>\n      <strong>Henkil\u00f6kohtainen k\u00e4ytt\u00f6kokemus<\/strong>\n    <\/p>\n<p>\n      K\u00e4ytt\u00f6kokemuksen personointi on v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4 sovellusta suunniteltaessa, koska kaikki k\u00e4ytt\u00e4j\u00e4t ovat erilaisia. Joten k\u00e4ytt\u00f6liittym\u00e4n tulisi olla erilainen kaikille tai ainakin antaa k\u00e4ytt\u00e4j\u00e4n muokata sit\u00e4 mieltymyksiens\u00e4 ja vaatimustensa mukaan. Ominaisuuksien tarjoaminen, kuten GPS:n k\u00e4ytt\u00f6 sijaintiin perustuvassa sis\u00e4ll\u00f6ss\u00e4, y\u00f6tila, kirjasinkoon muutokset ja sovelluksen mittasuhteet, ovat muutamia esimerkkej\u00e4 sovelluksen personoinnista.\n    <\/p>\n<\/li>\n<\/ol>\n<h5>\n  Johtop\u00e4\u00e4t\u00f6s<br \/>\n<\/h5>\n<p>\n  Verkkosuunnittelun suosiminen ensin ja sitten mobiilisuunnitteluun siirtyminen ei ole en\u00e4\u00e4 sovellettavissa nykymaailmassa. Miellytt\u00e4v\u00e4 k\u00e4ytt\u00f6kokemus on se, mihin meid\u00e4n tulisi keskitty\u00e4, ja se tuottaa meille voittoa. Mobiilil\u00e4ht\u00f6isen l\u00e4hestymistavan k\u00e4ytt\u00f6 on itsess\u00e4\u00e4n uusin trendi suunnittelun ja kehityksen alalla, mutta se tulee varmasti olemaan yleisempi l\u00e4hestymistapa Internet-alalla. Mobiilisivuston oletetaan olevan yksinkertainen, nopea ja kevyt, kun taas ty\u00f6p\u00f6yt\u00e4sivuston on oltava t\u00e4ynn\u00e4 kaikkea tarpeellista tietoa ja upeasti suunniteltu k\u00e4ytt\u00f6liittym\u00e4 isoille n\u00e4yt\u00f6ille. Mobiilil\u00e4ht\u00f6inen l\u00e4hestymistapa ei ainoastaan \u200b\u200bhelpota ty\u00f6p\u00f6yt\u00e4version kehitt\u00e4mist\u00e4 tulevaisuudessa, vaan se tarjoaa my\u00f6s parhaan mahdollisen k\u00e4ytt\u00f6kokemuksen suurimmalle osalle v\u00e4est\u00f6st\u00e4, joka k\u00e4ytt\u00e4\u00e4 matkapuhelimia yhten\u00e4isen\u00e4 ratkaisuna l\u00e4hes kaikkeen.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  : <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/06\/29\/mobile-first-design\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Kuten nimest\u00e4 voi p\u00e4\u00e4tell\u00e4, mobiili ensisijainen suunnittelu antaa etusijalle verkkosivuston tai sovelluksen suunnittelun mobiililaitteille ennen ty\u00f6p\u00f6yt\u00e4versioita. Mobile First Designs on kehitysalan uusin trendi. Kuten kaikki tied\u00e4mme, matkapuhelink\u00e4ytt\u00e4jien markkinat kasvavat merkitt\u00e4v\u00e4sti, matkapuhelimen k\u00e4ytt\u00e4j\u00e4n tarpeisiin keskittyv\u00e4n kehityksen priorisointi parantaa tavoittavuutta ja latauksia. Mik\u00e4 siis periaatteessa on Mobile First? Vuoteen 2019 menness\u00e4 \u00e4lypuhelimien k\u00e4ytt\u00e4jien kokonaism\u00e4\u00e4r\u00e4n odotetaan nousevan 2,7 miljardiin, kun taas matkapuhelimen k\u00e4ytt\u00e4jien kokonaism\u00e4\u00e4r\u00e4\u2026<\/p>\n","protected":false},"author":1,"featured_media":167805,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[521,741,53,196,118,560],"tags":[],"class_list":["post-249520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sekalaista","category-verkko-2","category-web-ja-wordpress-2","category-web-suunnittelu","category-web-tyokalut","category-verkko"],"_links":{"self":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/comments?post=249520"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249520\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media\/167805"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media?parent=249520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/categories?post=249520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/tags?post=249520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}