responsive design - polopoly geeknight blixttal
TRANSCRIPT
![Page 1: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/1.jpg)
Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/
![Page 2: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/2.jpg)
Henrik EkelöfGränssnittsutvecklare på Valtech
![Page 3: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/3.jpg)
Responsive Design
![Page 4: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/4.jpg)
— ett nytt häftigt sätt att bygga mobilwebbVad det inte är:
![Page 5: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/5.jpg)
Faktum är:
![Page 6: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/6.jpg)
Det finns ingen mobilwebb.
![Page 7: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/7.jpg)
Det finns inte en specifik webb för mobila enheter.
Allt är samma webb.
![Page 8: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/8.jpg)
640 x 480
800 x 600
1024 x 768
![Page 9: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/9.jpg)
![Page 10: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/10.jpg)
1024 x 768
![Page 11: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/11.jpg)
1024 x 768
320 x 480
![Page 12: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/12.jpg)
![Page 13: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/13.jpg)
1024 x 768
320 x 480
![Page 14: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/14.jpg)
1024 x 768
320 x 480
768 x 1024
![Page 15: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/15.jpg)
Flexibla bilderFlexibel grid Media queries
Responsive Design
![Page 16: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/16.jpg)
![Page 17: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/17.jpg)
![Page 18: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/18.jpg)
/* Här ovanför finns grundstyle - färger, fonter etc */
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
![Page 19: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/19.jpg)
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
@media all and (max-width: 768px) {
article,
aside {
float: none;
width: 100%;
}
}
![Page 20: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/20.jpg)
![Page 21: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/21.jpg)
article {
float: right;
width: 70%;
}
aside {
float: right;
width: 30%;
}
@media all and (max-width: 768px) {
article,
aside {
float: none;
width: 100%;
}
}
![Page 22: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/22.jpg)
![Page 23: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/23.jpg)
![Page 24: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/24.jpg)
/* 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%;
}
}
![Page 25: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/25.jpg)
‣ 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
![Page 26: Responsive Design - Polopoly GeekNight Blixttal](https://reader036.vdocuments.site/reader036/viewer/2022070323/559b357c1a28ab34638b47a1/html5/thumbnails/26.jpg)
Tack!Henrik Ekelöf, Valtech
@henrikekelof