Highedweb 2012-2
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.
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
Similar to Highedweb 2012-2
Similar to Highedweb 2012-2 (20)
Recently uploaded
Recently uploaded (20)
Highedweb 2012-2
- 1. Using Responsive Web Design to future proof your Websites & Apps
- 3. The CWO
- 4. I work at UC San Diego right about here…
- 5. Established in 1960 Main Campus Medical Center Scripps Institute
- 6. 29,000 TRITONS 23,000 Undergrad 4,500 Graduate 1,500 Medical
- 10. Table-based layouts were awesome! ucsd.edu 1995-2006
- 11. Oooh…CSS & JavaScript ucsd.edu 2006 - 2012
- 12. This was a game changer
- 13. People love these things
- 14. In about 2 months… …there will be more connected phones than people in the world
- 15. 5 years ago, the iPhone didn’t exist… …now it generates $100 Billion per year
- 16. The iPhone is bigger than
- 17. more tablets will be sold than PC’s
- 18. How did we respond in higher ed?
- 19. This is so 2009
- 20. This is so 2009
- 25. m.ucsd.edu iPhone App Android App One App to rule them all
- 26. iPad App
- 29. What about all the CMS content?
- 30. Piloted with the Libraries
- 32. 2009 22 Screen Resolutions Visits to campus home page 2012 523 Screen Resolutions
- 33. Device Fragmentation 3,997 different Android Devices
- 34. Device Fragmentation 3,997 different Android Devices
- 35. One of them wrote and article that started a buzz…
- 36. The dude even wrote a book about it!
- 37. .HTML (structure) .CSS (layout) The solution is based off existing web technologies
- 38. CSS3 @media + Fluid Layouts Media Queries
- 39. Fluid images & media
- 40. One website that works on all devices
- 41. One website that works on all devices
- 45. What about the Mobile Web Framework?
- 46. You want me to make THIS responsive??
- 48. Responsive design for Websites & Apps Mobile Framework when RWD won’t work
- 51. Retrofit existing design? Going Responsive, what are your options? Create new designs?
- 52. Pros…. Reduces approval workflow Little or no change for desktop users Already familiar with the code Retrofit existing site…
- 53. Cons…. No “mobile first” design Elements designed without scaling in mind Unable to leverage frameworks Retrofit existing site…
- 54. Pros…. Can leverage a framework Plan for how elements work at different breakpoints Likely a faster user experience Create new designs…
- 55. Cons…. Changing design many need more approvals Need to learn something new Create new designs…
- 56. Make sure your design looks good in all resolutions Add breakpoints when the design starts to break down
- 57. fluid layouts using percentages Responsive Design fixed width layouts targeted for specific devices Adaptive Design
- 59. What if all my content isn’t responsive? Is that OK?
- 60. Sure Tackle the biggest bang or low hanging fruit first
- 61. Be ready to iterate Adjust development cycles to be agile
- 62. Does it take more time? Yes. It will increase the length of a project by 32.6345%
- 63. There is no more “fold” Work with content owners to pair down content
- 64. Will another technique replace RWD? At some point, probably.
- 65. Downsides
- 66. Tables some solutions available but no magic bullets
- 67. Images Devices with smaller resolutions still need to download the full image
- 68. RESS Responsive Design + Server Side Components Offload some of the work to the server…
- 69. The Idea is to: Deliver certain components based on the device, rather than loading all at once for every device. RWD .js .jpg .php
- 74. Resources RESPONSIVE WEB DESIGN By Ethan Marcotte alistapart.com mediaqueri.es FRAMEWORKS Foundation3 Twitter Bootstrap HTML5 Boilerplate