Mobile Web App Development Template

Introduction

It was brought to my attention that I a word. This is a lesson over Mobile Web App Development to be launched from a browser on any smart phone. I’m not creating native apps here. Sorry for any confusion.

Let me preface by saying that this is not the greatest mobile app in the world, this is just a tribute.
Here’s what we’ll be building:

By no means would I expect someone to make a mobile app nearly as unpolished as this one is about to be. What we’re doing in this tutorial is setting up a development environment with the basic functionality required to create a mobile app. Here’s what we’ll be adding in:

  • Proper file structure (external CSS/Javascript)
  • Basic HTML5 template
  • Meta attribute to tell the browser this is a mobile app
  • Different sections which will hide/show via jQuery

Proper file structure

One of the most important things in coding is organization and structure. Not only for the sake if someone takes over your project, but think about if you have to re-look at a project you did 5 years ago (it happens.) You always want to be able to quickly find any piece of your code by storing different types of files in different folders that just make sense. For this example you’re going to want to set your files up like this:

  • mobile_app_template (main folder)
    • index.html (file)
    • css (folder)
      • main.css (file)
    • js (folder)
      • functions.js (file)

The HTML5 Template

When you’re building a mobile app you should be using HTML5 if you don’t need to access any of the phone’s hardware. If you do need access to things like the camera, files, etc. you should look at programming in another language for building a native app. Since we’re developing something with basic functionality, lets go ahead and set up our full HTML5 template, then we’ll step through each piece.

The final code:

<!DOCTYPE html>
<html>
  <head>
    <title>Mobile App Template</title>
    <link href='css/main.css' rel='stylesheet' type='text/stylesheet' />
  </head>
  <body>
    <header>
      <a href='#' id='logo'>Cool App</a>
      <nav>
        <ul>
          <li><a href='#home'>Home</a></li>
          <li><a href='#about'>About</a></li>
          <li><a href='#contact'>Contact</a></li>
        </ul>
      </nav>
    </header>

    <section>
      <article id='home' class='page'>
        <h1>Home</h1>
        <p>This is the home page with some content.</p>
      </article>

      <article id='about' class='page'>
        <h1>About</h1>
        <p>Some information about something.</p>
      </article>

      <article id='contact' class='page'>
        <h1>Contact</h1>
        <form>
          <label>Subject</label><br />
          <input type='text' /><br />
          <label>Message</label><br />
          <textarea></textarea><br />
          <input type='submit' value='Submit' />
        </form>
      </article>
    </section>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="js/functions.js" type="text/javascript"></script>
  </body>
</html>

First, lets look at the basic HTML5 elements.


<!DOCTYPE html>
<html>
  <head>
    <title>Mobile App Template</title>
    <link href='css/main.css' rel='stylesheet' type='text/stylesheet' />
  </head>
  <body>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="js/functions.js" type="text/javascript"></script>
  </body>
</html>

In this first part, we’re setting up our basic HTML5 elements which was overviewed in the last tutorial when we set up the responsive website: http://youtu.be/gC-b4DVJ0cM. We’ve also included external links to the CSS and Javascript files.

Note: Since this is a mobile app that will be accessed through a browser, you can load jQuery from a cdn (content delivery network.) We’re loading jQuery hosted by Google which means if the user has already visited a website that uses the same file hosted by Google (which is highly likely), then your site will load faster :) Now, if Google is down you’re SOL, but most of the world would be as well.

Next, we’ll add in the header element with a logo and navigation.

    <header>
      <a href='#' id='logo'>Cool App</a>
      <nav>
        <ul>
          <li><a href='#home'>Home</a></li>
          <li><a href='#about'>About</a></li>
          <li><a href='#contact'>Contact</a></li>
        </ul>
      </nav>
    </header>

All of the links we are adding in will include the hash tag (#) in front of the link. This will allow us to use javascript to show different sections of the mobile app instead of doing a new page load. We will also use those hash tags so the browsers back button can cycle through the pages. Since we are only using one page, the back button would typically leave the mobile app if you didn’t use the hash for browsing. I’ll explain that in more detail in another tutorial.

Adding in the content…

    <section>
      <article id='home' class='page'>
        <h1>Home</h1>
        <p>This is the home page with some content.</p>
      </article>

      <article id='about' class='page'>
        <h1>About</h1>
        <p>Some information about something.</p>
      </article>

      <article id='contact' class='page'>
        <h1>Contact</h1>
        <form>
          <label>Subject</label><br />
          <input type='text' /><br />
          <label>Message</label><br />
          <textarea></textarea><br />
          <input type='submit' value='Submit' />
        </form>
      </article>
    </section>

All of the pages are wrapped in the <section> element, giving us a way to style where the content will show. Inside of that you’ll see multiple <article<> elements with the same class of “page”, but a different id depending on what the element contains. These will serve as our three different pages. To start, all but the home page will be hidden. Then we will use javascript to show/hide the <article> elements based on which button we click in the navigation.

The CSS

Lets open up that main.css file and add a bit of style to it. Now, all of this is completely based on what you want to do with your mobile app. I’ve kept mine simple and straight forward for this example.

*{
	margin:0;
	padding:0
}

body{
	font:normal normal 12px Verdana, Arial, sans-serif
}

form input,form textarea{
	border:#000 1px solid;
	display:block;
	padding:4px 0;
	width:100%
}

form input[type=submit]{
	border-radius:5px;
	cursor:pointer;
	padding:5px 2px
}

header{
	background:#ccc;
	border-bottom:#000 1px solid;
	height:auto;
	width:100%
}

#logo{
	color:#000;
	display:block;
	font-size:28px;
	font-weight:700;
	padding:7px 0;
	text-align:center;
	text-decoration:none;
	text-shadow:0 0 1px #000;
	text-transform:uppercase
}

nav a{
	background:#fff;
	border-top:#000 1px solid;
	color:#000;
	display:block;
	padding:8px 0;
	text-align:center;
	text-decoration:none
}

nav a:hover{
	background:#eee
}

section{
	display:block;
	padding:5px 10px
}

.page{
	display:none
}

#home{
	display:block
}

I feel like everything is pretty self explanatory in the CSS. If you have a specific question, feel free to ask! The only thing I’ll point out is first I’m making any element with the “page” class hidden, then the first element I want to show I set to “display:block”. This ensures that the home page is the only element that shows first. Lets move on to writing the javascript to make this function.

The Javascript

If you’re not familiar with jQuery, it’s a framework built with javascript that makes writing javascript much, much easier. When you write javascript using jQuery, the first thing you need to do is load the jQuery library which we did here:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

After you load the jQuery library, include your javascript file

<script src="js/functions.js" type="text/javascript"></script>

Only load this file after you load jQuery. Loading your javascript before will result in an error and nothing working.

Let’s look at the javascript

$(document)
  .ready(
    function(){
      $('nav a')
        .click(
          function(){
            var page = $(this).attr('href');
            $('.page').hide();
            $(page).show();
          }
        )
    }
  );

If you’re new to jQuery, you probably just though, “Huh?”. Fear not, let me clear up what you just read…

The first thing you want to do when writing jQuery is tell the page to wait until everything has loaded. Obviously for this example it won’t take too long, but for larger web applications it can take a noticeable few seconds for a page to load fully.

Lets say for example you wanted to use jQuery to make a page spin around in circles when a button is clicked. If your jQuery loads before your button loads on the page, when you hit that button nothing will happen. If jQuery loads first, it will be like, “Dude, where’s that button? Oh, well.”. That’s where this first part comes into play:

$(document)
  .ready(
    function(){
    }
  );

We’re basically saying, “Hey jQuery! Wait for the document to get ready before you load.”. The document is your HTML page in case you were wondering.

So, our document loaded, now what?

Lets set up our one and only function…

$('nav a')
        .click(
          function(){
            var page = $(this).attr('href');
            $('.page').hide();
            $(page).show();
          }
        )

We want to look and see when the user clicks a navigation link. In jQuery to denote that you’re using actual jQuery code (instead of another library or straight javascript) you start with the “$.”. That tells jQuery that you’re ready for it’s magic to start.

After that you put what element you want to affect. In this case we are drilling down to the anchor element inside of the nav element, making it look like this: “(‘nav a’)”.

We want something to happen when the user clicks one of those links so we check for a “click”, then run a function. That’s where this comes into play: “.click(function(){})”.

Breaking down what happens in the function.

            var page = $(this).attr('href');
            $('.page').hide();
            $(page).show();

Line 1: Storing the “href” attribute from that specific link in a variable. This is going to be the hash tag and section name we’ll want to go to. ie: “#home”,”#about”,etc.

Line 2: Telling all the elements with the class of “page” to hide. We aren’t removing them from the HTML, rather just making them not visible. This is the same as setting the CSS to “display:none”.

Line 3: Using that “page” variable that we set to show the specific page we want to see. This is the same as setting the CSS to “display:block”.

Wrapping it up

When you put everything together and open the index.html in your browser you should get a decent looking web app. Now, if you’re like me and want to see what it looks like on your phone you can either set up hosting somewhere and play with the file that way, or check out Adobe Edge Inspect. I’ll do a whole tutorial on that one of these days and how to set up a good work environment with Edge.

If you’re not ready to do that quite yet, in the meantime check out this demo of what we just wrote: http://blog.smple.com/sample_files/mobile_app_template/nope/. Although it looks fine in full browser, open it on a mobile phone and note that everything is tiny.

This brings us to the final issue.

PCs display at 72dpi (dots per inch) no matter how large the resolution might be. Phones however are starting to pack in more dpi to get a clearer and more vibrant picture. This causes an issue with how normal websites developed for the web at 72dpi are displayed on phones. A simple fix is here to help though. Right below your <title> tag, add the following:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Basically, this means that no matter what device you’re looking at this on, it will only show pixel for pixel what you developed. Your mobile browser isn’t going to try to scale this like it was a full website. Nice, huh? Check out the updated example: http://blog.smple.com/sample_files/mobile_app_template/yep/

The End

There’s a lot more we could pack in with learning mobile development, especially when you start getting into programming languages and making a truly interactive app, but we’ll call this a good start. Up next we’ll create a login form and use the hash tags from the navigation so we can cycle through the browsers history. In the meantime, if you have any questions feel free to post below!

Category: General, HTML5, Mobile Apps Comment »


Leave a Reply



Back to top