mobile first responsive web design
DESCRIPTION
A short talk about our process behind designing "Hva koster Tannlegen?" for multiple screen sizes with a mobile-first approach.TRANSCRIPT
Mobile first &responsive design
Andreas SchjønhaugWill Hindson
Thursday, March 29, 12
Hva koster tannlegen?
Thursday, March 29, 12
Choosing a dentist
1 - Quality
2 - Price
3 - Location
Thursday, March 29, 12
Mobile first
Thursday, March 29, 12
Thursday, March 29, 12
Thursday, March 29, 12
Thursday, March 29, 12
Tech slide!
- HTML / SASS - COMPASS / JS
- Sinatra on Ruby
- Git
Thursday, March 29, 12
<---- RESPONSIVIZING! ---->
Thursday, March 29, 12
Thursday, March 29, 12
Thursday, March 29, 12
SASS TO THE RESCUE!
Thursday, March 29, 12
$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
Testing
Thursday, March 29, 12
Thursday, March 29, 12
Thursday, March 29, 12
DR. EVIL TECHNIQUE
Thursday, March 29, 12
DEMO
Thursday, March 29, 12
CONCLUSIONS
Thursday, March 29, 12
- 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
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
thanks!@willhindson
@schjonhaug
Thursday, March 29, 12