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.
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
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
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
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
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
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
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
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
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
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
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
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