Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design + LESS for Digital VU Meeting

472 views

Published on

  • Be the first to comment

Responsive Design + LESS for Digital VU Meeting

  1. 1. crafting a mobileexperience withoutbuilding a separatemobile site Ryan Huber School of Medicine Web Development
  2. 2. crafting a tabletexperience withoutbuilding a separatetablet site Ryan Huber School of Medicine Web Development
  3. 3. crafting a netbookexperience withoutbuilding a separatenetbook site Ryan Huber School of Medicine Web Development
  4. 4. crafting a smarttvexperience withoutbuilding a separatesmarttv site Ryan Huber School of Medicine Web Development
  5. 5. why you’re here
  6. 6. responsiveweb design
  7. 7. it’s crazy trendy
  8. 8. because you love your users...
  9. 9. ...regardlessof the device they use
  10. 10. because yourmobile strategy...
  11. 11. doesn’t exist
  12. 12. Redirected from the page you actually wanted to our awesome mobile homepageor is... eh... 1. Five links 2. from our 3. full site we limited 4. assume 5. you want. no more content for you.
  13. 13. responsiveweb design
  14. 14. a design that adapts to the environment inwhich it is viewed
  15. 15. rather than aseparate site for each device
  16. 16. (pretty examples)
  17. 17. cool right?
  18. 18. developing(if html and css aren’t your thing, cover your ears)
  19. 19. write pretty html
  20. 20. write css for mobile
  21. 21. (here comes the magic part)
  22. 22. media queries
  23. 23. nitty gritty bits
  24. 24. disable initial scaling
  25. 25. webkit text sizeauto-adjusting
  26. 26. polyfill
  27. 27. images
  28. 28. safari scaling bug
  29. 29. don’t disable scaling!
  30. 30. more complex manipulations
  31. 31. grids
  32. 32. videos
  33. 33. wide tables
  34. 34. slideshows
  35. 35. performanceconsiderations
  36. 36. if all of thatseems like a lot to remember
  37. 37. Boilerplates
  38. 38. themes for your cms of choice
  39. 39. designing
  40. 40. a little uncomfortable?
  41. 41. The control which designersknow in the print medium, andoften desire in the webmedium, is simply a functionof the limitation of the printedpage. We should embrace thefact that the web doesn’t havethe same constraints, anddesign for this flexibility. - John Allsopp
  42. 42. a couple of ideas...
  43. 43. code iscompiled into CSS
  44. 44. hold it. you’reasking me to learna new language?
  45. 45. all CSSis valid code
  46. 46. (prepare for magic)
  47. 47. ryan.huber@vanderbilt.edu

×