“Responsive Web Design & Cascade Server”          Hannon Hill Webinar             November 13th, 2012
Who is BarkleyREI?    Full-service interactive agency    Specialize in “information and application rich” projects    D...
Clients          3
Clients          4
Clients          5
Clients          6
Who is Chapman University?    Located in Orange, California    Founded in 1861    Total enrollment of nearly 7,000 stud...
Responsive Web Design                        8
Responsive Web Design   What is it?   Why use it?   Process/Approach using RWD   Coding examples   How Cascade Server...
Responsive Web Design- What is it?Designing and developing a website so that it looks good,and works well, on any size dev...
Responsive Web Design- Why use it?                                     11
Responsive Web Design- Why use it?  Pros  Provide an optimal experience for all your site  visitors, not just some of the...
Responsive Web Design- Why use it?  Cons  Extra time  Extra $                                     13
Responsive Web Design- Why use it?  When you might want to consider using it:  Need a complete site overhaul anyway  Loo...
Responsive Web Design- Why use it? When you might want to consider NOT using it: You redesigned your desktop site recentl...
Responsive Web Design  Why Chapman ultimately decided to use it:  The Pros outweighed the Cons  Tablet/mobile site visit...
Process/approach using RWD                             17
Process/approach using RWD   Agree on breakpoints   Agree on standards   Desktop → M obile vs. Mobile → Desktop   ‘Con...
Agree on breakpoints  Major Breakpoint – boundary where the display  of the site ‘switches’ noticeably              320 px...
Agree on standards   Need clear standards to build and test against   Can be based on:        Analytics data        In...
Agree on standards  What browsers, and what browser versions, does  the site need to work in?                             ...
Agree on standards  Rollover state in Chrome                             22
Agree on standards  Rollover state in Chrome                             23
Agree on standards  Rollover state in Chrome                             24
Agree on standards  Rollover state in IE8                          25
Agree on standards  What Operating Systems do those browsers need  to work in?                                            ...
Agree on standards What devices does it need to work on?                                         27
Agree on standards What devices does it need to work on?                                         28
‘Desktop → M obile’ vs. ‘Mobile → Desktop’                                             29
‘Content first’ strategy                           30
Extra collaboration   Extra collaboration between           UX           Design           Coding           Project Ma...
Some coding examples                       32
Some coding examples HTML is the same for all size browsers CSS is where 99% of the responsive magic  happens     <link ...
Some coding examples But, media queries don’t work in IE8 or below;  used <script src=“/js/respond.js"  type="text/javasc...
Some ways Cascade Server can help                                    35
Some ways Cascade Server can help   M aking the complex simple   Allow non-technical Content Authors to easily    create...
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Some ways Cascade Server can help
Image size/resizing ramifications
Image size/resizing ramificationsWhy a maximum width of 195 pixels?To ensure they’re mobile compatibleThese images are no...
Image size/resizing ramifications
Image size/resizing ramifications
Image size/resizing ramifications
Image size/resizing ramificationsCoded as Max-width 100%Specifying a width and not the height lets the aspect ratiostay in...
Image size/resizing ramifications
Image size/resizing ramifications
Image size/resizing ramificationsAdd/remove/reorder slides                                 Each block has a               ...
Image size/resizing ramifications  Coded as Max-width 100%  Specifying a width and not the height lets the aspect ratio  s...
Data Definitions for additional elements
Data Definitions for additional elements
Some ways Cascade Server can help
Some ways Cascade Server can help    The good news if you want to go Responsive is     that many of the same tools and pr...
Summary          64
Summary   Tablet/mobile internet usage continuing to    increase   RWD provides a better experience for all your    site...
Additional Resources  http://en.wikipedia.org/wiki/Progressive_enhancement  http://www.headscape.co.uk/media/docs/browse...
Questions?             67
Coding/Testing Standards  (During the webinar, an audience member  asked if we could include info on our  coding/testing s...
Thank you!       Chris CoxClient Services Director     412-427-7088 ccox@barkleyrei.com www.barkleyrei.com                ...
Upcoming SlideShare
Loading in …5
×

BarkleyREI & Hannon Hill Webinar - Responsive Web Design

828 views

Published on

In this webinar, Hannon Hill partner BarkelyREI will show how Chapman University used Responsive Web Design for their website redesign this spring and how they used Cascade Server to accomplish this. Highlights will include a discussion of the advantages, considerations, and implications for the website redesign process if you choose to implement RWD.

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
828
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • BarkleyREI maintains the highest level of coding and quality assurance (QA) testing standards. This allows us to ensure that the websites we build function and display as intended across all agreed-upon browsers and operating systems.   INTERFACE PROGRAMMING STANDARDS HTML5 and Semantically Meaningful Elements Semantically meaningful elements must be used only for their intended purpose in their appropriate context. Where no semantic value need be inferred from the markup, DIVs will still be used. Given that the new elements provide no new inherent display properties -and they are typically used in place of DIVs- their default visual display properties will be isomorphic to DIVs unless otherwise needed for the design of the page. The current draft of the W3C Specification for the correct use of these elements is provided here: http://dev.w3.org/html5/spec/Overview.html   If a client ’s website is already existent as XHTML 1.0 Transitional, subsequent work done to it will also be made in XHTML 1.0 Transitional.   Microdata Independent from the use of HTML5 or XHTML 1.0, microdata will be employed for items where its usage is deemed advantageous-- typically reviews, events, people, businesses, and organizations. The use of microdata has been proven to aide organic SEO efforts.   Please see http://schema.org for more information on microdata.   Migration and Development Process New projects will be coded, integrated, and tested by the developer/coder assigned to the task in our development hosting environment. Before migrating to a production environment, projects will be migrated to a QA environment for a formal round of QA.   Once migrated to the QA environment, and confirmed by the QA team, the product will be slated for a migration to the live production environment. Both QA and development will work closely after this migration to ensure that the project reflects its intended results. The responsibility of communicating and confirming the successful migration of tracking scripts will be shared between coding, QA, and Client Services.   QUALITY ASSURANCE TESTING STANDARDS Please refer to the section Types of Sites and Testing Implications to ascertain which OS/Device standards are applied to which types of sites. Platform Testing Standards:   Windows Testing Standards BarkleyREI will conduct machine-based testing in the Windows environments using the following browsers:   Windows 7 Internet Explorer 9.0 Internet Explorer 8.0 Mozilla Firefox (latest build) * Google Chrome (latest build) * Apple Safari (latest build) * Windows XP Internet Explorer 8.0 Mozilla Firefox (latest build) * Google Chrome (latest build) * Apple Safari (latest build) * All Windows Operating Systems are tested with the latest service pack and security updates installed. BarkleyREI will perform testing on specific Windows OS/service pack combinations upon client request.   * These browsers are frequently and automatically updated during the course of a long project. In practice this means the &apos;latest available version&apos; at a projects&apos; outset is not the same as the latest available version at launch. BarkleyREI will code and test against whatever the latest available version is at the time we are coding and testing. If a browser update is released during coding or testing, BarkleyREI automatically adjusts, and builds and tests against that newer version.   Alternate Windows platforms/browsers BarkleyREI can perform alternate testing if requested by the client for the platforms/browsers indicated below. Base-level testing (covering the majority of the end user market) will not include the list below unless requested by the client. Macintosh/Apple Testing Standards BarkleyREI will conduct machine-based testing in the Macintosh environment using the following browsers:   OSX 10.6 (Snow Leopard) Mozilla Firefox (latest build) * Google Chrome (latest build) * Apple Safari (latest build) *   * These browsers are frequently and automatically updated during the course of a long project. In practice this means the &apos;latest available version&apos; at a projects&apos; outset is not the same as the latest available version at launch. BarkleyREI will code and test against whatever the latest available version is at the time we are coding and testing. If a browser update is released during coding or testing, BarkleyREI automatically adjusts, and builds and tests against that newer version. Mobile Testing Standards BarkleyREI will conduct mobile phone based testing on the following phone operating systems and browsers: Level 1 Devices iPhone 4S with latest iOS build Android with latest OS   Level 2 Devices iPhone 4 with latest iOS build iPhone 3GS with latest OS Android with OS 2.3.x (Gingerbread) Windows Phone with latest OS Blackberry Torch   The default level of testing is all of the Level 1 and Level 2 devices. Barkley will test against different phone platforms as required by the client at additional cost. Default browsers will be used for testing websites. Not many statistics support anything other than what the defaults are for these phones.     Types of Sites and Testing Implications :   Desktop-Oriented Website A desktop-oriented website is one that is designed aesthetically, from a user experience perspective, and functionally to be used by a browser on a desktop computer. Desktop-oriented sites are fully tested using the aforementioned Windows and Macintosh standards. Additionally they are tested to ensure that they are functional on Level 1 mobile devices and all tablet devices listed above. More specifically, touch-oriented devices may handle hover-states differently than desktops.   Mobile Website A mobile website is one that is designed aesthetically, from a user experience perspective, and functionally to be used by a browser on a mobile phone. A mobile website may build upon or take away from content/functionality that is on its parent desktop-oriented site in order to suit the client ’s perception of its users’ needs. Typically, a user is automatically redirected to the mobile website when the server initially resolves that the user is on a mobile device and is requesting a page from the desktop-oriented website. This redirection may also occur on tablet devices at the client ’s request. Mobile websites are tested against the Mobile standards as detailed earlier (both Level 1 and Level 2), and additionally against the Tablet standards if the client has requested that tablets get redirected to the mobile site.   Responsive Web Design Site   Responsive Web Design is a concept by Ethan Marcotte, a web designer from Boston, which was brought about in 2011. It describes a method of creating web content that will scale to fit any viewing window they are visited in, no matter the device or browser.   A Major Breakpoint is a specific resolution width that BarkleyREI will code to match corresponding wireframes and designs. These are intended to be device specific targets that meet expectations of the audience and how they plan to experience the site. The following is BarkleyREI ’s default breakpoints:   1024px-- Desktop browsers and 10inch tablets (Landscape) 768px-- 10inch tablets (Portrait) 320px-- Majority of mobile smartphones   Minor breakpoints: BarkleyREI will test during coding (but not formally QA) for resolutions in-between our major breakpoints to target devices such as 7 inch tablets or netbook computers. If additional major breakpoints to target specific devices are requested, we will include them in our Quality Assurance testing   Testing of Responsive Web Design Sites is done using the standards outlined in the Windows, Macintosh/Apple, Mobile, and Tablet standards sections.   Screen Resolution :   Target resolution Target resolution: 1024x768 target (standard). Please note that BarkleyREI has used larger target resolutions for several clients. We would work with the client to verify what resolution makes the most sense for their users through analytics data.   Higher screen resolutions up to 1600x1200 are tested to ensure that the design extends the full height or width of the browser window. Higher resolutions are also tested for design scalability.   For the target resolution, the site design cannot cause the browser ’s horizontal scrollbar to be visible.   Sites are tested with display area at the maximum width (browser search bars and toolbars collapsed).   Alternate screen resolutions Alternate screen resolutions (e.g. 1024x768. 800x600, 640x480) can be tested upon client request.     Browser Plugins :   Adobe Flash Target version: latest build   BarkleyREI will test for a specific earlier version or minor release or any combination of major versions and minor releases, based upon specific functionality requirements provided by the client within the projects SOW.   NOTE: These standards apply only to projects that have been identified during the scoping process as requiring a lesser Flash version. BarkleyREI will not apply these testing measures unless specified.   Windows Media Player Target version: latest build BarkleyREI will test for a specific earlier version upon client request.   Apple QuickTime Target version: latest build BarkleyREI will test for a specific earlier version upon client request.     Browser Display Settings :   BarkleyREI will perform functional testing on all websites and applications with the following browser settings at default: Font face Font size Font color Hyperlink color Hyperlink behavior CSS enabled Cookies enabled Security   NOTE: BarkleyREI testing standards do not include testing every possible browser configuration and browser extensions/plug-ins/add-ons. Specific requests for testing must be identified during the scoping phase of the project.       JavaScript :   Target Version: Based upon specific project functionality requirements.*   BarkleyREI will perform functional testing on all websites and applications with JavaScript enabled in the browser.   BarkleyREI will also test all websites and applications with JavaScript disabled to ensure that alternate content and messaging are provided in browsers that have disabled JavaScript or in which JavaScript is not supported.   Performance of JavaScript is proportionate to devices ’ JavaScript engines. In some cases, a JavaScript-intensive page on a mobile or tablet device may not have as smooth transitions as it does on a desktop computer. BarkleyREI will seek to make these sort of differences as minimal as possible but will accept limitations when a device imposes them.   *Current version of jQuery will be used.     Accessibility :   BarkleyREI strives to meet all current web standards in the websites we build while at the same time focusing on making web-based content accessible to the largest audience possible. We follow the World Wide Web Consortium (W3C) draft specifications for HTML 5 and CSS 3 (degrading gracefully for versions of IE previous to 9). We code to separate presentation from content, meaning that if all graphics and styling are removed, the document structure is still in a usable format.   We code to adhere to the Priority 1 (and a majority of priority 2) checkpoints of the W3C Web Content Accessibility Guidelines 1.0 and to the Section 508 Standards. Our JavaScript is efficient and degrades gracefully for users whose browsers do not support it.[h]   BarkleyREI will test for W3C Priority 2 and 3 guidelines upon client request and budget permitting.   For more details on Section 508 Standards, refer to this document: http://www.section508.gov/index.cfm?fuseAction=stdsdoc#Web     Connection Speed :   Laptop/desktop computer (non-mobile) testing occurs on DSL/T1 connections. Mobile testing, if included in the project, occurs over a wireless 3G network.   BarkleyREI will test on a 56Kb dial-up modem upon client request.
  • BarkleyREI & Hannon Hill Webinar - Responsive Web Design

    1. 1. “Responsive Web Design & Cascade Server” Hannon Hill Webinar November 13th, 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 ramificationsAdd/remove/reorder slides Each block has a name/placement Specify image size within the Data Definition
    59. 59. 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. 60. Data Definitions for additional elements
    61. 61. Data Definitions for additional elements
    62. 62. Some ways Cascade Server can help
    63. 63. 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. 63
    64. 64. Summary 64
    65. 65. 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 65
    66. 66. 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 66
    67. 67. Questions? 67
    68. 68. Coding/Testing Standards (During the webinar, an audience member asked if we could include info on our coding/testing standards. Please see this slide ’s Notes for BarkleyREI’s recent boilerplate coding/testing standards. We customize these for each project, but this should give you a good starting point for your own use.) 68
    69. 69. Thank you! Chris CoxClient Services Director 412-427-7088 ccox@barkleyrei.com www.barkleyrei.com 69

    ×