Mobile Widgets – Dynamic Layout Example

This is the third post in our on-going series on Mobile Widget development. The first two can be found here:

Mobile Widgets – Persistence Cross-Platform Wrapper
Mobile Widgets – a primer

Over the past few weeks we’ve seen many developers gravitate towards using Position: fixed in their CSS to pin their widget’s header and footer to the top and bottom of the screen respectively. Although this method does work, it’s not the best, nor do all mobile rendering engines support it. There also seems to be a performance issue with regards to rendering. Scrolling content will often make the header and the footer flicker (very visible on the Nexus One using the new Vodafone Widget Manager).

In this article, I would like to present a different approach to solving the same problem. This approach will attempt to also solve the following:

  • Allow for dynamic resizing when switching between portrait and landscape modes
  • Render properly on different screen sizes
  • Render properly on screen sizes with different PPI (Pixel Per Inch) densities (supported, but not shown here. You’ll need to use CSS media queries)

This layout should work for JIL Widgets, Opera Widgets, as well as plain old HTML5 mobile websites.

Let’s get to it!

Shortcut

In case you’d rather just get the code and skip the explanation below. Here’s a link to our public github repository, followed by a direct link to this sample widet:

Repo: http://github.com/tinyhippos/MobileWidgets

The sample widget: http://github.com/tinyhippos/MobileWidgets/tree/master/sampleWidgets/HeaderFooterLayout/

The Goal

Since a picture is worth a thousand words, here’s what our end goal is:

The idea is to have this layout no matter what orientation we’re on or what device we are on.

The HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Header Footer Sample Layout Widget</title>
        <link rel="stylesheet" type="text/css" href="css/layout.css"/>

    </head>
    <body>

    <div id="layout">
        <div class="header">
            <div class="header-text">
                Header
            </div>
        </div>

        <div id="containerWrapper">
            <div id="container">
                Your content goes here...<br/><br/>
                And will grow vertically (with scrolling) as needed.
            </div>
        </div>

        <div class="footer">
            <div class="footer-text">
                Footer
            </div>
        </div>

    </div>

    </body>
</html>

The CSS

/*
* Global resets
*/
html, body{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

/*
* Main Layout
*/
#layout{
    background-color: #FFFFFF;
    color: #000000;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#container{
    padding: 1em;
    text-align: center;
    background-color: #FFFFFF;
}

#containerWrapper{
    height: 80%;
    background-color: #DDDDDD;
    overflow: auto;
}

/*
* Header
*/
.header{
    background-color: #444444;
    color: #FFFFFF;
    height: 10%;
    position: relative;
}

.header-text{
    padding-top: .2em;
    text-align: center;
}

/*
* Footer
*/
.footer{
    background-color: #444444;
    color: #FFFFFF;
    height: 10%;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.footer-text{
    padding-top: .2em;
    text-align: center;
}

So what does it look like?

I’ve tested this layout in both the Ripple Mobile Environment Emulator as well as on Perfecto Mobile. Here are some screen shots of the results: (please excuse the quality of the Samsung screen shot, the camera on Perfecto wasn’t cooperating)

On Ripple:

On Perfecto Mobile:

Future Enhancements?

This article is meant to provide a very simple framework upon which you can build dynamically scaling mobile widgets. A few considerations and possible enhancements:

  • Use CSS media queries to deal with different PPI densities. So that the font shows up roughly the same size event on high res screens.
  • Use em to size your fonts rather then px, they scale better. Also, have a look at this handy em calculator, it’s a life saver
  • You can add some JavaScript to better figure out the height of the header and footer. The header and footer will shrink in size when switching to landscape mode. However that can be addressed with a little math. Might even be able to do it using CSS media queries

If you’d like me to enhance this article to include the above or if you have any other suggestions / comments, please leave a comment with your thoughts.

Happy coding!

About these ads

6 Responses

  1. Hi all,
    I tried this standard layout on the Samsung M1 and it seems to have some problems when scroll is needed. It happens when the content is too long and the page requires the scrool bar: the behavior is very strange because the header and the footer are “overwrite” by the layout div, they become white (or the color of the #layout’s background-color property).
    It works perfectly on other devices, like h1 or nokia 5230 in JIL widget and in all browsers (ie8, firefox, chrome).
    Has anyone ever tryed it on the samsung m1 and noticed this strange behaviour?
    Thanks and regards.

    • Hi Alex,

      My apologies for the late reply. Thank you for the note, I will look at this ASAP and see if I can solve the problem.

      Best regards,

      Dan.

    • Hey Alex,

      Thanks for the comment. We checked it out and the scrolling issues seem to plague various mobile browsers. :-( I wondered if those issues could be the cause of the strange behaviour you mentioned as well. We plan on doing some more testing on the M1 specifically.

      For the scrolling issues I tested this widget’s css on Android 2.2′s default browser and the content that should in theory scroll, does not. The only way content seems to scroll properly (on Android at least) is to scroll off the body.

      For example in the HeaderFooterLayout css you need to remove the “overflow: hidden” from #layout (seen here http://bit.ly/cByuIi) and also set the .footer and .header heights to an absolute value instead of a relative one (i.e. px not %). http://bit.ly/9SyhHp and http://bit.ly/acqNK1.

      Unfortunately this leaves the Footer at the bottom of the scrolling content as the central content pushes it down. We plan to keep hacking away at it to get to a more holistic solution.

      We were looking here for a reference: http://www.quirksmode.org/webkit.html

      Cheers,

  2. Hi guys,
    Carmelo from Jil forum :)

    I’ve downloaded your source code and added some simple Css media query to support all nokia low and medium resolution devices.
    I tested in all my Nokia mobiles,the code to add is below:

    /*
    * Added Media-Query support for Low resolution Nokia (I.E N95,E65…)
    */
    @media all and (min-resolution: 96dpi) {

    /* Here you can specify your own classes and attributes */
    body, html {
    font-size: 1.0em;
    }
    }

    /*
    * Added Media-Query support for Medium resolution Nokia (I.E N97,Nokia 5800…)
    */
    @media all and (min-resolution: 200dpi) {

    /* Here you can specify your own classes and attributes */
    body, html {
    font-size: 1.25em;
    }
    }

    If we add also media query for other devices, i think it should be a nice canonical base from where to start a nice cross-platform framework.

    Cheers and have a good work
    Carmelo

    • Hi Carmelo,

      Thank you for your work and contribution. I have merged your changes in and pushed them to the public repo for all to see. I agree, this is definitely something we want to keep growing. Providing a simple framework for developers to use when starting a new widget project.

      I think I will do some more work on the headers and footers to make give better sizing options when switching between Portrait and Landscape modes.

      From there we’ll introduce some handy JS libs, like MVC style navigation and such.

      Thanks again for your contribution :-)

      • Hi Dan,
        It’s a pleasure :) next days i gonna test also media query for Samsung H1/M1, and i gonna share it with the community.

        Cheers
        Carmelo.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: