Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizing Responsive Websites for Users and Search Engines

396 views

Published on

I present on the mobile-first approach, responsive design methods and iterative component-based design.

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Optimizing Responsive Websites for Users and Search Engines

  1. 1. OPTIMIZING RESPONSIVE WEBSITES FOR USER EXPERIENCE AND SEARCH ENGINES Rob Johnson @robkellas linkedin.com/in/robkellas
  2. 2. CASE STUDY DESERETBOOK.COM
  3. 3. SITUATION • Only optimized for desktop • Old/bulky HTML/CSS/JS • slow page load times) • Not search engine friendly
  4. 4. RESPONSIVE DESIGN IMPLEMENTATION GOALS • Retain parity with current desktop design • Improve the mobile user experience • Improve page load times • Make pages more search engine friendly
  5. 5. DECISIONS & METHODS • Decided to implement a responsive site not an ‘m.’ • ‘Mobile First’ implementation • Greatly reduced template markup • Optimized markup structure for search engines • Upgraded Ruby from 1.8.7 to 2.0.1
  6. 6. MOBILE-FIRST APPROACH • First wireframes and designs should only reference mobile layouts • All assets should be optimized for mobile first. All @media queries should be used to build up a page from 320px, not down from desktop size • Faster page loads • Search engine friendly DOM • Smaller real estate requires greater discipline in page layout
  7. 7. RESPONSIVE DESIGN IMPLEMENTATION RESULTS • 31.29% YoY increase in sessions from Google • 33.67% YoY increase in site transactions • 82.06% YoY increase in mobile conversion rate • 40.57% YoY increase in desktop conversion rate
  8. 8. REDESIGNING FOR LARGE-SCALE WEBSITES • Minimize risk • Measure success/failure • Minimize customer frustration
  9. 9. WWW. GLOBAL STYLES HOME PRODUCT/ARTICLE PAGE COMPONENTS ROTATOR PRODUCT LISTING HEADER FOOTER STANDARD ELEMENTS COLOR PALETTE TOP 10 BANNERS HERO IMAGE HEADLINE RELATED ARTICLES CONTENT BODY A/B TEST COMPONENTS PAGE TEMPLATESSITE STANDARD ELEMENTS ITERATIVE COMPONENT-BASED DESIGN
  10. 10. DYNAMIC GLOBAL STYLE GUIDE • Automatically updates with each deploy • Ensures documentation • Reduces the amount of design and development (many pages can be created without using design resources) • Very handy for product folks for wire-framing and developing new layouts
  11. 11. A/B TEST A/B TEST ITERATIVE COMPONENT-BASED DESIGN
  12. 12. WWW. GLOBAL STYLES HOME PRODUCT/ARTICLE PAGE COMPONENTS ROTATOR PRODUCT LISTING HEADER FOOTER STANDARD ELEMENTS COLOR PALETTE TOP 10 BANNERS A/B TEST COMPONENTS PAGE TEMPLATESSITE STANDARD ELEMENTS HERO IMAGE HEADLINE RELATED ARTICLES CONTENT BODY ITERATIVE COMPONENT-BASED DESIGN
  13. 13. REDESIGNING FOR LARGE-SCALE WEBSITES • Minimize risk • Measure success/failure • Minimize customer frustration
  14. 14. CASE STUDY DESERETNEWS.COM
  15. 15. SITUATION • Incorrect markup • Poorly written headlines • Not optimized for Google News
  16. 16. OPTIMIZATION GOALS • Own certain keywords “BYU”, “mormon” etc • Increase search referrals • Increase page views • Train journalists to “think like Google”
  17. 17. • Optimized DOM for search engines • Continuous training with journalists in selecting key terms and related terms (LSI) • Internal feedback loop on headline crafting - considering compelling headlines and search strategy • Optimized Google News feed and story images
  18. 18. OPTIMIZATION RESULTS • 127% YoY increase in referrals from Google • Had tough competition against SLTrib with Google News ranking but dominated regular Google SERPS for key terms • High adoption of content optimization practices with the team from newsroom to editorial
  19. 19. CHEERS! Rob Johnson @robkellas linkedin.com/in/robkellas

×