Web Development Blog » CSS

Introduction to CSS3 Animations by Examples

eisabai — Tue, 28 Jun 2011 06:08:23 +0000

CSS3 animations are really easy to write once you know how they work. This post will show you some very basic animations done in CSS3. Once you get the hang of how to put them together, you will be able to do more advanced animations in CSS3 based on these examples. Also have a look at Reference on Safari for the animation properties that you can use on your CSS selectors.

Note: The examples on this page will only work on WebKit Browsers (eg: Chrome, Safari). Hover over the little black elements to see the effect done in pure CSS3.

Before we start, let’s add the following CSS to change the look and feel of your

ul.css3demo li { -webkit-border-radius: 15px; display: block; float: left; width: 50px; height: 50px; margin: 10px; background: #000; color: #fff; text-indent: -5000em; }

And now let’s take a look at 15 different CSS3 animations and their source code.

Tilt

	ul.css3demo1 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo1 li:hover {  -webkit-transform:  rotate3d(0, 0, 0, 50deg); -webkit-transform-style: preserve-3d; }

Pushed Down (by 40px)

	ul.css3demo2 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo2 li:hover { -webkit-transform:  translate3d(0, 40px, 0); }

Smaller

	ul.css3demo3 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo3 li:hover {  -webkit-transform:  scale(.5); }

Bigger

	ul.css3demo4 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo4 li:hover {  -webkit-transform:  scale(1.5); }

Slide Right (by 10px)

	ul.css3demo5 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo5 li:hover { -webkit-transform:  translate3d(10px, 0, 0); }

Add Shadow

	ul.css3demo6 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo6 li:hover { -webkit-box-shadow: 3px 3px 3px rgba(0,0,0, 0.5); }

Change Color

	ul.css3demo7 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo7 li:hover { background: #0cf; }

Shrink horizontally (by 50%)

	ul.css3demo8 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo8 li:hover { -webkit-transform: scale3d(.5, 1, 1); }

Shrink vertically (by 50%)

	ul.css3demo9 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo9 li:hover {  -webkit-transform: scale3d(1, 0.5, 1); }

Rotate 360 degree

	ul.css3demo10 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo10 li:hover { -webkit-transform: rotate(360deg); }

Fade In

	ul.css3demo11 li { -webkit-transition: opacity 0.8s ease-in; opacity: 0.4;  }
	ul.css3demo11 li:hover { opacity: 1; }

Fade Out

	ul.css3demo12 li { -webkit-transition: opacity 1s ease-in; opacity: 1.0;  }
	ul.css3demo12 li:hover { opacity: 0.4; }

Spin

	ul.css3demo13 li { -webkit-transition: -webkit-transform 1s ease-in-out;   }
	ul.css3demo13 li:hover { -webkit-animation: spin 0.3s infinite linear; }
	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); background-color: #ff0;  }
	}

Fade to Color (Colorize)

	ul.css3demo14 li { -webkit-transition: -webkit-transform 5s ease-in-out;   }
	ul.css3demo14 li:hover { -webkit-animation: colorize 3s infinite linear; }
	@-webkit-keyframes colorize {
		0% { background-color: #333; }
		100% { background-color: #ff0;  }
	}

Change Shape

	ul.css3demo15 li { -webkit-transition: all 2s ease-in-out;   }
	ul.css3demo15 li:hover { -webkit-animation: shape 1s infinite linear; }
	@-webkit-keyframes shape {
		100% { -webkit-border-radius: 50px;  }
	}

Read Introduction to CSS3 Animations by Examples on Web Development Blog!

10 Useful Javascript Snippets for your mobile websites

eisabai — Thu, 23 Jun 2011 12:41:39 +0000

After developing a few mobile websites in the past few months, I notice that I am reusing certain Javascript code in every project. Followings are the 10 Useful Javascript Snippets that I use for mobile sites. Note that some snippets require jQuery mobile framework.

1. Add class name “iPhone” or “Android” to body element if the page is viewed on iPhone or Android browser

if (navigator.userAgent.match(/iPhone/i)) {
	$('body').addClass('iPhone');
} else if (navigator.userAgent.match(/Android/i)) {
         $('body').addClass('Android');
}

Examples of iPhone user agent string:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A537a Safari/419.3
Mozilla/5.0 (iPhone; U; XXXXX like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A477d Safari/419.3

Examples of Android user agent string:
Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; U; Android 1.6; en-gb; Dell Streak Build/Donut AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/ 525.20.1
Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; HTC Desire 1.19.161.5 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
Mozilla/5.0 (Linux; U; Android 2.2; en-us; DROID2 GLOBAL Build/S273) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; U; Android 2.2; en-gb; GT-P1000 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; E10i Build/2.0.2.A.0.24) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

2. Remove the browser address bar

window.scrollTo(0, 1);

3. Prevent touch scrolling on a page

notouchmove = function(event) {
	event.preventDefault();
}

...

document.body.addEventListener('touchmove', function(event) {
	event.preventDefault();
}, false);

4. Display a message when the page is viewed in landscape

var updateorientation = function (){
	var classname = '',
	top = 100;
	switch(window.orientation){
		case 0:
		classname += "normal";
		break;

		case -90:
		classname += "landscape";
		break;

		case 90:
		classname += "landscape";
		break;

	}

	if (classname == 'landscape') {
		if ($('#overlay').length === 0) {
			window.scrollTo(0, 1);
			$('body').append('Landscape view is not supported for this page.');
		}
	} else {
		$('#overlay').remove();
	}
};

Usage:

var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
	updateorientation();
}, false);

