8. • one interface fits all
• all web capable devices
• optimized user experience at all times
wait, what?
9. • one interface fits all (website, app...)
• all web capable devices
• optimized user experience at all times
wait, what?
10. • let’s take a look at a live example
http://playground.thesedays.com/responsive
in action
11. • depending on the screen width an appropriate version gets served
awesome
12. • discrimination sucks
• no standard in display sizes
• smartphone sales will surpass worldwide pc sales by the end of 2011
• easier & faster maintenance
• much lower cost
• user agent detection is unreliable and evolves too fast
why
13. • will we need a 5 times bigger budget?
• will we need 5 times more time?
• do all websites need to be responsive from now on?
in general wrap up
15. • let’s make a couple of things clear
• make a distinction between design and layout
• 960 px is so nineties.
get this
16. • how are we going to achieve this?
• through a combination of ‘breakpoints’ and scaling
what do we do?
17. • the ‘breakpoints’ are actually called mediaqueries
• we’ll need at least 4 layouts
• think of max as: everything below
• think of min as: everything above
• think of max and min as: everything between
practical
18. max 479 px (smartphones portrait)
numbers don’t lie
19. max 767 px (smartphones landscape)
numbers don’t lie
20. max 1023 px (tablets portrait)
numbers don’t lie
22. • max 479 px (smartphones portrait)
• max 767 px (smartphones landscape)
• max 1023 px (tablets portrait)
• min 1024 px (tablets landscape en other devices)
those numbers again
24. DESIGN
• sorry to say 4 isn’t enough
• max 479 px (smartphones portrait)
• min 480 px and max 767 px (smartphones landscape)
• min 768 px and max 1023 px (tablets portrait)
• min 1024 px and max 1280 px(tablets landscape en other devices)
• min 1281 px and max 1439 px
• min 1440 px and max 1919 px
• min 1920 px
25. DESIGN
• max 479 px (smartphones portrait)
• min 480 px and max 767 px (smartphones landscape)
• min 768 px and max 1023 px (tablets portrait)
• min 1024 px and max 1280 px (tablets landscape en other devices)
• min 1281 px and max 1439 px (laptops, dekstops)
• min 1440 px and max 1919 px (pc’s, tv’s)
• min 1920 px (HD screens)
that’s more like it
26. • it’s not as bad as it seems
• there might not be a need to make 7 different designs
• remember the breakpoints, and the scaling
• same layout, scale up or down without redesigning
not so bad
34. 1. sketches
2. information architecture
3. visual mockups
4. start design
5. prototype layout
1. see how it behaves on screens and devices
2. if it’s not what’s expected, revise mockups, repeat layout
6. implement design
cycle
37. • design functional
• images suck
• don’t punish slow connections with unnecessary media
• think mobile
• think touch
• different behavior
• design contextual stuff together using illustrator or fireworks
design tips
38. • information architecture is so important
• do not change layout during development
• small changes might have a big impact on development
• get familiar with smartphones and tablets
just saying
40. • it’s all about speed
• graceful degradation or progressive enhancement
• don’t spoil old browsers, otherwise people will never upgrade
keep in mind
45. • use mediaqueries
• split stylesheets
• take advantage of less or sass
• remember all vendor prefixes
• try out flexbox system
• if layout changes use multicolumn
• use gradients, borders & shadows instead of images
• make your images responsive and adaptive
css3
46. • build a custom modernizr
• do feature detection
• load resources conditionally
• use polyfills
• check code
javascript
47. • make downloads parallel
• use CDN’s with optional fallback to local version
• minify your code
• if you use images make sprites
• photoshop save for web isn’t enough, use further optimization
• javascript in the bottom
• combine javascript
speed tips
48. • smartphone screen resolutions exceed those of computers
• amount of resources and file size
• internet connection type & speed
• screen height isn’t taken into account
responsive problems
