The document discusses responsive web design. It begins by defining responsive design as making websites work on all devices. It provides an example of a responsive site and discusses how the design adapts based on screen width. It emphasizes that discrimination based on device sucks. It then discusses why responsive design is important, noting things like smartphone sales surpassing PCs and easier maintenance. It outlines several breakpoints for different screen widths that should be designed for. It discusses using a workflow involving sketching, information architecture, mockups, prototyping, and implementation. Key technologies mentioned include HTML5, CSS3, and JavaScript. It ends by noting benefits of responsive design like better compatibility and support for more users.

1. responsive awareness

2. @ onehundred _ be
web ninja with these days
that’s me

3. • in general
• design
• development
who?

4. responsive awareness
in general

5. definition

7. “responsive is the way the web should be”
there, i said it
quotable

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

14. responsive awareness
design

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

21. min 1024 px
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

23. “sorry to say, 4 isn’t enough”
seriously?

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

27. “suggested workflow”
cycle

28. 1. sketch
cycle

29. 2. information architecture
cycle

30. 3. visual mockups
cycle

31. 4. start design
cycle

32. 5. prototype layout
5.1 see how it behaves on screens and devices
5.2 if it’s not what’s expected, revise mockups, repeat layout
cycle

33. 6. implement design
cycle

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

35. “that’s not how we do things”
oh really?

36. “that’s not how we do things”
embrace change

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

39. responsive awareness
development

40. • it’s all about speed
• graceful degradation or progressive enhancement
• don’t spoil old browsers, otherwise people will never upgrade
keep in mind

41. “a broken escalator is just stairs”
mitch hedberg
graceful degradation

42. • start from a framework, or build your own
• configure your server
• be smart with resources
• please make sexy urls
in general

43. • html5
• css3
• javascript
technologies

44. • semantics
• appcache
• use field types (url, phone, email...)
• don’t stop there
html5

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

49. • better compatibility
• support for DPI
• lots of happy web users
future

50. • http://flickr.com/photos/dynamosquito/4132923995/
• http://screenshotworld.blogspot.com/2007/06/pulp-fiction-1994.html
• http://www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html
• http://www.morganstanley.com/institutional/techresearch/pdfs/MS_Economy_Internet_Trends_102009_FINAL.pdf
• http://www.pcworld.com/article/171380/more_smartphones_than_desktop_pcs_by_2011.html
• http://venturebeat.com/2009/08/27/admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-users/
• http://www.slideshare.net/yiibu/pragmatic-responsive-design
• http://www.slideshare.net/livefront/responsive-design-7877412
• http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
• http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
sources

51. • mediaqueri.es
• less css
• less compiler mac
• less compiler windows
• sass css
• css prefixer
• responsive images
• adaptive images
• polyfills
• imageoptim
useful links

52. “questions?”
let’s talk

53. “discussion and questions”
let’s talk

54. “thank you”
much obliged