SlideShare a Scribd company logo
1 of 34
Download to read offline
Responsive Design
Building for a Modern Web
David Marshall
Sr. Web and Application Developer at HSPH
dmarshal@hsph.harvard.edu
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 our
thinking 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 important
when creating the off-canvas
navigation.
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 was
analyzed 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.
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
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

More Related Content

Viewers also liked

Italyat christmas2010
Italyat christmas2010Italyat christmas2010
Italyat christmas2010
George Martin
 
Terra10 ildy-111020005618-phpapp02
Terra10 ildy-111020005618-phpapp02Terra10 ildy-111020005618-phpapp02
Terra10 ildy-111020005618-phpapp02
George Martin
 

Viewers also liked (20)

5 Social Tools In Practice at Harvard [SXSW11]
5 Social Tools In Practice at Harvard [SXSW11]5 Social Tools In Practice at Harvard [SXSW11]
5 Social Tools In Practice at Harvard [SXSW11]
 
Tastypie: Easy APIs to Make Your Work Easier
Tastypie: Easy APIs to Make Your Work EasierTastypie: Easy APIs to Make Your Work Easier
Tastypie: Easy APIs to Make Your Work Easier
 
Flexible web publishing with Expression Engine
Flexible web publishing with Expression EngineFlexible web publishing with Expression Engine
Flexible web publishing with Expression Engine
 
Cabe sim
Cabe simCabe sim
Cabe sim
 
Popayan
PopayanPopayan
Popayan
 
Proyecto final int.informatica
Proyecto final  int.informaticaProyecto final  int.informatica
Proyecto final int.informatica
 
Kiwicha
KiwichaKiwicha
Kiwicha
 
3 a 12437
3 a 124373 a 12437
3 a 12437
 
Italyat christmas2010
Italyat christmas2010Italyat christmas2010
Italyat christmas2010
 
Alaska
AlaskaAlaska
Alaska
 
Slideshare is hiring & a bonus awaits!
Slideshare is hiring & a bonus awaits!Slideshare is hiring & a bonus awaits!
Slideshare is hiring & a bonus awaits!
 
Photosdutempspass
PhotosdutempspassPhotosdutempspass
Photosdutempspass
 
Ejercicios de asignacion
Ejercicios de asignacionEjercicios de asignacion
Ejercicios de asignacion
 
La obra de arte como inversión
La obra de arte como inversiónLa obra de arte como inversión
La obra de arte como inversión
 
Modulos SIG
Modulos SIGModulos SIG
Modulos SIG
 
Terra10 ildy-111020005618-phpapp02
Terra10 ildy-111020005618-phpapp02Terra10 ildy-111020005618-phpapp02
Terra10 ildy-111020005618-phpapp02
 
Photosdutempspass
PhotosdutempspassPhotosdutempspass
Photosdutempspass
 
Problematicas
ProblematicasProblematicas
Problematicas
 
Cucina modello Mida di Composit
Cucina modello Mida di CompositCucina modello Mida di Composit
Cucina modello Mida di Composit
 
Actividad numero 2 derecho tributario
Actividad numero 2 derecho tributarioActividad numero 2 derecho tributario
Actividad numero 2 derecho tributario
 

Similar to Responsive Design: Building for a Modern Web

Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
Karambir Singh Nain
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
Emma Jane Hogbin Westby
 
Responsive Web Design On Student's day
Responsive Web Design On Student's day Responsive Web Design On Student's day
Responsive Web Design On Student's day
psophy
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
Zoe Gillenwater
 

Similar to Responsive Design: Building for a Modern Web (20)

Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
 
Javascript & SEO 2019
Javascript & SEO 2019Javascript & SEO 2019
Javascript & SEO 2019
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
 
New Ranking Metrics by Google
New Ranking Metrics by GoogleNew Ranking Metrics by Google
New Ranking Metrics by Google
 
Word press optimizations
Word press optimizations Word press optimizations
Word press optimizations
 
Seo for single page applications
Seo for single page applicationsSeo for single page applications
Seo for single page applications
 
Demystifying JavaScript & SEO
Demystifying JavaScript & SEODemystifying JavaScript & SEO
Demystifying JavaScript & SEO
 
L’importance du crawl du JavaScript : pourquoi, comment et pour quels bénéfic...
L’importance du crawl du JavaScript : pourquoi, comment et pour quels bénéfic...L’importance du crawl du JavaScript : pourquoi, comment et pour quels bénéfic...
L’importance du crawl du JavaScript : pourquoi, comment et pour quels bénéfic...
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
 
Alexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designingAlexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designing
 
Dig into the omega theme
Dig into the omega themeDig into the omega theme
Dig into the omega theme
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Design
 
How to develop browser extension
How to develop browser extensionHow to develop browser extension
How to develop browser extension
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
 
Web Standards Interop 2022
Web Standards Interop 2022Web Standards Interop 2022
Web Standards Interop 2022
 
Responsive Web Design On Student's day
Responsive Web Design On Student's day Responsive Web Design On Student's day
Responsive Web Design On Student's day
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career Roadmap
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 

More from Harvard Web Working Group

Tania Schlatter – Visual Usability
Tania Schlatter – Visual UsabilityTania Schlatter – Visual Usability
Tania Schlatter – Visual Usability
Harvard Web Working Group
 
Web Analytics: Creating reports that people will read
Web Analytics: Creating reports that people will readWeb Analytics: Creating reports that people will read
Web Analytics: Creating reports that people will read
Harvard Web Working Group
 

More from Harvard Web Working Group (20)

The Internet of Things (IoT)
The Internet of Things (IoT)The Internet of Things (IoT)
The Internet of Things (IoT)
 
Perception is Reality: Lessons Learned from User Research
Perception is Reality: Lessons Learned from User ResearchPerception is Reality: Lessons Learned from User Research
Perception is Reality: Lessons Learned from User Research
 
5 Steps to (Remote) Team Bliss: How to Build Thriving, High-Performing (Remot...
5 Steps to (Remote) Team Bliss: How to Build Thriving, High-Performing (Remot...5 Steps to (Remote) Team Bliss: How to Build Thriving, High-Performing (Remot...
5 Steps to (Remote) Team Bliss: How to Build Thriving, High-Performing (Remot...
 
Starting out with MongoDB
Starting out with MongoDBStarting out with MongoDB
Starting out with MongoDB
 
The Process of Communication, A Practical Guide for Project Managers
The Process of Communication, A Practical Guide for Project ManagersThe Process of Communication, A Practical Guide for Project Managers
The Process of Communication, A Practical Guide for Project Managers
 
Tania Schlatter – Visual Usability
Tania Schlatter – Visual UsabilityTania Schlatter – Visual Usability
Tania Schlatter – Visual Usability
 
Demystifying UX – A toolkit approach to better, cheaper & faster experience d...
Demystifying UX – A toolkit approach to better, cheaper & faster experience d...Demystifying UX – A toolkit approach to better, cheaper & faster experience d...
Demystifying UX – A toolkit approach to better, cheaper & faster experience d...
 
Will my helicopter fit in your garage?
Will my helicopter fit in your garage?Will my helicopter fit in your garage?
Will my helicopter fit in your garage?
 
Every Screen is a Touchscreen
Every Screen is a TouchscreenEvery Screen is a Touchscreen
Every Screen is a Touchscreen
 
Open Scholar
Open ScholarOpen Scholar
Open Scholar
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
 
Draw More, Talk Less
Draw More, Talk LessDraw More, Talk Less
Draw More, Talk Less
 
Mat Marquis - JQuery Mobile
Mat Marquis - JQuery MobileMat Marquis - JQuery Mobile
Mat Marquis - JQuery Mobile
 
Curating the Open Web with Zeega
Curating the Open Web with ZeegaCurating the Open Web with Zeega
Curating the Open Web with Zeega
 
Django in the Office: Get Your Admin for Nothing and Your SQL for Free
Django in the Office: Get Your Admin for Nothing and Your SQL for FreeDjango in the Office: Get Your Admin for Nothing and Your SQL for Free
Django in the Office: Get Your Admin for Nothing and Your SQL for Free
 
Accessibility by Mat Marquis
Accessibility by Mat MarquisAccessibility by Mat Marquis
Accessibility by Mat Marquis
 
The Technical Side of Harvard.edu Redesign
The Technical Side of Harvard.edu RedesignThe Technical Side of Harvard.edu Redesign
The Technical Side of Harvard.edu Redesign
 
Reboot: Developing a Drupal Solution for Harvard.edu
Reboot: Developing a Drupal Solution for Harvard.eduReboot: Developing a Drupal Solution for Harvard.edu
Reboot: Developing a Drupal Solution for Harvard.edu
 
Analytics - Most Engagement Sample
Analytics - Most Engagement SampleAnalytics - Most Engagement Sample
Analytics - Most Engagement Sample
 
Web Analytics: Creating reports that people will read
Web Analytics: Creating reports that people will readWeb Analytics: Creating reports that people will read
Web Analytics: Creating reports that people will read
 

Recently uploaded

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern Enterprise
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 

Responsive Design: Building for a Modern Web

  • 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
  • 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