Artiklar

 

Publicerad 2012-05-17

Responsive Design

Responsive Design med Dreaweaver CS6

Responsive Design är ett relativt nytt begrepp som innebär att man skapar och utvecklar en webbplats som är anpassningsbar till det visningsmedia eller den skärmupplösning som besökaren använder. På så sätt kan människor besöka din webbplats på en vanlig datorskärm, en läsplatta eller en mobil och samtidigt få en sömlös och anpassad användarupplevelse. Att använda denna teknik kallas för Responsive Design och har med utvecklingen av läsplattor och Smartphones snabbt blivit populär.

Hur går det till?

Enkelt uttryckt så anpassar vi en sida till olika visningsmedia genom att använda olika CSS-mallar. Sedan styr vi vilket visningsmedia som sidan ska visas i med en ny egenskap i CSS3 som kallas MediaQueries eller mediafrågor på svenska. Responsive Design skiljer sig rätt mycket från traditionell webbdesign och är i mycket ett nytt och outforskat område. Just därför känns det väldigt spännande att så snart Dreammweaver CS6 släpps kunna börja bygga den här typen av webbplatser.

Verktyg för Responsive Design

Dreamweaver CS6 har en rad nya verktyg för att arbeta med Responsive Design och det är framförallt simuleringsverktyget för visning i olika skärmstorlekar samt verktyget Floating Grid Layout. Dessa verktyg ska hjälpa dig att på ett visuellt och förenklat sätt bygga den här typen av webbplatser utan att du behöver forlora dig i koden.

50 bra exempel på Responsive Design
Det finns en rad spännande och användbara resurser för att lära sig mer om Responsive Design och jag har samlat några i den här artikeln.
För inspiration och för att se hur andra har gjort, läs artikeln om 50 bra exempel på Responsive Design.
 50 bra exempel

Quirkstools - ett Simuleringsverktyg
Quirktools är ett onlineverktyg som bl a simulerar hur en anpassningsbar sida ser ut på vanlig datorskärm, på läsplatta eller mobiltelefon samt TV-skärm.
Här kan du växla mellan olika skärmupplösningar och tillverkare och får snabbt en överblick i hur din sida fungerar i ett bredare sammanhang.
 Quirkstools

Responsive verktyg, templates och ramverk
Om du för att bekanta dig med Responsive Design vill skapa en enkel sida så finns det en rad verktyg, färdiga templates och ramverk du kan använda.
Blueprint är ett sådant verktyg som är enkelt och snabbt att använda.
 Templates och ramverk

Resurser

50 bra exempel på Responsive Design
Quirkstools - ett simuleringsverktyg
Verktyg, templates och ramverk

Dela

Kommentarer

Flera artiklar

CSS 3

Html5

Creative Cloud

Design & layout

Bildhantering

Blandat