{"id":257363,"date":"2023-01-11T09:00:00","date_gmt":"2023-01-11T06:00:00","guid":{"rendered":"https:\/\/inform.click\/mobil-webdesigntrender-hvorfor-mobil-webdesign-er-fremtidens-vei\/"},"modified":"2023-01-11T09:00:00","modified_gmt":"2023-01-11T06:00:00","slug":"mobil-webdesigntrender-hvorfor-mobil-webdesign-er-fremtidens-vei","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/mobil-webdesigntrender-hvorfor-mobil-webdesign-er-fremtidens-vei\/","title":{"rendered":"Mobil webdesigntrender: Hvorfor mobil webdesign er fremtidens vei?"},"content":{"rendered":"<p>\n  Mobilnettsidedesign er noe du kanskje allerede er kjent med. Nettdesigntrenden som ogs\u00e5 er kjent som responsivt nettsteddesign er ikke et nytt konsept.\n<\/p>\n<p>\n  Opprinnelsen til mobil webdesign kan spores tilbake til 1996 da webdesignpioneren Glenn Davis utviklet og populariserte teknikken med flytende layout som var fleksibel og tilpasset forskjellige skjermst\u00f8rrelser.\n<\/p>\n<p>\n  Nettsteddesignere avanserte teknikken ytterligere gjennom \u00e5rene.\n<\/p>\n<p>\n  I 2004 foreslo nettutvikler Cameron Adams en teknikk kalt oppl\u00f8sningsavhengig layout ved bruk av JavaScript. Det innebar \u00e5 oppdage skjermst\u00f8rrelsen til brukere for \u00e5 vise riktig nettstedsoppsett.\n<\/p>\n<p>\n  En annen webdesigner Zoe Gillenwater publiserte en bok Flexible Web Design i 2010 der hun foreslo en elastisk layout for et konsistent utseende til nettsideoppsett p\u00e5 tvers av flere skjermst\u00f8rrelser. I l\u00f8pet av samme \u00e5r foreslo nettutvikler Ethan Marcotte en ny tiln\u00e6rming til fleksibelt nettsteddesign som han kalte responsivt nettsteddesign.\n<\/p>\n<h5>\n  Mobil webdesign: n\u00e5tiden og fremtiden<br \/>\n<\/h5>\n<p>\n  Mobil nettstedsdesign bruker en responsiv webdesigntiln\u00e6rming. Det inneb\u00e6rer \u00e5 skrive koder som gir en optimal seeropplevelse til brukere som bes\u00f8ker nettsider ved hjelp av sine mobile enheter.\n<\/p>\n<p>\n  Med introduksjonen av mobile smarttelefoner p\u00e5 slutten av 2000-tallet av Apple, Samsung, Nokia og Blackberry, begynte nettstedutviklere \u00e5 lage nettsteder for den mindre skjermen. De brukte flytende layout, oppl\u00f8sningsavhengig layout, elastisk design, fluid grids, fleksible bilder og andre kjente teknikker. Det innledet en epoke med mobil webdesign som har blitt mainstream i dag blant nettutviklere og vil fortsette \u00e5 gj\u00f8re det i \u00e5rene som kommer.\n<\/p>\n<p>\n  Google inns\u00e5 den \u00f8kende betydningen av mobilnettsidedesign. I 2015 introduserte s\u00f8kemotorgiganten en algoritmeoppdatering kalt <a href=\"https:\/\/inform.click\/no\/vil-mobilegeddon-forarsake-en-revolusjon-for-mobilnettsidedesign\/\" title=\"Mobilegeddon\">Mobilegeddon<\/a> som rangerte mobilvennlige nettsteder h\u00f8yere i mobils\u00f8keresultater.\n<\/p>\n<p>\n  If\u00f8lge <a href=\"https:\/\/developers.google.com\/search\/blog\/2015\/04\/rolling-out-mobile-friendly-update\" target=\"_blank\" rel=\"noopener\">Google<\/a> inkluderer egenskapene til en mobilvennlig nettside:\n<\/p>\n<ul>\n<li>Lesbar tekst som ikke krever zooming eller trykking\n  <\/li>\n<li>Tappm\u00e5l med passende avstand\n  <\/li>\n<li>Unng\u00e5 visning av \u00abuspillbart innhold\u00bb som horisontal rulling\n  <\/li>\n<\/ul>\n<p>\n  Nettstedsutviklere m\u00e5 lage et nettsted som tilbyr en s\u00f8ml\u00f8s brukeropplevelse (UX) p\u00e5 tvers av flere enheter og skjermer. Og bruken av CSS-styling, flytende rutenett og oppl\u00f8sningsavhengig layout bidrar til \u00e5 oppn\u00e5 dette m\u00e5let ved \u00e5 lage nettsteder som vises godt p\u00e5 forskjellige enheter.\n<\/p>\n<h5>\n  Hvorfor er mobil webdesign viktig?<br \/>\n<\/h5>\n<p>\n  \u00c5 lage en mobilvennlig nettside gir ulike fordeler som \u00f8kt trafikk, \u00f8kte konverteringer og et profesjonelt image.\n<\/p>\n<p>\n  Siden de fleste i dag bes\u00f8ker et nettsted ved hjelp av mobile enheter, m\u00e5 nettstedets design oppfylle kravene til n\u00e5v\u00e6rende enheter s\u00e5 vel som fremtidens enheter.\n<\/p>\n<p>\n  I 2021 representerte mobile enheter 92,6 prosent av nettsidevisningene globalt. Dette betyr at de fleste sannsynligvis bare vil se mobilversjonen av nettstedet. Trenden vil sannsynligvis fortsette i fremtiden, noe som gj\u00f8r det viktig for webutviklere \u00e5 mestre teknikken.\n<\/p>\n<p>\n  Mobil webdesigntrender \u00e5 tenke p\u00e5\n<\/p>\n<p>\n  Mobile enheter fortsetter \u00e5 utvikle seg, og krever at webdesignere tilpasser seg og justerer. Det er viktig \u00e5 holde tritt med trendene i mobilnettdesign for \u00e5 sikre en s\u00f8ml\u00f8s opplevelse for brukerne.\n<\/p>\n<p>\n  Her ser vi p\u00e5 de viktigste trendene for mobilnettdesign \u00e5 tenke p\u00e5 i \u00e5rene fremover.\n<\/p>\n<h5>\n  1 mobilt design for sammenleggbare skjermer<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d52a12cb4.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d52a12cb4.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Sammenleggbare mobiler blir stadig mer popul\u00e6re. Den siste statistikken viser at det ble solgt rundt 819 000 sammenleggbare telefoner i Q2 2021. Salget av sammenleggbare telefoner forventes \u00e5 \u00f8ke med 112 prosent i 2022 og n\u00e5 15,9 millioner.\n<\/p>\n<p>\n  Mens Royal FlexiPai var den f\u00f8rste sammenleggbare telefonen, var det Samsung Galaxy Fold som fanget interessen til globale forbrukere.\n<\/p>\n<p>\n  Sammenleggbare telefoner har en sammenleggbar skjerm. Funksjonene gj\u00f8r at en telefon kan fungere b\u00e5de som smarttelefon og bord. Denne spesielle utformingen har gitt muligheter for innovative m\u00e5ter \u00e5 vise et nettsted p\u00e5. Men det har ogs\u00e5 skapt nye utfordringer for webutviklere.\n<\/p>\n<p>\n  \u00c5 designe et nettsted for telefoner som kan foldes horisontalt er spesielt et problem. Ved \u00e5 folde ut telefonen \u00f8ker telefonens skjermplass. Webdesignere m\u00e5 skrive koder p\u00e5 en m\u00e5te som gj\u00f8r at bretting og utfolding av telefonen ikke roter med visningen av nettstedet.\n<\/p>\n<p>\n  Typografi er en annen utfordring for webdesignere n\u00e5r det kommer til sammenleggbare telefoner. Avhengig av skjermst\u00f8rrelsen vil overskriftene, teksten og kolonnene vises annerledes. Det krever \u00e5 g\u00e5 utover responsive nettstedsdesignteknikker for \u00e5 innlemme nye metoder for \u00e5 vise nettstedet p\u00e5 riktig m\u00e5te.\n<\/p>\n<p>\n  Nettstedsutviklere m\u00e5 skrive koder som tillater s\u00f8ml\u00f8s endring av visningen n\u00e5r brukere folder og folder ut skjermen.\n<\/p>\n<p>\n  Nettsideutviklere b\u00f8r vurdere en <a href=\"https:\/\/inform.click\/no\/7-funksjoner-ved-minimalistisk-webdesign\/\" title=\"minimalistisk tiln\u00e6rming\">minimalistisk tiln\u00e6rming<\/a> n\u00e5r de designer nettsteder som vises best p\u00e5 sammenleggbare skjermer. De m\u00e5 tilpasse JavaScript og CSS for \u00e5 takle utfordringer som foldbar design gir.\n<\/p>\n<h5>\n  2 Webdesign for flip-telefoner<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d52e2d6ac.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d52e2d6ac.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Flip-telefoner som Galaxy Z Flip foldes vertikalt i motsetning til de sammenleggbare telefonene som brettes horisontalt. Det er enklere \u00e5 designe et responsivt nettsted for flip-telefoner.\n<\/p>\n<p>\n  Du m\u00e5 bestemme bretteomr\u00e5det der skjermen deler seg i to omr\u00e5der. Den gjennomsnittlige brettelinjen p\u00e5 flip-skjermer er omtrent 1000 piksler bred. Det er viktig \u00e5 s\u00f8rge for at innholdet over brettingen og under brettingen er balansert.\n<\/p>\n<p>\n  Ikke pr\u00f8v \u00e5 legge for mye informasjon over brettelinjen. Lesere skal enkelt kunne lese informasjonen p\u00e5 tvers av dellinjen p\u00e5 en flip-telefon.\n<\/p>\n<h5>\n  3 Augmented Reality<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d532c4fb2.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d532c4fb2.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Augmented reality er for \u00f8yeblikket kun et konsept for mobiltelefoner. Men det har potensial til \u00e5 ta av i \u00e5rene som kommer.\n<\/p>\n<p>\n  Apple har implementert LiDAR-sensoren (Light Detection and Ranging) i sine nyeste modeller \u2013 iPhone 12 Pro, iPad Pro og iPad Pro Max. Funksjonen lar brukere m\u00e5le objekter ved \u00e5 peke en sensor mot dem, som skyter en lysstr\u00e5le for \u00e5 kartlegge omr\u00e5det og objektene inne i den. Det er en av de grove implementeringene av AR i mobiltelefoner.\n<\/p>\n<p>\n  Nettsteddesignere kan bruke AR-funksjoner p\u00e5 en mobiltelefon for \u00e5 vise utvidet informasjon. Et nettsted kan for eksempel bruke en LiDAR-sensor til \u00e5 m\u00e5le arealet til et objekt og automatisk konvertere det til \u00f8nsket metrikk. Nettstedsapper kan ogs\u00e5 bruke AR-funksjoner for \u00e5 skape en mer oppslukende og engasjerende brukeropplevelse.\n<\/p>\n<h3>\n  Hvordan tilpasse seg utviklende mobiltrender innen webdesign<br \/>\n<\/h3>\n<p>\n  Selv om mobiltelefoner er i utvikling, forblir det grunnleggende for \u00e5 skape et positivt USA. Brukere forventer en s\u00f8ml\u00f8s opplevelse p\u00e5 tvers av flere enheter. Webdesignere m\u00e5 designe nettstedet basert p\u00e5 funksjonene og dimensjonene p\u00e5 mobilskjermen.\n<\/p>\n<h5>\n  1 brukerengasjement<br \/>\n<\/h5>\n<p>\n  Brukerengasjement er viktig n\u00e5r du skal designe en nettside. Det er viktig \u00e5 fokusere p\u00e5 et design som p\u00e5virker brukerne til \u00e5 ta de n\u00f8dvendige handlingene.\n<\/p>\n<p>\n  Fokuser p\u00e5 \u00e5 lage en landingsside som gir all relevant informasjon p\u00e5 en organisert m\u00e5te. Dessuten b\u00f8r nettsteddesignet inkludere visuelle elementer og elementer som tiltrekker brukernes oppmerksomhet.\n<\/p>\n<h5>\n  2 Fleksibel layout<br \/>\n<\/h5>\n<p>\n  Fleksibel layout er n\u00f8kkelen til et responsivt mobilnettdesign. Oppsettet skal automatisk justeres basert p\u00e5 st\u00f8rrelsen p\u00e5 skjermen. Den skal kunne vise innholdet perfekt i b\u00e5de tradisjonelle smarttelefoner og de nyeste sammenleggbare og blafbare telefonene.\n<\/p>\n<p>\n  Du m\u00e5 s\u00f8rge for at nettsiden vises riktig p\u00e5 b\u00e5de nettbrett og smarttelefoner.\n<\/p>\n<p>\n  Fokuset b\u00f8r v\u00e6re \u00e5 maksimere nettleseropplevelsen p\u00e5 mobilnettstedet p\u00e5 et begrenset sted. Brukere skal enkelt kunne lese innholdet uten \u00e5 gj\u00f8re noe. Bildene skal skaleres basert p\u00e5 en prosentverdi av bredden p\u00e5 mobilnettleserskjermen.\n<\/p>\n<p>\n  Utformingen av mobilnettstedet m\u00e5 v\u00e6re tilpasningsdyktig. Det anbefales \u00e5 lage flere versjoner av et nettsted for forskjellige nettleserbredder. Du kan lage et oppsett p\u00e5 500 piksler, 500-800 piksler og over 800 piksler. \u00c5 lage flere oppsett er generelt enklere \u00e5 designe og teste sammenlignet med v\u00e6skeskaleringsmetoden.\n<\/p>\n<h5>\n  3 Bevegelsesnavigering<br \/>\n<\/h5>\n<p>\n  De fleste foretrekker \u00e5 samhandle med et nettsted ved \u00e5 bruke fingrene. Et mobilnettstedsdesign skal tillate brukere \u00e5 knipe for \u00e5 zoome inn og ut av siden. I stedet for \u00e5 navigere i bilder i et galleri ved hjelp av sm\u00e5 knapper, b\u00f8r du la brukerne bla ved \u00e5 sveipe til venstre og h\u00f8yre.\n<\/p>\n<p>\n  En viktig vurdering n\u00e5r du designer en nettside for sm\u00e5 skjermer er bredden p\u00e5 brukernes fingre. Apple anbefaler at <a href=\"https:\/\/www.smashingmagazine.com\/2012\/02\/finger-friendly-design-ideal-mobile-touchscreen-target-sizes\/\" target=\"_blank\" rel=\"noopener\">ber\u00f8ringsgrensesnittet<\/a> b\u00f8r v\u00e6re mer enn 44 piksler. Derimot foresl\u00e5r Google 34 piksler for det trykkbare UI-elementet. Men s\u00f8rg for at ber\u00f8ringsm\u00e5let for mobilnettdesignet ditt ikke er mindre enn 24 piksler.\n<\/p>\n<h5>\n  4 Test designet<br \/>\n<\/h5>\n<p>\n  Webdesignere b\u00f8r teste nettsidedesignet p\u00e5 tvers av flere skjermst\u00f8rrelser og nettlesere. Du b\u00f8r teste nettstedet p\u00e5 alle tilgjengelige nettlesere. \u00c5 vise en melding som oppfordrer brukere til \u00e5 bruke en bestemt nettleser er en lat holdning til mobil webdesign. Det vil fremmedgj\u00f8re mange brukere som foretrekker \u00e5 ikke surfe p\u00e5 nettstedet i stedet for \u00e5 installere en annen nettleser bare for \u00e5 se nettstedet ditt.\n<\/p>\n<p>\n  Du b\u00f8r ogs\u00e5 vurdere \u00e5 teste nettstedets design p\u00e5 tvers av flere skjermst\u00f8rrelser. Dette er den beste tiln\u00e6rmingen som vil sikre at nettstedet ditt viser det beste uavhengig av telefonen som brukes til \u00e5 surfe p\u00e5 nettstedet ditt.\n<\/p>\n<p>\n  Hvis du ikke har r\u00e5d til \u00e5 kj\u00f8pe forskjellige mobile enheter, er en annen mindre n\u00f8yaktig tiln\u00e6rming \u00e5 bruke Googles resizerverkt\u00f8y. Denne appen lar deg forh\u00e5ndsvise nettstedet ditt p\u00e5 forskjellige mobile enheter.\n<\/p>\n<h5>\n  5 Implementer CSS Media Query<br \/>\n<\/h5>\n<p>\n  CSS Media Query er en type nettsteddesignkode som lar den automatisk skalere basert p\u00e5 skjermen. Koden lar deg bruke CSS bare n\u00e5r en bestemt betingelse er oppfylt. Du kan for eksempel bruke mediesp\u00f8rringer til \u00e5 lage en regel for implementering av en bestemt stil n\u00e5r st\u00f8rrelsen p\u00e5 skjermen er 320 px eller mindre. Nettstedets layout vil justeres automatisk n\u00e5r den angitte betingelsen er oppfylt.\n<\/p>\n<p>\n  Ved \u00e5 bruke CSS Media Query kan du bruke en stil n\u00e5r enheten og nettlesermilj\u00f8et samsvarer med betingelsene. De lar deg lage forskjellige oppsett for forskjellige enhetsskjermst\u00f8rrelser og nettlesere. En enkel mediesp\u00f8rring vises som f\u00f8lger.\n<\/p>\n<pre><code>@media media-type and (media-feature-rule) {\n  \/*specific CSS conditions*\/\n}<\/code><\/pre>\n<p>\n  I koden ovenfor spesifiserer medietypen typen mediekode til nettleseren. Mediefunksjonsregelen spesifiserer at koden inneholder betingelser som m\u00e5 oppfylles for \u00e5 utf\u00f8re koden. Du kan deretter spesifisere CSS-betingelsene for visning av spesifikke oppsett basert p\u00e5 mobilskjermen og nettleseren som brukes for \u00e5 f\u00e5 tilgang til nettstedet.\n<\/p>\n<h4>\n  Konklusjon<br \/>\n<\/h4>\n<p>\n  Etter hvert som mobilenhetens grensesnitt og oppsett utvikler seg, m\u00e5 webdesignere ogs\u00e5 utvikle nye m\u00e5ter \u00e5 vise nettstedet p\u00e5. Fremveksten av nye telefondesign krever en ny fokusering p\u00e5 brukergrensesnittet for \u00e5 skape en s\u00f8ml\u00f8s UX.\n<\/p>\n<p>\n  UX er det viktigste n\u00e5r det kommer til mobil webdesign. Nettdesignere b\u00f8r lage et responsivt nettstedsdesign mens de tar hensyn til kravene til brukere som surfer p\u00e5 nettsteder som bruker forskjellige mobile enheter.\n<\/p>\n<p>\n  Nettutviklere m\u00e5 holde tritt med trendene innen mobil webdesign. De m\u00e5 sikte p\u00e5 en positiv mobil UX, da det vil forbedre SEO-rangeringen, gi mer trafikk og \u00f8ke konverteringsfrekvensen.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Opptakskilde: instantshift.com\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mobilnettsidedesign er noe du kanskje allerede er kjent med. Nettdesigntrenden som ogs\u00e5 er kjent som responsivt nettsteddesign er ikke et nytt konsept. Opprinnelsen til mobil webdesign kan spores tilbake til 1996 da webdesignpioneren Glenn Davis utviklet og populariserte teknikken med flytende layout som var fleksibel og tilpasset forskjellige skjermst\u00f8rrelser. Nettsteddesignere avanserte teknikken ytterligere gjennom \u00e5rene. I 2004 foreslo nettutvikler Cameron Adams en teknikk kalt oppl\u00f8sningsavhengig layout ved bruk av JavaScript. Det innebar \u00e5 oppdage skjermst\u00f8rrelsen til brukere for \u00e5 vise det aktuelle nettstedet &#8230;<\/p>\n","protected":false},"author":1,"featured_media":180172,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[525,694,603,57,200],"tags":[],"class_list":["post-257363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diverse-no","category-mobil-gadgets","category-teknologi-og-mer","category-web-og-wordpress","category-webdesign-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/comments?post=257363"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media\/180172"}],"wp:attachment":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media?parent=257363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/categories?post=257363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/tags?post=257363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}