6 of 10 - Embedding web content should be done with extreme caution.

6 of 10 - Embedding web content should be done with extreme caution.

  • Comments 6
  • Likes

Conventional web pages are rarely optimized to be viewed on phones. , That’s why pinch and zoom is enabled when we browse those web on phones. The ability to enlarge web content is a behavior we expect when we use a mobile browser, however when we interact with a mobile app that expectation is no longer true. So, take caution when embedding web content in your application. However, if you must do this, then follow these precautions: and lists five situations to avoid when doing it.

web_content_lg

· Text size should still be the minimum required for WP7, 15 points

· Input fields should be at the right size, tapping to enlarge them and fitting the screen is not expected by the user

· The opposite behavior should be avoided. , Content going beyond the screen could be mistakenly viewed as part of a panoramic experience instead content that should be pinched to be fitting the screen.

· The user doesn’t know if your content is pulled from a web site or is part of the app, therefore don’t assume will interact with it as if it was displayed on a web browser, pinching and zooming will be a surprise, not the expected behavior.

· Make sure links and color palette match the rest of the application. You probably don’t have blue underlined text on your app and landing on a page that does it will confuse the user and break the needed consistency.

Simply embedding existing web content without considering the above points will create a poor experience as the content will behave unexpectedly and will not be viewed properly and consistently, breaking a successful, mobile optimized experience.

- Alfred Astort
Follow the Windows Phone Design Team on Twitter: @WPdesignteam

6 Comments
You must be logged in to comment. Sign in or Join Now
  • jonemo
    7 Posts

    We are trying to do just what you recommend. For the payment section of our app we try to display an optimized website in such a way that the user doesn't necessarily notice it's a website. This would be easy if the web content wouldn't be displayed at a 16bit color depth while everything else on the phone is displayed with 24bit. Ugly banding for gradients and very poor display of some other graphical elements is the result. Why is this the case?

  • @Polhovskiy Really quick answer is that you need to set the ViewPort in your HTML. If you set the ViewPort to the width of the screen resolution, then it will render full size on the device. The long answer is very long, since you need to detect different devices, etc. Can't put all that in here but you might find some help here: 51degrees.codeplex.

  • @Polhovskiy Try create.msdn.com

    They will help you.

  • Help me please. I am using Live Login in my app, Login is in WebBrowser. When Login page is navigated it is extremly small and i need to double tap to zoom. Give me an advice, how should i realize Login with all you say?

  • @simonech If this is a serious question, then look at some examples how to do it: www.silverlightshow.net/.../Windows-Phone-7-Series-RSS-Feed-app.aspx

  • And what would the "correct" way to retrieve contents from the web?

    Imagine an RSS feed reader, should HTML be parsed and rendered as XAML?