Delivering Rich Mobile Web Experiences in Windows Phone 7.5 (ESPN.com Case Study)

Delivering Rich Mobile Web Experiences in Windows Phone 7.5 (ESPN.com Case Study)

  • Comments 9
  • Likes

The Windows Phone Browser team has a goal of delivering the best web browsing experience on a smartphone. This goal has many components within our team: from the UI of the browser, compatibility with a wide array of website layouts, and of course buttery-smooth rendering performance. However, even if we execute flawlessly on our end, we are missing a crucial piece - delivering a great web experience is fundamentally a partnership between our team and web developers. Achieving this goal means working together to ensure that your content and services are delightful for users to consume on Windows Phone.

We understand that web development resources are always limited as you keep up with the increasing traffic from mobile devices, and the elusive "write once, run everywhere" promise of web development has not perfectly materialized. However, with IE9 for Windows Phone 7.5, we took a big step in the direction of this promise. By sharing a codebase with IE9 for the PC, we achieved identical support for new web standards and pushed the envelope on real-world performance with industry-leading hardware acceleration. We wanted to hear about developing for IE9 on WP7.5 from web developers directly, so we decided to collect some feedback and share it on the blog.

ESPN.com recently deployed their premium web experience to Windows Phone, and we thought it would be great to hear what they had to say about developing for IE9 on Windows Phone. As a side note, ESPN started looking into supporting Windows Phone because of a simple request I made on their support page. Lots of folks on my team are sports fans and were asking me about the site's experience on WP7.5, so I just dropped ESPN a note like any user would. The message was quickly routed to the mobile site team; I have immense respect for ESPN’s responsiveness and the system they have place to address user feedback. Here's what Mike Marrone, technical lead, had to say about developing for IE9 on WP7.5:

Overall, it was an easy process. We support only WP7.5 and IE9 thanks to its very good CSS3/HTML5 support. We are in a convenient position of having an existing legacy mobile site that older devices can fallback to. Honestly, development for WP7.5 boiled down to a fairly basic process - IE9 on the PC, being nearly the same browser, was a great dev tool to get most of the way there before final QA on actual devices.

Some other more specific development notes:

  • The "display: box" CSS style is not supported on WP7.5. We use this in carousel experiences to transition elements left or right 100% of the viewport without having to programmatically determine the viewport size (which means the browser automatically updates the positioning upon device rotation, etc.). On WP7.5, we actually used a better alternative thanks to it being the only browser that currently supports the CSS "vw" unit (VERY useful).
    [Amin] See here and here for more information on vw units.
  • The bulk of our CSS differences between WP7.5 and other supported devices was with gradients. WP7.5 has an easy fallback with filters so it was not a big development issue.
    [Amin] See here for information on using Gradient Filters in IE9.
  • JavaScript touch events would be a nice addition.
    [Amin] We hear you, stay tuned!

We look forward to your continued great progress in mobile.

As you can imagine, this was music to our ears! We often use IE on the PC to investigate bugs, and it was great to hear that the tools work well for web development outside of our offices too. We appreciate the feedback (it will inform our plans for future releases) and welcome additional feedback through the comments below.

IE9 on Windows Phone is set up to support rich web experiences with great performance, and often all it takes is updating user-agent logic and using standards based (as opposed to vendor prefixed) HTML & CSS. ESPN invested a reasonable level of resources to do that and delivered a delightful experience to its users. I've definitely started to see the site pinned to Start around here, and I wouldn't be surprised if our senior managers are secretly checking ESPN during meetings.

Here's a before (left) and after (right) screenshot of the ESPN.com experience on Windows Phone 7.5. We want to say thanks to ESPN, and we look forward to seeing more rich experiences light up!

image     image

Special thanks to Krys Krycinski, Mike Marrone, and James Ballow at ESPN.

Amin Lakhani
Program Manager, Windows Phone

9 Comments
You must be logged in to comment. Sign in or Join Now
  • So if I said, "Don't try to make out with me," or "Don't make out with me right now," girls are going to be consciously hearing, "Don't make out with me," but their subconscious minds will be hearing, "Make out with me right now!" Tao of Badass www.thetaoofbadass-reviews.com

    You're attempting to sort of use real-life Inception to get making-out with you to be HER idea. She should be thinking, "I should make out with this guy."

  • hi, could you pls. give me some training PPT about IE mobile on windowsphone? thanks a lot

  • can any one please tell me the standards of windows phone 7.5 i think there is much more to learn

  • dch16
    1 Posts

    can we get an ESPN3 app for windows phone? They have it for iPhone and Android, and I would love to be able to stream video to my Windows phone!

  • did you know microsoft on 4 of april 2012 you commites GRAND THEFT on my bank account

    i have cancled my xboxlive by 15 febuar 2012 , but still you whent in and draw the dollars from my bank account

    and you will not pay back ad first

    then i talk to your support and then after one week and a dosent calls you payid back

    but not the right amount, wicth came one week later

    we have talk with some law man on this , and we we have a case

    course in 2010 i took your offer of buying 2000 points for my xbox live and get 1000 point for free

    but sens you have block me from your service sens 1 aguest 2011 , include apphub , azure, rent movies,buy games on my phone and xbox 360

    and now you refuse to pay out my point , wicth i can never use on your service

    so we have a case,,

    checkmate frinds

    we are taking this to european union to get a BAND ON YOUR SERVICE FOR ALL OF EUOPA

    INCLUDE UPCOMMING WINDOWS 8 SERVICE WICTH IS BASED ON YOUR LIVE SERVICE

    we whant to find out how manny people are effected by this

    we have mail from allover the world , that people have the same problems

    and you refuse to pay out the dollars people have put in , but can NOT USE

    Consumer rights on products

    so it will take about 4 month for this to role, and get from 3 major law firm FREE PROCESS

    happy Windows 8 launch and future service in EUOPA

    here is a nothere dice roller

    wmpoweruser.com/nokia-declares-investor-lawsuit-without-merit

    I WHANT MY RANK BACK, YOU DO NOT EVER STEAL GAME POINT FROM A GAME

    YOU DO NOT EVER BLOCK GAME DEVELOPERMENT FOR VARIUS PEOPLE AGAIN

    WITH THE SYSTEM YOU HAVE PUT IN PLACE , AND DISCRIMINATION AND SMALL FIRMS

    IN THE CURRENT FORM YOUR MARKETPLACE HAS NOW, BY PLACING YOUR OWN STUFF

    ALLWAYS IN FRONT OF EVERYTHINK ,, ALLSO A NICE MOVE 7.0 VERSION THERE WAS A SEARCH ON THE MARKETPLACE FOR GAMES , AND IN 7.5 REMOVED WE CAN NOT FIND ANY THINK BUT YOUR INHOUSE MADE GAMES

    Michael Hansen

    The spring is here

  • I'm glad someone's having an easy time of it. Some of our apps use embedded Google maps and pan and zoom are broken because the gestures are captured so the map code never sees them. If you pinch-zoom or swipe, the whole browser is scaled or translated. This may well be reasonable default behaviour but it would be wonderful to be able to instruct the browser to pass the gestures through and let the web app process them.

    The response to this will almost certainly be some polite waffle about why your way is the best, so let me spell it out for you: web apps that work on an iPhone are conspicuously broken on WP7. There's a cheap fix (a meta tag to switch the behaviour) so it would be crazy not to fix it.

  • jschroedl
    24 Posts

    Much nicer! Now, get those guys on board to make some wp7 apps to actually watch games.. not just the wimpy scoreboard app we have now.

  • IE9 mobile is fast and nice.. but webkit still has the mobile market dominated. What are you guys doing about that?

  • DjiXas
    46 Posts

    When will you release Tango? You said APRIL!!!

    Or at least confirm rumors that it's early June now... It has RTMed like 2 months ago... There is really no reason not to publish it for the unbranded phones, just because carriers suck, doesn't mean that others have to suffer.