1. OPTIMIZING RESPONSIVE
WEBSITES FOR USER EXPERIENCE
AND SEARCH ENGINES
Rob Johnson
@robkellas
linkedin.com/in/robkellas

2. CASE STUDY
DESERETBOOK.COM

3. SITUATION
• Only optimized for desktop
• Old/bulky HTML/CSS/JS
• slow page load times)
• Not search engine friendly

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. 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. 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. 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. REDESIGNING FOR
LARGE-SCALE WEBSITES
• Minimize risk
• Measure success/failure
• Minimize customer frustration

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. 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. A/B TEST
A/B TEST
ITERATIVE COMPONENT-BASED DESIGN

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. REDESIGNING FOR
LARGE-SCALE WEBSITES
• Minimize risk
• Measure success/failure
• Minimize customer frustration

14. CASE STUDY
DESERETNEWS.COM

15. SITUATION
• Incorrect markup
• Poorly written headlines
• Not optimized for Google News

16. OPTIMIZATION
GOALS
• Own certain keywords “BYU”, “mormon” etc
• Increase search referrals
• Increase page views
• Train journalists to “think like Google”

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. 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. CHEERS!
Rob Johnson
@robkellas
linkedin.com/in/robkellas