5. Truncate a description and show full description when touched

var truncatedesc = function(trunc, len) {
	if (trunc) {
	  var org = trunc;

	  if (trunc.length > len) {
		trunc = trunc.substring(0, len);
		trunc = trunc.replace(/w+$/, '');

		trunc = '' + trunc;
		trunc += '...';
		trunc += '' + org + '';
	  }

	  $('.truncated').live("touchstart touchend", function() {
		$(this).closest('div').find('.original').show();
		$(this).closest('div').find('.truncated').hide();
		return false;
	  });

	  return trunc;
	}
};

Usage:

truncatedesc(item.description, 100);

6. Redirect to another page upon successful ajax request (jQuery mobile)

var ajaxurl = ‘http://…’; // Your web service URL

$.ajax({
	url: ajaxurl,
	type: 'GET',
	processData: false,
	contentType: "application/json",
	dataType: "jsonp",
	success: function(data) {
		$.mobile.changePage("results.html");
	},
	error: function() {
		alert('Error!');
	}
});

7. Remove active state from links in listview (jQuery mobile)

$('div').live('pageshow', function (event, ui) {
	$('[data-role=listview] li').removeClass("ui-btn-active");
});

8. Disable default jQuery mobile style from select dropdown (jQuery mobile)

$(document).bind("mobileinit", function(){
  	$.mobile.page.prototype.options.keepNative = "select";
});

9. Dynamically update listview (jQuery mobile)

var output  = '';
output += '' + item.title + '';
output += '';	

$('#mylistul').append(output).listview('refresh');

10. Dynamically add form input and apply default style (jQuery mobile)

var html = '';
$('#searchform').append(html);
$('#suburb').textinput();

Recommended Books

While no book has already been released at Amazon on jQuery mobile, the following two books on HTML5 and jQuery will help you understand and work with jQuery mobile framework better as jQuery mobile is based on jQuery and uses HTML5.

HTML5: Up and Running

jQuery: Novice to Ninja

Read 10 Useful Javascript Snippets for your mobile websites on Web Development Blog!

How to use Google Fonts in your WordPress Theme

eisabai — Mon, 20 Jun 2011 10:39:19 +0000

Using Google Fonts in your WordPress Theme is very easy and it can be completed in 3 simple steps.

1.
Go to Google Web Fonts, browse all the fonts available for use on your website and pick any font you like. For this example, I will be using Droid Sans.

2.
Click on the font name to go to the font page and then click on Use This Font tab and copy and paste the css include into the section in Header (header.php) file of your WordPress Theme.

3.
Edit the Stylesheet (style.css) file of your current WordPress Theme and add the following line of CSS:

SELECTOR { font-family: 'Droid Sans', arial, serif; }

Replace SELECTOR with the correct selector; for example: h1, .title, .post h2, etc.

And that’s it. It is very simple and doesn’t require any font replacement techniques that use Flash or Javascript.

Browser Compatibility of Google Web Fonts API

