![Page 1: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/1.jpg)
“Responsive Web Design & Cascade Server”
Hannon Hill User Conference
September 18th, 2012
![Page 2: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/2.jpg)
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
![Page 4: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/4.jpg)
4
Clients
![Page 6: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/6.jpg)
66
Clients
![Page 7: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/7.jpg)
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
![Page 8: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/8.jpg)
8
Responsive Web Design
![Page 9: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/9.jpg)
9
What is it?
Why use it?
Process/Approach using RWD
Coding examples
How Cascade Server can help
Responsive Web Design
![Page 10: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/10.jpg)
10
Designing and developing a website so that it looks good, and works well, on any size device (desktop, tablet, mobile)
Responsive Web Design- What is it?
![Page 11: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/11.jpg)
11
Responsive Web Design- Why use it?
![Page 12: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/12.jpg)
12
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
Responsive Web Design- Why use it?
![Page 13: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/13.jpg)
13
Cons
Extra time
Extra $
Responsive Web Design- Why use it?
![Page 14: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/14.jpg)
14
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 HTML5 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
Responsive Web Design- Why use it?
![Page 15: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/15.jpg)
15
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
Responsive Web Design- Why use it?
![Page 16: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/16.jpg)
16
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
Responsive Web Design
![Page 17: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/17.jpg)
17
Process/approach using RWD
![Page 18: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/18.jpg)
18
Agree on breakpoints
Agree on standards
Desktop → Mobile vs. Mobile → Desktop
‘Content first’ strategy
Extra collaboration
Process/approach using RWD
![Page 19: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/19.jpg)
19
Agree on breakpoints
Major Breakpoint – boundary where the display of the site ‘switches’ noticeably
Minor breakpoints:Subtler shifts in between major breakpoints
320 px 768 px
![Page 20: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/20.jpg)
20
Need clear standards to build and test against
Can be based on:
Analytics data
Institutional considerations
Agree on standards
![Page 21: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/21.jpg)
21
What browsers, and what browser versions, does the site need to work in?
Agree on standards
![Page 22: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/22.jpg)
22
Agree on standards
Rollover state in Chrome
![Page 23: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/23.jpg)
23
Agree on standards
Rollover state in Chrome
![Page 24: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/24.jpg)
24
Agree on standards
Rollover state in Chrome
![Page 25: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/25.jpg)
25
Agree on standards
Rollover state in IE8
![Page 26: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/26.jpg)
26
What Operating Systems do those browsers need to work in?
Agree on standards
![Page 27: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/27.jpg)
27
What devices does it need to work on?
Agree on standards
![Page 28: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/28.jpg)
28
What devices does it need to work on?
Agree on standards
![Page 29: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/29.jpg)
29
‘Desktop → Mobile’ vs. ‘Mobile → Desktop’
![Page 30: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/30.jpg)
30
‘Content first’ strategy
![Page 31: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/31.jpg)
31
Extra collaboration between
UX Design Coding Project Management
Process is less linear, more agile
Extra collaboration
![Page 32: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/32.jpg)
32
Some coding examples
![Page 33: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/33.jpg)
33
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)
Some coding examples
![Page 34: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/34.jpg)
34
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>
Some coding examples
![Page 35: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/35.jpg)
35
Some ways Cascade Server can help
![Page 36: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/36.jpg)
Some ways Cascade Server can help
Making the complex simple Allow non-technical Content Authors to easily
create and update their content
Custom Data Definitions
![Page 37: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/37.jpg)
Some ways Cascade Server can help
![Page 38: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/38.jpg)
Some ways Cascade Server can help
![Page 39: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/39.jpg)
Some ways Cascade Server can help
![Page 40: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/40.jpg)
Some ways Cascade Server can help
![Page 41: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/41.jpg)
Some ways Cascade Server can help
![Page 42: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/42.jpg)
Some ways Cascade Server can help
![Page 43: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/43.jpg)
Some ways Cascade Server can help
![Page 44: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/44.jpg)
Some ways Cascade Server can help
![Page 45: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/45.jpg)
Some ways Cascade Server can help
![Page 46: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/46.jpg)
Some ways Cascade Server can help
![Page 47: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/47.jpg)
Some ways Cascade Server can help
![Page 48: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/48.jpg)
Some ways Cascade Server can help
![Page 49: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/49.jpg)
Some ways Cascade Server can help
![Page 50: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/50.jpg)
Image size/resizing ramifications
![Page 51: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/51.jpg)
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
Image size/resizing ramifications
![Page 52: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/52.jpg)
Image size/resizing ramifications
![Page 53: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/53.jpg)
Image size/resizing ramifications
![Page 54: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/54.jpg)
Image size/resizing ramifications
![Page 55: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/55.jpg)
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
![Page 56: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/56.jpg)
Image size/resizing ramifications
![Page 57: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/57.jpg)
Image size/resizing ramifications
![Page 58: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/58.jpg)
Image size/resizing ramifications
![Page 59: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/59.jpg)
Image size/resizing ramifications
Add/remove/reorder slidesEach block has a name/placement
Specify image size within the Data Definition
![Page 60: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/60.jpg)
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
![Page 61: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/61.jpg)
Data Definitions for additional elements
![Page 62: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/62.jpg)
Data Definitions for additional elements
![Page 63: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/63.jpg)
Some ways Cascade Server can help
![Page 64: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/64.jpg)
64
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.
Some ways Cascade Server can help
![Page 65: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/65.jpg)
65
Summary
![Page 66: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/66.jpg)
66
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
Summary
![Page 67: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/67.jpg)
67
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
Additional Resources
![Page 68: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI](https://reader030.vdocument.in/reader030/viewer/2022013011/55559208d8b42a8e1f8b4b2e/html5/thumbnails/68.jpg)
68
Questions?