Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Optimizing Responsive Websites for Users and Search Engines

412 visualizaciones

Publicado el

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

Publicado en: Marketing
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×