{"id":11901,"date":"2018-05-18T16:12:54","date_gmt":"2018-05-18T10:42:54","guid":{"rendered":"https:\/\/www.carmatec.com\/?p=11901"},"modified":"2026-02-05T10:20:47","modified_gmt":"2026-02-05T10:20:47","slug":"mobiiliresponsiivinen-toteutettu-oikealla-tavalla","status":"publish","type":"post","link":"https:\/\/www.carmatec.com\/fi\/blog\/mobile-responsive-implemented-the-right-way\/","title":{"rendered":"Mobiiliresponsiivisuus toteutettu oikealla tavalla \u2013 K\u00e4ytt\u00e4j\u00e4kokemuksen n\u00e4k\u00f6kulma"},"content":{"rendered":"<p>Nyky\u00e4\u00e4n k\u00e4ytt\u00e4j\u00e4t katselevat verkkosis\u00e4lt\u00f6\u00e4 tai tekev\u00e4t verkkotapahtumia eri laitteilla kannettavista tietokoneista tabletteihin ja matkapuhelimiin. Lis\u00e4ksi mobiiliekosysteemi (mobiililaitteet ja niihin asennettavat k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4t) kasvaa nopeasti. Siksi on ehdottoman t\u00e4rke\u00e4\u00e4, ett\u00e4 verkkosivustot, joita yritykset rakentavat asiakkaiden kohdentamiseksi, ovat mobiilioptimoituja.<\/p>\n<h2><strong>Mobiiliresponsiivinen tai mobiilisivusto<\/strong><\/h2>\n<p><strong>Kaksi tapaa optimoida verkkosivustosi mobiililaitteille:<\/strong><\/p>\n<ul>\n<li><strong>Mobiiliresponsiivinen<\/strong> \u2013 K\u00e4yt\u00e4 mobiiliresponsiivista l\u00e4hestymistapaa ty\u00f6p\u00f6yt\u00e4sivustolla: mobiiliresponsiivisella suunnittelulla varustettu verkkosivusto mahdollistaa saman verkkosivuston katselun eri laitteilla mukauttamalla asettelua ja\/tai sis\u00e4lt\u00f6\u00e4 kyseisen laitteen n\u00e4yt\u00f6n koon mukaan.<\/li>\n<li><strong>Mobiilisivusto<\/strong> \u2013 Rakenna erillinen mobiilisivusto, jossa huomioidaan kaikki eri mobiilialustojen n\u00e4k\u00f6kohdat. Yleens\u00e4 mobiilisivustolla on eri URL-osoite kuin p\u00e4\u00e4p\u00f6yt\u00e4sivustolla.<\/li>\n<\/ul>\n<p>Mobiilisivustol\u00e4hestymistavan k\u00e4ytt\u00e4minen voi olla kallista rakentaa ja yll\u00e4pit\u00e4\u00e4, koska se edellytt\u00e4\u00e4 erilaisen verkkosivuston, eri URL-osoitteiden ja erilaisten luomista <a href=\"https:\/\/www.carmatec.com\/fi\/hakukoneoptimointipalvelut\/\"><strong>SEO<\/strong><\/a> tehd\u00e4 ty\u00f6t\u00e4.<\/p>\n<p>Mobiiliresponsiivisen l\u00e4hestymistavan k\u00e4ytt\u00f6 on nyky\u00e4\u00e4n trendi, koska verkkosivustojen kehitysteknologian nykyp\u00e4iv\u00e4n edistyess\u00e4 on entist\u00e4 helpompaa ja kustannustehokkaampaa rakentaa verkkosivustoja mobiiliresponsiivisella ulkoasulla sen sijaan, ett\u00e4 rakentaisit erilliset verkkosivustot mobiililaitteille.<\/p>\n<p>K\u00e4ytt\u00e4j\u00e4n n\u00e4k\u00f6kulmasta on helpompi muistaa yksi URL-osoite yhden verkkosivuston k\u00e4ynnist\u00e4miseksi ja saman verkkosivuston sis\u00e4ll\u00f6n eri asettelujen tarkastelemiseksi n\u00e4yt\u00f6n koosta riippuen.<\/p>\n<p>Verkkosivuja tarkastellaan p\u00f6yt\u00e4tietokoneilla, kannettavilla tietokoneilla, tableteilla tai matkapuhelimilla\/\u00e4lypuhelimilla. P\u00f6yt\u00e4tietokoneiden n\u00e4yt\u00f6t voivat olla eri kuvasuhteilla (n\u00e4yt\u00f6n leveyden ja korkeuden suhde), jotka vaihtelevat vakion\u00e4yt\u00f6n 4:3:sta laajakuvan\u00e4ytt\u00f6jen 16:9:\u00e4\u00e4n.<\/p>\n<p><a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/screen15-1.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11931\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/screen15-1.jpg\" alt=\"n\u00e4ytt\u00f6\" width=\"800\" height=\"300\" \/><\/a><\/p>\n<p>Tabletteja on my\u00f6s erikokoisia, 7 tuumasta, kuten Amazon Fire 7, 12+ tuumaan, kuten iPad Pro, 8 tuuman (iPad Mini 4) ja 10 tuuman (Samsung Galaxy Tab A) l\u00e4pi.<\/p>\n<p>Mobiiliresponsiivisen suunnittelun ansiosta verkkosis\u00e4lt\u00f6 mukautuu n\u00e4ihin eri kokoihin tai kuvasuhteisiin, jotta k\u00e4ytt\u00e4j\u00e4t voivat saada saumattoman kokemuksen vaihtaessaan laitteesta toiseen.<\/p>\n<p><a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/image.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11932\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/image.png\" alt=\"kuva\" width=\"736\" height=\"756\" \/><\/a><\/p>\n<p>Jos verkkosivustosi on mobiilioptimoitu, k\u00e4ytt\u00e4j\u00e4ll\u00e4si tai asiakkaallasi on seuraava kokemus katsellessaan responsiivista verkkosivustoa matkapuhelimellasi:<\/p>\n<ul>\n<li>Verkkosis\u00e4lt\u00f6 muuttuu dynaamisesti mobiililaitteen koon mukaan, esim. tekstin koko muuttuu niin, ett\u00e4 k\u00e4ytt\u00e4j\u00e4 voi lukea tiedot mukavasti.<\/li>\n<li>Navigointi on tiivistetty siten, ett\u00e4 valikko voi ilmesty\u00e4 painikkeesta. Esim. Yksinkertaistettu navigointi, joka on &quot;peukalo&quot;yst\u00e4v\u00e4llinen suurilla kosketuspisteill\u00e4, erityisesti kriittisten yhteystietojen osalta<\/li>\n<li>Kaikki kuvat on optimoitu niin, ett\u00e4 ne hahmonnetaan mahdollisimman nopeasti laitteella.<\/li>\n<li>Sis\u00e4lt\u00f6 n\u00e4kyy oikeilla t\u00e4ytteill\u00e4 ja v\u00e4lily\u00f6nneill\u00e4.<\/li>\n<li>Kaikki ty\u00f6p\u00f6yt\u00e4sivustolla saatavilla olevat ominaisuudet n\u00e4kyv\u00e4t oikein laitteella ja niit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 onnistuneesti mobiililaitteella.<\/li>\n<li>Verkkosis\u00e4lt\u00f6 on v\u00e4hent\u00e4nyt grafiikkaa niin, ett\u00e4 kriittiset tiedot tuotteista ja palveluista n\u00e4kyv\u00e4t k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisess\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/li>\n<li>Ei tarvitse kirjoittaa, ellei se ole v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4.<\/li>\n<\/ul>\n<h3><strong>Mobiiliresponsiivisen web-suunnittelun edut verkkosivustollesi k\u00e4ytt\u00e4j\u00e4n n\u00e4k\u00f6kulmasta:<\/strong><\/h3>\n<ul>\n<li>K\u00e4ytt\u00e4j\u00e4si voivat jakaa sis\u00e4lt\u00f6\u00e4si ja linkitt\u00e4\u00e4 siihen k\u00e4ytt\u00e4m\u00e4ll\u00e4 yht\u00e4 URL-osoitetta.<\/li>\n<li>K\u00e4ytt\u00e4j\u00e4si l\u00f6yt\u00e4v\u00e4t verkkosivustosi helpommin hakutuloksistaan.<\/li>\n<li>On pienempi riski, ett\u00e4 k\u00e4ytt\u00e4j\u00e4t kohtaavat yleisi\u00e4 virheit\u00e4, jotka vaikuttavat mobiilisivustoihin. N\u00e4it\u00e4 voivat olla mm:<\/li>\n<\/ul>\n<ol>\n<li>Sis\u00e4lt\u00f6, jota ei voi toistaa (videoita ei voi toistaa matkapuhelimilla)<br \/>\n<a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/video-is-not-availaible.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11956\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/video-is-not-availaible.jpg\" alt=\"video-ei-saatavilla\" width=\"350\" height=\"300\" \/><\/a><\/li>\n<li>Virheelliset uudelleenohjaukset, jos jokainen k\u00e4ytt\u00e4j\u00e4 ohjataan ty\u00f6p\u00f6yd\u00e4n URL-osoitteeseen mobiiliversion URL-osoitteen sijaan.<a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/example.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11934\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/example.png\" alt=\"esimerkki\" width=\"861\" height=\"511\" \/><\/a><\/li>\n<li>Linkit, jotka eiv\u00e4t toimi matkapuhelimessa, johtavat <a href=\"https:\/\/www.cloudways.com\/blog\/wordpress-404-error\" target=\"_blank\" rel=\"noopener\">404 virhe<\/a> k\u00e4ytt\u00e4j\u00e4kokemus.<br \/>\n<a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/image1.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11935\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/image1.png\" alt=\"kuva1\" width=\"818\" height=\"256\" \/><\/a><br \/>\n<a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/imagess.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11936\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/imagess.png\" alt=\"kuvia\" width=\"809\" height=\"256\" \/><\/a><\/li>\n<li>On pienempi riski, ett\u00e4 k\u00e4ytt\u00e4j\u00e4si odottavat pitk\u00e4\u00e4n sivun latautumista mobiililaitteella, koska uudelleenohjausta mobiilisivustolle ei tarvita.<\/li>\n<\/ol>\n<h2><strong>Mobiiliresponsiivisen verkkosivuston parhaat k\u00e4ytt\u00f6liittym\u00e4k\u00e4yt\u00e4nn\u00f6t:<\/strong><\/h2>\n<p>Saadaksesi asiakkaasi kokemaan parhaan k\u00e4ytt\u00f6kokemuksen mobiiliresponsiivisella verkkosivustollasi, sivusto tulee ottaa k\u00e4ytt\u00f6\u00f6n ottaen huomioon seuraavat parhaat k\u00e4yt\u00e4nn\u00f6t:<\/p>\n<h3><strong>Joustava<\/strong><\/h3>\n<p>Mobiiliresponsiivinen muotoilu mahdollistaa sis\u00e4ll\u00f6n mukauttamisen laitteeseen. K\u00e4ytt\u00e4j\u00e4 ei kuitenkaan v\u00e4ltt\u00e4m\u00e4tt\u00e4 nauti hyv\u00e4st\u00e4 kokemuksesta verkkosivuston sivun katselussa mobiililaitteella, jos se jatkuu ja jatkuu. Siksi mobiiliresponsiivisesta suunnittelusta tulee tehd\u00e4 joustava niin, ett\u00e4 sis\u00e4lt\u00f6 voidaan priorisoida ja piilottaa paremman mobiilikokemuksen saavuttamiseksi.<\/p>\n<h3><strong>Responsiiviset kuvat<\/strong><\/h3>\n<p>Hyv\u00e4 responsiivinen muotoilu sis\u00e4lt\u00e4\u00e4 my\u00f6s kuvien tekemisen responsiivisiksi. Jos kuvat eiv\u00e4t reagoi, k\u00e4ytt\u00e4j\u00e4t n\u00e4kev\u00e4t suuren kuvan, mutta eiv\u00e4t n\u00e4e yksityiskohtia oikein. T\u00e4llaisten taideongelmavirheiden korjaamiseksi responsiivisen suunnittelun tulisi k\u00e4ytt\u00e4\u00e4 erilaisia rajattuja kuvia eri laitteisiin kohdistettaessa.<br \/>\n<a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/images.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11937\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/images.png\" alt=\"kuvia\" width=\"883\" height=\"669\" \/><\/a><br \/>\n<a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/images-mobile.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11938\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/images-mobile.png\" alt=\"kuvat mobiilissa\" width=\"391\" height=\"881\" \/><\/a><\/p>\n<p>Hyv\u00e4n responsiivisen suunnittelun tulisi my\u00f6s huomioida pienempi\u00e4 kuvia pienemmille laitteille.<br \/>\n<a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/responsive.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11958\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/responsive.png\" alt=\"reagoiva\" width=\"1159\" height=\"687\" \/><\/a><\/p>\n<h3><strong>Minimalismi ratkaisee<\/strong><\/h3>\n<p>Mobiiliresponsiivisessa suunnittelussa tulee olla minimalismin ominaisuuksia. Mobiililaitteella katsottuna verkkosivustolla ei saa olla vain tarpeettomia ominaisuuksia tai elementtej\u00e4, vaan sen tulisi rajoittua tasaisiin kuvioihin ja tekstuureihin sek\u00e4 rajoitettuihin tai yksiv\u00e4risiin v\u00e4reihin.<\/p>\n<p><a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/image-width.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11940\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/image-width.png\" alt=\"kuvan leveys\" width=\"997\" height=\"527\" \/><\/a><\/p>\n<h3><strong>Standardoi napsautettavat alueet\/painikkeet<\/strong><\/h3>\n<p>Hyv\u00e4n k\u00e4ytt\u00f6kokemuksen takaamiseksi painikkeiden ja linkkien tulee olla riitt\u00e4v\u00e4n suuria, jotta ne voivat napsauttaa sormella hiiren napsautuksen sijaan.<br \/>\n<a href=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/railscarma-mobile.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-11961\" src=\"https:\/\/www.carmatec.com\/wp-content\/uploads\/2022\/09\/railscarma-mobile.jpg\" alt=\"railscarma mobiili\" width=\"422\" height=\"607\" \/><\/a><\/p>\n<h3><strong>Ajattele typografiaa<\/strong><\/h3>\n<p>Mobiiliresponsiivisen suunnittelusi pit\u00e4isi tehd\u00e4 sis\u00e4ll\u00f6st\u00e4si helppolukuista ja aidosti optimoitua laitteen koon mukaan. Typografiaa tulisi k\u00e4ytt\u00e4\u00e4 hierarkian n\u00e4ytt\u00e4miseen tai k\u00e4ytt\u00e4j\u00e4n kiinnostuksen her\u00e4tt\u00e4miseen. Oikean kokoisten otsikoiden k\u00e4ytt\u00e4minen voi auttaa luomaan sivuille suurenmoisen hierarkian, ja oikea fonttikoko nykyaikaisten laitteiden n\u00e4ytt\u00f6kokojen mukaan voi kaikki luoda eritt\u00e4in kiinnostavan kokemuksen k\u00e4ytt\u00e4jillesi.<\/p>\n<p>Kun ostosten teko ja sosiaalinen media mobiilin kautta ovat lis\u00e4\u00e4ntym\u00e4ss\u00e4, mobiiliresponsiivinen suunnittelu, jos se otetaan tehokkaasti k\u00e4ytt\u00f6\u00f6n, verkkosivustollasi voi vaikuttaa k\u00e4ytt\u00e4j\u00e4kokemukseen ja sitoutumiseen, mik\u00e4 luo mahdollisia liidej\u00e4 tai asiakkaita yrityksellesi. Lis\u00e4ksi mobiiliresponsiiviset verkkosivustot tarjoavat paremmat sijoitukset hakutuloksissa. Lis\u00e4ksi mobiiliresponsiivisten verkkosivustojen rakentaminen ja yll\u00e4pito tarjoaa nyky\u00e4\u00e4n paremman tuoton sijoitukselle kuin koskaan aikaisemmin, koska digitaalisen markkinoinnin tuottopotentiaali on valtava. N\u00e4ist\u00e4 syist\u00e4 \u00e4l\u00e4 tuhlaa aikaa! Sijoita yrityksesi mobiiliresponsiivisiin verkkosivustoihin nyt!<\/p>\n<p><strong><a href=\"https:\/\/www.carmatec.com\/fi\/\">Carmatec<\/a><\/strong> on Digital Transformation Partner, joka toteuttaa monia projekteja, joiden p\u00e4\u00e4paino on k\u00e4ytt\u00f6liittym\u00e4suunnittelussa. Voit n\u00e4hd\u00e4 projektiportfoliomme osoitteessa <a href=\"https:\/\/www.carmatec.com\/fi\/portfolio\/\"><strong>https:\/\/www.carmatec.com\/portfolio\/<\/strong><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Today users view online content or do online transactions using various devices ranging from laptops, to tablet and mobile phones. Moreover, the mobile ecosystem (mobile devices and operating systems which are installed on them) is growing rapidly. Therefore, it is imperative that the websites which businesses build to target customers, are mobile optimized. Mobile Responsive [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":29244,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,7],"tags":[],"class_list":["post-11901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-mobile-app-development"],"_links":{"self":[{"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/posts\/11901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/comments?post=11901"}],"version-history":[{"count":2,"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/posts\/11901\/revisions"}],"predecessor-version":[{"id":50306,"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/posts\/11901\/revisions\/50306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/media\/29244"}],"wp:attachment":[{"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/media?parent=11901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/categories?post=11901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.carmatec.com\/fi\/wp-json\/wp\/v2\/tags?post=11901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}