According to the Official FAQs, the Google Font API is compatible with the following browsers:

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+

It also works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod).

Read How to use Google Fonts in your WordPress Theme on Web Development Blog!

How to use hi-res images in web apps for iPhone4

eisabai — Tue, 07 Jun 2011 11:24:32 +0000

If you have been developing websites and web apps for mobile, you may have noticed that the images are not very crisp on iPhone 4. The Retina display on iPhone 4 is the sharpest, most vibrant, highest-resolution phone screen ever but you need to know how to utilise it. The images you use on the websites need to be high resolution (at least 2 times bigger than the normal size) in order for them to look sharp on iPhone 4. The good news is, it is possible to use hi-res images in web apps / websites for iPhone4 without using any javascript.

For images that are displayed via tags:

Save the image in x2 resolution. For example, if your logo is 50×50 pixels, make sure it is saved as 100×100 pixels (Resolution: 144 in Photoshop)

And in your HTML source code, make sure to specify height and width attributes for the tag like below:

For images that are displayed as background images via CSS:

This is a bit trickier, because you don’t want to use hi-res images for iPhone 3 or Android or other mobile browsers. To target just iPhone 4, add the following line of code in the section of your page right after the normal CSS include.

And for every image, you need to save 2 versions – one for the regular view and the other one for the hi-res view. For example, button-signup.jpg and button-signup2x.jpg. The button-signup.jpg will be 50×20 pixels whereas the button-signup2x.jpg will be 100×40 pixels.

In your hires.css file, you will have something like the following:

#signup { background: transparent url(../images/button-signup2x.jpg) 0 0 no-repeat; background-size: 50px 20px; }

Note that the background-size is the size of the image in regular view. This will allow the background image to be shrunk so it fits within the specified element. The background-size property is a CSS3 property and it lets you specify the size of background images.

And in your style.css, you will have:

#signup { background: transparent url(../images/button-signup.jpg) 0 0 no-repeat; }

And that’s all!

Read How to use hi-res images in web apps for iPhone4 on Web Development Blog!

Top 10 jQuery Mobile Code Snippets that you need to know

eisabai — Mon, 31 Jan 2011 03:48:57 +0000

jQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface system across many mobile device platforms such iPhone, BlackBerry, Android and Windows Mobile. The framework is built on top of one of the most popular Javascript frameworks, jQuery.

Followings are some of the most useful code snippets that I’ve used in my recent web app developed using jQuery Mobile framework.

1. Disable truncation for list items and buttons

If your list item or button has a long text, it will be truncated automatically by jQuery Mobile. To disable this truncation, add “white-space: normal;” to the CSS selector in question.

For example, to disable truncation for buttons:

.ui-btn-text {
white-space: normal;
}

To disable truncation for list descriptions:

.ui-li-desc {
white-space: normal;
}

To enable truncation, set it to “white-space: nowrap;“.

2. Display a random background image on page load

jQuery Mobile has a number of page initialization events that you can use to trigger certain methods on page load. The following CSS + Javascript can be used to display a random background image every time a page is loaded.

CSS

.my-page  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }

.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }

.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }

.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }

Javascript

$('.my-page').live("pagecreate", function() {
	var randombg = Math.floor(Math.random()*4); // 0 to 3
	$('.my-page').removeClass().addClass('bg' + randombg);
});

3. Disable a button action

To disable a button action (for eg: from opening a page), add the following Javascript.

$('#home-button').button("disable");

And to re-enable it:

$('#home-button').button("enable");

4. Disable loading pop-up message

I find the loading pop-up message a bit annoying because it gets triggered everytime you load a different page. To disable this: add the following line of code into your JS file.

$.mobile.pageLoading(true);

By default, it is enabled like so:

$.mobile.pageLoading();

5. Create a custom theme

jQuery Mobile framework comes with 5 themes – Theme A, Theme B, Theme C, Theme D and Theme E. But you can easily create a new theme for your web app.

The steps to create a new theme:
1. Copy CSS for any theme from jQuery Mobile CSS file and paste it into your own CSS file.
2. Give your theme a name and rename the CSS selectors appropriately. Your theme name can be any alphabet character (a to z). So for example, if you copied Theme C, and you want to call your theme Theme Z, rename .ui-btn-up-c to .ui-btn-up-z, .ui-body-c to .ui-body-z and so on.
3. Change colors and styles of your custom theme
4. To apply your custom theme z to any element, just set the data-theme attribute to z. For example:

