Share
Responsive webdesign har vært en stor trend i lang tid - selv før Mashable erklærte 2013 året med lydhør webdesign. Pair det med en økt bruk av mobile enheter av ulike skjermstørrelser, og det er lett å forstå hvorfor Internett ikke vil slutte å snakke om det.
Men hva betyr responsivt webdesign for småbedriftseiere? Enda viktigere, hvorfor bør du bekymre deg for responsivt webdesign?
Når det gjelder å markedsføre og markedsføre virksomheten din, kan et godt utformet nettsted være din mest verdifulle ressurs. Men hvis du vil at den skal være virkelig effektiv, er det ikke en attraktiv design alene som er nok. Ditt nettsted må også være responsivt.
Den viktigste grunnen til at du vil ha en responsiv nettside, er at bruken av mobile enheter for å surfe på Internett stadig har vært i vekst i noen år nå, og viser ingen tegn til å bremse ned.
Fra et forretningsmessig synspunkt betyr dette at hvis nettstedet ditt ikke reagerer godt på mindre skjermer og det er vanskelig å lese og navigere, vil de besøkende være mer tilbøyelige til å gå videre til en konkurrents nettsted i stedet.
Enkelt sagt, responsivt webdesign er ikke en luksus, det er en nødvendighet, og nå er det den perfekte tiden for å sikre at nettstedet ditt er responsivt.
Hvis du har lurt på hva responsivt webdesign egentlig er, og hvorfor det betyr noe, har du kommet til rett sted. I denne artikkelen vil vi forklare hvordan responsivt webdesign fungerer, hvorfor du bør vurdere en responsiv nettside, og vise deg noen responsive webdesigneksempler i virkeligheten. La oss dykke inn!
Termen responsiv webdesign ble laget av Ethan Marcotte i 2010 og refererer til prosessen med å designe nettsteder som vil reagere på enheten de blir sett på for å gi brukerne en sømløs, optimal brukeropplevelse.
Kjernefylt webdesign følger i sin helhet de tre hovedprinsippene: væskenett, responsiv media og medieforespørsler. I noen tilfeller bruker responsivt webdesign også meda-tagg-metakoden når en enhet ikke kan bestemme den første bredden eller skalaen til et nettsted, noe som fører til at mediaforespørsler ikke utløses. Her er de grunnleggende responsive webdesign prinsippene forklart:
Fluidgitter fungerer som et hvilket som helst annet designnett - de lar deg ordne elementer på en side på en visuelt attraktiv måte. I motsetning til et tradisjonelt rutenett vil et væskegitter imidlertid endre størrelsen på grunn av skjermstørrelsen og tilpasse seg til hvilken som helst bredde fordi den bruker relative måleenheter som prosentandeler eller em-enheter, i stedet for faste enheter som piksler.
Medieforespørsler gjør det mulig å få enda mer spesifikt med din responsive design og justere den tilsvarende basert på en bestemt skjermstørrelse. I lekmanns termer bruker nettsteder mediefunksjoner for å samle data som hjelper dem med å bestemme størrelsen på en skjerm og deretter laste de riktige CSS-stilene.
Det tredje kjerneprinsippet med lydhør webdesign er responsivt eller fleksibelt medie. Gitt at moderne nettsteder bruker mange bilder, videoer og andre mediefiler, er det avgjørende at disse typer innhold svarer til forskjellige skjermstørrelser.
Normalt vil designere inkludere bildedimensjonene i deres CSS-stilark. Men dette virker ikke for responsiv design på grunn av faste måleenheter nevnt ovenfor. I stedet må du bruke maksimal breddeegenskap for bildefiler, videoer og andre medietyper. For å sikre at mediefilene ikke går forbi beholderen og skaleres pent på grunn av skjermstørrelsen, bør egenskapen for maksimal bredde settes til 100%.
Som nevnt før kommer meta-taggen for visningsport kommer inn i spill når medieforespørsler ikke vil utløse fordi en enhet ikke kan bestemme den første bredden på et nettsted. For å bekjempe dette kom Apple ut med viewport-metakoden.
Viewport-metakoden har vanligvis en innledende skala av høyde- eller breddeverdi satt til 1, som løser problemet med ikke å gjenkjenne nettstedets skala ved å bruke forholdet mellom enhetens høyde eller bredde og visningsstørrelsen.
Nå som vi har dekket kjerneprinsippene for responsivt webdesign, la oss ta en titt på noen virkelige responsive webdesign eksempler:
Å være en webutvikler, er det ikke rart at Susan Jean Robertsons nettside følger de beste praksisen når det gjelder webdesign, som inkluderer å sørge for at nettstedet hennes ser bra ut uansett hvilken enhet besøkende bruker.
Selv om nettstedet er ganske enkelt og minimalt, har det noen få bilder som ikke bare skaleres pent ut fra skjermstørrelsen, men også skiftes fra en to-kolonne-oppsett til en kolonneformet oppsett på mindre skjermer. Menyen, som ofte skifter til en hamburger-meny på mindre skjermer, forblir den samme fordi den ikke har mange koblinger, så det er ikke nødvendig å gjemme det.
BMWs nettsted bruker mange bilder og bakgrunnsvideoer, som kan være den mest utfordrende delen av responsivt webdesign.
Men som du ser fra skjermbildet nedenfor, gjør BMW en utmerket jobb med å sørge for at alle bildene og videoene svarer på forskjellige skjermstørrelser. Du vil også legge merke til bruken av en hamburger-meny på mobile enheter.
Feltnotater fungerer som et godt eksempel på et e-handelsnettsted som ser bra ut på både mobile og stasjonære enheter.
De bruker standard hamburger-menyen på mindre skjermbilder, og produktrader endres fra fire kolonnerader til to-kolonne rader. Call-to-Action forblir synlig og lett klikkbar, selv om skjermstørrelsen går ned og produktbildene skal skåre fint også.
En attraktiv illustrert bakgrunn er det første du vil legge merke til på KlientBoosts nettsted, og at bakgrunnen ser bra ut uansett hvordan du endrer størrelsen på nettleservinduet.
Bortsett fra å bruke en hamburger-meny, bruker KlientBoost også en annen logo-versjon på mindre skjermbilder, og resten av oppsettet oppfører seg på vanlig måte: flere kolonner stabler inn i en enkelt kolonne.
Det siste eksemplet på vår liste kommer fra WillowTree Apps, et digitalt byrå hvis nettside bruker et rent layout med mange bilder for å vise frem innholdet og porteføljen.
Du vil legge merke til at bildene er fullt lydhør og følge standardmønsteret for å bli stablet før utdragene i en kolonne, som ligner på resten av innholdet. Her finnes en hamburger-meny, samt CTA-knapper som fortsatt er tydelige, selv på mindre skjermer.
Nettstedene ovenfor er bare toppen av isbreen når det gjelder responsiv webdesigninspirasjon. Du kan finne mange flere eksempler i vår samling av 25 best responsive webdesign eksempler.
Responsive webdesign handler ikke bare om å følge de nyeste webdesigntrender. Vedta et responsivt oppsett for nettstedet ditt har mange fordeler for bedriften din, som kan påvirke trafikken, SEO og inntekter. Her er de fem beste grunnene til at du bør vurdere responsivt webdesign for ditt nettsted.
Den viktigste grunnen til å ta imot en responsiv webdesign er at du skal gi dine besøkende en bedre brukeropplevelse og forbedre brukervennligheten til nettstedet ditt. Hvis besøkende ikke er tvunget til å rulle umiddelbart i alle retninger, klype og zoome for å lese innholdet, vil de være mer tilbøyelige til å bli på nettstedet ditt i lengre tid. De kan enkelt navigere fra en side til en annen, og har ingen problemer med å fylle ut et skjema eller klikke på ring-til-handling-knappen.
Som vi nevnte tidligere, viser statistikk at mer enn halvparten av all verdensnettrafikk kommer fra mobile enheter, noe som betyr at når nettstedet ditt er responsivt, har du mye bedre sjanser til å tiltrekke de besøkende. Hvis de lander på nettstedet ditt og møtes med et nettsted som ser ut og fungerer bra selv på mindre skjermer, har de ingen grunn til å navigere bort, slik at bedriften din er bundet til å se en økning i kundeemner og kunder fra mobilenheter.
Bortsett fra lydhør webdesign, er en annen Internett-trend som har blitt et must, et raskt lastet nettsted. Og takknemlig for væskenett og responsive medier, har responsive nettsteder bedre lastetider enn ikke-reagerende nettsteder. Dette fører til at besøkende tilbringer mer tid på nettstedet ditt, noe som fører oss til neste poeng - konverteringsfrekvens.
Når besøkende bruker mer tid på nettstedet ditt, har du bedre sjanser til å konvertere dem fra besøkende til kundeemner og deretter til abonnenter og kjøpere. Ifølge undersøkelsen er gjennomsnittlig konverteringsfrekvens for smarttelefonenheter 64% høyere enn konverteringsfrekvensen for skrivebordet. Dette er et direkte resultat av forbedret brukeropplevelse som kommer fra å ha et nettsted som er enkelt å bruke på tvers av ulike skjermstørrelser og raskere lastetider.
Til slutt, en bedre SEO rang er definitivt en av de fem beste fordelene med lydhør webdesign. Tross alt, hvis du ikke kan bli funnet i søkemotorer, blir det nesten umulig å få organisk trafikk til nettstedet ditt. Ifølge Google, siden april 2015, er responsen til nettstedet ditt en av rangeringssignalene som bestemmer hvordan nettstedet ditt vises i søkemotorene. Google er imidlertid ikke den eneste søkemotoren som anbefaler det. Bing har tydelig uttalt på bloggen sin at bygge nettsteder optimalisert for alle plattformer er nøkkelen til en vellykket SEO strategi.
Nå som vi har dekket de viktigste fordelene ved responsivt webdesign, la oss diskutere hvordan du kan komme i gang.
Det første du bør gjøre er å teste responsen til nettstedet ditt. Du kan bruke et verktøy som Googles mobile-vennlig test. Alt du trenger å gjøre er å skrive inn nettadressen til nettstedet ditt, og verktøyet vil analysere nettstedet ditt og fortelle deg om det er responsivt eller ikke. Du får også forslag til hva du skal gjøre for å sikre at nettstedet ditt er mobilvennlig.
Når du vet om nettstedet ditt er responsivt eller ikke, er det på tide å bli inspirert av eksempler på lydhørige nettsteder. Du vil kunne se nøyaktig hvordan disse nettstedene bruker de kjente prinsippene som er beskrevet ovenfor, samt hvordan de implementerte andre nødvendige funksjoner.
Det neste trinnet er å velge en responsiv mal eller et tema for nettstedet ditt. Hvis du har brukt HTML-maler så langt og ønsker å fortsette å bruke dem, er det mange responsive HTML-maler å velge mellom. Start med vår raundup av de beste responsive HTML-malene som er tilgjengelige på vår markedsplass.
Hvis WordPress er din valgte plattform, vil du gjerne vite at det ikke er mangel på responsive WordPress-temaer, uansett hvilken bransje bedriften din tilhører.
Når du har sørget for at nettstedet ditt bruker en responsiv mal eller et tema, er det på tide å ta det til neste nivå med ekstra tips og triks. Bruk vår guide som utgangspunkt for å sikre at nettstedet ditt gir best mulig brukeropplevelse og er fullt responsiv.
Responsive webdesign går ikke snart når som helst. Faktisk er det fremtiden, og det har en rekke fordeler som har innvirkning på enhver bedriftseieres bunnlinje.
Hvis du er klar til å ta nettstedet ditt til neste nivå, start med å gi det en sminke med en av våre responsive HTML-maler eller WordPress-temaer, og bruk tipsene og triksene fra denne artikkelen til å vise deg i riktig retning.
Accentsconagua