Designing an App Cloud template for portrait and landscape modes

Designing a tablet UI often means making two different UIs: one for portrait mode and one for landscape mode. But it's easier than it sounds—and you can do it entirely with CSS.

Let's say you want to display a list of videos in two different ways: as a top-down list in portrait mode and as a grid in landscape mode. First, start with some CSS that applies to both portrait and landscape modes:

ul.results li {
    ...
}

ul.results li .thumbnail {
    ...
}

ul.results li .content {
    ...
}

Then add some overriding styles for landscape mode using CSS3 Media Queries. For example, change the display type to "inline-block" and set an explicit width and height on each list item:

@media all and (orientation: landscape) {
    ul.results li {
        display: inline-block;
        vertical-align: top;
        width: 23%;
        height: 185px;
        border-right: 1px solid #333;
        ...
    }
}

Check out the working demo on GitHub. It uses Media Queries and the Flexible Box Model to make the template adapt to portrait and landscape modes on both phones and tablets. That's four layouts for the price of one!

p.s. Get more tips and tricks (and share your own) by joining the Brightcove App Cloud discussion group on Google.