Converting to Universal App with Zurb’s Foundation using Responsive Web Design Techniques


This article records the steps I followed to convert my mobile phone app into a Universal app good for mobile and tablet screen sizes.

Normally, on the mobile device, the user follows this navigation paradigm: screen showing article categories, tap through to show article headings (titles) for that category, then tap on the article heading to show article. For the mobile version, I want to retain this path. For the tablet version, though, I want to show the article headings at left and article detail pages at right, side by side. For both mobile and tablet, I can show the article categories on the home page as large graphical buttons. A text footer with copyright information will stretch across the bottom; this footer will not be fixed.

How do I create both navigation types without duplicating pages for both? By using responsive web design (RWD) techniques, in which the layout changes with the screen width, repositioning the content at certain “breakpoints” of screen widths. Normally, when you narrow the browser window for sites that did not implement RWD techniques, the browser will cut off the site at the right end. As a positive example of RWD, go to the Microsoft web site and narrow your browser, and you’ll see the content adapt to fit. So I want one set of files to work across several screen widths, specifically various sizes of mobile screens and tablets. 

The Zurb Foundation framework

Several RWD frameworks already exist to help us start building right away (if you have prior web design experience, of course). Zurb Foundation 3 (http://foundation.zurb.com/docs/index.php) has the coding built in for many features that my project needs. It uses a grid layout that I can adapt to my purposes (http://foundation.zurb.com/docs/grid.php), a variety of buttons (http://foundation.zurb.com/docs/buttons.php), several navigation possibilities (http://foundation.zurb.com/docs/navigation.php), and nice UI (user interface) elements (http://foundation.zurb.com/docs/elements.php). It also includes several useful Javascripts (http://foundation.zurb.com/docs/javascripts.php).

It is modular and editable, so I’ll be able to remove whatever parts I don’t need to keep the app size down. Unfortunately, it uses Jquery, which code bloat may slow down an app. However, different aspects of the framework are powered by individual Jquery js files, and we can delete fom the app all the ones we won’t be using. (I discovered to my delight that the app was fast anyway.)

For the mobile version navigation, I can show a drop-down Top Bar (http://foundation.zurb.com/docs/navigation.php) that displays the article headings. For the tablet version, those article headings will just display in full at left with Foundation’s Nav Bar. So, how do I design this to happen?

The Foundational grid can be set to automatically “stack” when displayed on smaller screens. This means I would put the navigation elements for both mobile (Top Bar) and tablet (Nav Bar) in the left grid column. I would hide the mobile top bar for wider screen widths, but show the left article headings. For mobile, I would hide the article headings, and show the top bar; since it’s mobile, the right content column would “slip” under the left column’s top bar so they become stacked. Built-in media queries will be used for this show/hide scripting (http://foundation.zurb.com/docs/media-queries.php).

Foundation is based upon a 12-column-wide imaginary layout. So if you want two equal columns on the page, you would make a row composed of two each the column called “six columns.” If you want two columns, one narrower than the other, as I do, you choose the narrow size (such as “four columns”) and the larger size (“eight columns”). The columns are delineated in percentages, so they will stretch and squash with the window size. As mentioned previously, at mobile size, the left column will stack on top of the right column.

I expect to fill the left navigation with innerHTML for a category’s listing of articles; same with the top bar. (This means that I will use Javascript to construct the links to each of the articles, and each time the top bar or left navigation bar appears, the links will show there. You’ll see code examples below.)

I won’t be explaining any more features of Foundation in depth for this article; you’ll need to go to their site to see their many examples.

What about pictures? They, too, will be displayed with innerHTML at the touch of a button in the article page (which will execute external Javascript functions to show and hide them); so they won’t automatically appear in the HTML document. This feature is not part of Foundation; I got it separately through a Sitepoint.com forum query. I did not want images to slow down the page-loading times.

Based on what I wrote above, I’ve adapted the template page as follows. (Of course, you won’t see it as intended unless you download the Foundation code first.)

Template

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />

<!– Set the viewport width to device width for mobile –>
<meta name=”viewport” content=”width=device-width” />

<title>Tempalte for pages</title>

<!– Included CSS Files (Compressed) –>
<link rel=”stylesheet” href=”../stylesheets/foundation.css”>
<link rel=”stylesheet” href=”../stylesheets/app.css”>
</head>
<body>

<div class=”row”>
<div class=”panel”>
<div class=”twelve columns”>
<h3>:: Header ::</h3>
<p>Show app info here for both versions. Code as innerHTML.</p>
</div>
</div>
</div>

<div class=”row”>
<div class=”four columns”>
<div class=”panel”>
<h3>:: Article headings ::</h3>
<p>Show top bar only for mobile; this column will stack over the other column. Code as innerHTML.</p>
<p>Show left nav for tablets. Code as innerHTML.</p>
</div>
</div>

<div class=”eight columns”>
<div class=”panel”>
<h3>:: Articles ::</h3>
<p>Show same article content for mobile and tablet.</p>
</div>
</div>
</div>

<div class=”row”>
<div class=”panel”>
<div class=”twelve columns”>
<h3>:: Footer ::</h3>
<p>Show copyright info here for both versions. Code as innerHTML.</p>
</div>
</div>
</div>

<!– Initialize JS Plugins –>
<script src=”../javascripts/app.js”></script>
<script src=”../javascripts/jquery.js”></script>

</body>
</html>

The above code successfully passed the http://validator.w3.org validation.

Footer content

I’ll start with the copyright footer. My copyright.js file in the javascripts/ directory contains:

function copyright() {
document.getElementById(‘copyright’).innerHTML = ‘Copyright &copy; 2013 by Steve Husting';
}

The footer row contains:

<span id=”copyright”></span><script>copyright();</script>

I added between the <head></head> tags:

<script src=”../javascripts/copyright.js”></script>

So when the page loads, at the <script> point, the page grabs the copyright.js file, and executes it, filling in the span tag with the content specified in the function. A quick test shows it works great. This is the same procedure I used to populate the top bar and nav list, following.

Top Bar content

Following this page, http://foundation.zurb.com/docs/navigation.php#btopCode, I constructed a rudimentary top bar as innerHTML in javascripts/topbar_category1.js as follows:

function topbar_category1() {
document.getElementById(‘topbar_category1′).innerHTML = ‘<nav class=”top-bar”>’
+'<ul>’
+'<li class=”name”><h1><a href=”#”>Category Title</a></h1></li>’
+'<li class=”toggle-topbar”><a href=”#”></a></li>’
+'</ul>’

+'<section>’
+'<ul class=”left”>’
+'<li>’
+'<a href=”../index.html” style=”background-color:#eee;”>Back</a>’
+'</li>’
+'</ul>’
+'</section>’

+'<section>’
+'<ul class=”right”>’
+'<li><a href=”#”>Article 1</a>’
+'<li><a href=”#”>Article 2</a></li>’
+'<li><a href=”#”>Article 3</a></li>’
+'</ul>’
+'</li>’
+'</ul>’
+'</li>’
+'</ul>’
+'</section>’
+'</nav>';
}

Right above the </body> tag I added the following to enable the top bar functionality:

<script src=”../javascripts/jquery.foundation.topbar.js”></script>

Between the <head></head> tags I added the following to link to the script:

<script src=”../javascripts/topbar_category1.js”></script>

When I found the top bar was not working correctly in mobile, I searched the Foundation Google group for an answer. In response, I added the following to the stylesheets/app.css file:

<style type=”text/css”>
/* styling needed to make top bar work in mobile */
.top-bar {
min-height: 45px;
margin: 0 0 30px 0;
}
</style>

I made sure that the above stylesheet was being referenced between the <head></head> tags of the template page:

<link rel=”stylesheet” href=”../stylesheets/app.css”>

None of this will work until I add the following to the left column between its <div class=”panel”> and </div> tags:

<span id=”topbar_category1″></span><script>topbar_category1();</script>

I need to go another step further and make this disappear when the screen is wider than mobile. Foundation’s media queries page made it simple. I surrounded the span’s innerHTML element with a div of class of “show-for-small” and I was done:

<div class=”show-for-small”>
<span id=”topbar_category1″></span><script>topbar_category1();</script>
</div>

Resizing the browser smaller showed the top bar above the article’s detail page, as desired. Widening the browser, the top bar disappeared, as it should.

Template Update:

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />

<!– Set the viewport width to device width for mobile –>
<meta name=”viewport” content=”width=device-width” />

<title>Template for pages</title>
<!– Included CSS Files (Compressed) –>
<link rel=”stylesheet” href=”../stylesheets/foundation.css”>
<link rel=”stylesheet” href=”../stylesheets/app.css”>
<script src=”../javascripts/copyright.js”></script>
<script src=”../javascripts/topbar_category1.js”></script>

<style type=”text/css”>

</style>

</head>

<body>
<div class=”row”>
<div class=”five columns”>
<div class=”panel”>
<h3>:: Article headings ::</h3>
<p>Show top bar only for mobile; this column will stack over the other column. Code as innerHTML.</p>
<div class=”show-for-small”>
<span id=”topbar_category1″></span><script>topbar_category1();</script>
</div>
<p>Show left nav only for tablets. Code as innerHTML.</p>
</div>
</div>

<div class=”seven columns”>
<div class=”panel”>
<h3>:: Articles ::</h3>
<p>Show same article content for mobile and tablet.</p>
</div>
</div>
</div>

<div class=”row”>
<div class=”panel”>
<div class=”twelve columns”>
<h3>:: Footer ::</h3>
<p>Show copyright info here for both versions. Code as innerHTML.</p>
<span id=”copyright”></span><script>copyright();</script>
</div>
</div>
</div>

<!– Included JS Files (Compressed) –>
<script src=”../javascripts/jquery.js”></script>

<!– Initialize JS Plugins –>
<script src=”../javascripts/app.js”></script>
<script src=”../javascripts/jquery.foundation.topbar.js”></script>

</body>
</html>

Large-screen version of article listing

With the top bar template for the mobile version finished, it’s time to work on the 2-column tablet version. I duplicated the top bar’s js file and renamed it wide_category1.js and opened it. Following the steps in the docs, I changed the content to:

function wide_category1() {
document.getElementById(‘wide_category1′).innerHTML = ‘<ul class=”nav-bar vertical”>’
+'<li style=”background-color:#eee;”><a href=”../index.html”><strong>Back</strong></a></li>’
+'<li><a href=”#”>Article 1</a></li>’
+'<li><a href=”#”>Article 2</a></li>’
+'<li><a href=”#”>Article 3</a></li>’
+'</ul>';
}

I added the following between the <head></head> tags to reference the script:

<script src=”../javascripts/wide_category1.js”></script>

Inside the left column, under the top bar lines, I put:

<div class=”hide-for-small”>
<h3>Category 1</h3>
<span id=”wide_category1″></span><script>wide_category1();</script>
</div>

It resized perfectly in the browser, the left menu appearing in its own column when the browser window was wide, and being replaced by the top bar when narrow. The only thing I did not like was the wide line-height in the links when a long article title wrapped; the line could have looked like it was another link, except for the slightly darker borders on top and bottom defining the link buttons. The tall line-height, of course, spaced the links apart, so I think there is little I could do.

I plan on copying this page over and over, giving each page the same filename as the one it’s updating so that all the internal links would still work. One could also use a database to populate these pages.

Since articles are divided into different categories, I would have as many topbar_category.js files as there are categories (same with the wide_category.js files). Of course, the same footer.js file will be shared among all files. So, from the home page, one would click on a category of articles, and that page will show the correct list of categories for the left column (or top bar), and show any article I want in the right column.

I pasted in a sample page into the right column, added the old app’s css stylesheet to the <head> tags (for this is a makeover, not from scratch), and opened it in Firefox and Google to check. As expected, the css from both sources was mixed on the page. I turned on the “Firebug” add-on and began clicking on its HTML, drilling down through the code. As I clicked on a line of code, that section was highlighted in the browser. For instance, the side menu was a div of class “panel” with a padding of 20px and a very light background color of #E6E6E6. Since there already was padding around that element from the other css, I elected to remove it from foundation.css. Firebug showed me the line number, so I was able to go to the right place in the css quickly. I also changed the background color to match it up with what I already had.

I kept going back and forth from Firebug and the two css pages to get the Foundation layout in harmony. I used Google Chrome to check for final look, because it is a Webkit browser and is closer to the final iPhone appearance and functionality.

Foundation styled the <li> tags, and the list-style-type for bullets was set to none. In my app, I used bullets in some <li> tags, and those disappeared. I went ahead and added the HTML for bullets – &bull; – to those lines needing bullets.

If you are starting from scratch, of course, you’ll style your code after you’ve put it into the column. Foundation provides default styling for many elements, and it may be too “corporate bland” for most sites, or just right for you.

In foundation.css, I deleted the lines for features I won’t be using, section by section. Don’t forget to check inside the javascripts/ folder to delete all the files you aren’t using there, too.

Testing in Android revealed plenty of speed in the app, in spite of the Jquery overhead. I had regretted using Jquery on an earlier project, so I was pleasantly surprised, and I will be using this conversion process for my other simple apps.

On the iPod touch emulator, I found that the buttons in the Top Bar  do not stretch vertically to accommodate the long titles that wrap. Instead, the long title wrap right over the text of the next button below. So for the iOS version, I was forced to shorten the wrapped titles where they appeared. Not a deal-breaker for this app.

Because this is being used for the iPhone and Android markets, to be sold in the Amazon app store and iTunes App Store, I had to make sure to include the app store link to the correct store in my Contact page. Including a link to the iPhone app store in an Amazon store app is a no-no, and vise-versa.

Also, because this is a Universal app for the Apple devices, I had to create two different screenshot sizes for the iPhone, and another for the iPad. — three screenshot sizes in all.

Template final

<!DOCTYPE html><html lang=”en”>

<head>
<meta charset=”utf-8″ />

<!– Set the viewport width to device width for mobile –>
<meta name=”viewport” content=”width=device-width” />

<title>Article Title for “General” category</title>
<link rel=”stylesheet” href=”../stylesheets/foundation.css”>
<link rel=”stylesheet” href=”../stylesheets/this-app-styles.css”>
<link rel=”stylesheet” href=”../stylesheets/app.css”>
<script src=”../javascripts/copyright.js”></script><script src=”../cordova-2.3.0.js”></script>
<script src=”../javascripts/topbar_general.js”></script> <!– for “General” category files –>
<script src=”../javascripts/wide_general.js”></script> <!– for “General” category files –>

</head>

<body>
<div class=”row”>
<div class=”four columns”>
<div class=”panel”>

<div class=”show-for-small”>
<span id=”topbar_general”></span><script>topbar_general();</script>
</div>

<div class=”hide-for-small”>
<h3>General</h3>
<span id=”wide_general”></span><script>wide_general();</script>
</div>
</div>
</div>

<div class=”eight columns”>
<div class=”panel”>
<div class=”hide-for-small”>
<br>
</div>

<!– “General” article category content goes here –>

</div>
</div>
</div>

<div class=”row”>
<div class=”panel”>
<div class=”twelve columns”>
<span id=”copyright”></span><script>copyright();</script>
</div>
</div>
</div>

<!– Included JS Files (Compressed) –>

<script src=”../javascripts/jquery.js”></script>

<!– Initialize JS Plugins –>
<script src=”../javascripts/app.js”></script>
<script src=”../javascripts/jquery.foundation.topbar.js”></script>

</body>
</html>

About these ads

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