On May 14th, 2014 David Marshall, Senior Web and Application Developer at the Harvard School of Public Health, gave a talk entitled "Responsive Design: Building for a Modern Web." David is a senior web and application developer at the Harvard School of Public Health, where he is responsible for maintaining the main website and other web applications. He recently rebuilt the HSPH website to make its design responsive and to reduce page size and load times. His current work focuses on PHP development for the WordPress CMS as well as on CSS3 and HTML5. Prior to joining the web team at HSPH, David’s work as an independent contractor included founding Club Site Solutions, a company that developed specialized websites and online registration systems for private clubs.

1. Responsive Design
Building for a Modern Web
David Marshall
Sr. Web and Application Developer at HSPH
dmarshal@hsph.harvard.edu

2. Some HSPH Background
● David Marshall: Senior Web and Application Developer at HSPH.
● HSPH WebTeam also includes: Deane Eastwood, Chris Ternan, and
Jake Yerdon.
● The WebTeam works closely with the Office of Communications.
● A new HSPH website was started in 2012, entailing an entirely new site
design, platform (WordPress), and servers (RackSpace).
● The site’s progression in becoming more “mobile-friendly” is shown in
the following three slides.

3. HSPH Desktop vs. Mobile 2012

4. HSPH Desktop vs. Mobile 2013

5. HSPH Desktop vs. Mobile 2014

6. What Is Responsive Design?
Responsive design means creating websites that gracefully scale to a
viewing device’s screen size, providing an optimal viewing experience.

7. Origin of Responsive Design
Responsive design was popularized in Ethan Marcotte’s 2010 article in the
online magazine A List Apart.

8. Why Responsive Design?
● 1.75 billion mobile Web users worldwide.
● Mobile devices and tablets currently account for over
30% of HSPH’s Web traffic.
● Our sites’ mobile and tablet traffic increased 22% in
2013 compared with 2012.
● Over 3,000 different devices were used to access the
site in the past month.

9. Some Responsive Design Research
Sources that guided our
thinking include:
● Smashing Magazine
● A List Apart

10. Responsive Example: Desktop

11. Responsive Example: iPad

12. Responsive Ex.: Phone & iPad Mini

13. Building the HSPH Responsive Site
● Mobile-first approach: Progressive enhancement.
● Content is the focus of the design.
● Scale up to desktop.
● Add features while scaling up.

14. The HSPH Design Scaled Up

15. The HSPH Design Scaled Up

16. A Major Issue
● Supporting the many browsers and devices available today is a major
issue in responsive design.
● There are 5 main browsers and 3 main rendering engines:
○ Chrome - Blink (35%)
○ Safari - WebKit (25%)
○ Internet Explorer - Trident (17%)
○ Firefox - Gecko (14%)
○ Opera - Blink (<2%)

17. HTML5 and CSS3
● HTML5 and CSS3 properties are supported by modern Web browsers.
● Libraries like html5shiv and Modernizr make it easy to support legacy
browsers with JavaScript-based fallbacks.
● HTML5 and CSS3 allow for animations, including moving and positioning
page elements (navigation, dropdowns, sliding panels, etc.), without the
use of Flash.
● Some great new features are included in HTML5
and CSS3.

18. Browser Animations
● Modern browsers can easily animate:
○ Position
○ Scale
○ Rotation
○ Opacity
● By utilizing a JS fallback, animations can be carried to older browsers that
do not support CSS animations.
● When changing an element on the page, the browser may need to redraw
portions or all of the page.
● Try to use CSS animations whenever possible.

19. Browser Reflows
● Browser reflow refers to recalculating the
positions and geometry of elements on a page
each time the layout changes.
● Changes in width, padding, display, position,
height, float, clear, text-align, etc. all trigger
reflows.
● Each time an element changes, the browser
must redraw it and any affected elements
around it. The larger the area, the more work
the CPU must do, but even small changes can
have huge effects.

20. Hardware Acceleration
● By using CSS animations, new browser layers are created for each of
the animation elements.
● The result is a smoother animation.
● This was especially important
when creating the off-canvas
navigation.
Source: http://youtu.be/-62uPWUxgcg

21. Internet Explorer
● IE10 - 2012
○ CSS animations
○ Positioned floats
○ Text shadows
● IE9 - 2011
○ SVGs
○ Border radius
○ @media
○ HTML5 audio, video, and canvas
● IE8 - 2009
○ CSS 2.1 support
● IE7 - 2006
○ Does not understand inline-block
○ PNGs
○ Absolute positioning bug
<!--[if IE 7]>
<html>
<![endif]-->
<!--[if IE 8]>
<html>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html>
<![endif]-->

