Posts Tagged ‘web app’

Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

In our earlier jQuery Mobile tutorial I had introduced much of the underlying framework and how to go about setting up your first website. The JS library is both lightweight and easy to pickup in regards to learning difficulty. There is also generic a CSS stylesheet included with the files so you can further customize the elements in your layout.

jquery mobile custom themes Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

For this second segment I’d like to spend a bit of time delving deeper into this idea of jQuery Mobile themes. The entire design industry has been revolutionized by jQM and the process of constructing a mobile template from scratch has been significantly improved. jQuery Mobile isn’t just a scripting library, but an entire ground framework to build upon and produce efficient mobile templates.

Default Stylesheet Contents

I should begin by clarifying exactly what type of CSS code is included with the default files. The stylesheet from jQM 1.0 has been split into two main segments – structure and themes.

The structure code is the stuff you can mostly ignore. This is used to set margins, padding, height/width, font variants, along with many other browser defaults. The internal themes are then split up from A-E which each control different visual effects in your design. This can include background colors, gradients, drop shadows, etc.

Each of these inner theme elements can also be referred to as swatches. When you build a mobile template you’ll generally stick with a single theme. But in almost every scenario the design can be improved upon with differing color schemes. The default stylesheet only includes swatches A-E but you can build swatches F-Z to add another 21 alternatives into your theme library. Just to clarify these terms again a theme is considered 1 single CSS file which can include up to 26 different swatches labeled A-Z.

Switching Styles

If you don’t choose to specify any swatches then jQuery Mobile will stick to the swatch A by default. If you weren’t already aware the jQuery Mobile docs utilize HTML5 data attributes for many internal functions. One of these includes changing swatches via the data-theme attribute. Check out my code example below to see what I mean.

<div data-role="page" id="mypage" data-theme="b">
  <div data-role="header">
    <h1>Default jQM Page</h1>
  </div>
  <div data-role="content">
    <p>Here is some internal content.</p>
    </div>
</div>

Notice that I placed the data-theme attribute on the root page div. This means the new swatch color will effect everything inside which includes both the header and content areas. I could additionally include data-theme="c" into the header div to change only that content from the rest of my page.

Components of a Swatch

It should be fairly straightforward how to implement these different swatches within a single layout. So now let’s take a look at the jQM CSS code so we can break down individual components of a swatch. Check out the latest jQuery Mobile 1.0 CSS file hosted on their own CDN.

You should notice how each swatch is separated by a distinct comment and each of the internal classes ends with the appropriate lettering. For example .ui-bar-a and .ui-body-a are applied into the header/footer bars and content areas by default. Most properties are implementing a reset on font and link colors, background gradients, and other small details. I included simply the ui-bar-a codes to give you an idea of which elements we target.

