Har du spurt deg selv, "Hva er responsivt webdesign?" Responsive webdesign er en tilnærming hvor en designer lager en nettside som "reagerer på" eller endrer seg selv, avhengig av hvilken type enhet den blir sett gjennom. Det kan være en overdimensjonert stasjonær dataskjerm, en bærbar PC eller enheter med små skjermer som smarttelefoner og tabletter.
Responsive webdesign har blitt et viktig verktøy for alle som har en digital tilstedeværelse. Med veksten av smarttelefoner, tabletter og andre mobile datamaskiner, bruker flere personer mindre skjermer for å vise websider.
$config[code] not foundDisse nettstedene må også vurdere den første mobilindeksen som kun ble annonsert av Google i april 2018. Etter hvert som flere små bedrifter øker sin mobile tilstedeværelse, må deres nettside, e-handel, Google Business-side, sosiale medier og andre eiendeler være lett tilgjengelige over alle enheter.
Hva er Responsive Web Design?
Formålet med responsiv design er å ha ett nettsted, men med forskjellige elementer som reagerer annerledes når de vises på enheter av forskjellige størrelser.
La oss ta en tradisjonell "fast" nettside. Når du ser på en stasjonær datamaskin, kan nettstedet for eksempel vise tre kolonner. Men når du ser på samme layout på en mindre nettbrett, kan det tvinge deg til å rulle horisontalt, noe brukerne ikke liker. Eller elementer kan være skjult for visning eller ser forvrengt. Virkningen er også komplisert av det faktum at mange tabletter kan ses enten i stående orientering eller vendt sidelengs for landskapsvisning.
På en liten smarttelefon skjerm kan nettsteder være enda mer utfordrende å se. Store bilder kan "bryte" oppsettet. Nettsteder kan være sakte å laste på smarttelefoner hvis de er grafiske tunge.
Men hvis et nettsted bruker lydhør design, kan tablettversjonen automatisk justeres for å vise bare to kolonner. På den måten er innholdet lesbart og enkelt å navigere. På en smarttelefon kan innholdet vises som en enkelt kolonne, kanskje stablet vertikalt. Eller muligens vil brukeren ha muligheten til å sveipe over for å vise andre kolonner. Bildene vil endre størrelsen i stedet for å forvride oppsettet eller bli avskåret.
Poenget er: Med lydhør design tilpasser nettstedet seg automatisk basert på enheten som ser på den.
Hvordan virker Responsive Web Design?
Responsive sites bruker fluidnett.Alle sideelementer er dimensjonert etter proporsjon, i stedet for piksler. Så hvis du har tre kolonner, ville du ikke si nøyaktig hvor bredt hver skal være, men heller hvor bred de burde være i forhold til de andre kolonnene. Kolonne 1 skal ta opp halvparten av siden, kolonne 2 skal ta opp 30%, og kolonne 3 skal ta opp 20%, for eksempel.
Medier som bilder blir også forandret relativt. På den måten kan et bilde ligge innenfor sin kolonne eller det relative designelementet.
Relaterte saker
Mus v. Berøring: Designing for mobile enheter bringer også spørsmålet om mus versus berøring. På stasjonære datamaskiner har brukeren vanligvis en mus for å navigere og velge elementer. På en smarttelefon eller nettbrett bruker brukeren for det meste fingrene og berører skjermen. Det som kan virke lett å velge med en mus, kan være vanskelig å velge med en finger på et lite sted på en skjerm. Webdesigneren må ta "berøring" i betraktning.
Grafikk og nedlastingshastighet: Det er også spørsmålet om grafikk, annonser og nedlastingshastighet. På mobile enheter kan det være lurt å vise færre grafikk enn for desktopvisninger, slik at et nettsted ikke tar for alltid å laste på en smarttelefon. Større annonsestørrelser må kanskje byttes ut for mindre annonser.
Apper og "mobile versjoner": Tidligere har du kanskje tenkt på å lage en app for nettstedet ditt - si en iPad-app eller en Android-app. Eller du vil ha en mobilversjon spesielt for BlackBerry.
Men med så mange forskjellige enheter i dag, blir det vanskeligere å lage programmer og forskjellige versjoner for alle enheter og operativsystemer.
Hvorfor små bedrifter trenger å bytte til Responsive Web Design
Flere mennesker bruker mobile enheter. En nylig Pew-studie studerer 77% av amerikanerne nå egne smarttelefoner i 2018, noe som stiger fra bare 35% i Pew Research Centers første smarttelefon eierskapsundersøkelse gjennomført i 2011.
Sjekk trafikken din, og du kan bare være sjokkert over hvor mange besøkende som kommer til nettstedet ditt via mobilenheter. (I Google Analytics velger du "Målgruppe" på venstre side, og deretter "Mobil" for å se hvilken andel trafikk er fra mobilenheter. Du kan til og med bor ned for å se hvilke enheter som sender trafikken.)
Responsive design maler er overalt nå, for kjøp. Hvis du for eksempel har et WordPress-nettsted, kan du besøke et anerkjent malgalleri som ThemeForest og søke etter "responsive WordPress-temaer." Kjøp en for under $ 50. Din webutvikler kan deretter tilpasse den til din logo og merkevare.
Redaktørens kommentar: Her ved Small Business Trends jobber vi med en ny responsiv design. Skal du ikke?
Bilde via Shutterstock
Mer i: Content Marketing, Hva er 95 kommentarer ▼
