Hvad er responsivt design? (Forklaringsvideo og infografik)

lydhør webdesign

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

Hvad er responsivt design?

Responsivt webdesign (RWD) er en tilgang til webdesign, der sigter mod at skabe websteder for at give en optimal seeroplevelse - nem læsning og navigation med et minimum af størrelse, panorering og rulning - på tværs af en bred vifte af enheder (fra mobiltelefoner til stationær computer) skærme). Et websted designet med RWD tilpasser layoutet til visningsmiljøet ved hjælp af flydende, proportionelle baserede gitre, fleksible billeder og CSS3-medieforespørgsler, en udvidelse af @media-reglen.

Wikipedia

Med andre ord kan elementer som billeder justeres såvel som elementernes layout. Her er en video, der forklarer, hvad responsivt design er, samt hvorfor din virksomhed skal implementere det. Vi har for nylig genudviklet DK New Media websted for at være lydhør og arbejder nu på Martech Zone at gøre det samme!

Metoden til at opbygge et site responsivt er lidt kedeligt, da du skal have et hierarki til dine stilarter, der er organiseret ud fra størrelsen på visningen.

Browsere er selvbevidste om deres størrelse, så de indlæser typografiarket fra top til bund og spørger efter de relevante typografier for skærmens størrelse. Dette betyder ikke, at du skal designe forskellige typografiark til hver størrelsesskærm, du skal bare skifte de nødvendige elementer.

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, der illustrerer de potentielle fordele ved at skabe et responsivt design til flere enheder:

Responsivt webdesigninfografik

Hvis du gerne vil se et responsivt websted i aktion, skal du rette din google Chrome browser (jeg tror Firefox har den samme funktion) til DK New Media. Vælg nu Se> Udvikler> Udviklerværktøjer fra menuen. Dette indlæser en masse værktøjer i bunden af ​​browseren. Klik på det lille mobilikon længst til venstre på menulinjen i Developer Tools.

responsiv-testning-krom

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!

3 Kommentarer

  1. 1
  2. 2

    Mange tak Douglas for denne godt forklarede artikel. Jeg må dog være enig i dette på indholdssiden af ​​tingene. For de fleste af de websteder, vi laver et responsivt layout, er det ikke nok. Vi har brug for responsivt indhold. Men for de mere basale websteder vil vi helt sikkert bruge din veldokumenterede artikel om, hvordan man håndterer dette!

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.