This document summarizes a webinar about responsive web design and how Cascade Server can help with the process. It discusses what responsive design is, why organizations implement it, and the general process involved. This includes agreeing on breakpoints, standards, and whether to take a desktop-first or mobile-first approach. It provides examples of coding techniques like media queries and touch detection. Finally, it outlines ways Cascade Server can simplify content editing and management for responsive sites through features like custom data definitions.
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
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
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
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
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. Thank you!
Chris Cox
Client Services Director
412-427-7088
ccox@barkleyrei.com
www.barkleyrei.com
69
Notas del editor
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 'latest available version' at a projects' 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 'latest available version' at a projects' 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.