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 DK New Media 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 DK New Media. 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!
Webbdesign är inte ett val av webbansvariga längre, det är nu obligatoriskt för dem. Tack för att du delar detta informativa inlägg.
Tack så mycket Douglas för den här väl förklarade artikeln. Jag måste hålla med om detta men på innehållssidan av saker. För de flesta webbplatser gör vi en responsiv layout räcker inte. Vi behöver responsivt innehåll. Men för de mer grundläggande webbplatserna kommer vi säkert att använda din väldokumenterade artikel om hur man hanterar detta!
Jag tror att du har rätt, Aaron. Det räcker inte bara att ändra storlek och flytta saker ... vi behöver verkligen också använda innehåll effektivt.