Har du frågat dig själv, "Vad är lyhörd webbdesign?" Responsiv webbdesign är ett tillvägagångssätt där en designer skapar en webbsida som "reagerar på" eller ändrar sig beroende på vilken typ av enhet den ses igenom. Det kan vara en överdimensionerad stationär datorskärm, en bärbar dator eller enheter med små skärmar som smartphones och surfplattor.
Responsiv webbdesign har blivit ett viktigt verktyg för alla som har en digital närvaro. Med tillväxten av smartphones, tabletter och andra mobila datoranordningar använder fler personer mindre skärmar för att visa webbsidor.
$config[code] not foundDessa webbplatser måste också överväga det första mobila indexet som Google annonserade i april 2018. Eftersom fler småföretag ökar sin mobila närvaro måste deras webbplats, e-handel, Google Business-sida, sociala medier och andra tillgångar vara lättillgängliga överallt enheter.
Vad är Responsive Web Design?
Syftet med responsiv design är att ha en webbplats, men med olika element som svarar annorlunda när de ses på enheter av olika storlekar.
Låt oss ta en traditionell "fast" hemsida. När man tittar på en stationär dator kan till exempel webbplatsen visa tre kolumner. Men när du tittar på samma layout på en mindre tablett kan det tvinga dig att rulla horisontellt, något som användare inte tycker om. Eller element kan vara gömda för visning eller ser snedvridna ut. Effekten är också komplicerad av det faktum att många tabletter kan ses antingen i stående orientering eller vänd sida vid sida för landskapsvisning.
På en liten smarttelefon skärm kan webbplatser vara ännu mer utmanande att se. Stora bilder kan "bryta" layouten. Webbplatser kan vara långsamma att ladda på smartphones om de är grafiska tunga.
Om en webbplats använder en responsiv design kan dock tablettversionen automatiskt justera för att visa bara två kolumner. På så sätt är innehållet läsbart och enkelt att navigera. På en smartphone kan innehållet visas som en enda kolumn, kanske staplas vertikalt. Eller möjligen kan användaren ha möjlighet att svepa över för att visa andra kolumner. Bilderna kommer att ändras istället för att snedvrida layouten eller bli avskuren.
Poängen är: med lyhörd design anpassar webbplatsen automatiskt baserat på enheten tittaren ser den in.
Hur fungerar Responsive Web Design?
Responsiva platser använder flytande nät.Alla sidelement är dimensionerade i proportion, snarare än pixlar. Så om du har tre kolumner, skulle du inte säga exakt hur stor varje ska vara, utan snarare hur bred de borde vara i förhållande till de andra kolumnerna. Kolumn 1 ska ta upp hälften av sidan, kolumn 2 bör ta upp 30% och kolumn 3 bör ta upp 20% till exempel.
Medier som bilder ändras också relativt. På så sätt kan en bild ligga inom sin kolumn eller det relativa designelementet.
Relaterade frågor
Mus v. Touch: Att designa för mobila enheter ger upphov till problemet med musen mot beröring. På stationära datorer har användaren normalt en mus för att navigera och välja objekt. På en smartphone eller surfplatta använder användaren oftast fingrar och rör på skärmen. Det som kan tyckas lätt att välja med en mus kan vara svårt att välja med ett finger på en liten plats på en skärm. Webbdesignern måste ta hänsyn till.
Grafik och nedladdningshastighet: Det är också problemet med grafik, annonser och nedladdningshastighet. På mobila enheter kan det vara klokt att visa färre grafik än för skrivbordssyn så att en webbplats inte tar för evigt att ladda på en smartphone. Större annonsstorlekar kan behöva bytas ut för mindre annonser.
Appar och "mobilversioner": Tidigare kanske du har tänkt på att skapa en app för din webbplats - säg en iPad-app eller en Android-app. Eller du skulle ha en mobilversion specifikt för BlackBerry.
Men med så många olika enheter idag blir det svårare att skapa appar och olika versioner för alla enheter och operativsystem.
Varför småföretag behöver byta till Responsive Web Design
Fler personer använder mobila enheter. En ny Pew-studie har 77% av amerikanerna nu egna smartphones år 2018, vilket är en ökning från bara 35% i Pew Research Centers första smartphone-ägarundersökning som genomfördes 2011.
Kontrollera din trafik och du kan bara vara chockad över hur många besökare som kommer till din webbplats via mobila enheter. (I din Google Analytics väljer du "Publik" på vänster sida och sedan "Mobile" för att se vilken andel av trafiken som kommer från mobila enheter. Du kan till och med borra ner för att se vilka enheter som skickar trafiken.)
Responsiva designmallar finns överallt nu, för inköp. Om du till exempel har en WordPress-webbplats kan du besöka ett ansedd mallgalleri som ThemeForest och leta efter "responsiva WordPress-teman". Köp en till under $ 50. Din webbutvecklare kan sedan anpassa den till din logotyp och varumärke.
Redaktörens anmärkning: Här på Small Business Trends arbetar vi med en ny responsiv design. Borde du inte
Foto via Shutterstock
Mer i: Content Marketing, Vad är 95 Kommentarer ▼
