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.

1. Using Responsive Web Design
to future proof your Websites & Apps

2. Brett Pollak
@brettcpollak
#heweb12
#AIM1

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

7. FIELDS OF STUDY
Social Sciences (38.1%)
Engineering (20.3%)
Biology (18.7%)
Science/Math (10.3%)
Special/Undeclared (6.3%)
Humanities (3.3%)
Arts (3.0%)

8. UNDERGRADUATE
COLLEGES
Marshall
Muir
Revelle
Roosevelt
Sixth
Warren

9. more slices =
more distributed IT

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 

27. Student
Affairs
IT
Academic
Affairs
IT
Housing &
Dining
IT
Libraries
IT
Admin
Computing
Academic
Computing
Colleges
IT

29. What about all the CMS content?

30. Piloted with the Libraries

31. Courtesy: Brad Frost

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

72. 1.‐ Use a Responsive Web Design framework as the
primary way to deliver websites & web apps
2.‐ Use a Mobile Framework to augment when
responsive design won’t work
3.‐Deliver the frameworks through a central host and
allow other IT units to leverage the capabilities
4.‐ Finally…

74. Resources
RESPONSIVE WEB DESIGN
By Ethan Marcotte alistapart.com mediaqueri.es
FRAMEWORKS Foundation3 Twitter Bootstrap
HTML5 Boilerplate

75. Brett Pollak
@brettcpollak
#heweb12
Thank
You!