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

Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

“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

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 6: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

66

Clients

Page 7: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

8

Responsive Web Design

Page 9: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

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

11

Responsive Web Design- Why use it?

Page 12: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

13

Cons

Extra time

Extra $

Responsive Web Design- Why use it?

Page 14: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

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

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

17

Process/approach using RWD

Page 18: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

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

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

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

22

Agree on standards

Rollover state in Chrome

Page 23: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

23

Agree on standards

Rollover state in Chrome

Page 24: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

24

Agree on standards

Rollover state in Chrome

Page 25: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

25

Agree on standards

Rollover state in IE8

Page 26: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

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

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

29

‘Desktop → Mobile’ vs. ‘Mobile → Desktop’

Page 30: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

30

‘Content first’ strategy

Page 31: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

32

Some coding examples

Page 33: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

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

35

Some ways Cascade Server can help

Page 36: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

Some ways Cascade Server can help

Page 38: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 39: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 40: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 41: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 42: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 43: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 44: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 45: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 46: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 47: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 48: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 49: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 50: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Image size/resizing ramifications

Page 51: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

Image size/resizing ramifications

Page 53: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Image size/resizing ramifications

Page 54: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Image size/resizing ramifications

Page 55: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

Image size/resizing ramifications

Page 57: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Image size/resizing ramifications

Page 58: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Image size/resizing ramifications

Page 59: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

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

Data Definitions for additional elements

Page 62: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Data Definitions for additional elements

Page 63: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

Some ways Cascade Server can help

Page 64: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

65

Summary

Page 66: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

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

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

68

Questions?

Page 69: Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI

69

Chris CoxClient Services Director

[email protected]

www.barkleyrei.com

Thank you!