Highedweb 2012-2


Published on

At this point, most universities have established some level of mobile presence, whether it's an app or a web-based mobile site. This is great if people want to look up a contact in the mobile directory, the location of a building, or places to eat on campus, but what about prospective students looking for admissions related information on their mobile device, and what about the thousands of webpages and web applications most campuses currently maintain? How can we make sure those are optimized for all resolutions including phones and tablets of all sizes?

This session covered some of benefits and "gotchas" of responsive design, a strategy to deploy responsive design as a “self service” for web developers using templates, ideas for how your mobile site (m.university.edu) can co-exist with your responsive web pages and projections about what's next for responsive design.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Highedweb 2012-2

  1. 1. Using Responsive Web Designto future proof your Websites & Apps
  2. 2. Brett Pollak@brettcpollak#heweb12#AIM1
  3. 3. The CWO
  4. 4. right about  here…I work at UC San Diego
  5. 5. Established in 1960Main CampusMedical CenterScripps Institute
  6. 6. 29,000 TRITONS23,000 Undergrad4,500 Graduate1,500 Medical
  7. 7. FIELDS OF STUDYSocial Sciences (38.1%)Engineering (20.3%)Biology (18.7%)Science/Math (10.3%)Special/Undeclared (6.3%)Humanities (3.3%)Arts (3.0%)
  8. 8. UNDERGRADUATECOLLEGESMarshall RooseveltMuir SixthRevelle Warren
  9. 9. more slices = more distributed IT
  10. 10. Table-based layoutswere awesome!ucsd.edu 1995-2006
  11. 11. Oooh…CSS &JavaScriptucsd.edu 2006 - 2012
  12. 12. This was a game changer
  13. 13. People love these things
  14. 14. In about 2 months……there will be moreconnected phonesthan people in the world
  15. 15. 5 years ago, theiPhone didn’t exist……now it generates$100 Billion per year
  16. 16. The iPhone isbigger than
  17. 17. more tablets willbe sold than PC’s
  18. 18. How did we respond in higher ed?
  19. 19. This is so 2009
  20. 20. This is so 2009
  21. 21. One App to rule them allm.ucsd.edu Android App iPhone App
  22. 22. iPad App 
  23. 23. Student  Academic  Admin  Affairs Affairs Computing IT IT Housing &  Libraries Dining IT ITAcademic  CollegesComputing IT
  24. 24. What about all the CMS content?
  25. 25. Piloted with the Libraries
  26. 26. Courtesy: Brad Frost
  27. 27. Visits to campus home page2009 22 Screen Resolutions2012 523 Screen Resolutions
  28. 28. Device Fragmentation3,997 differentAndroid Devices
  29. 29. Device Fragmentation3,997 differentAndroid Devices
  30. 30. One of them wrote and article that started a buzz…
  31. 31. The dude even wrote a book about it!
  32. 32. The solution is based off existing web technologies .HTML .CSS (structure) (layout)
  33. 33. Fluid Layouts Media Queries + CSS3 @media
  34. 34. Fluid images & media
  35. 35. One website that works on all devices
  36. 36. One website that works on all devices
  37. 37. What about the Mobile Web Framework?
  38. 38. You want me to make THISresponsive??
  39. 39. Responsive design for Websites & AppsMobile Framework when RWD won’t work
  40. 40. Going Responsive, what are your options? Retrofit existing design? Create new designs?
  41. 41. Retrofit existing site…Pros….Reduces approval workflowLittle or no change for desktop usersAlready familiar with the code
  42. 42. Retrofit existing site…Cons….No “mobile first” designElements designed without scaling inmindUnable to leverage frameworks
  43. 43. Create new designs…Pros….Can leverage a frameworkPlan for how elements work atdifferent breakpointsLikely a faster user experience
  44. 44. Create new designs…Cons….Changing design many needmore approvalsNeed to learn something new
  45. 45. Make sure your design looksgood in all resolutionsAdd breakpoints when thedesign starts to break down
  46. 46. Responsive Designfluid layouts using percentagesAdaptive Designfixed width layouts targeted forspecific devices
  47. 47. What if all my contentisn’t responsive?Is that OK?
  48. 48. SureTackle the biggestbang or low hangingfruit first
  49. 49. Be ready to iterateAdjust developmentcycles to be agile
  50. 50. Does it take more time?Yes.It will increase the length ofa project by 32.6345% 
  51. 51. There is no more “fold”Work with content ownersto pair down content
  52. 52. Will another techniquereplace RWD?At some point, probably.
  53. 53. Downsides 
  54. 54. Tablessome solutionsavailable but nomagic bullets
  55. 55. ImagesDevices with smallerresolutions still need todownload the full image
  56. 56. RESSResponsive Design + Server Side ComponentsOffload some of the work to the server…
  57. 57. The Idea is to:Deliver certain components based on the device, ratherthan loading all at once for every device. RWD .js .jpg .php
  58. 58. 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…
  59. 59. ResourcesRESPONSIVE WEB DESIGNBy Ethan Marcotte alistapart.com mediaqueri.esFRAMEWORKS Foundation3 HTML5 Boilerplate Twitter Bootstrap
  60. 60. Thank Brett Pollak @brettcpollakYou! #heweb12