Har du spurgt dig selv, "Hvad er lydhurt webdesign?" Responsive webdesign er en tilgang, hvor en designer opretter en webside, der "reagerer på" eller ændrer sig selv afhængigt af typen af enhed, den ses igennem. Det kunne være en overdimensioneret stationær computerskærm, en bærbar pc eller enheder med små skærme som smartphones og tablets.
Responsive webdesign er blevet et vigtigt redskab til alle med en digital tilstedeværelse. Med væksten af smartphones, tabletter og andre mobile computerenheder bruger flere mennesker mindre skærme til at se websider.
$config[code] not foundDisse websteder skal også overveje det første mobilindeks, som Google kun annoncerede i april 2018. Da flere små virksomheder øger deres mobile tilstedeværelse, skal deres hjemmeside, e-handel, Google Business-side, sociale mediesider og andre aktiver være let tilgængelige på tværs af alle enheder.
Hvad er Responsive Web Design?
Formålet med responsivt design er at have et websted, men med forskellige elementer, der reagerer forskelligt, når de ses på enheder af forskellige størrelser.
Lad os tage en traditionel "fast" hjemmeside. Når der ses på en stationær computer, kan webstedet f.eks. Vise tre kolonner. Men når du ser det samme layout på en mindre tablet, kan det tvinge dig til at rulle vandret, noget, som brugere ikke kan lide. Eller elementer kan være skjult for visning eller se forvrænget. Virkningen er også kompliceret af, at mange tabletter kan ses enten i stående orientering eller drejes sidelæns til landskabsvisning.
På en lille smartphone skærm kan websteder være endnu mere udfordrende at se. Store billeder kan "bryde" layoutet. Websteder kan være langsom at indlæse på smartphones, hvis de er grafiske tunge.
Men hvis et websted bruger lydhørt design, tilpasses tabletversionen automatisk til kun at vise to kolonner. På den måde er indholdet læseligt og let at navigere. På en smartphone kan indholdet vises som en enkelt kolonne, måske stablet lodret. Eller måske har brugeren mulighed for at svinge over for at se andre kolonner. Billederne ændres i stedet for at forvrænge layoutet eller blive afskåret.
Pointen er: Med et lydhørt design tilpasser hjemmesiden automatisk, baseret på enheden, ser beskueren det ind.
Hvordan virker Responsive Web Design Work?
Responsive sites bruger fluidnet.Alle sideelementer er dimensioneret efter forhold, snarere end pixler. Så hvis du har tre kolonner, ville du ikke sige præcis, hvor bredt hver skal være, men snarere, hvor bred de burde være i forhold til de andre kolonner. Kolonne 1 skulle tage op halvdelen af siden, kolonne 2 skulle tage op 30%, og kolonne 3 skulle f.eks. Tage op 20%.
Medier som billeder er også ændret relativt. På den måde kan et billede forblive inden for sin kolonne eller det relative designelement.
Beslægtede problemer
Mus v. Touch: Designing for mobile enheder bringer også spørgsmålet om mus versus touch. På stationære computere har brugeren normalt en mus til at navigere og vælge elementer. På en smartphone eller tablet bruger brugeren for det meste fingre og rører skærmen. Det, der kan synes nemt at vælge med en mus, kan være svært at vælge med en finger på et lille sted på en skærm. Webdesigneren skal tage "touch" i betragtning.
Grafik og downloadhastighed: Der er også spørgsmålet om grafik, annoncer og downloadhastighed. På mobile enheder kan det være klogt at vise færre grafik end for desktopvisninger, så et websted ikke tager for evigt at indlæse på en smartphone. Større annonceformater må muligvis udveksles til mindre annoncer.
Apps og "mobile versioner": Tidligere har du måske tænkt dig at oprette en app til din hjemmeside - sig en iPad-app eller en Android-app. Eller du ville have en mobilversion specifikt til BlackBerry.
Men med så mange forskellige enheder i dag bliver det sværere at oprette apps og forskellige versioner for hver enhed og operativ platform.
Hvorfor små virksomheder skal skifte til Responsive Web Design
Flere mennesker bruger mobile enheder. En nylig Pew-undersøgelse har 77% af amerikanerne nu egne smartphones i 2018, hvilket er steget fra kun 35% i Pew Research Center's første smartphone ownership survey foretaget i 2011.
Tjek din trafik, og du kan bare være chokeret over, hvor mange besøgende der kommer til dit websted via mobilenheder. (I din Google Analytics skal du vælge "Målgruppe" på venstre side og derefter "Mobil" for at se, hvor stor trafik der er fra mobilenheder. Du kan endda bore ned for at se, hvilke enheder der sender trafikken.)
Responsive design skabeloner er overalt nu, til køb. Hvis du for eksempel har et WordPress-websted, kan du besøge et velrenommeret skabelon som ThemeForest og søge efter "responsive WordPress-temaer." Køb en til under $ 50. Din webudvikler kan derefter tilpasse det til dit logo og mærke.
Redaktørens note: Her ved Small Business Trends arbejder vi på et nyt responsivt design. Skal du ikke?
Foto via Shutterstock
Mere i: Content Marketing, Hvad er 95 Kommentarer ▼
