This session will discuss the topic of Responsive Web Design (RWD) and go through a case study showing Chapman University's process in choosing and implementing RWD in their most recent redesign.

1. “Responsive Web Design & Cascade Server”
Hannon Hill User Conference
September 18th, 2012

2. Who is BarkleyREI?
 Full-service interactive agency
 Specialize in “information and application rich” projects
 Decade of higher education experience (40+clients)
 Extensive Cascade Server experience
 30+ employees

3. Clients
3

4. Clients
4

5. Clients
5

6. Clients
6

7. Who is Chapman University?
 Located in Orange, California
 Founded in 1861
 Total enrollment of nearly 7,000 students
 7 Schools & Colleges
 Students from all 50 states, the U.S. territories, 60+ countries
 Heritage of equality and access- admitted men and women and
people of color from the beginning

8. Responsive Web Design
8

9. Responsive Web Design
 What is it?
 Why use it?
 Process/Approach using RWD
 Coding examples
 How Cascade Server can help
9

10. Responsive Web Design- What is it?
Designing and developing a website so that it looks good,
and works well, on any size device (desktop, tablet,
mobile)
10

11. Responsive Web Design- Why use it?
11

12. Responsive Web Design- Why use it?
Pros
Provide an optimal experience for all your site
visitors, not just some of them
Once built, easier to maintain than a separate,
mobile-only site
Puts you at/near the forefront of current trends;
eventually, you could be ‘left behind’ without it as
users expectations continue to grow
12

13. Responsive Web Design- Why use it?
Cons
Extra time
Extra $
13

14. Responsive Web Design- Why use it?
When you might want to consider using it:
Need a complete site overhaul anyway
Looking to update your site, e.g. remove Flash-
you’re not HTM L5 yet
Recently switched to Cascade and haven’t really
done much in it yet
If your analytics show noteworthy level/increase
in tablet/mobile usage
If you have no real mobile presence already and
are looking to build some
14

15. Responsive Web Design- Why use it?
When you might want to consider NOT using it:
You redesigned your desktop site recently and it
still has that new car smell
You already have a robust mobile site, and your
desktop site looks pretty good on tablets
Your mobile traffic is limited to a particular
subgroup of users who all have the same needs,
and you want them to have a distinct mobile
experience
15

16. Responsive Web Design
Why Chapman ultimately decided to use it:
The Pros outweighed the Cons
Tablet/mobile site visits increasing
Were redesigning the website anyway, did not
have a strong mobile presence, and were new to
Cascade
16

17. Process/approach using RWD
17

18. Process/approach using RWD
 Agree on breakpoints
 Agree on standards
 Desktop → M obile vs. Mobile → Desktop
 ‘Content first’ strategy
 Extra collaboration
18

19. Agree on breakpoints
Major Breakpoint – boundary where the display
of the site ‘switches’ noticeably
320 px 768 px
Minor breakpoints:
Subtler shifts in between major breakpoints
19

20. Agree on standards
 Need clear standards to build and test against
 Can be based on:
 Analytics data
 Institutional considerations
20

21. Agree on standards
What browsers, and what browser versions, does
the site need to work in?
21

22. Agree on standards
Rollover state in Chrome
22

23. Agree on standards
Rollover state in Chrome
23

24. Agree on standards
Rollover state in Chrome
24

25. Agree on standards
Rollover state in IE8
25

26. Agree on standards
What Operating Systems do those browsers need
to work in?
26

27. Agree on standards
What devices does it need to work on?
27

28. Agree on standards
What devices does it need to work on?
28

29. ‘Desktop → M obile’ vs. ‘Mobile → Desktop’
29

30. ‘Content first’ strategy
30

31. Extra collaboration
 Extra collaboration between
 UX
 Design
 Coding
 Project Management
 Process is less linear, more agile
31

32. Some coding examples
32

33. Some coding examples
 HTML is the same for all size browsers
 CSS is where 99% of the responsive magic
happens
<link href=“/css/style.css" rel="stylesheet"
type="text/css"/>
 Media Queries
@media only screen and (min-width: 780px)
33

34. Some coding examples
 But, media queries don’t work in IE8 or below;
used <script src=“/js/respond.js"
type="text/javascript"></script> to get RWD to work
in them
 Used ‘feature detection’ (e.g. to see if touch is
enabled), instead of ‘user agent detection’ (e.g.
to see what device they’re on)
<script src=“/js/libs/modernizr-2.0.6.min.js"
type="text/javascript"></script>
34

35. Some ways Cascade Server can help
35

36. Some ways Cascade Server can help
 M aking the complex simple
 Allow non-technical Content Authors to easily
create and update their content
 Custom Data Definitions

37. Some ways Cascade Server can help

38. Some ways Cascade Server can help

39. Some ways Cascade Server can help

40. Some ways Cascade Server can help

41. Some ways Cascade Server can help

42. Some ways Cascade Server can help

43. Some ways Cascade Server can help

44. Some ways Cascade Server can help

45. Some ways Cascade Server can help

46. Some ways Cascade Server can help

47. Some ways Cascade Server can help

48. Some ways Cascade Server can help

49. Some ways Cascade Server can help

50. Image size/resizing ramifications

51. Image size/resizing ramifications
Why a maximum width of 195 pixels?
To ensure they’re mobile compatible
These images are not resized by anything when the page is
viewed on tablets or mobile devices
Going wider than 195 could ‘break’ the page layout

52. Image size/resizing ramifications

53. Image size/resizing ramifications

54. Image size/resizing ramifications

55. Image size/resizing ramifications
Coded as Max-width 100%
Specifying a width and not the height lets the aspect ratio
stay intact
Only have to upload 1 image, despite the fact the image is
resized at various browser sizes

56. Image size/resizing ramifications

57. Image size/resizing ramifications

58. Image size/resizing ramifications

59. Image size/resizing ramifications
Add/remove/reorder slides
Each block has a
name/placement
Specify image size within the Data Definition

60. Image size/resizing ramifications
Coded as Max-width 100%
Specifying a width and not the height lets the aspect ratio
stay intact
Only have to upload 1 image, despite the fact the image is
resized at various browser sizes

61. Data Definitions for additional elements

62. Data Definitions for additional elements

63. Some ways Cascade Server can help

64. Some ways Cascade Server can help
 The good news if you want to go Responsive is
that many of the same tools and processes you
are probably already using in Cascade can
help make your RWD site easy to maintain.
64

65. Summary
65

66. Summary
 Tablet/mobile internet usage continuing to
increase
 RWD provides a better experience for all your
site visitors
 Once built, an RWD site easier to maintain
than separate, desktop-only and mobile-only
site
 RWD projects take extra time and collaboration
 Cascade Server’s features can help you
66

67. Additional Resources
 http://en.wikipedia.org/wiki/Progressive_enhancement
 http://www.headscape.co.uk/media/docs/browser-support.pdf
 http://www.alistapart.com/articles/summer-reading-issue/
 http://www.alistapart.com/articles/responsive-web-design
 http://www.abookapart.com/products/responsive-web-design
 http://bradfrost.github.com/this-is-responsive/resources.html
 http://unstoppablerobotninja.com/
 http://www.hannonhill.com/products/demos/william-and-mary-
responsive-design-webinar-video.html
67

68. Questions?
68

69. Thank you!
Chris Cox
Client Services Director
412-427-7088
ccox@barkleyrei.com
www.barkleyrei.com
69