responsive awareness

  • 2,643 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Very good presentasion for beginer like me... hiks
    Are you sure you want to
    Your message goes here
  • Thanks so much...
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,643
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
30
Comments
2
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 6. “responsive is the way the web should be” there, i said it quotable
  • 7. • one interface fits all• all web capable devices• optimized user experience at all times wait, what?
  • 8. • one interface fits all (website, app...)• all web capable devices• optimized user experience at all times wait, what?
  • 9. • let’s take a look at a live example http://playground.thesedays.com/responsive in action
  • 10. • depending on the screen width an appropriate version gets served awesome
  • 11. • 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
  • 12. • 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
  • 13. responsive awareness design
  • 14. • let’s make a couple of things clear• make a distinction between design and layout• 960 px is so nineties. get this
  • 15. • how are we going to achieve this?• through a combination of ‘breakpoints’ and scaling what do we do?
  • 16. • 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
  • 17. max 479 px (smartphones portrait) numbers don’t lie
  • 18. max 767 px (smartphones landscape) numbers don’t lie
  • 19. max 1023 px (tablets portrait) numbers don’t lie
  • 20. min 1024 px numbers don’t lie
  • 21. • 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
  • 22. “sorry to say, 4 isn’t enough” seriously?
  • 23. 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
  • 24. 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
  • 25. • 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
  • 26. “suggested workflow” cycle
  • 27. 1. sketch cycle
  • 28. 2. information architecture cycle
  • 29. 3. visual mockups cycle
  • 30. 4. start design cycle
  • 31. 5. prototype layout5.1 see how it behaves on screens and devices5.2 if it’s not what’s expected, revise mockups, repeat layout cycle
  • 32. 6. implement design cycle
  • 33. 1. sketches2. information architecture3. visual mockups4. start design5. prototype layout 1. see how it behaves on screens and devices 2. if it’s not what’s expected, revise mockups, repeat layout6. implement design cycle
  • 34. “that’s not how we do things” oh really?
  • 35. “that’s not how we do things” embrace change
  • 36. • 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
  • 37. • 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
  • 38. responsive awareness development
  • 39. • it’s all about speed• graceful degradation or progressive enhancement• don’t spoil old browsers, otherwise people will never upgrade keep in mind
  • 40. “a broken escalator is just stairs” mitch hedberg graceful degradation
  • 41. • start from a framework, or build your own• configure your server• be smart with resources• please make sexy urls in general
  • 42. • html5• css3• javascript technologies
  • 43. • semantics• appcache• use field types (url, phone, email...)• don’t stop there html5
  • 44. • 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
  • 45. • build a custom modernizr• do feature detection• load resources conditionally• use polyfills• check code javascript
  • 46. • 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
  • 47. • 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
  • 48. • better compatibility• support for DPI• lots of happy web users future
  • 49. • 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
  • 50. • mediaqueri.es• less css• less compiler mac• less compiler windows• sass css• css prefixer• responsive images• adaptive images• polyfills• imageoptim useful links
  • 51. “questions?” let’s talk
  • 52. “discussion and questions” let’s talk
  • 53. “thank you” much obliged