/* A
---------------------------------------------------------------------------------------------*/
.ui-bar-a {
	border: 1px solid #2A2A2A;
	background: #111111;
	color: #ffffff;
	font-weight: bold;
	text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px #000000;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(#3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(#3c3c3c, #111); /* FF3.6 */
	background-image:     -ms-linear-gradient(#3c3c3c, #111); /* IE10 */
	background-image:      -o-linear-gradient(#3c3c3c, #111); /* Opera 11.10+ */
	background-image:         linear-gradient(#3c3c3c, #111);
}
.ui-bar-a,
.ui-bar-a input,
.ui-bar-a select,
.ui-bar-a textarea,
.ui-bar-a button {
	font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-a .ui-link-inherit {
	color: #fff;
}

.ui-bar-a .ui-link {
	color: #7cc4e7 /*{a-bar-link-color}*/;
	font-weight: bold;
}

.ui-bar-a .ui-link:hover {
	color: #2489CE /*{a-bar-link-hover}*/;
}

.ui-bar-a .ui-link:active {
	color: #2489CE /*{a-bar-link-active}*/;
}

.ui-bar-a .ui-link:visited {
    color: #2489CE /*{a-bar-link-visited}*/;
}

If you’re just looking to create a custom swatch I recommend basing the template off one of the originals. The process will go a whole lot smoother if you start writing codes in a new CSS document. You won’t have the hassle of editing in the original file and you can start off working on a clean slate. But the key areas you want to focus on will include the following:

  • header and footer bars
  • body content & page text
  • list styles
  • button states default/hover/active
  • form input controls(extra)

Coding a New Bar Design

From the same CSS file we looked at earlier copy/paste all the swatch A code(lines 12-150) into a new file. We can use the swatch name G to implement these new styles. Now after copying the code you want to rename each class instance ending in -a to -g, as this is how jQuery Mobile will recognize which styles to use.

I’d like to start by redesigning the header bar bg to mimic a more familiar iOS gradient. This can be done solely within the .ui-bar-g selector. We want to edit the background and background-image properties to change up the gradient effects. Check out my code below and a demo screen of the new gradient.

.ui-bar-g {
	border: 1px solid #2d3033 /*{a-bar-border}*/;
	border-left: 0px;
	border-right: 0px;
	background: #6d83a1;
	color: #fff /*{a-bar-color}*/;
	font-weight: bold;
	text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #3e4957;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4bfce), color-stop(0.5, #899cb3), color-stop(0.505, #7e94b0), to(#6d83a1));
	background-image: -webkit-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* IE10 */
	background-image:      -o-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1);
}

blue ios jquery mobile gradient Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

I’m using the blue color scheme found in most default iOS applications. My background is initially set to a solid color for devices which can’t render CSS3 gradients. Then below I’m using color stops around the 50% marker to recreate the traditional Apple-style glossy shine effect. Also inside the same selector I’ve slightly modified the text shadow with a more subtle color and range.

Buttons and Text Effects

It’s important when coding swatches to consider specifically which areas of the interface need attention. The header bar looks great with this new background, but one last modification I’d like to make will match the button styles closer to that of iOS apps.

.ui-btn-up-g {
	border: 1px solid #375073;
	background: #4a6c9b;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #40536d;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89a0be), color-stop(0.5, #5877a2), color-stop(0.505, #476999), to(#4a6c9b));
	background-image: -webkit-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* IE10 */
	background-image:      -o-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

.ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.ui-btn-hover-g {
	border: 1px solid #1b49a5;
	background: #2463de;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #40536d;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#779be9), color-stop(0.5, #376fe0), color-stop(0.505, #2260dd), to(#2463de));
	background-image: -webkit-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* IE10 */
	background-image:      -o-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

jqm topbar with buttons Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

The code area we’re editing now is within the UI button classes. There are 3 different modes to be concerned with: .ui-btn-up-g, .ui-btn-hover-g, and .ui-btn-down-g. I’m mostly focusing on the standard(btn-up) and hover(btn-hover) effects by editing the box shadow and linear gradients. Also I expanded the rounded corners effect so the buttons appear more rectangular.

Because of this I’ve needed to remove the inner border radius from a class titled .ui-btn-inner. This class gets attached onto a span element within each anchor link in your header bar. Without resetting the border radius properties you’ll notice small glitches in the design whenever you hover over a button. As you spend more time coding in jQuery Mobile themes you’ll memorize these little nuances for future projects.

Introduction to ThemeRoller

If you enjoy getting your hands dirty in code then I highly recommend sticking to custom edits. Not only do you have more control but it’s a lot easier to debug issues within the CSS if you made all the edits yourself. But for many designers this process is tiresome and will simply take longer than necessary. Luckily the jQuery Mobile team has released an online editor under the name ThemeRoller.

jquery themeroller Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

From this page you have access to edit the first 3 A-C swatches or even create one of your own. If you look in the left sidebar you can switch between these 3 settings or quickly make changes to the global theme options. These include CSS properties such as border radii, box shadows, or default page fonts. Notice as you select any of the preset swatches that we can edit only the same areas as before – top/bottom bars, body content, and the 3 button states.

adobe kuler Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

But my favorite feature has to be the direct access to Adobe Kuler swatches. You can actually create a few color schemes within your Kuler account and import them into ThemeRoller. The interface supports drag-and-drop functionality so it’s real simple to try out a few different ideas in a matter of minutes.

Ultimately there is no absolute method of properly building your jQM swatches. Some designers prefer to hard code CSS while others will love the intuitive ThemeRoller web app. As long as you’re following the class structure then you should get the same results either way. If you want to read up a bit on ThemeRoller check out this featured jQuery Mobile blog post regarding their newest web tool and its many features.

Helpful Resources

Mobile Design Showcase

What better way to wrap up our guide to jQuery Mobile themes than with a small inspiration showcase? Hundreds of web designers have submitted their themes into the jQM Gallery with some notable success. Check out these astounding mobile templates below which will hopefully stir up your own creative ambitions. And be sure to let us know your thoughts or questions in the post discussion area.

Thumbpark

01 thumbpark Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Elfster

02 elfster Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Let’s GO! Gorizia

03 lets go gorizia Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Woos.at

04 woost Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

iFilmtipset

05 ifilm tipset Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

BAMM.TV

06 bammtv Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Untappd

07 untappd Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

IOUMate

08 ioumate Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Disney Dream Portraits

09 disney dream portraits Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Cookpad

10 cookpad Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Dailymotion

11 dailymotion Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

American Century

12 american century Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Travel Wisconsin

13 travel wisconsin Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Tuscan Maremma

14 tuscan antico casale Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

My Shopping List

15 shopping list Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

twwit

16 twwit Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Take Me Fishing

17 take me fishing Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Lawline Mobile

18 lawline Building Websites and Browser Apps with jQuery Mobile: Designing Custom Themes

Building Websites and Browser Apps with jQuery Mobile: A Beginner’s Guide

Over the past 2-3 years we’ve seen a tremendous growth in browser and OS support for mobile websites. Most notably Apple’s iOS and Google’s Android platforms come to mind. But others such as PalmOS and Blackberry are still in the mix. Up until recently it was very difficult to match a single mobile theme into all of these platforms.

jquery mobile Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

JavaScript was a start, but there hasn’t been any truly unified library until now. jQuery Mobile takes all the best features of jQuery and ports them over to a mobile-based web source. The library is more like a framework which includes animations, transition effects, and automatic CSS styles for basic HTML elements. In this guide I hope to introduce the platform in a way that you can feel comfortable designing your own jQuery mobile apps.

Features & OS Support

The reason I suggest learning jQuery Mobile over any other frameworks is simplicity. The code was built on the jQuery core and has an active team of developers writing scripts and editing bugs. Of the many features include HTML5 support, Ajax-powered navigation links, and touch/swipe event handlers.

jquery mobile support Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

Support is varying between phones and is broken into a chart of 3 categories from A-C. A is the top tier which boasts full support of jQuery Mobile, B has everything except Ajax while C is basic HTML with little-to-no JavaScript. Luckily most of the popular operating systems are fully supported – I added a list below of just a few examples.

  • Apple iOS 3-5
  • Android 2.1, 2.2, 2.3
  • Windows Phone 7
  • Blackberry 6.0, Blackberry 7
  • Palm WebOS 1.4-2.0, 3.0

If you want to learn more try reading up on their official docs page. It’s not written in gibberish and actually feels very easy to follow along. Now let’s focus on the basics of writing a jQuery mobile page and how we can build a small application!

The Standard HTML Template

To get your first mobile app working there is a set template you should start with. This includes the jQuery base code along with the mobile JS and CSS, all external hosted from the jQuery CDN. Check out my example code below.

<!DOCTYPE html>
<html>
	<head>
	<title>Basic mobile app</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body> 

</body>
</html>

The only foreign elements here should be the two meta tags. The top viewport tag updates mobile browsers to use a full zoom effect. Setting the value width=device-width will set the page width at exactly the width of the phone screen. And best of all it doesn’t disable the zoom features since jQuery Mobile can adapt to shifting layouts.

The next meta tag X-UA-Compatible just forces Internet Explorer to render the HTML in it’s most recent iteration. Older browsers and especially mobile will try to get around unfamiliar rendering bugs.

Constructing the Body Content

Now this is where jQuery mobile can get tricky. Each HTML page isn’t necessarily 1 page on the mobile site. The framework makes use of HTML5′s data attributes, which you can create at a whim by appending data- beforehand. In a similar fashion data-role="page" can be set to multiple divs in a single HTML file, giving you more than one page.

You would then move between these pages with anchor links and a unique ID. This setup is a good idea for basic, simple apps. If you only need 3-5 pages then why not store it all in a single file? Unless you have a lot of written content, in which case try using PHP includes to save time.

Check the code example below if you’re lost.

<body>
<div data-role="page" id="index">
	<header data-role="header">
		<h1>Top title bar</h1>
	</header>

	<div data-role="content">
		<h3>Show another page??</h3>
		<p>hint: click the button below!</p>
		<p><a href="#about" data-role="button" data-theme="c">About us</a></p>
	</div>

	<footer data-role="footer">
		<h2>&copy; footer here.</h2>
	</footer>
</div>

<div data-role="page" id="about">
	<header data-role="header">
		<h1>Page 2 Here</h1>
	</header>

	<div data-role="content">
		<p>just some extra content as well.</p>
		<p>I mean, you can <a data-rel="back" href="#index">go back</a> at any time.</p>
	</div>
</div>
</body>
</html>

Take a look at the anchor link from the index page for a moment. Notice I added the attribute data-role="button" to setup the link as a button. But instead of using the default styles we include data-theme="c". This switches between 1 of 5(themes a-e) templates which come packaged by default as CSS styles within jQ Mobile.

jquery mobile themed buttons Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

My button also spans the entire page width. To remove the behavior we need to set the element from block to inline display. The attribute for doing this is data-inline="true" which you could append onto any anchor button.

Header and Footer Bars

Along the very top and bottom of your applications you should append header and footer content. This design style is often attributed with iOS apps which first became popular using Apple’s mobile App Store. jQ Mobile uses attributes of data-role to define the header, footer, and page content. Let’s take a brief look at these areas.

Top Bar Buttons

By default the top bar supports a set of two(2) links in a similar fashion to other mobile apps. iOS defaults to using a “back” button to the left and often an “options” or “config” on the right.

<div data-role="page" id="about" data-add-back-btn="true">
	<header data-role="header">
		<a href="index.html" data-icon="gear" data-theme="b" class="ui-btn-right">Settings</a>
		<h1>Page 2 Here</h1>
	</header>

The code above is just focusing on the div container for our About page along with header content. The additional HTML attribute data-add-back-btn="true" will only work when added onto a page data role. The purpose is to automatically include a back button which works similar to your browser’s back button.

jquery tabs back button Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

We could have added a back button manually with similar code as we used in the content area. But I feel this takes a lot longer to setup especially on multiple pages. All anchor links within the header section will default into left/right button positions. By using class="ui-btn-right" this re-positioned my Settings button so there is free space for the back button. Also I’m using the secondary theme styles to give it some extra spunk!

Footer Navigation

The footer area many not feel very useful at first. It’s a place where you can store copyright stuff and more important links, but this could just as easily be added at the bottom of your content area. So what good is using the footer?

Well the best example I’ve seen utilizes footer space as a navigation system where tab links appear to control the page navigation. There are plenty of options where you can select fullscreen effects, add icons, adjust placement, and a few other attributes as well. But let’s just build a simple footer nav with 3 buttons to get an idea of how this works.

[Preview Live Demo]

<footer data-role="footer" class="ui-body-b">
	<div data-role="navbar">
		<ul>
			<li><a href="#index" data-direction="reverse">App Homescreen!</a></li>
			<li><a href="http://www.google.com/" data-rel="external">Google Me</a></li>
			<li><a href="http://www.hongkiat.com/" data-rel="external">Hongkiat Blog</a></li>
		</ul>
	</div>
</footer>

So here is some footer code for the about page section. data-role="navbar" should be added onto the container element housing an unordered list and NOT the UL element itself. Each link within the list is treated as a tab bar, which then gets equally divided based on the total number of links. The additional class of ui-body-b just adds aesthetic effects as we switch between the few available styles.

ios path app nav bar Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

If you notice on the first button I have the attribute data-direction="reverse". Even though I could use the back button setup as before to return onto the home page, I’ve instead used the page ID of #index. By default the app window will transition to the right which looks pretty tacky since you expect the animation to move backwards. You can play around with even more of these animated effects if you have time. Check out the transitions info page in the jQuery documentation.

Ajax & Dynamic Pages

The first segment has really opened up the key points to building a mobile app with jQuery. But I want to start a new app which loads data from an external page. I’ll be using a very simple PHP script to attain the $_REQUEST[] variable and display a small Dribbble shot accordingly. The screenshow below should give you an idea what we are going to build.

dynamic pages demo Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

First I’ll make an index.html page set on the default template. For this home screen I’m using a list view setup to display each link in order. This is done in the content area with a data-role="listview" attribute on the list container. Cutting out the same header stuff as before, I added all my code from this new index page below.

<body>
<div data-role="page" id="img-listing">
	<header data-role="header">
		<h1>October 2011 Shots</h1>
	</header>

	<div data-role="content">
		<ul data-role="listview" data-theme="c">
			<li><a href="image.php?imgid=1">First image</a></li>
			<li><a href="image.php?imgid=2">Second image</a></li>
			<li><a href="image.php?imgid=3">Third image</a></li>
			<li><a href="image.php?imgid=4">Fourth image</a></li>
		</ul>
	</div>

	<footer data-role="footer"><h3>www.dribbble.com</h3></footer>
</div>
</body>
</html>

Each of the anchor links in my list view point to the same file – index.php. But we’re passing in the parameter imgid as a request variable. On the image.php file we take the ID and test it against 4 preset values. If any match up we use the matching image URL and title, otherwise we just display a default Dribbble shot.

Image Loader Script

The image.php script still has the default jQuery mobile template added into the code. It actually shares a very similar header and footer, except for the addition of our back link attribute data-add-back-btn="true". Notice this button will only show up if we come from index.html first! Try directly loading image.php and nothing will appear since there’s no “back” to move to.

I think we can make a bit more sense of the code by examining my PHP logic first. We use a switch / case method to check against the 4 different IDs and provide a header title, image URL, and original artist source link.

<?php
$theid = $_REQUEST['imgid'];

switch($theid) {
	case 1:
		$heading = "Wunderkit";
		$origin  = "http://dribbble.com/shots/297593-Wunderkit-tasks";
		$source  = "wunderkit.png";
		break;
	case 2:
		$heading = "College";
		$origin  = "http://dribbble.com/shots/298643-Colleeeeeeeeeeeeege";
		$source  = "college.jpg";
		break;
	case 3:
		$heading = "Forum app";
		$origin  = "http://dribbble.com/shots/298649-Forum-app-for-Facebook";
		$source  = "forum-app.jpg";
		break;
	case 4:
		$heading = "Twitter";
		$origin  = "http://dribbble.com/shots/298069-Twitter";
		$source  = "twitter.png";
		break;
	default:
		$heading = "Abandoned lighthouse";
		$origin  = "http://dribbble.com/shots/298615-Abandoned-lighthouse";
		$source  = "lighthouse.jpg";
}
?>

All seems fairly straightforward – even a novice PHP dev should be able to follow along! And if you don’t understand it’s not important to the jQuery code anyway, so don’t worry. We should switch now and take a look at the template I’ve built within this new page. All the HTML code is added after that whole PHP block above. I used the ID of “images” for the container and even setup the header to change with each new photo.

<div data-role="page" id="images" data-add-back-btn="true">
	<header data-role="header">
		<h1><?php echo $heading; ?></h1>
	</header>

	<div data-role="content">
		<p><strong><a href="<?php echo $origin; ?>" data-rel="external">View the Original</a></strong></p>
		<p><a href="<?php echo $origin; ?>" data-rel="external"><img src="img/<?php echo $source; ?>" /></a></p>
	</div>

	<footer data-role="footer"><h3>www.dribbble.com</h3></footer>
</div>

You can probably see how simplistic this demo is. But the whole purpose is to demonstrate the scalability of jQuery mobile. PHP can easily be added into the mix and you can churn out some really neat apps with just a few hours of development.

Fancy Design with List Thumbnails

One last added effect we can implement is the use of thumbnails to liven up listing page. I’m also going to split text into a heading and description box to display both the artwork title and artist’s name.

dribbble image browser app preview Building Websites and Browser Apps with jQuery Mobile: A Beginners Guide

To begin open up Photoshop and create an 80×80 px document. I’m going to quickly re-size each image and save thumbnails to match each one. Then updating the list view items we should include a few more elements.

Check out the code below and my demo example to see what I mean.

[Preview Live Demo]

<div data-role="content">
	<ul data-role="listview" data-theme="c">
		<li><a href="image.php?imgid=1">
		<img src="img/wunderkit-t.png" class="ui-li-thumb" />
		<h3 class="ui-li-heading">Wunderkit tasks</h3>
		<p class="ui-li-desc">by Sebastian Scheerer</p></a></li>

		<li><a href="image.php?imgid=2">
		<img src="img/college-t.jpg" class="ui-li-thumb" />
		<h3 class="ui-li-heading">Colleeeeeeeeeeeeege</h3>
		<p class="ui-li-desc">by Scott Hill</p></a></li>

		<li><a href="image.php?imgid=3">
		<img src="img/forum-app-t.jpg" class="ui-li-thumb" />
		<h3 class="ui-li-heading">Forum app for Facebook</h3>
		<p class="ui-li-desc">by Ionut Zamfir</p></a></li>

		<li><a href="image.php?imgid=4">
		<img src="img/twitter-t.png" class="ui-li-thumb" />
		<h3 class="ui-li-heading">Twitter</h3>
		<p class="ui-li-desc">by Sam Jones</p></a></li>
	</ul>
</div>

The classes for ui-li-heading and ui-li-desc are added by default into the jQuery Mobile stylesheet. This is similar to the image class ui-li-thumb which automatically re-sizes each list view bar according to the image height. Now from here you could build more on the frontend with animations, page effects, stylesheets, etc.

Or alternatively you could begin constructing a backend system to upload new images and automatically trim thumbnails to include in the list. There is so much flexibility with jQuery Mobile you almost can’t label it solely as a JavaScript library. It’s more of an entire HTML5/CSS/jQuery framework for building quick and scalable mobile apps.

Conclusion

As of writing this article the jQuery Mobile team has officially put out RC1.0 of the code library. This means most if not all of the major bug fixes have been squashed and now testers are gearing up for a full release. Because of this you won’t find a whole lot of information on the web.

But as the months advance web developers are sure to pick up on the trend. Mobile applications and even mobile web layouts are growing in popularity with the huge increase in smartphones. Web developers don’t have the time to learn a full programming language for building Android/iOS apps. Thus jQuery Mobile is a slim alternative which includes support for a majority of the mobile industry software, and continues growing each day with an active developer community.

Hottest Web Apps of the Month – September

We’ve got a great roundup of web apps and tools for you this month, following on from last month’s roundup, and we think they are all going to be very handy for you

hottest web apps september 2011 Hottest Web Apps of the Month   September

This month our selection includes useful web app that helps you to register and manage domains very easily, a great tool to help you manage relationship with your users who are using your web apps, a very neat and effective project managing tool, and even a social network for food recipes!

Don’t forget you can also suggest apps for the list by commenting below, or sending us a tweet @Hongkiat using the tag #hkwebapp. We’d love your feedback on the types of apps you’d like to see, and your favorite apps. On to the apps then!

Intercom

Intercom is a fantastic tool for anyone who runs a web app. It enables you to develop and maintain personal relationship with everyone using the web app, and that means users always know there is a friendly face waiting at the end of their support queries. In essence, it humanizes the relationship between you and your users.

Furthermore it enables you to see how users are using your app, where they are using it from, and a whole range of other useful information. One of my personal favorite features is that it shows you the local time of each user, which really helps smoothing out the communication process.

We’ve been using it on our very own web app, IntutionHQ for a while now, and we’ve had some really great feedback on it. People love interacting with people. It’s currently in private beta, but you can sign up for an invite, and one should be floating to your inbox in the near future. Well worth a look for anyone who runs a web app.

intercom Hottest Web Apps of the Month   September

Pivotal Tracker

Pivotal Tracker is a great tool for anyone who follows Agile development practices. You create tracker stories and move them from step to step as they go from an idea in your head to finished product.

I’ve tried a whole range of tools for this purpose, but Pivotal Tracker has been the best I’ve tried so far. It’s got a slick interface, lots of keyboard shortcuts to make the process quicker, a fantastic free iOS app, and great team integration. If you work in an Agile environment, this is an app you should check out.

pivotal tracker Hottest Web Apps of the Month   September

IWantMyName

IWantMyName is a domain registrar with a twist. Along with having more the 90 domain extensions for registration, they also have a killer feature on top: 1 click web app configuration for your domain.

As anyone who has gone through the set up process for a new domain can tell you, it can be pretty time consuming. Setting up Google apps, Blogger, Flavors.me or whatever else all takes time. With IWantMyName, there 70+ services you can choose from to set up in an instant, with a huge range of app types to choose from.

If you’d like your domain setup process to be a little easier, I suggest you check them out next time when you are considering a domain register.

iwantmyname Hottest Web Apps of the Month   September

WebPutty

WebPutty is a neat tool for all the CSS junkies out there. It gives you a syntax-highlighting editor in the cloud for whenever you need to make changes and your favorite text editor isn’t by your side.

In fact, even if your favorite text editor is by your side, there are some really great functions built in that make WebPutty incredibly useful, the most obvious of which is one click publishing. On top of this it also features live preview, and CSS3 support, so you can easily try out all the new ideas you read about online. Great.

webputty Hottest Web Apps of the Month   September

Trello

Trello is a really neat tool for managing projects together with teams, released by Fog Creek Software, whose CEO Joel Spolsky (of Stack Overflow fame) many of you might be familiar with.

Trello lets you organise all your different projects into boards, share them with your team, and see very quickly what is being worked on, who is working on what, and where something is in a process. It’s a great concept that looks to make managing even more effective. It’s currently free to sign up, so head on over and have a look.

trello Hottest Web Apps of the Month   September

Recipefy

Recipefy is a social network for recipes, which enables you to share and discover recipes in a rather unique way. Essentially you can start sharing recipes with your followers, follow people who share recipes you like, reshare recipes that appeal to you, and like recipes!

As I said, it’s really a social network for recipes, and one that who enjoys good food should take a look at.

recipefy Hottest Web Apps of the Month   September

Sifter

Sifter is a bug tracking app for keeping track of all those nasty issues in your apps, and how far along you are to fixing them. It lets you create projects, set milestones, assign different issues to different people, reply to comment threads, and everything else you might expect from bug tracking software.

What appeals to me about Sifter is their marketing copy – they don’t claim to be the biggest or bad-ass bug tracking out there, just a simple tool that works well for small teams. Nice.

sifter Hottest Web Apps of the Month   September

Tout

Tout is an useful app for those of us who have to send a lot of repetitive emails, where you have to repeat the same content. You create templates of those repetitive tasks (which you can also sort into categories), and when it comes the time to send them to someone, just enter their name and email address, that’s possibly all!

One of the neat features of Tout is that you can link it with your Google, LinkedIn, Twitter or other accounts, and it can automatically populate different fields based on the information it pulls from there, talking about less typing works!

tout Hottest Web Apps of the Month   September

Yoono

Yoono is a tool to unify all your social sources, and to enable you to share from one central location. It’s very powerful and comes in several different flavors – browser/web app, iPhone app and desktop app.

For people who have to manage multiple profiles on multiple sites, tools like Yoono are essential. Yoono enables you to sync your status across multiple sites, share great content to all of your different networks, and stay connected wherever you are.

yoono Hottest Web Apps of the Month   September

Action Method

Action Method is a tool for ‘capturing tasks, collaborating and getting organized’. That means you capture your action steps, delegate tasks (if required), manage projects and get things done. Action Method also has a strong product roadmap with a whole range of new features on the way including a focus area (with your top 5 tasks), team projects, and more.

There is also a great iOS app available, and for those of you who like throwbacks to the good old days, you can even get paper copies printed out to jot down your actions on the go.

action method Hottest Web Apps of the Month   September

Portrit

For those of you who have trouble sorting through photos, Portrit could be the tool for you. Rather than sorting through all of your photos in isolation, you and your friends can come together and rate your photos, add a range of different tags, and decide which photos are the best. Think of it as crowdsourcing for photos sorting.

They have also added some fun and encouraging features where you get badges for rating your friend’s pictures. It’s a great way to find which of your photos stand out from the rest, and it’s pretty fun to play with as well. Check it out!

portrit Hottest Web Apps of the Month   September

Listhings

Listhings is a very simple tool, but for one thing it does, it does very well – sticky notes in the cloud.

If you are always searching for the little bits of paper you jot your notes down on, or you often have (and often forget) great ideas that will make you rich, Listhings could be a lifesaver. Just head to the website, jot down your note, and you are done. It’s free to use, and (apparently) very eco friendly, so try it out.

listhings Hottest Web Apps of the Month   September

Crowdbooster

Crowdbooster is a tool for managing, measuring and optimizing your social media marketing. It shows you what works and what doesn’t so you can focus more on the things that actually make a difference.

You can see charts of your follower numbers, retweets, view your influential followers and top retweeters and find out all sorts of handy information. It’s also a very useful way for showing people the true value of social media. It’s also free, so you can have a play, and make sure you are doing as much as possible with your social media presence.

crowdbooster Hottest Web Apps of the Month   September

That’s all for this month…

That’s all for this month, but we’d love to hear your suggestions for next months’ list, as well as your comments on the apps we’ve featured this month.

What is your favorite web app? What kind of web apps would you like to see more? Be sure to let us know in the comments below – we’d love your feedback.

Be sure to subscribe to our Newsletter or RSS feed to keep up with all the latest and greatest web apps, and all the other great content we offer.

Suggest An App!

This is a monthly feature, so if you have any great app you’d like to suggest for our next month’s round-up, here’s what you can do:

Hottest Web Apps of the Month – August

Welcome back to our latest web apps roundup. We had some great suggestions for apps in last month’s roundup, and we’ve found a bunch more that we think are very handy and useful.

hottest app august 2011 Hottest Web Apps of the Month   August

This month our selections include web app that helps you get into shape and eat right (yes health is no.1 for everyone), a really pretty CRM tool, a couple of web apps to help you produce the perfect resume/CV, and apps for programming online, talking about diversity!

Don’t forget you can also suggest apps for the list by commenting below. We’d love your feedback on the types of apps you’d like to see, and your favorite apps. Full list after jump!

Oobafit

Oobafit is a really neat tool to help motivate you to improve your fitness, lose weight, eat better and meet any other goals of that nature that you might have.

When you first sign up to the app, you simply choose your goals – getting toned, losing weight or whatever it might be, and drag some sliders to specify certain areas of your body you would like to focus on. Oobafit then automatically generates a plan for you with both exercises and meal plans to help your reach your goals.

If you have a Tesco supermarket in your area, you can even order food online through the service. If not you can simply print off a shopping list to take with you next time you go shopping. Pretty neat. The service is still in its infancy stage, but it’s a really great concept and looks to have a strong future. Check it out.

oobafit Hottest Web Apps of the Month   August

PocketSmith

PocketSmith is an app for managing your finance, which it does in rather a unique fashion. The main view is a calendar view where you can enter all of your recurring events – payday, rent and so on, as well as one off events so you can quickly see how your finance is working out.

My personal favorite feature is the graph that shows you exactly how your finances are panning out, with a forecast of where you will be in a year time as well of how you are progressing currently. Seeing your finance in this way is really motivational and makes you think a lot more about where your money is going. Pretty cool.

pocketsmith Hottest Web Apps of the Month   August

Pipedrive

Pipedrive is an innovative CRM tool that is mainly designed around managing your sales flow. Its interface is super simple, super fast, and it’s really a pleasure to use.

Pipedrive is one of the more modern feeling CRM tools that I have seen (although I’d welcome any suggestion on this front), and the fact you can easily drag and drop deals around is really a plus. It’s hard to describe how slick the interface is, but if you’ve got any needs for a CRM tool it’s really worth a look. It’s currently in beta, but it sounds like improvements and features are coming, so it’s a good time to get onboard.

pipedrive Hottest Web Apps of the Month   August

The Birdy

The Birdy is similar in some ways to OhLife, a tool we recently featured. It sends you a daily email to which you reply with your daily purchases, with totals, descriptions and hashtags (like Twitter). It then automatically sorts them out and presents you a great overview of what you’ve been spending your money on.

I think this is really a great concept – I’ve tried using a number of tools to track my spending before, but I’m terrible at keeping constant track of where my money has been going. The Birdy is great because all you need to do is reply to one email a day. Within that one day period it’s fairly easy to remember where your money has been going, and anything you forget isn’t likely to be major issue anyway. It’s really a great approach.

thebirdy Hottest Web Apps of the Month   August

280Slides

280Slides is a web alternative to PowerPoint and Keynote, which is both easy to use and really good looking at the same time. All from the comfort of your browser window.

It got a load of great features which make it really powerful – you can import your current presentations from PowerPoint, you can choose from a number of very pretty themes, you can take it anywhere (that’s why we love the cloud, right?), and you can even publish your presentations straight to the web. It’s the future of presentations.

280slides Hottest Web Apps of the Month   August

beanstalk

Beanstalk claims to be the easiest way to manage code, collaborate and deploy.

It got version control, collaboration and deployment features all baked in, and it integrates with lots of your favorite web apps (Basecamp, anyone?), it automatically backs up to multiple off site locations, and it looks great while doing all of this. If you’ve got a team of developers working together in the cloud, it’s really a wonderful tool – take a look.

beanstalk Hottest Web Apps of the Month   August

LazyMeter

LazyMeter is a to-do list for lazy people, which is great because most people I know are too lazy to keep up with to-do lists.

The key to this app is its simplicity. Entering and scheduling tasks are really an one click activity, and that means you are much more likely to set up and follow through the tasks you have listed. It has a really simple chart/graph system which shows you immediately how many tasks you’ve done, how many you have to do, and how many you’ve paused (put off to another day). It’s quite motivational and makes you want to get your tasks done.

lazymeter Hottest Web Apps of the Month   August

ResumeBaking

ResumeBaking is a great app for anyone hunting for a job. It got a really slick interface, and makes building a resume a breeze.

I always find putting together a resume a huge chore but ResumeBaking quickly and easily helps you list all the relevant information, share your new resume with potential employers, view stats about your resume and more. And did I mention it’s free? It’s pretty fantastic, and the small amount of effort you need to put into it will be paid back in no time when you get some great job offers. (Suggested by Hammad)

resumebaking Hottest Web Apps of the Month   August

Kindle Cloud Reader

You can’t mention hot web apps this month without talking about the launch of the Kindle Cloud Reader from Amazon.

I’m sure most of you are familiar with the Kindle – the Cloud Reader is the latest in their huge range of ways to access your books. It’s really cool because it syncs your last read page to all of your devices, updates automatically with all of your purchases, and best of all, the web app even supports an offline mode so you can read your books in the web app without being connected to the internet. Pretty awesome.

kindle Hottest Web Apps of the Month   August

Penzu

Penzu is a great option for anyone interested in keeping a diary or journal with all sorts of neat features.

With the web app you can write and share with whoever you like, import your photos from Flickr, email entries and more. I like the fact you can set up different journal types – I’ve used it as a travel journal, and sharing it with others is really simple. Worth a look. (Suggested by Anca Bolocan)

penzu Hottest Web Apps of the Month   August

Zerply

Zerply is another neat tool for creating an online resume. It’s really social, and makes the process very simple.

It’s pretty cool because it links up with all of your different social network accounts. You can sign up with Twitter or Facebook, and then import all your work details from LinkedIn before going on to share it and get recommendations from people around the web. It got a great design to it, and the resumes you get out look top notch.

zerply Hottest Web Apps of the Month   August

Cacoo

Cacoo is a tool for creating diagrams of all kinds online.

It comes with a wide variety of stencils, a cool history features so you can move backwards and forwards to see what changes you’ve made; it has sharing and collaboration features built in so you can work together with a number of different people, it lets you export in PDF and SVG as well as PNG and has a range of other features to explore. If you need to do some diagramming and sharing them out, this could be what you need.

cacoo Hottest Web Apps of the Month   August

News360

News360 is an online aggregation tool that learns by who you follow and what you subscribe to the kind of stories that really interest you and the things you are interested in.

It exists on almost every platform you can think of including iOS, Android and Windows Phone 7. I really like these kinds of tools as the more you use them the more value you get out of them. I’ve been using it for a few weeks, and it’s really starting to understand my interests – I get lots of Tech/Apple/Google news and keep finding a whole lot of interest stories to look though. Pretty great.

news360 Hottest Web Apps of the Month   August

That’s all for this month…

That’s all for this month, but we’d love to hear your suggestions for next months’ list, as well as your comments on the apps we’ve featured this month.

What is your favorite web app? What kind of web apps would you like to see more? Be sure to let us know in the comments below – we’d love your feedback.

Be sure to subscribe to our Newsletter or RSS feed to keep up with all the latest and greatest web apps, and all the other great content we offer.

Suggest An App!

This is a monthly feature, so if you have any great app you’d like to suggest for our next month’s round-up, here’s what you can do:

Hottest Web Applications of the Month – July

Here we are again! In this particular month, we will like to share to you a whole bunch of great web apps that will improve your workflow in all sorts of different ways from online video editing to rapid prototyping, learning Ruby on Rails and more – you name it, we’ve got it.

hottest app july 2011 Hottest Web Applications of the Month – July

Of course, if you’ve got a great app you think we should include on this list you can suggest them by commenting below, or sending us a tweet @Hongkiat using the tag #hkwebapp. We’d love your feedback on the types of apps you’d like to see, and your favorite apps.

Tomorrow

Tomorrow is a very neat and nicely designed to-do app. It keeps the interface very simple by offering you just two options – today or tomorrow. If you can’t get it done today, put it on the tomorrow’s list, and do it the next day.

I’ve been trying out the app for a few weeks now, and I found the “deliberately” limited option really helps me focus on the task in hand. The app also has iPhone, iPad and Android app available, so you can get your to-do list wherever you are. Well worth a look for the to-do junkies out there.

tomorrow Hottest Web Applications of the Month – July

InVision

InVision is an extremely useful tool for designers and developers that helps you to build up real working interactive prototypes in no time. All you need to do is upload your wireframes or designs, set up some links, and then you can run clients or users through your designs.

By testing your designs in this way and letting clients make changes earlier, you can invest more time on making great and functional sites, while avoiding the issue that the client wasn’t quite sure what they are looking for. Watch the screencast and you’ll be sold.

invision Hottest Web Applications of the Month – July

Sync.in

Aside from its pretty look, Sync.in is a great way to collaborate on different documents in real time, so you and everyone else you are working with the document can see changes reflected as you edit them.

If you’ve ever been working on a pitch, plan or anything else with multiple people, even in the same location, you’ll appreciate how simple and painless Sync.in operates document collaboration.

sync Hottest Web Applications of the Month – July

JayCut

JayCut is a surprisingly powerful online video editing tool which brings video editing to your browser.

I’ve been playing with the tool for a while now, and have found it fast, responsive and full of functionality. If you’ve got a slow computer, you move around a lot, or you don’t have access to other more expensive tools, JayCut is really something you should check out.

Most remarkably, the interface is really easy to use and understand compared to most desktop video editing apps, and you can access it all from your browser window.

jaycut Hottest Web Applications of the Month – July

Rails For Zombies

Rails for Zombies is an extremely well produced site for anyone who is interested in learning more about Ruby on Rails. It has a number of different lessons that teach you the basics in a new and interesting way.

One of the best things about it are the screencasts for each module which keep your interested while teaching you how to program. There’s also a very helpful PDF for each module to help to ensure you’ve got all the important information down pat.

zombies Hottest Web Applications of the Month – July

Wetransfer

Wetransfer is one of the most interesting file sharing sites I’ve seen for a while. They allow you to upload up to 2GB per file, and it’s free so no registration is required.

Unlike other file sharing sites I’ve seen though, they’ve also got a really different business model – behind the page where you share the files, they have fantastically designed full screen advertisements. None of the advertisements are in your face, and every time I go back to the site, I actually feel like clicking through to see just what the ads are for. It’s pretty neat. (Suggested by Danny)

wetransfer Hottest Web Applications of the Month – July

StrawberryJ.am

StrawberryJ.am is a neat new web app that helps you sort through the junk in your Twitter stream (with Facebook support coming soon) to see the stories you’ll actually be interested in looking at.

Anyone who follows a lot of people on Twitter will appreciate that it’s a very difficult to task to find the links that are actually worth looking at; StrawberryJ.am takes care of this for you so you spend less time looking at crap, and more time enjoying the good stuff. It’s currently in closed beta, but you can sign up for an invite from the home page.

strawberryjam Hottest Web Applications of the Month – July

Aviary Music Creator

Aviary has a collection of really interesting tools, and among them all I found one very enjoyable to play with: Roc.

Roc is really a fun and interesting way to create music. There are 50 free instruments available, and you can mix and match to make all sorts of fascinating musical creations. You can also share and collaborate on different tracks, and it’s lightning fast to boot. For the musical guys among us, this one is definitely worth a look.

roc Hottest Web Applications of the Month – July

Feedly

Feedly is a very beautiful tool for following your favorite sites and finding new ones.

There are a bunch of different categories you can sign up to follow, as well as a huge range of popular sites. You can neatly divide all the different topics you are interested in, and get suggestions for other sites you might be interested to follow.

feedly Hottest Web Applications of the Month – July

Historious

Historious is a great way for managing bookmarks that you otherwise wouldn’t find again, and has lots of helpful features too.

You can bookmark in just one click. You can tag your bookmarks, share your bookmarks with whoever you like. They also take a snapshot of the sites you bookmarked so even if they change in the future, you can view them as they were when you first found them.

Best of all is it has full text search for all your bookmarks, so you don’t need to remember the headline, just input any information from the post. It’s like Google for you bookmarks.

historious Hottest Web Applications of the Month – July

Switchr

If you’ve ever needed to convert audio files then Switchr is the site for you.

All you need to do is to select your file, the format you’d like to change and enter your email address. There is such a confusing array of audio file converter out there so having an easy tool like Switchr is really a lifesaver. It’s free too, so keep it in mind next time you need to play with audio. (Suggested by Ameer)

switchr Hottest Web Applications of the Month – July

OhLife

OhLife is a journal for the modern age. Rather than opening up a diary or any other application, you simply get an email every day asking how your day went. All you need to do is reply to that email, and your thoughts will be saved for you.

I really like this app because it fits in with my workflow so nicely. I’m always on email anyway, so a quick reply to OhLife is very quick and painless, and a great way to reflect on everything you’ve been up to.

ohlife Hottest Web Applications of the Month – July

Conceptboard

Conceptboard is another great web app for online teamwork and collaboration.

Among many features, you can draw directly on a board for your team to see, drag files directly on to your concept boards, write over your documents, leave comments easily for others to see, invite colleagues and clients to participate and even work on it using your iPad. The free account gives you a lot of options and is worth a look. (Suggested by Roman)

conceptboard Hottest Web Applications of the Month – July

That’s all for The Month

That’s all for this month, same time next month :-)

Be sure to subscribe to our Newsletter or RSS feed to keep up with all the latest and greatest web apps, and all the other great content we offer.

Suggest An App!

This is going to be a monthly feature from now on, so if you have any great app you’d like to suggest for our next month’s round-up, here’s what you can do: