A while back I was working with a partner who asked what it would take to convert their web app (in HTML5 & CSS) into a great Windows Store app. This wasn’t a question of a minimal approach to just get it to work, but of making a really good app while still minimizing the work. I put together the following list of priorities with some general estimates of the amount of dev work involved. I figured this might be a helpful list for other developers.

For further inspiration, also check out the Website to apps topic in the design inspiration section of the Windows Developer Center.

Necessities:

  • Has to meet Store policies, which is some of what drives this list. (1-3 days) Key considerations:
    • 3.5: touch interaction must have visual feedback (meaning proper animations)
    • 3.6: handling view states and process management
    • 3.9: disallowing remote script
    • 4.1/4.1.1: privacy statement
    • 4.1.2: opt in for use of personal information
    • 4.5 Network cost awareness (especially for any large transfers) (.5-2 days)
    • 5.1 and 6.2: content and age rating
  • Explore a horizontally-oriented design (though vertical can be done especially with the Windows 8.1 ListView). (1-3 day design; dev is variable depending on the design and where you’re starting from)
  • View states: handle portrait, snapped, filled along with landscape. (2-3 days for design, implementation, testing) [For Windows 8.1 this means handling variable sizing rather than view states]
  • Handles resolution scales well, both display sizes and pixel scaling. (1-2 days)
  • Must run within the app container security boundary, which excludes remote script and script injection. (1 day to check; possibly more if things need to be rewritten)
  • Works with mouse, keyboard, and touch input, the latter of which means that touch targets need to be the right size. (.5 day design; 1-2 days dev)
  • Move chrome/commands off-canvas, generally (2 days design; 3-5 days dev)
    • Search to Search charm
    • Sharing functions to share source, though you may retain what you have as it’s integral to the experience
    • Settings to Settings charm including logins and profile management
    • Other commands and navigation to app bars
  • Handling suspend/terminate/restart and suspend/resume. (1 day)
  • Migrate from page navigation based on <a href> to single host page with DOM replacement (using page controls) (1-4 days depending on how you’re doing it now)
  • Great splash screen and branding graphics (1 day design mostly; .25 days dev)

Nice to Do:

  • Handling network connectivity or lack thereof (caching strategy/offline story) (2-4 days dev)
  • Live tiles: what can you surface on the tile? (1 day design; 2 days dev)
  • Roaming experience—what settings transfer to the user’s other devices? (1 day dev)
  • Globalization (making a world-ready, language-neutral app) (2 days dev)
  • Localization (1 day testing with pseudo-language; each language is likely an hour or less but needs to include time spent )
  • Accessibility (2 days)
  • Good use of progress indicators when transitioning pages. (.5 days design, .5 days dev)
  • Honing performance especially if using collection controls. (2-4 days day dev depending on goals)

 


One Comment

  1. Posted August 21, 2013 at 9:58 am | Permalink

    This is very useful, actually I think it’s application is broader that just for converting a web app. With a little tweaking it makes a good list of priority areas when converting/creating a Windows 8 app. It’s those key areas of app development that Windows 8 brings to the party at that will be new to devs and need specific attention.

3 Trackbacks

  1. [...] Tips on converting a website to a full-featured app (Kraig Brockschmidt) [...]

  2. [...] Tips on converting a website to a full-featured app (Kraig Brockschmidt) [...]

  3. [...] /* 0) { ratingctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating = result['Rating']; SetCurrentRating('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_pnlHolder', result['Rating'], "disabled fullStar", "disabled emptyStar", true); if(votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating!=null) { votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating ++; SetVotesCount('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_lblUsersRated', '(' + votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating + ' votes)'); } SetRatingCookie('r', 'i34324', '1'); } else if (result['Status'] == 1) { alert('The session has expired. Please refresh the page to be able to vote!'); } } /* ]]> */ (0 votes) 0 comments   /   posted by Silverlight Show on Aug 21, 2013 Tags:   windows-store , kraig-brockschmidt Read original post at Kraig Brockschmidt's Blog [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>