6. Use a custom font

There are a few font-replacement methods available such as cufon, sIFR, FLIR, @font-face and Google Fonts API. When building a web app using jQuery Mobile, I found that @font-face method is the easiest method to work with and the performance is quite satisfactory. If you are interested in @font-face, here is a helpful tutorial with a demo on how to work with @font-face method.

7. Create an image-only button with no text

Sometimes, you may not want to have any text for your button but still use the rest of the features that comes with a button element. This is usually the case with a home button or an info button. To hide any text associated with the button, set data-iconpos attribute to “notext”. For example:

Home

8. Open a link without using AJAX with page transitions

To open a link without using AJAX with page transitions (ie: reloading the full page the old-school way), set rel attribute to “external”.

Home

9. Remove an arrow from a list item

By default, jQuery Mobile framework adds an arrow next to every list item. To disable this, set data-icon attribute to “false” on the list item that you’d like the arrow to be removed.

Contact Us

10. Set background color of a page

This may sound simple but it took me a few minutes to figure out how to apply a background color to a page without having it overwritten by jQuery Mobile CSS. Normally, you’d set a background color to body element but if you are using jQuery Mobile framework, you need to set it to ui-page class.

.ui-page {
background: #eee;
}

Recommended Books

jQuery Mobile

jQuery Mobile First Look

The following two books on HTML5 and jQuery will also help you understand and work with jQuery mobile framework better as jQuery mobile is based on jQuery and uses HTML5.

HTML5: Up and Running

jQuery: Novice to Ninja

Read Top 10 jQuery Mobile Code Snippets that you need to know on Web Development Blog!

How to code an HTML Email Newsletter

eisabai — Mon, 31 May 2010 06:19:58 +0000

In this step-by-step tutorial, I’m going to show you exactly how to code an HTML email; be it an HTML Email Signature or HTML Email Newsletter.

1. Changing the background color

2. Setting a fixed width and background color for the content area

3. Changing the font size, style and color of the content area

4. Setting a different font, color and style for headings

Latest News from the Web Development Blog

5. Inserting a line between two blocks of text

	
		
			
				First block of text.
			
		
		
			
				Second block of text.

6. Inserting and floating an image to the left

	
		
			
				
			
			
				Text next to the image
			
		
		
			
				Copyright text

7. Aligning text to right (or left or center)

	
		
			
				Some text goes here
				Read more

8. Changing a link color

Read more

9. Adding a border around the content area

10. Opening a link in a new window

Go to Google

Putting it altogether

Latest News from the Web Development Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt nisl et felis sodales faucibus. In hac habitasse platea dictumst. Sed tincidunt egestas velit mollis faucibus. Aliquam feugiat, neque nec porta accumsan, odio nulla laoreet risus, ut vestibulum lacus velit eget mi. Aliquam vehicula magna sed leo lobortis et luctus magna venenatis. Nunc et massa ipsum. In tristique, elit hendrerit tincidunt consectetur, diam purus tempor ante, eget scelerisque velit est vitae lorem. Nullam vulputate blandit dui et tempor. Curabitur quam lectus, suscipit non placerat a, consectetur vel velit.
Vestibulum egestas ipsum quis elit pulvinar ullamcorper. Vestibulum ac neque sed neque consequat ornare eu et justo. Phasellus pulvinar vestibulum nisl, ut tempus dolor commodo at. Morbi ultricies nisl vel massa accumsan tempor. Donec quam nibh, euismod vitae vestibulum ac, ullamcorper non eros. Integer quis sapien ac enim rhoncus auctor. Nulla facilisi. Vivamus et varius massa. Integer aliquam ultricies risus nec vulputate. Donec porta viverra magna, a suscipit arcu porta non.
Read more

Praesent ut purus sit amet elit tincidunt laoreet a sed mauris. Integer a lacinia augue. Donec hendrerit sapien et lorem tincidunt a luctus purus vehicula. Cras magna diam, auctor sit amet pretium in, pretium a odio. Proin sed laoreet lorem. Mauris tortor diam, tempus sit amet lacinia in, egestas eu lectus. Vivamus aliquet hendrerit tellus sit amet pretium. Praesent dictum libero pretium magna pretium congue. Pellentesque consequat est a tortor tincidunt placerat in a ante. Sed non elit enim, vitae scelerisque ipsum. Integer fringilla, massa in ultrices bibendum, orci neque luctus arcu, in pulvinar elit risus eu nunc. Etiam dignissim malesuada consequat. Donec eget magna risus, eu vehicula ante. Quisque adipiscing placerat tincidunt. Aliquam ultrices vehicula velit, vel dignissim sem feugiat malesuada. Donec magna nisi, pretium at ullamcorper ultrices, sodales eu odio. Nulla facilisi. Curabitur hendrerit dictum rhoncus. Praesent bibendum dapibus ligula, ut placerat dolor vulputate vel.

Email Newsletter Templates

If you are looking for professional email newsletter designs, ThemeForest is the best place to buy email newsletter templates because each template package comes with a complete HTML code and layered PSD file (and sometimes multiple color variations). Our favourites are:

iNewsletter

Platnum

Read How to code an HTML Email Newsletter on Web Development Blog!

Align an image in center and middle using CSS

eisabai — Thu, 22 Apr 2010 02:02:22 +0000

Here’s a snippet of CSS and HTML code that aligns an image in center (horizontally) and middle (vertically). Tested in Firefox, IE, Chrome and Safari.

CSS

#enter {
	position: absolute;
	text-align: center;
	left: 50%;
	top: 50%;
	margin: -120px auto 0 -130px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */
	width: 260px; /* same as the image width */
}

#enter span a {
	display: block;
	width: 260px;
	height: 240px;
	margin: 0 auto;
	position: relative;
	background: transparent url(images/enter.jpg) 0 0 no-repeat;
	text-indent: -5000em;
	outline: 0;
}

HTML


    
	Enter Site

Read Align an image in center and middle using CSS on Web Development Blog!

How to style a Submit button in CSS – Example 2

eisabai — Tue, 09 Mar 2010 01:31:06 +0000

web 2.0 style call-to-action buttons can be purchased in psd format from graphic river

Since writing How to style a Submit button in CSS a few months ago, I have found an alternative way to achieve the same result. In this example, we will be using

CSS

#button {
	background: transparent url(contact.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	width: 180px;
	height: 50px;
}

#button span {
	display: none;
}

Read How to style a Submit button in CSS – Example 2 on Web Development Blog!

Tips for iPhone Web App Development

eisabai — Tue, 27 Oct 2009 05:31:32 +0000

SEO site checker is the iPhone webapp we launched a few days ago. This is the fourth iPhone web application we’ve developed and we thought it’d be useful to share some tips we learnt along the way.

1. Get inspiration
Before building anything, we like to browse through existing iPhone web apps that are available. There are quite a few iPhone Apps Galleries, but the ones that we often go to are Apple – Web apps, appSafari and iPhone Application List.

2. Gather ideas and information
Now you’ve been inspired by so many good iPhone apps, it’s time to brainstorm ideas for an application that you would like to build. An original idea will always do better than a second-hand idea.

3. Plan
Planning is the most important part of creating a useful and reliable application. We like to write down our thoughts and implementation ideas in a notepad before jumping into development. Have a look at one of our handwritten notes for SEO site checker. Apart from planning the implementation details, also think about a URL and name for the application. When deciding a URL, keep it short because iPhone’s keyboard is not the easiest to type on. For example, for our SEO site checker app, the URL is http://www.anansi.com.au/apps/seo/ rather than http://www.anansi.com.au/apps/seo-site-checker/

4. Develop
One of the advantages that comes with building iPhone web apps as opposed to native apps is that you can use any web programming language. You don’t need to learn Cocoa or get yourself familiarised with Mac OS. Essentially, you are just building another web application, but for a small screen. You can use Javascript, AJAX, CSS, HTML for the client side and any server-side language of your choice; be it PHP, Ruby, Perl, Java, .NET, ColdFusion, or ASP. Download sample code from Safari Reference Library and explore how things are done.

Our tools of the trade:

1) iUI: iPhone User Interface Framework (consists of a JavaScript library, CSS, and images that make your web app looks and feels like an iPhone Native Apps)

2) PHP with a framework (Zend, CakePHP, CodeIgniter or own)

3) jQuery if required (We try to do without unless really necessary because bandwidth is quite precious on mobiles)

4) Safari is the best browser to test your iPhone web app on especially if you are using iUI framework.

5) Google Analytics to track the statistics

5. Test
During development, you may be able to get away with using Safari on your computer to test the iPhone web application, but when it comes to actual testing stage, you have to use an iPhone. There are some errors or bugs that you may only discover when you are using an actual iPhone. For example, when we were developing SEO site checker, we didn’t see the need to put “Please wait… Calculating your website’s score” overlay pop up until we realise how long it could take to load up the result page on an actual iPhone.

6. Release
Once you are happy to release your iPhone web app, it’s time to create a nice little icon and a screenshot of the app to submit to Apple – Web apps directory. Remember to read submission information for the icon and the screenshot. It takes about 2 days to be approved and listed in the directory. In addition to submitting it to the Apple directory, social networking websites are the best marketing channel to promote just about anything these days. Tweet about your app on Twitter, share the app link on facebook, blog about it, bookmark the app on delicious; the options are endless. Once it is released, watch the statistics, obtain feedback from people, continually improve the app and follow the “Release Early, Release Often” principle to ensure the success of your iPhone web app.

7. Read, learn and improve
There is always room for improvement. Read tutorials and books on iPhone Web App Development. Learn new tips and tricks. Improve your web apps. Some of our recommended books on iPhone web development are:

Building iPhone Apps with HTML, CSS, and JavaScript
“The future of mobile development is clearly web technologies like CSS, HTML and JavaScript. Jonathan Stark shows you how to leverage your existing web development skills to build native iPhone applications using these technologies.”
– John Allsopp, author and founder of Web Directions
Beginning Smartphone Web Development
Mobile application developers and their managers need to learn mobile web technologies because it’s in their economic interest. Time-to-market and opportunity costs are significantly lower for web-based mobile applications than for native ones. In this book, Gail teaches the web standards and fundamentals specific to smartphones and other feature-driven mobile phones and devices.
Developing Hybrid Applications for the iPhone
“For those not ready to tackle the complexities of Objective-C, this is a great way to get started building iPhone apps. If you know the basics of HTML, JavaScript, and CSS, you’ll be building apps in no time.”
– August Trometer, Owner of FoggyNoggin Software, www.foggynoggin.com
Professional iPhone and iPod touch Programming
This book is for web developers who want to build new applications for iPhone and iPod touch. A working knowledge of HTML/XHTML, CSS, JavaScript, and AJAX is necessary.

Like we said earlier, one thing we like about iPhone web apps is that you don’t have to learn a new programming language like Objective C or buy a Mac computer in order to develop an app. However, when it comes to making a profit from your apps, or ultilising iPhone App Store’s features, native apps have more advantages. If you are wanting to get into iPhone native app development without doing the programming yourself, check out How To Create iPhone Apps With No Programming Experience ebook that teaches you step-by-step how to outsource and market native iPhone app development. The company behind the ebook has launched 22 iPhone Apps so far using this method and made $56,366.69 in just ad revenue. So if you have got a good idea for an iPhone app, then it’s worth giving a shot.

Interested in getting an iPhone web application for your company or organisation? Contact us at Anansi Web Development to find out how we may be able to help you.

Read Tips for iPhone Web App Development on Web Development Blog!

Web Development Blog » CSS

Introduction to CSS3 Animations by Examples

Other similiar posts that you might be interested in:

10 Useful Javascript Snippets for your mobile websites

' + item.title + '

Recommended Books

Other similiar posts that you might be interested in:

How to use Google Fonts in your WordPress Theme

Other similiar posts that you might be interested in:

How to use hi-res images in web apps for iPhone4

Other similiar posts that you might be interested in:

Top 10 jQuery Mobile Code Snippets that you need to know

Recommended Books

Other similiar posts that you might be interested in:

How to code an HTML Email Newsletter

Other similiar posts that you might be interested in:

Align an image in center and middle using CSS

Other similiar posts that you might be interested in:

How to style a Submit button in CSS – Example 2

Other similiar posts that you might be interested in:

Tips for iPhone Web App Development

Other similiar posts that you might be interested in:

Read more using jQuery live event

Recommended Books on jQuery

Other similiar posts that you might be interested in: