Share
Det er ikke nektet at responsiv webdesign har vunnet i popularitet og betydning siden Google annonserte at mobilvennlige og lydhørige nettsteder vil se et løft i søkemotorenes rangering i 2015.
Men responsiv design går langt tilbake. Faktisk var den første nettsiden med et layout som tilpasser seg forskjellige nettleservisningsbredder designet rundt 2002. Takket være fremdriften i teknologi og det faktum at design for nettet alltid betydde å designe for en myriade av skjermstørrelser, var responsivt webdesign et naturlig resultat.
Men det var ikke før 2010 da begrepet responsivt webdesign ble offisielt laget av Ethan Marcotte, en uavhengig webutvikler som også skrev en bok om responsiv webdesign.
Siden da har teknologien avansert enda mer, og vi har sett et økende antall mennesker som går til smarttelefonene og nettbrettene, for ikke bare å ringe og sende meldinger, men også å bla gjennom nyheter og andre nettsteder av interesse. I fremtiden vil sikker respons på webdesign sikkert fortsette, ettersom de fleste eksperter forutsier fortsatt høye nivåer av bruk av mobilenheter.
Når du legger til alle disse tingene, er det klart at lydhør webdesign er her for å bli. Enda viktigere er det ganske mange fordeler med responsivt webdesign. I denne artikkelen går vi over responsive webdesignfunksjoner og fordeler. Vi vil også vise deg hvordan nettstedet ditt og bedriften kan dra nytte av å vedta den.
Responsiv design er mulig på grunn av de kjerneprinsipper som hver designer, samt alle moderne rammer og CMS, holder seg til:
Vannnett er selve kjernen i lydhør design. Grids lar deg justere elementer på siden din og legge dem ut på en visuelt tiltalende måte, etter et bestemt hierarki. Væskenettet skaleres avhengig av størrelsen på brukerens skjerm og sørge for at alle sidedelementene følger med. Selv om bruk av nett har alltid vært tilstede i designverdenen når det gjelder webdesign, ble enkle, responsive nett utviklet for å hjelpe designere og utviklere i webdesign. Etter de første responsive nettene, spredt en rekke responsive CSS-rammer på scenen, alle baserte koden på et væskenett.
I dag har innfødte nettverket kommet til CSS i form av "CSS Grid Layout Module". Nettleserstøtte er ganske solid nå, og tilbyr store muligheter for webdesignere som ønsker å utforske fluid, responsive grids, uten å stole på rammer.
Medieforespørsler har eksistert siden begynnelsen av 2000-tallet, men det var ikke før 2012 at de ble en W3C-anbefalt standard. I likhet med fluidnettet representerer medieforespørsler en hjørnesteinteknologi bak responsivt webdesign. Takket være medieforespørsler kan et nettsted samle data som bidrar til å bestemme størrelsen på skjermen en besøkende bruker for å få tilgang til den. Når den har den informasjonen, laster den deretter betinget CSS-stiler som passer for den aktuelle skjermstørrelsen.
Responsive webdesign fungerer ganske bra når du jobber med bare tekst. Moderne nettsteder inkluderer imidlertid mange medier, for eksempel bilder og videoer, noe som kan være litt vanskelig.
Den riktige måten å håndtere bilder og andre mediefiler er å bruke egenskapen for maksimal bredde i stedet for å bruke dimensjonene for bilde eller mediefil. Et eksempel ser slik ut:
img maksimal bredde: 100%; høyde: auto;
Hvis du vil inkludere andre medietyper, blir tilnærmingen til styling litt mer nyansert. Høydegenskapen virker ikke, slik at du legger polstring på bunnen av en beholder, og plassering av mediet i den beholderen er veien å gå. Denne tilnærmingen (hack) ble først foreslått av Thierry Koblentz tilbake i 2009, og er fortsatt den mest robuste måten å gjøre ting på.
.wrapper-med-inneboende-forholdet posisjon: relativ; polstring-bunn: 20%; høyde: 0; .element-to-stretch posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%;
Når du legger til dette i CSS-koden, vil alle bildene og mediefilene skaleres i nettleseren din og vil ikke strekke seg forbi deres container.
Nå som vi har dekket kjerneprinsippene for responsivt webdesign, la oss dykke inn i fordelene det bringer.
Det er mange responsive webdesign fordeler. Det kan positivt påvirke SEO, konverteringsfrekvenser, brukeropplevelse og mange andre aspekter av virksomheten din som bidrar til veksten. Her er de 12 viktigste responsive webdesignfunksjonene og fordelene.
Et responsivt nettsted fører til en bedre brukeropplevelse. En viktig faktor som indikerer kvaliteten på brukeropplevelsen er tiden de bruker på nettstedet ditt. Hvis de finner det vanskelig å navigere eller bruke fordi de er tvunget til å knuse og zoome, vil de ikke bli på nettstedet ditt.
Men hvis nettstedet ditt skalerer og reagerer på endringen i skjermstørrelsen, vil besøkende ikke ha problemer med å få tilgang til menyer, linker, knapper eller fylle ut skjemaer. Som et resultat vil deres brukeropplevelse bli bedre, og de vil bruke mer tid på nettstedet ditt.
Bedre brukeropplevelse og brukervennlighet på nettstedet kan da føre til flere ord for munnhenvisninger og nye kunder for bedriften din.
Statistikk viser at i løpet av siste kvartal i 2017 stammer nesten 52% av all global webtrafikk fra mobile enheter. Det står for mer enn halvparten av all Internett-trafikk og viser at du ikke har råd til å avstå fra lydig webdesign. Start med å undersøke hvor mange av dine besøkende som kommer fra mobilenheter og tiden de bruker på nettstedet ditt. Deretter implementerer du responsiv design og sammenligner de to tallene. Når nettstedet ditt er tilpasset visningsbredden, vil du se en økning i mobilbesøk og lengre tid på stedet av de samme besøkende.
Ikke så lenge siden, involverte en vanlig praksis å lage en egen mobilversjon av nettstedet ditt som ble servert da en mindre skjermstørrelse ble oppdaget. Utviklingen av en mobilversjon av nettstedet ditt tar opp mer tid enn å utvikle en responsiv nettside som ser bra ut og fungerer som ønsket, uansett hvilken enhet de besøkende bruker. En annen ulempe ved en mobil nettstedversjon er at de koster mer fordi utvikleren må lage to nettsteder i stedet for en.
Direkte knyttet til punktet ovenfor er enklere vedlikehold av nettstedet. Med to versjoner av nettstedet ditt, har dine ansatte eller utviklingslaget ditt å dele tid og ressurser på å administrere to nettsteder. Med en responsiv nettside kan dine ansatte bruke mindre tid på vedlikeholdsoppgaver og fokusere på viktige oppgaver som markedsføring, A / B-testing, kundeservice, produkt- eller innholdsutvikling og mer.
Et annet poeng å huske på med to versjoner av nettstedet ditt, er at du i hovedsak lager duplikatinnhold. Mens søkemotorer blir smartere om dagen, trenger de fortsatt å forstå hvilken nettsideversjon som er viktigere. Hvis du bruker en mobilversjon av nettstedet ditt, forblir innholdet ditt det samme selv om nettadressen er forskjellig.
Dette kan føre til at begge versjoner av nettstedet ditt har lavere rangering av søkemotorer fordi søkemotorer ikke vet hvilket innhold som er relevant. Hvis du vil at begge versjoner av nettstedet ditt skal rangere godt, må du opprette to separate SEO-strategier og kampanjer, og investere betydelig mer penger i å produsere originalt og unikt innhold for både desktop og mobilversjon av nettstedet ditt.
Siden to separate SEO-strategier krever for mye tid og penger, bruker de fleste nettstedseiere til å bruke en kanonisk tag på deres mobile nettsted som peker på desktopversjonen. Som et resultat er de fleste separate mobile nettsteder ikke rangert i søkemotorer i det hele tatt.
Med en responsiv nettside kan alle hodepinen ovenfor unngås. Hvis du hadde tvil om responsiv webdesign betydning, bør dette bidra til å lindre dem.
Når du har to forskjellige versjoner av nettstedet ditt, må du holde styr på to sett med analyser på nettstedet slik at du vet hvor de besøkende kommer fra og hvordan de samhandler med innholdet ditt. Dette betyr at du trenger å holde oversikt over flere pålogginger og takk på sider, konverteringspoeng, trakter og mer.
Med et responsivt nettsted, er din statistikk på nettstedet imidlertid forenklet, siden du holder deg oppe på et enkelt sett med data. Du kan fortsatt få innblikk i hvilke enheter og nettlesere dine besøkende bruker, hvor de slipper av, og hvor lenge de bruker på nettstedet ditt, men du trenger ikke å lese data fra flere rapporter for å få et nøyaktig bilde.
Nettsteder som er lydhør, pleier å laste raskere på alle enheter, men spesielt på smarttelefoner og nettbrett. Takket være imøtekommende bilder og væskenettverk, tar det betydelig mindre tid for en side å laste, noe som har en direkte innvirkning på varigheten av brukerens besøk. Ifølge forskningen vil 53% av de mobile besøkende forlate et nettsted hvis sidene tar mer enn tre sekunder å laste. Den samme undersøkelsen viser at nettsteder som laster raskt, nyter godt av mer tid brukt på nettstedet, samt forbedrede konverteringsfrekvenser. Dette taler volumer om responsiv webdesign betydning.
Avvisningsfrekvensen angir prosentandelen av besøkende til et bestemt nettsted som navigerer vekk fra nettstedet etter å ha sett en enkelt side. Som vi har nevnt ovenfor, betyr et responsivt nettsted at besøkende vil bli lenger på nettstedet ditt, noe som reduserer studsingsfrekvensen. Besøkende vil være mer tilbøyelig til å klikke gjennom og lese andre sider på nettstedet ditt og utforske alt du har å tilby.
Mer tid på nettstedet ditt og lavere avkastningsfrekvens er gode første skritt for å forbedre brukerens besøkendes opplevelse og bygge tillit. Den forbedrede brukeropplevelsen og tilliten fører til bedre konverteringsfrekvenser, om konvertering betyr å registrere deg for nyhetsbrevet ditt, foreta et kjøp eller bestille en samtale. Tenk for et øyeblikk at gjennomsnittlige smartphone konverteringsfrekvenser er opp med 64% sammenlignet med skrivebordet, og det er lett å se hvorfor et responsivt nettsted er et must.
En annen fordel ved responsiv webdesign er forbedret søkemotorrangering. Fra og med april 2015 tar Google hensyn til nettsidenes respons som et av signalene som bestemmer rangen på nettstedet ditt i søkemotorens resultatside. Hvis nettstedet ditt ikke er responsivt, vil søkemotorens giant legge det lavere på resultatsiden, mens det vil vises høyere hvis det passerer den mobilvennlige testen.
En annen av fordelene ved responsivt webdesign er forbedret søkemotorrangering. (Kilde: Envato Elements)Når det er gjort riktig, kan responsivt webdesign føre til økning i sosiale aksjer for innholdet ditt. Dette er en av de responsive webdesign fordelene. Responsive content parret med responsive sosiale medier knapper gjør det enkelt å dele koblinger til sidens sider, selv på mindre skjermer. Dette kan bidra til å øke din troverdighet og eksponere deg for et nytt publikum, som da fører til mer trafikk og flere konverteringer. Samtidig kan sosiale signaler også påvirke søkemotorenes rang indirekte fordi søkemotorer vil legge merke til økt engasjement og søk etterspørsel.
Til slutt er det verdt å nevne at en responsiv nettside kan hjelpe deg når det gjelder å bygge backlinks. Tilbakekoblinger spiller en viktig rolle i enhver SEO-strategi fordi de viser søkemotorer at andre nettsteder anser nettstedet ditt for en anerkjent kilde til informasjon. Hvis nettstedet ditt ikke reagerer, vil andre nettsteder være mindre tilbøyelige til å koble til deg. Tross alt, kobling til et nettsted som ikke gir god brukeropplevelse, gjør at de også ser dårlig ut.
Som du kan se, er det mange responsive webdesign fordeler for bedriften din. Hvis nettstedet ditt ennå ikke er responsivt, er det et flott første skritt å planlegge et redesign og et nytt, flytende layout. Det vil hjelpe deg med å finne ut hvilke sideelementer som er viktigst, hvilke sider som kan elimineres, og hvor mye kopi du vil beholde på nettstedet ditt.
Når du er klar over retningen for redesignet ditt, kan du dykke inn i å velge riktig plattform og riktig tema eller mal for nettstedet ditt. Du kan deretter implementere tipsene som er skissert i denne serien av opplæringsprogrammer, og forbedre nettstedets konverteringsfrekvens, engasjementsrate, SEO og mer..
Accentsconagua