Vad är Responsive Design? (Förklaring Video och Infographic)

Det har tagit ett decennium för responsiv webbdesign (RWD) för att gå mainstream sedan Cameron Adams introducerades först konceptet. Idén var genial - varför kan vi inte designa webbplatser som anpassar sig till visningsområdet för den enhet det visas på?

Vad är Responsive Design?

Responsive web design (RWD) är en webbdesignmetod som syftar till att skapa webbplatser för att ge en optimal tittarupplevelse - enkel läsning och navigering med ett minimum av storlek, panorering och rullning - över ett stort antal enheter (från mobiltelefoner till stationär dator) bildskärmar). En webbplats designad med RWD anpassar layouten till visningsmiljön genom att använda flytande, proportionbaserade rutnät, flexibla bilder och CSS3-mediefrågor, en förlängning av @media-regeln.

wikipedia

Med andra ord kan element som bilder justeras såväl som elementens layout. Här är en video som förklarar vad responsiv design är och varför ditt företag ska implementera den. Vi har nyligen utvecklat Highbridge webbplats för att vara lyhörd och arbetar nu på Martech Zone att göra detsamma!

Metoden för att bygga en webbplatsresponsiv är lite tråkig eftersom du måste ha en hierarki för dina stilar som är organiserade baserat på visningsportens storlek.

Webbläsare är självmedvetna om sin storlek, så de laddar formatmallen från topp till botten och frågar efter tillämpliga stilar för skärmens storlek. Detta betyder inte att du måste designa olika formatmallar för varje storleksskärm, du behöver bara flytta de nödvändiga elementen.

Att fungera med en mobil-första mentalitet är baslinjen idag. Klassens bästa varumärken funderar inte bara på om deras webbplats är mobilvänlig utan på hela kundupplevelsen.

Lucinda Duncalfe, VD för Monetate

Här är en infografik från Monetate som illustrerar de potentiella fördelarna med att skapa en responsiv design för flera enheter:

Om du vill se en responsiv webbplats i aktion, peka på din Google Chrome webbläsare (jag tror att Firefox har samma funktion) till Highbridge. Välj nu Visa> Utvecklare> Utvecklarverktyg från menyn. Detta kommer att ladda en massa verktyg längst ner i webbläsaren. Klicka på den lilla mobilikonen längst till vänster i menyraden för utvecklarverktyg.

Du kan använda navigationsalternativen uppe för att ändra vyn från liggande till stående, eller till och med välja valfritt antal förprogrammerade visningsstorlekar. Du kan behöva ladda om sidan, men det är det coolaste verktyget i världen för att verifiera dina responsiva inställningar och se till att din webbplats ser bra ut på alla enheter!