Responsive Design: Building for a Modern Web
-
Upload
harvard-web-working-group -
Category
Technology
-
view
2.035 -
download
0
description
Transcript of Responsive Design: Building for a Modern Web
![Page 1: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/1.jpg)
Responsive DesignBuilding for a Modern Web
David Marshall Sr. Web and Application Developer at [email protected]
![Page 2: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/2.jpg)
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.
![Page 3: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/3.jpg)
HSPH Desktop vs. Mobile 2012
![Page 4: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/4.jpg)
HSPH Desktop vs. Mobile 2013
![Page 5: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/5.jpg)
HSPH Desktop vs. Mobile 2014
![Page 6: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/6.jpg)
What Is Responsive Design?
Responsive design means creating websites that gracefully scale to a viewing device’s screen size, providing an optimal viewing experience.
![Page 7: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/7.jpg)
Origin of Responsive Design
Responsive design was popularized in Ethan Marcotte’s 2010 article in the online magazine A List Apart.
![Page 8: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/8.jpg)
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.
![Page 9: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/9.jpg)
Some Responsive Design Research
Sources that guided ourthinking include:
● Smashing Magazine● A List Apart
![Page 10: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/10.jpg)
Responsive Example: Desktop
![Page 11: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/11.jpg)
Responsive Example: iPad
![Page 12: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/12.jpg)
Responsive Ex.: Phone & iPad Mini
![Page 13: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/13.jpg)
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.
![Page 14: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/14.jpg)
The HSPH Design Scaled Up
![Page 15: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/15.jpg)
The HSPH Design Scaled Up
![Page 16: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/16.jpg)
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%)
![Page 17: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/17.jpg)
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.
![Page 18: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/18.jpg)
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.
![Page 19: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/19.jpg)
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.
![Page 20: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/20.jpg)
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
![Page 21: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/21.jpg)
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]-->
![Page 22: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/22.jpg)
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.”
![Page 23: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/23.jpg)
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
![Page 24: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/24.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;
![Page 25: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/25.jpg)
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;
![Page 26: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/26.jpg)
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.
![Page 27: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/27.jpg)
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.
![Page 28: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/28.jpg)
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.
![Page 29: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/29.jpg)
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.
![Page 30: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/30.jpg)
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.
![Page 31: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/31.jpg)
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
![Page 32: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/32.jpg)
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.
![Page 33: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/33.jpg)
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
![Page 34: Responsive Design: Building for a Modern Web](https://reader034.fdocuments.us/reader034/viewer/2022042714/5549fb5cb4c905557a8b4afe/html5/thumbnails/34.jpg)
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