Content MarketingMarketing og salgsvideoerMarketinginfografikMobil- og tabletmarkedsføring

Hvad er responsivt design? (Forklaringsvideo og infografik)

Det har taget et årti for lydhør webdesign (RWD) at gå mainstream siden Cameron Adams blev først introduceret konceptet i 2010. Ideen var genial – hvorfor kan vi ikke designe websteder, der tilpasser sig visningsporten på den enhed, den bliver vist på?

Hvad er responsivt design?

Responsivt webdesign er en designtilgang, der sikrer, at en hjemmeside giver en optimal seeroplevelse på enhver enhed, uanset skærmstørrelse eller opløsning. Det indebærer at bruge fleksible layouts, gitterbaserede layouts og medieforespørgsler til at skabe et websted, der tilpasser sig størrelsen på den skærm, det bliver vist på. Det betyder, at en hjemmeside designet med responsivt webdesign vil se ud og fungere godt på en stationær computer, en tablet eller en smartphone.

Med andre ord kan elementer som billeder justeres såvel som layoutet af disse elementer. Her er en video, der forklarer, hvad responsivt design er, samt hvorfor din virksomhed skal implementere det. Hvis du får udviklet et nyt webstedsdesign eller en ny webapplikation, er responsivt webdesign et must, ikke en mulighed, da over halvdelen af ​​al webtrafik kommer fra mobile enheder, der har varierende visningsbredder og -højder.

Responsivt design er også optimalt for webdesignere, som ikke skal bygge selvstændige oplevelser, der er unikke baseret på enheden eller viewporten. Responsivt webdesign kan udføres ved hjælp af CSS.

Responsive Design CSS Viewport-forespørgsler

Her er et eksempel på et stylesheet, der justerer skriftstørrelsen baseret på viewporten ved hjælp af en medieforespørgsel:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

Browsere er selvbevidste om deres størrelse, og de indlæser stilarket fra top til bund. Ved at forespørge på de relevante stilarter for skærmens størrelse, kan du indstille specifikke stilelementer for hver minimums- og maksimumenhedsbredde. Dette betyder ikke, at du skal designe forskellige websteder for hver størrelse skærm, du skal blot flytte de nødvendige elementer ved hjælp af medieforespørgslerne.

At operere med en mobil-første-mentalitet er den grundlæggende standard i dag. Klassens bedste mærker overvejer ikke kun om deres websted er mobilvenligt, men om den fulde kundeoplevelse.

Lucinda Duncalfe, administrerende direktør i Monetate

Her er en infografik fra Monetate illustrerer de potentielle fordele ved at skabe ét responsivt design til flere enheder:

Responsivt webdesigninfografik

Er dit websted responsivt?

En enkel måde at se, om dit websted er responsivt, er blot at vokse eller formindske dit browservindue for at se, om elementerne bevæger sig baseret på browserens bredde.

For mere præcision skal du pege på din Google Chrome browser til dit websted. Vælg Se> Udvikler> Udviklerværktøjer fra menuen. Dette vil indlæse en masse værktøjer i et panel eller et nyt vindue. Klik på det lille ikon til venstre for menulinjen Udviklerværktøjer, der ligner et mobil- og tablet-ikon. Du kan vælge nogle standardenheder og endda ændre, om du ønsker at se siden vandret eller lodret.

  • chrome udviklerværktøjer responsiv tablet
  • chrome udviklerværktøjer responsive mobil horisontal
  • chrome udviklerværktøjer responsiv mobil
  • chrome-udviklerværktøjer responsivt skrivebord

Du kan bruge navigationsindstillingerne øverst til at ændre visningen fra liggende til stående eller endda vælge et vilkårligt antal forprogrammerede visningsportstørrelser. Du bliver muligvis nødt til at genindlæse siden, men det er det sejeste værktøj i verden til at kontrollere dine responsive indstillinger og sikre, at dit websted ser godt ud på alle enheder!

Douglas Karr

Douglas Karr er CMO for OpenINSIGHTS og grundlæggeren af Martech Zone. Douglas har hjulpet snesevis af succesfulde MarTech-startups, har hjulpet med due diligence på over $5 mia. i Martech-opkøb og -investeringer og fortsætter med at hjælpe virksomheder med at implementere og automatisere deres salgs- og marketingstrategier. Douglas er en internationalt anerkendt digital transformation og MarTech-ekspert og foredragsholder. Douglas er også udgivet forfatter til en Dummies guide og en bog om virksomhedsledelse.

Relaterede artikler

Tilbage til toppen knap
Luk

Adblock fundet

Martech Zone er i stand til at give dig dette indhold uden omkostninger, fordi vi tjener penge på vores websted gennem annonceindtægter, affilierede links og sponsorater. Vi ville sætte pris på, hvis du ville fjerne din annonceblokering, mens du ser vores websted.