Eduweb2

244 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
244
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Eduweb2

  1. 1. Using Responsive Web Designto future proof your Websites & Apps
  2. 2. Emily Deere Brett PollakExec. Director, IT Applications Director, CWOE: edeere@ucsd.edu E: bpollak@ucsd.eduT: @edeere T: @brettcpollak• Stats • Mobile framework• Mobile & UCSD • Transition to Responsive • Organizational support  Web Design of central web services • Looking ahead
  3. 3. In about 2 months……there will be moreconnected phonesthan people in the world
  4. 4. 5 years ago, theiPhone didn’t exist……now it generates$100 Billion per year
  5. 5. The iPhone isbigger than
  6. 6. By the fall of 2013more tablets willbe sold than PC’s
  7. 7. Higher Ed. Home Page VisitsMay 20102.19% of visitsfrom mobile
  8. 8. Higher Ed. Home Page VisitsMay 20114.77% of visitsfrom mobile
  9. 9. Higher Ed. Home Page VisitsMay 20129.82% of visitsfrom mobile
  10. 10. Higher Ed. Home Page Visits112% averageincreaseyear over year
  11. 11. This is so 2009
  12. 12. iPhone Application Launch - 2009
  13. 13. This is so 2009
  14. 14. Web App DevelopmentOur UI Design needed a new approach…User Interface was buried in middlewareTechnology was agingDevelopers wanted to use modern tools
  15. 15. We hosted a competition!
  16. 16. UI Design Guidelines for Apps
  17. 17. An organizational shift occurred
  18. 18. Benefits of the Transition
  19. 19. Step 1Find a framework
  20. 20. Student  Academic  Admin  Affairs Affairs Computing IT IT Housing &  Libraries Dining IT IT Student  Academic  Affairs Computing ITFramework that required data feeds had downsides
  21. 21. Student  Academic  Admin  Affairs Affairs Computing IT IT Housing &  Libraries Dining IT IT Student Academic  AffairsComputing IT
  22. 22. We launched m.ucsd.edu
  23. 23. What about ouriPad App?
  24. 24. Step 2Replace the App
  25. 25. iOS App: powered by m.ucsd.edu
  26. 26. m.ucsd.edu iPhone App
  27. 27. iPad App 
  28. 28. Android App: powered by m.ucsd.edu
  29. 29. uxt.ucsd.edu
  30. 30. What about all the CMS content?
  31. 31. Piloted with the Libraries
  32. 32. Courtesy: Brad Frost
  33. 33. We weren’t the only ones trying to solve this problemTantek Celik, Dan Cedarholm, Jeremy Keith, Eric Meyer, Ethan Marcotte, Jeffrey Zeldman, Nicole Sullivan, Wendy Chisolm
  34. 34. One of them wrote and article that started a buzz…
  35. 35. The dude even wrote a book about it!
  36. 36. The solution is based off existing web technologies .HTML .CSS (structure) (layout)
  37. 37. Fluid Layouts Media Queries + CSS3 @media
  38. 38. Fluid images & media
  39. 39. One website that works on all devices
  40. 40. One website that works on all devices
  41. 41. What about the Mobile Web Framework?
  42. 42. You want me to makeTHIS responsive??
  43. 43. Responsive design for Websites & AppsMobile Framework when RWD won’t work
  44. 44. Works for apps too
  45. 45. Make sure your design looksgood in all resolutionsAdd breakpoints when thedesign starts to break down
  46. 46. Device resolutions to accessucsd.edu in one month
  47. 47. Responsive Designfluid layouts using percentagesAdaptive Designfixed width layouts targeted forspecific devices
  48. 48. Be ready to iterateAdjust developmentcycles to be agile
  49. 49. Does it take more time?Yes.It will increase the length ofa project by 32.6345% 
  50. 50. There is no more “fold”Work with content ownersto pair down content
  51. 51. Test on real devicesAsk different teams topitch in and help test
  52. 52. Downsides 
  53. 53. ImagesDevices with smallerresolutions still need todownload the full image
  54. 54. RESSResponsive Design + Server Side ComponentsOffload some of the work to the server…
  55. 55. The Idea is to:Deliver certain components based on the device, ratherthan loading all at once for every device. RWD .js .jpg .php
  56. 56. 1. Use a Responsive Web Design framework as the  primary way to deliver websites & web apps2. Use a Mobile Framework to augment when  responsive design won’t work3. Deliver the frameworks through a central host and  allow other IT units to leverage the capabilities4. Finally…
  57. 57. Do it!
  58. 58. ResourcesRESPONSIVE WEB DESIGNBy Ethan Marcotte alistapart.com mediaqueri.esFRAMEWORKS Foundation3 HTML5 Boilerplate Twitter Bootstrap
  59. 59. cwo.ucsd.edu

×