Abe Thomas - How to Optimize for a Multi-Device Experience Using the Responsive Web - SIC2012


Published on

Abe Thomas, Microsoft

How to Optimize for a Multi-Device Experience Using the Responsive Web?

With the proliferation of tablets, smartphones and PCs, users are increasingly looking for a customized experience on their devices. They want content to be laid out in a format that optimizes to the form factor they are on and they want content that is relevant for that device. Responsive web architecture is a brand new approach in web design that allows for easy reading and navigation. As a user switches from their laptop to a tablet, the website automatically switches to accommodate for resolution, image size and scripting abilities. This eliminates the need for a different design and development phase for each new gadget on the market. Earlier this year, Microsoft embarked on such an exercise for its website. This talk details 7 principles that were used by the team to arrive at a responsive web design for the Microsoft homepage.

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • I want to start off with our mission to underscore a few points on our jobs and how digital really fits into how we accomplish our goals.Our mission is to create product desire through an unbroken demand chain. It’s pretty clear that we’re goaled on “creating product desire” and that’s straight-forward. It’s all about romancing our products in a way that customers understand and engage with.And, we’ll do that by creating an unbroken demand chain. And that’s where you all fit in…as well as digital as an overall tool for engagement our audience. We need to be maniacal on connecting the dots in the demand chain. Competitively this is a challenge because Apple controls theirs end to end. Execution needs to be really focused. Its about focusing on fewer stories and then connecting the PR, websites, thru partner marketing, and our ads really well. Office and Xbox do this the best and yet we could do better.Microsoft.com is so core to this mission, and I hope you see yourself in it everyday. I’m counting on you to be do two things: 1) understand the customer journey and then focus on where our demand chain is broken in relation to aligning with that journey. We need to fix the breaks and get focused on stronger execution between our ads, PR, website and purchasing options, and then to our retail partners. 2) be a demand-chain advocate! You work with BG and field stakeholders from around the world, and in your roles, you have great visibility of the demand chain that those teams may not have. You have greater visibility into where the chain may be broken or where we could do better. Be a voice and advocate for how the customer moves through our digital properties…or how the customer moves from physical, to digital and probably back to physical again.
  • Abe Thomas - How to Optimize for a Multi-Device Experience Using the Responsive Web - SIC2012

    1. 1. Abe ThomasGeneral Manager Microsoft.com
    2. 2. The world’s 8th-most visited websiteSource: ComScore, 2012
    3. 3. Microsoft.com Vision
    4. 4. Old-world problems New-world problemsMessage Channeloverload attribution Social “this “ he won” “ buy it” “I love it” rocks” “Subscribe” “noise” “he lost” “don’t buy it” “I hate it” “this “Enter” sucks” “Win” “Buy” “Save” “Shop” Multi-device “Earn” consumers “Sign up” “Learn More”
    5. 5. What device are you on?
    6. 6. Users are using multiple devices Tablets SmartphonesSource: Business Insider’s BI Intelligence
    7. 7. Responsive website example: Smashing Magazine
    8. 8. 7 Principles of Marketing at Microsoft1. Live and breathe the customer journey2. Know and respect the “competition”3. Romance our product truths4. Plan the work, work the plan5. Throw fewer pebbles, make bigger waves6. Disclosure drives action7. Skate to where the puck is going to be
    9. 9. Live and breathe the customer journey Awareness Evaluation GatheringLearn & ResearchEvaluate Price Choice Select & Buy Learning & Discovery Deployment & Adoption Service & Support Use & Advocacy Advocate
    10. 10. Know and respect the “competition”
    11. 11. Romance our product truths
    12. 12. Plan the work, work the plan • Baseline CTR • +7.22 CTR • +5.63 CTR • +7.01 CTR Variant D C Control layout Variant BB
    13. 13. Throw fewer pebbles, make bigger wavesOct 2012 2011 2010
    14. 14. Disclosure drives action
    15. 15. Skate to where the puck is going to be Microsoft.com is the first Top 15 websites to deploy a responsive design
    16. 16. Responsive design at microsoft.com
    17. 17. Conclusion: Did it work?Click through rate UP Satisfaction UP Sales Referrals UP
    18. 18. Conclusion: Did it work? I continue to be impressedMicrosoft is actually the by the courage at Microsoft I look forward to the wholemost exciting company in shown by all the web following these verytech. They’ve made a lot of big, positive changes smart footsteps.great decisions lately. happening there. Congratulations to The responsive everyone who worked ondesign is a brilliant addition This provides a needed this project. It truly is aand love the clean lines and counterpoint to the Apple great piece of design. I hopereadability of the new site. “Do everything ourselves some of the tools created and keep everything a for this project becomeCan’t wait to see what’s next secret” ethos. available for publicfor this… use….please?
    19. 19. The benefits of our modern responsive website Great customer experience Seamlessly cross-device High performance Lower maintenance costs Perception
    20. 20. Thank you!
    21. 21. Abe Thomas :: abet@microsoft.com