Dynamic Layout Guidance

While the layout of the screen can change on the phone due to orientation changes (ie: landscape vs. portrait), the scenario that will be covered below focuses on bigger screen apps for Windows 8.1+

Some things to consider:

• What will the navigation menu look like when the width of the app is at 500px?
• Does it make sense for the app to go down to 320px?
• Which UI elements are less critical at the smaller widths?

CSS

If the website being wrapped isn't responsive, chances are that it won't gracefully reflow down to 500px (the default partial view width for Windows 8.1) - in order to handle this, we'll need to add some media queries to the CSS being injected into the site.

Consider adding a few different widths that are appropriate for the type of site structure you're working with. A good starting point is to at least handle the 500px scenario (in practice you'll probably need to start removing items earlier) and consider hiding some elements around the 850px mark also.

In app.css, this would look like:

@media screen and (max-width: 850px) {
    //hide things/resize things, ie:
    //.search-icon {
    //    display: none;
    //}
    //
    //#logo {
    //    width: 200px;
    //}
}

@media screen and (max-width: 500px) {
    //hide things/resize things, ie:
    //.search-icon {
    //    display: none;
    //}
    //#logo {
    //    display: none;
    //}

}

Keep in mind that as every website uses different styles and element ids, you'll need to spend some time in the developer tools inspecting the structure of the website to find the appropriate classes and ids to manipulate.