22. WebKit - Backface Visibility
● When an element is rendered in HTML5, its front-facing and back-facing
sides are both rendered.
● By default, the backface visibility in WebKit is not hidden.
● This makes the animations seem to “flicker.”

23. WebKit - Font Rendering
● WebKit provides different font-smoothing options:
○ None
○ Antialiased
○ Subpixel rendering
● When an element is hardware-accelerated through the use
CSS3 animations, the subpixel rendering is disabled.
● This gives the illusion of thinner fonts.
● Attempts to “fix” the fonts lead to blurrier text.
Image Source: http://en.wikipedia.org/wiki/File:Subpixel_rendering_LCD_photo_3e_composite.jpg

24. Android Devices
● Android phones support a number of browsers.
○ Default built-in browser (WebKit)
○ Google Chrome (WebKit)
○ Firefox
● Chrome offers remote debugging on Android devices.
● Chrome for Mobile wraps the text of bulleted lists that have a display
property of inline or inline block. This can be solved using:
white-space: nowrap;

25. iOS Devices
● Apple allows only the built-in rendering engine to be used for any browser loaded
on the phone. Chrome for iOS is purely a wrapper for the onboard engine.
● Remote debugging is also available through Safari on a Mac and the developer
tools in the browser.
● iOS 5 uses hardware acceleration for CSS3 animations. iOS 6 turns off hardware
acceleration for 3D transforms by default. iOS7 turns it back on.
● You can fix choppy animations through artificially creating layers by applying the
following to large block level elements that are children of the affected areas:
-webkit-transform: translate3d( 0,0,0 );
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

26. Making It Fast
● Actually faster:
○ Make fewer requests and load fewer elements.
○ Load from a cookie-free domain or CDN.
○ Combine images into one.
○ Optimize images.
● Perceived as faster:
○ Reorder page elements.
○ Load visible elements first.
○ Load JavaScript onLoad.
● HSPH page-speed performance was
analyzed using GTmetrix.

27. Blocking
● Blocking is when a browser waits for other elements on a page to
download or finish rendering before it continues with loading the page.

28. Order of Elements
● Because of blocking, the order of elements on the page is extremely
important.
● Rendering can start once all the CSS and HTML have been downloaded,
so these should go first, right in the top of the document head.
● JS is the primary page blocker and should go in the footer unless it is used
to render the page above the fold.
● The HSPH site loads CSS first in the head, and then only the above-the-
fold JS. All other JS is loaded in the footer. Social media sharing buttons
are loaded “onload” to force asynchronous loading after the rest of the
page.

29. Image Optimization
● Combine images into sprites:
○ Sprites are a number of images combined into a single image.
○ Sprites decrease page load time because the browser makes only one
request instead of multiple.
○ The image is then broken up using CSS.
● Optimize images:
○ Kraken.io tool.
○ Enabled an average 66% reduction
in image size.

30. SEO
● Once we had a fast site, we wanted to optimize it for search engines.
● An external company performed an audit on the site’s page rankings.
● This audit provided a roadmap of areas for SEO improvement.
● We benchmarked the site’s performance before and after the revisions
and have seen progress in Google page rankings.
● Google search changes have boosted our rankings as well.

31. SEO Enhancements
● Title tag adjustments
● Heading tag adjustments
● XML sitemap creation
● Addition of Open Graph for social media
● Addition of image “alt” attributes
● Training the community

32. Wrap-up
● Time Required: At HSPH it took about a year from launching our first WordPress site
to having a sitewide responsive design.
● Major Issues Encountered: Along the way, a number of issues had to be resolved:
○ Browser compatibility
○ Animations
○ Speed
○ SEO
● Lessons Learned: An important lesson was the benefit of using many of the great
features that modern browsers offer, as long as fallbacks are in place.
● Now and Going Forward: We now have more than 14,000 responsive pages. Much
of our focus in the immediate future will be on maximizing improvements in page-
speed performance.

33. Resources
Articles:
● Smashing Magazine
● A List Apart
● Google Make the Web Faster article series
● CSS-Tricks.com
Tools:
● Kraken.io
● BrowserStack
● Google Analytics
● Google Webmaster Tools
● Google PageSpeed
● Pingdom Tools
● GTmetrix

34. Links
● Responsive Design:
http://alistapart.com/article/responsive-web-design/
● Progressive Enhancement:
http://alistapart.com/article/understandingprogressiveenhancement
● Browser Reflow:
https://developers.google.com/speed/articles/reflow
● SEO:
http://moz.com/blog