Embed Size (px)
DESCRIPTION
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.
Citation preview
Responsive DesignBuilding for a Modern Web
David Marshall Sr. Web and Application Developer at [email protected]
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.
HSPH Desktop vs. Mobile 2012
HSPH Desktop vs. Mobile 2013
HSPH Desktop vs. Mobile 2014
What Is Responsive Design?
Responsive design means creating websites that gracefully scale to a viewing device’s screen size, providing an optimal viewing experience.
Origin of Responsive Design
Responsive design was popularized in Ethan Marcotte’s 2010 article in the online magazine A List Apart.
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.
Some Responsive Design Research
Sources that guided ourthinking include:
● Smashing Magazine● A List Apart
Responsive Example: Desktop
Responsive Example: iPad
Responsive Ex.: Phone & iPad Mini
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.
The HSPH Design Scaled Up
The HSPH Design Scaled Up
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%)
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.
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.
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.
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 importantwhen creating the off-canvasnavigation.
Source: http://youtu.be/-62uPWUxgcg
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]-->
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.”
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
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;
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;
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 wasanalyzed using GTmetrix.
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.
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.
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.
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.
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
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.
ResourcesArticles:● 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
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
