Mobile first responsive web design
-
Upload
will-hindson -
Category
Technology
-
view
3.337 -
download
3
description
Transcript of Mobile first responsive web design
![Page 1: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/1.jpg)
Mobile first &responsive design
Andreas SchjønhaugWill Hindson
Thursday, March 29, 12
![Page 2: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/2.jpg)
Hva koster tannlegen?
Thursday, March 29, 12
![Page 3: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/3.jpg)
Choosing a dentist
1 - Quality
2 - Price
3 - Location
Thursday, March 29, 12
![Page 4: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/4.jpg)
Mobile first
Thursday, March 29, 12
![Page 5: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/5.jpg)
Thursday, March 29, 12
![Page 6: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/6.jpg)
Thursday, March 29, 12
![Page 7: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/7.jpg)
Thursday, March 29, 12
![Page 8: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/8.jpg)
Tech slide!
- HTML / SASS - COMPASS / JS
- Sinatra on Ruby
- Git
Thursday, March 29, 12
![Page 9: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/9.jpg)
<---- RESPONSIVIZING! ---->
Thursday, March 29, 12
![Page 10: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/10.jpg)
Thursday, March 29, 12
![Page 11: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/11.jpg)
Thursday, March 29, 12
![Page 12: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/12.jpg)
SASS TO THE RESCUE!
Thursday, March 29, 12
![Page 13: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/13.jpg)
$width-colspan-one: percentage(340px / 1140px);$width-gutter: percentage(20px / 1140px);
.container { max-width: 1140px; width: 90%;
nav { width: $width-colspan-one; }}
Thursday, March 29, 12
![Page 14: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/14.jpg)
Testing
Thursday, March 29, 12
![Page 15: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/15.jpg)
Thursday, March 29, 12
![Page 16: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/16.jpg)
Thursday, March 29, 12
![Page 17: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/17.jpg)
DR. EVIL TECHNIQUE
Thursday, March 29, 12
![Page 18: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/18.jpg)
DEMO
Thursday, March 29, 12
![Page 19: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/19.jpg)
CONCLUSIONS
Thursday, March 29, 12
![Page 20: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/20.jpg)
- Prioritisation & focus
- Avoid unnecessary content
- Avoid mobile as an “aerthought”
Pros MOBILE FIRST
- Different layouts with the same base
- Flexibility
RESPONSIVE LAYOUT
Thursday, March 29, 12
![Page 21: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/21.jpg)
Cons- Easy to forget about larger screens
- Navigational conventions might not scale up
- Content can be very streamlined, difficult to fill space
- Loading unnecessary content
- Developing is time intensive
MOBILE FIRST
RESPONSIVE LAYOUT
Thursday, March 29, 12
![Page 22: Mobile first responsive web design](https://reader033.fdocuments.in/reader033/viewer/2022051818/54b783384a7959166f8b45e3/html5/thumbnails/22.jpg)
thanks!@willhindson
@schjonhaug
Thursday, March 29, 12