{"id":369779,"date":"2023-04-26T10:19:00","date_gmt":"2023-04-26T07:19:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=369779"},"modified":"2023-04-26T10:21:34","modified_gmt":"2023-04-26T07:21:34","slug":"mobile-first-design-mita-se-on-ja-miksi-silla-on-merkitysta","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/mobile-first-design-mita-se-on-ja-miksi-silla-on-merkitysta\/","title":{"rendered":"Mobile-First Design \u2013 mit\u00e4 se on ja miksi sill\u00e4 on merkityst\u00e4"},"content":{"rendered":"\n<p>Syksy 2018 oli koettelevaa aikaa verkkomarkkinoijille, bloggaajille, digitaalisille toimistoille\u2026 periaatteessa kaikille, joiden leip\u00e4 ja voi tulee verkkomaailmasta. Miksi? Koska juuri silloin hakukonej\u00e4tti Google alkoi ottaa k\u00e4ytt\u00f6\u00f6n <strong>mobiili-indeksointiaan<\/strong>. T\u00e4m\u00e4 ei todellakaan tullut yll\u00e4tyksen\u00e4, sill\u00e4 <strong><a href=\"https:\/\/searchengineland.com\/google-search-algorithm-adds-mobile-friendly-factors-app-indexing-ranking-215573\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">&quot;Mobilegeddon&quot; -tapahtumassa<\/a><\/strong> vuonna 2015 jo otettiin k\u00e4ytt\u00f6\u00f6n mobiililaitteilla hyvin n\u00e4kyvien verkkosivustojen priorisointi. Mobiilil\u00e4ht\u00f6inen suunnittelu oli jo olemassa, mutta Google onnistui silti aiheuttamaan paniikkia.<\/p>\n<p>Otetaan kuitenkin askel taaksep\u00e4in hetkeksi ja katsotaan, mit\u00e4 &quot;mobiili-ensin&quot; itse asiassa tarkoittaa.<\/p>\n<h2>Mobile-First Design selitetty<\/h2>\n<p>Lyhyesti sanottuna mobiililaitesuunnittelu on sellaista suunnittelua, jossa <strong>mobiililaitteet asetetaan etusijalle<\/strong>. Yleens\u00e4 t\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4 \u00e4lypuhelimet ja tabletit tai mitk\u00e4 tahansa laitteet, joissa on pienempi n\u00e4ytt\u00f6. Ymm\u00e4rt\u00e4\u00e4ksemme t\u00e4m\u00e4n k\u00e4sitteen oikein meid\u00e4n on ensin puhuttava responsiivisesta verkkosuunnittelusta tai <strong>RWB<\/strong> :st\u00e4. RWB:ss\u00e4 periaatteessa mahdollistamme verkon ja sen kaiken muodon ja sis\u00e4ll\u00f6n mahtumaan pienemmille n\u00e4yt\u00f6ille laadun heikkenem\u00e4tt\u00e4. Se on my\u00f6s teht\u00e4v\u00e4 tavalla, joka on ihmisten mielest\u00e4 k\u00e4tev\u00e4 tai mukava. Kun se on tehty oikein, responsiivinen suunnittelu tarkoittaa, ett\u00e4 k\u00e4ytt\u00e4j\u00e4n ei tarvitse zoomata, vieritt\u00e4\u00e4 tai panoroida n\u00e4ytt\u00f6\u00e4 n\u00e4hd\u00e4kseen koko sivuston sis\u00e4ll\u00f6n.<\/p>\n<p>On selv\u00e4\u00e4, ett\u00e4 koska mobiilihaut ovat ohittaneet ty\u00f6p\u00f6yt\u00e4haut, on luonnollista, ett\u00e4 verkkosivusto on responsiivinen. Kysymys ei ole edes vahvimpien selviytymisest\u00e4. Se on yksinkertaisempaa. Jos verkkosivustosi ei ole responsiivinen, se voi yht\u00e4 hyvin olla olematon. Ihmisill\u00e4 ei ole aikaa tai k\u00e4rsiv\u00e4llisyytt\u00e4 reagoimattomiin verkkosivustoihin.<\/p>\n<p>Mutta t\u00e4ss\u00e4 on muutakin kuin pelkk\u00e4 reagointikyky. Tuotekehityksess\u00e4 suunnittelijat ottivat l\u00e4ht\u00f6kohtana ty\u00f6p\u00f6yt\u00e4version. Sitten, kun kyseisen version viimeistely, he periaatteessa luopuivat tietyist\u00e4 elementeist\u00e4 optimoidakseen tuotteen mobiilik\u00e4ytt\u00f6\u00f6n.<\/p>\n<p>Nyky\u00e4\u00e4n prosessi on erilainen. <strong>&quot;Progressiivinen edistyminen&quot;<\/strong> on laajasti k\u00e4ytetty periaate suunnittelussa, jonka l\u00e4ht\u00f6kohtana on mobiiliversio. Ja juuri sit\u00e4 &quot;mobiili-ensin&quot; tarkoittaa. Suunnittelu alkaa mobiilip\u00e4\u00e4st\u00e4 ja laajenee sitten v\u00e4hitellen edistyneempiin versioihin.<\/p>\n<h2>Mobile-First -indeksointi<\/h2>\n<p>Kuten aiemmin mainitsimme, Google otti vuonna 2018 k\u00e4ytt\u00f6\u00f6n aivan uuden tavan indeksoida sivustot. Indeksointi on t\u00e4rke\u00e4\u00e4, koska se on yksi mekanismeista, jota Google k\u00e4ytt\u00e4\u00e4 p\u00e4\u00e4tt\u00e4ess\u00e4\u00e4n kuinka korkealle sivustosi sijoittuu hakukoneiden tulossivuilla.<\/p>\n<p>Pohjimmiltaan mobiilien indeksointi tarkoittaa siis sit\u00e4, ett\u00e4 kun Google ottaa k\u00e4ytt\u00f6\u00f6n indeksointirobottinsa, ne etsiv\u00e4t ensin sivustosi mobiiliversiota ja sitten ty\u00f6p\u00f6yt\u00e4versiota. Huomaa, ett\u00e4 mobiiliversio ei ole ainoa, joka indeksoidaan ja luokitellaan. My\u00f6s ty\u00f6p\u00f6yt\u00e4versiosi huomioidaan, mutta vasta mobiiliversion j\u00e4lkeen. Jos verkkosivustollasi ei ole mobiiliversiota, sill\u00e4 on merkitt\u00e4v\u00e4 negatiivinen vaikutus verkkosivustosi sijoitukseen. Ei vain sit\u00e4. My\u00f6s verkkosivustosi tarjoaman mobiilikokemuksen laatu on yksi tekij\u00e4.<\/p>\n<p>Ja siksi jokaisen verkkosivuston omistajan tulisi ottaa mobiili-ensisijaisuus eritt\u00e4in vakavasti.<\/p>\n<h2>Optimointi mobiililaitteille ensin<\/h2>\n<p>Joten sait itsellesi hienon <a href=\"https:\/\/themewp.inform.click\/fi\/yli-15-parasta-ilmaista-responsiivista-wordpress-teemaa-vuodelle-2022\/\" title=\"reagoivan teeman\">reagoivan teeman<\/a>? Hyv\u00e4. Reagointikyky on eritt\u00e4in t\u00e4rke\u00e4\u00e4. \u00c4l\u00e4 kuitenkaan ajattele hetke\u00e4k\u00e4\u00e4n, ett\u00e4 ty\u00f6si mobiililaitteille optimoinnissa p\u00e4\u00e4ttyy siihen. Se on sit\u00e4 monimutkaisempi.<\/p>\n<p>Olitpa tekem\u00e4ss\u00e4 vanhaa WordPress-sivustoasi kev\u00e4tsiivouksessa tai rakentamassa aivan uutta, voit tehd\u00e4 siit\u00e4 houkuttelevamman Googlen indeksointiroboteille ja mobiiliensimm\u00e4iselle indeksoinnille.<\/p>\n<ul>\n<li><strong>Optimoi verkkosivustosi nopeus<\/strong><\/li>\n<\/ul>\n<p>Google vihaa hitaita verkkosivustoja. Oikeasti. Sill\u00e4 on erityinen ennakkoluulo sellaisten verkkosivustojen suhteen, jotka latautuvat hitaasti. Kes\u00e4st\u00e4 2018 l\u00e4htien Google on virallisesti priorisoinut nopeat verkkosivustot, joten sit\u00e4 on ehdottomasti mietitt\u00e4v\u00e4.<\/p>\n<p>Vaikka verkkosivustosi on hieman hidas, \u00e4l\u00e4 huoli. On monia asioita, joita voit tehd\u00e4 nopeuttaaksesi sit\u00e4. Voit esimerkiksi k\u00e4ytt\u00e4\u00e4 yht\u00e4 erinomaisista <a href=\"https:\/\/themewp.inform.click\/fi\/parhaat-wordpress-valimuistilaajennukset-ja-niiden-asentaminen\/\" title=\"v\u00e4limuistilaajennuksista\">v\u00e4limuistilaajennuksista<\/a>, jotka luovat sivustostasi HTML-yhteensopivan version, jotta se latautuu nopeammin. Voit my\u00f6s pakata kaikki tiedostosi niin, ett\u00e4 ne ladataan pienimm\u00e4ss\u00e4 ja keveimm\u00e4ss\u00e4 koossa. K\u00e4y lopuksi jonkin aikaa verkkosivustosi l\u00e4pi ja etsi teknisi\u00e4 virheit\u00e4, kuten rikkin\u00e4isi\u00e4 linkkej\u00e4, liian t\u00e4ynn\u00e4 olevia sivuja ja niin edelleen.<\/p>\n<p>Mit\u00e4 tulee <strong>hakukoneoptimointiin (SEO)<\/strong>, olettaen, ett\u00e4 k\u00e4yt\u00e4t jo kaikkia alan parhaita k\u00e4yt\u00e4nt\u00f6j\u00e4, on pari muuta asiaa, jotka on pidett\u00e4v\u00e4 mieless\u00e4.<\/p>\n<p>Ensinn\u00e4kin sinun on varmistettava sis\u00e4ll\u00f6n tasa-arvo sivustosi versioiden v\u00e4lill\u00e4. T\u00e4m\u00e4 koskee erityisesti sis\u00e4isi\u00e4 linkkej\u00e4, strukturoitua dataa, tunnisteita ja vastaavia. Varmista my\u00f6s, ett\u00e4 palvelimesi voivat k\u00e4sitell\u00e4 indeksointinopeutta. T\u00e4m\u00e4 oli ongelma, kun mobiiliensimm\u00e4inen indeksointi otettiin k\u00e4ytt\u00f6\u00f6n, mutta yll\u00e4tt\u00e4v\u00e4n monet verkkosivustot eiv\u00e4t ole viel\u00e4k\u00e4\u00e4n mukautuneet uuteen indeksointiin.<\/p>\n<p>Lopuksi tarkkaile indeksoinnin tilaa s\u00e4\u00e4nn\u00f6llisesti ja varmista, ett\u00e4 <strong>robots.txt<\/strong> on vahvistettu ja palvelimen lokitiedostot ovat kunnossa.<\/p>\n<ul>\n<li><strong>Valitse responsiivinen kehys<\/strong><\/li>\n<\/ul>\n<p>Kyll\u00e4, sanoimme aiemmin, ett\u00e4 responsiivisen teeman k\u00e4ytt\u00e4minen, joka on rakennettu reagoivaan kehykseen, ei riit\u00e4 oikeaan mobiilioptimointiin. Mutta se on edelleen yksi olennaisista tekij\u00f6ist\u00e4, joten ajattelimme, ett\u00e4 meid\u00e4n pit\u00e4isi toistaa.<\/p>\n<p>Bootstrap ja Foundation ovat t\u00e4ll\u00e4 hetkell\u00e4 suosituimpia ja luultavasti parhaiten reagoivia kehyksi\u00e4, joten valitse teema k\u00e4ytt\u00e4m\u00e4ll\u00e4 jotakin niist\u00e4. Ne ovat ihanteellisia verkkosivustosi suunnittelun k\u00e4\u00e4nt\u00e4miseen pienemmille n\u00e4yt\u00f6ille minimaalisella h\u00e4iri\u00f6- ja bugiriskill\u00e4. Lis\u00e4ksi ne tekev\u00e4t niin sek\u00e4 k\u00e4ytt\u00f6liittym\u00e4- ett\u00e4 taustatasolla, joten ne v\u00e4hent\u00e4v\u00e4t huomattavasti kehitt\u00e4jien ty\u00f6taakkaa.<\/p>\n<ul>\n<li><strong>Optimoi navigointi, sis\u00e4lt\u00f6 ja vuorovaikutus<\/strong><\/li>\n<\/ul>\n<p>T\u00e4ydellisen tasapainon l\u00f6yt\u00e4minen riitt\u00e4m\u00e4tt\u00f6m\u00e4n sis\u00e4ll\u00f6n ja liian suuren sis\u00e4ll\u00f6n v\u00e4lill\u00e4 on kaikkien mobiilisivustojen yleinen vaiva. Silti se on taistelu, jota meid\u00e4n on vain jatkettava. Vierailijat tarvitsevat tietoa, ja se on esitett\u00e4v\u00e4 selke\u00e4sti ja yksinkertaisesti. Sotkua ei voida hyv\u00e4ksy\u00e4. <strong>J\u00e4rjest\u00e4 sis\u00e4lt\u00f6si<\/strong> niin, ett\u00e4 voit sanoa, mit\u00e4 sinulla on sanottavaa, strategista toimintakehotustasi etk\u00e4 mit\u00e4\u00e4n muuta.<\/p>\n<p>Harkitse my\u00f6s verkkosivustosi navigointia. Jos se on liian monimutkaista, se ei yksinkertaisesti sovellu mobiililaitteille.<\/p>\n<p>Seuraavaksi, jos ty\u00f6p\u00f6yd\u00e4n navigointipalkki on pitk\u00e4, sinun on lyhennett\u00e4v\u00e4 sit\u00e4 huomattavasti mobiiliversiossasi. Harkitse tekstin suurentamista ja linkkien muuntamista painikkeiksi, joita on helppo napauttaa.<\/p>\n<p>Tarkista lopuksi, onko asettelusi oikein optimoitu yleisi\u00e4 k\u00e4dess\u00e4 pidett\u00e4vi\u00e4 toimintoja, kuten napauttamista ja pyyhk\u00e4isy\u00e4, varten.<\/p>\n<p>T\u00e4m\u00e4 on varsin looginen askel, mutta ei haittaa korostaa sit\u00e4 viel\u00e4 kerran. Sinun on aina tarkistettava ja testattava kaikki sivustollasi. Vaikka et olisi tehnyt muutoksia viime aikoina, harkitse satunnaisen testin tekemist\u00e4 n\u00e4hd\u00e4ksesi, toimiiko kaikki hyvin.<\/p>\n<p>Useimmat ihmiset k\u00e4ytt\u00e4v\u00e4t nyky\u00e4\u00e4n moderneja selaimia tai mobiililaitteille optimoituja selaimia. H\u00e4mm\u00e4stytt\u00e4v\u00e4 prosenttiosuus Internetin k\u00e4ytt\u00e4jist\u00e4 k\u00e4ytt\u00e4\u00e4 kuitenkin edelleen vanhempia selainversioita, ja sinun on my\u00f6s mietitt\u00e4v\u00e4 niit\u00e4. Haluat verkkosivustosi n\u00e4ytt\u00e4v\u00e4n yht\u00e4 hyv\u00e4lt\u00e4 vanhassa iPhone 4s:ss\u00e4 kuin uudessa Huawei P20:ssa.<\/p>\n<p>Testaa vain verkkosivustosi suunnittelun reagointikyky\u00e4 ja \u00e4l\u00e4 unohda A\/B-jakotestausta, erityisesti aloitussivujesi osalta. Tietenkin ennen kaikkea muuta, <a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-muokata-wordpress-sivuston-mobiiliversiota\/\" title=\"mukauta sivustosi mobiiliversio\">mukauta sivustosi mobiiliversio<\/a> ja valmistele se k\u00e4ytt\u00e4ji\u00e4 varten.<\/p>\n<p>Mobile-first on trendi, joka jatkuu jonkin aikaa, ja se on todellisuus, joka meid\u00e4n kaikkien on hyv\u00e4ksytt\u00e4v\u00e4. &quot;Me&quot; tarkoitamme kaikkia, jotka ovat mukana verkkosivuston luomisessa ja yll\u00e4pit\u00e4misess\u00e4. Suunnittelijat, kehitt\u00e4j\u00e4t, j\u00e4rjestelm\u00e4nvalvojat, SEO-asiantuntijat, toimittajat, tekstinkirjoittajat \u2013 jokaisen on muistettava priorisoida mobiili. T\u00e4m\u00e4 ei tietenk\u00e4\u00e4n tarkoita, ett\u00e4 meid\u00e4n pit\u00e4isi laiminly\u00f6d\u00e4 ty\u00f6p\u00f6yt\u00e4versioita. Mobiilil\u00e4ht\u00f6inen suunnittelu on vain otettava vakavasti.<\/p>\n<p>Toivomme, ett\u00e4 t\u00e4m\u00e4 artikkeli oli hy\u00f6dyllinen. Jos pidit siit\u00e4, tutustu my\u00f6s joihinkin n\u00e4ist\u00e4 artikkeleista!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oletko koskaan miettinyt, mit\u00e4 mobiilil\u00e4ht\u00f6inen suunnittelu tarkoittaa ja miksi sill\u00e4 on merkityst\u00e4? Lue eteenp\u00e4in saadaksesi selville kaiken, mit\u00e4 sinun tulee tiet\u00e4\u00e4 t\u00e4st\u00e4 t\u00e4rke\u00e4st\u00e4 k\u00e4sitteest\u00e4.<\/p>\n","protected":false},"author":1,"featured_media":364053,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[570],"tags":[843],"class_list":["post-369779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpressin-perusteet","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/369779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=369779"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/369779\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/364053"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=369779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=369779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=369779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}