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

1,426 views
1,322 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,426
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. “Responsive Web Design & Cascade Server” Hannon Hill User Conference September 18th, 2012
  2. 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. 3. Clients 3
  4. 4. Clients 4
  5. 5. Clients 5
  6. 6. Clients 6
  7. 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. 8. Responsive Web Design 8
  9. 9. Responsive Web Design  What is it?  Why use it?  Process/Approach using RWD  Coding examples  How Cascade Server can help 9
  10. 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. 11. Responsive Web Design- Why use it? 11
  12. 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. 13. Responsive Web Design- Why use it? Cons Extra time Extra $ 13
  14. 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. 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. 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. 17. Process/approach using RWD 17
  18. 18. Process/approach using RWD  Agree on breakpoints  Agree on standards  Desktop → M obile vs. Mobile → Desktop  ‘Content first’ strategy  Extra collaboration 18
  19. 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. 20. Agree on standards  Need clear standards to build and test against  Can be based on:  Analytics data  Institutional considerations 20
  21. 21. Agree on standards What browsers, and what browser versions, does the site need to work in? 21
  22. 22. Agree on standards Rollover state in Chrome 22
  23. 23. Agree on standards Rollover state in Chrome 23
  24. 24. Agree on standards Rollover state in Chrome 24
  25. 25. Agree on standards Rollover state in IE8 25
  26. 26. Agree on standards What Operating Systems do those browsers need to work in? 26
  27. 27. Agree on standards What devices does it need to work on? 27
  28. 28. Agree on standards What devices does it need to work on? 28
  29. 29. ‘Desktop → M obile’ vs. ‘Mobile → Desktop’ 29
  30. 30. ‘Content first’ strategy 30
  31. 31. Extra collaboration  Extra collaboration between  UX  Design  Coding  Project Management  Process is less linear, more agile 31
  32. 32. Some coding examples 32
  33. 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. 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. 35. Some ways Cascade Server can help 35
  36. 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. 37. Some ways Cascade Server can help
  38. 38. Some ways Cascade Server can help
  39. 39. Some ways Cascade Server can help
  40. 40. Some ways Cascade Server can help
  41. 41. Some ways Cascade Server can help
  42. 42. Some ways Cascade Server can help
  43. 43. Some ways Cascade Server can help
  44. 44. Some ways Cascade Server can help
  45. 45. Some ways Cascade Server can help
  46. 46. Some ways Cascade Server can help
  47. 47. Some ways Cascade Server can help
  48. 48. Some ways Cascade Server can help
  49. 49. Some ways Cascade Server can help
  50. 50. Image size/resizing ramifications
  51. 51. Image size/resizing ramificationsWhy a maximum width of 195 pixels?To ensure they’re mobile compatibleThese images are not resized by anything when the page isviewed on tablets or mobile devicesGoing wider than 195 could ‘break’ the page layout
  52. 52. Image size/resizing ramifications
  53. 53. Image size/resizing ramifications
  54. 54. Image size/resizing ramifications
  55. 55. Image size/resizing ramificationsCoded as Max-width 100%Specifying a width and not the height lets the aspect ratiostay intactOnly have to upload 1 image, despite the fact the image isresized at various browser sizes
  56. 56. Image size/resizing ramifications
  57. 57. Image size/resizing ramifications
  58. 58. Image size/resizing ramifications
  59. 59. Image size/resizing ramificationsAdd/remove/reorder slides Each block has a name/placement Specify image size within the Data Definition
  60. 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. 61. Data Definitions for additional elements
  62. 62. Data Definitions for additional elements
  63. 63. Some ways Cascade Server can help
  64. 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. 65. Summary 65
  66. 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. 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. 68. Questions? 68
  69. 69. Thank you! Chris CoxClient Services Director 412-427-7088 ccox@barkleyrei.com www.barkleyrei.com 69

×