Embed Size (px)
Citation preview
Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/
Henrik EkelöfGränssnittsutvecklare på Valtech
Responsive Design
— ett nytt häftigt sätt att bygga mobilwebbVad det inte är:
Faktum är:
Det finns ingen mobilwebb.
Det finns inte en specifik webb för mobila enheter.
Allt är samma webb.
640 x 480
800 x 600
1024 x 768
1024 x 768
1024 x 768
320 x 480
1024 x 768
320 x 480
1024 x 768
320 x 480
768 x 1024
Flexibla bilderFlexibel grid Media queries
Responsive Design
/* Här ovanför finns grundstyle - färger, fonter etc */
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
@media all and (max-width: 768px) {
article,
aside {
float: none;
width: 100%;
}
}
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
@media all and (max-width: 768px) {
article,
aside {
float: none;
width: 100%;
}
}
/* Här ovanför finns grundstyle - färger, fonter etc */
@media all and (min-width: 768px) {
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
}
‣ Optimera inte webbplatser för specifika typer av enheter (varken små eller stora)
‣ Responsive Design är det sätt vi kommer bygga webb på den närmaste framtiden
‣ Jobba alltid nerifrån och upp med CSS
Tack!Henrik Ekelöf, Valtech
@henrikekelof
