When developing for the iPhone, iPad, iPod Touch and other mobile devices, the first thing we have to do is obviously detect it, so we can apply specific code or styles to it. The following code snippets will detect iPhones and iPods using various methods, depending on your situation you can use one or a combination of these methods.

JavaScript

Whether your developing a web application or just making a iPhone compatible version of your website it can be very beneficial to target specific JavaScript to help create a rich interactive UI.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i) || (navigator.userAgent.match(/iPad/i))) {
        alert('Mobile Website');
}

PHP

For security reasons you may prefer to use PHP in order to detect iPhones, iPad and iPods touch on the server side.

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {
    echo "Mobile Website";
}

CSS

Browser sniffing can be useful, but for many reasons it isn’t the best practice to detect a browser as there are many types of mobile device out there and you don’t want to have to target your code at every specific device. My preferred option is to target css to a device with and orientation with css, this can make design complicated as you have to think about how your layout will adjust however

If you’re looking for a cleaner way to apply CSS styles to the iPhone or small mobile devices only, you should use the following.

@media screen and (max-device-width: 480px){
    /* iPhone specific CSS goes here */
}

You can extend this technique to build a css file that adjusts for specifics width of device.

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

Device Orientation

You can even build css for device orientation. This example will draw the menu on the left when in landscape and on the bottom when in portrat.

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
	#menu {
		width : 100%;
	}
 
	#body {
		width : 100%;
	}
}
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
 
#menu {
		width : 30%;
		float : right;
	}
 
	#body {
		width : 70%;
		float : left;
	}
}

iPhone Images

Most website images are above 500 pixels wide. Due to the iPhone small size, there’s a strong chance that images will break out of the view aria. I recommend automatically re-size all website images to max 100% device width.

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

Defining a Viewport

The width=device-width statement allows you to define the document width as being the same than the width of the iPhone or mobile device screen.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Font Size

When you change device orientation, Safari and some other mobile browsers adjust the font size. If you’d like to prevent this effect, simply use the following CSS declaration.

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

Special Links

Finally do you remember those “mailto” link that were very popular some years ago? This prefix automatically open the default email client used by the person who clicked on it. The iPhone has introduced two similar prefixes, tel and sms, which allows the person who clicked on it to phone or text automatically.

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

It hase been a few months since I last published so I thought I would start with a quick and simple one.

Web applications or web apps combine the power of the Internet with the simplicity with the ease of access of the internet, all on a 3.5-inch screen. iPhone and iPod touch let you build complex web apps using CSS, JavaScript and Html. Web apps are web pages, but the iPhone and iPod add several extra CSS and HTML extensions. Web apps have the potential to be very powerful and provide similar if not greater functionality than there installed application cousins. In this quick introduction to web apps we are going to turn our simple website into a web app for the iPhone and iPod without too many headaches. We are going to keep this simple and skip over some of the more complicated Web App concepts for later tutorials.

Application Icon

An iPhone application is not and application unless you can launch it from your iPhone home screes. So lets start by adding an Icon to your home screen.

We have two ways to design a custom icon that we can add to the home screen. The first let the iPhone automatically add some visual effects to your icon (Rounded Corners, Drop Shadow, Reflective Shine), the second is provide an already designhed icon that the iPhone can display as is. For this tutorial I am going to use the second approach as I want to control the look of my icon.

This is the image I an using as my icon

now we add a link element to the webpage header

<link rel="apple-touch-icon-precomposed" href="/iPhone.icon.png"/>

Splash Screen

On iPhone OS, similar to native applications, you can specify a startup image (Splash Screen) that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you to want customize it, add a link element to the webpage, like this:

<link rel="apple-touch-startup-image" href="/iphone.startup.png">

The image must be a png file and its dimensions 320 x 460 pixels in portrait orientation.
NOTE: this option works only if apple-mobile-web-app-capable is set to yes

Hide Safari Components

You don’t want the safari user interface components (e.g address bar) showing in your web app. Adding this line will hide the components.

<meta name="apple-mobile-web-app-capable" content="yes" />

Try It Out

This website uses these options. To add a website to your Home screen

• On your iPhone visit www.ozblog.com.au in Safari.
• Tap the Go To icon at the bottom of the Safari window.
• Tap Add to Home Screen.
• Now click on the new Home Screen Icon to launch the app.

I’m using wordpress so there isn’t a customization to load all site with ajax so you can see the home page like web application, but if you click on a post link you will be redirect to safari.

Note & Conclusion

All these tips only works for web pages that have been saved to the home screens and opened from there, if you access to your website using safari you don’t have this customizations. Remember also that any new link will be open in new browser tab so you lost these settings. The best option is to develop an strongly ajax-oriented web application, so to avoid the users from stressing clicking and page refresh, allowing them to use just the “first page”

Online advertising isn’t as confusing as many small business owners think. Just like in the brick-and-mortar world, the goal is to acquire new customers as cheaply as possible. It’s the same with online businesses; only the methods are different. And just like in the offline world, knowing where to place your ads will determine the success or failure of your ad campaign.

Generally, the products you sell will dictate where you should advertise. If your ad budget allows it, advertising on Web portals — Yahoo, MSN, and the like — is an option. But this untargeted advertising is out of the reach of most cash-strapped small businesses.

How can you maximize your advertising budget and still reach the customers who would be interested in your products?

Putting your ads in front of motivated purchasers is the best way to spend your advertising dollar. Targeting your ads to these potential buyers is easy.

Keyword advertising is the easiest and cheapest way to target your ad buys. Buying keyword advertising with Google or Overture lets you target customers before the ad even displays, making it a great option for companies without extensive advertising resources.

E-newsletter advertising is another inexpensive but effective way of reaching targeted customers. There are thousands of e-newsletters published every week on almost every subject imaginable. Try to find at least five different e-newsletters that cover topics that tie in with your products.

Banner or button ads are still an option, of course, as long as you advertise on sites that your potential customers are already visiting. Continuing our example of selling digital camera supplies, we would look for sites that offer tips and advice about digital photography and approach them to see if they are willing to sell advertising space on their site.

If you are having trouble coming up with ideas on where to advertise, try browsing through some of your favorite sites and take a minute to see who their advertisers are. See where your competitors are advertising, and look for other, similar venues that your rivals haven?t thought of yet.

No business can afford waste money on ineffective advertising. Research all your options, and target your ads whenever possible. Regardless of where you advertise, targeting your ads is the key to a good return on your ad spend.

The MMOW.biz team can help you out with all of your websit advertising needs, contact one of our suporf staff today to find out more.

My CMS and hosting website MMOW.biz straight out of the box, comes ready to embrace search engines and automatically submit your site to Google Yahoo, MSN and other search engines.  With this in mind it is still necessary you understand what search engines are looking for so you can optimize your pages for best results.

The formula

The general rule of thumb is that most engines use a “formula” to determine keyword relevancy. Each  search engine has its own unique formula that it uses to rank pages.

Generally, this magic formula consists of your page title, overall body content and the number and quality of links pointing back to your site, how long people stay on your site, etc.

It’s important to note that every engine is different. Some may look at inbound links (number of people linking to you), others may place more emphasis on your body content.

Content Talks

Search engines can’t “see” a site. They can only “read” a site. Pretty does not talk to a search engine. What “talks” to a search engine are the words, the content, the material in your site that explains, shares, informs, educates, and babbles. Make sure you have quality word content for a search engine to examine and compare with all the parts and pieces to give you a good “score”.

Write Your Content with Searchers in Mind

How do you find information on the Internet? If you are writing something that you want to be “found” on the Internet, think about the words and phrases someone would use to find your information. Use them more than once as you write, but not in every sentence. Learn how search engines scan your content, evaluate it, and categorize it so you can help yourself get in good favour with search engines.

Content in Links and Images

Your site may not have much text, mostly photographs and links, but you have places in which to add textual content. Search engines look for alt and title in link and image tags. While these have a bigger purpose of making your site more accessible, having good descriptions and words in these attributes helps provide more content for search engines to digest.

Link Popularity

It is not how good your site is, it is how good the sites are that link to you. The more site that links to you and the better they are the higher your search ranking.

Good Navigation Links

A search engine crawls through your site, moving from page to page. Good navigational links to the categories, archives, and various pages on your site will invite a search engine to move gracefully from one page to another, following the connecting links and visiting most of your site.

The Big three

There are a handful of engines out there that bring traffic, but the reality is a very large percentage of search engine traffic comes from Google, Yahoo and MSN.  Yes, there are other engines like AOL, Netscape etc., but they pull their results from the Big 3.

So in other words, once you start getting traffic from Google, Yahoo and MSN, you’ll rank well in the others automatically.

It is often nice to have your webpage span the full height of the window even if you only have a small amount of content displaying at the top.

With min-height hack	Without min-height hack

The Problem

This is easy in standards compliant browsers like Firefox with the CSS min-height property. However IE (Internet Explorer) 5 and 6 doesn’t understand the min-height property.

Although IE doesn’t understand the min-height it will treat height almost as though it were min-height and will expand an element that contains its content even though the height has been set.

Standards compliant browsers on the other hand will not expand an element past the set height. So height cannot be used as min-height.

Defining both height and min-height in the same element won’t work because height will override the Min-height in standards compliant browsers.

The Solution

That’s when I came across this nifty little hack. Thanks http://www.dustindiaz.com/min-height-fast-hack/

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

The Explanation

So how dose it work? Let’s break it down.

height:

• In standards compliant browsers height is a fixed height, non expanding “not more not less”
• In IE height will set a fixed minimum height but will expand with the element if it exceeds the set height.

min-height:

• In standards compliant browsers min-height is, a fixed minimum height. “I want it to be at least this height” and will expand with the element simpler to height in IE.
• IE doesn’t support the min-height property.

!important

• An !important declaration can be likened to an override. It allows you to declare an overriding property, which will be considered taking precedence even if there are other rules with the same specificity declaring.
• IE6 ignores !important.

height: auto !important;

Let the actual final height auto-adjust (while obeying the declared min-height, of course). Even though auto is the default for any element’s height, we want to declare it because of the following rule.

So standards compliant browsers will see:

min-height: 500px;
height: auto;

IE6, on the other hand, due to ignoring !important and not understanding min-height, will see:

height: 500px;

And there you go min-height that works in all modern browsers.

Do you think blogs are a passing fad? Think again. One peek on popular blog-tracking site Technorati reveals more than 112.8 million blogs in existence. Experts estimate 175,000 new blogs are created every day.

Especially in the corporate world, a blog is an easy, effective way for a business to stay in touch with current customers and reach out to new ones at the same time. It acts like an ongoing conversation, allowing you to communicate directly to your buyers and build brand loyalty and trust.

Plus, maintaining an active blog raises your company’s online visibility, driving traffic to your Web site, meaning increased sales for you.

Consistency: Whether you update once a week or once a day, sticking to a regular posting schedule is crucial. Just like any other form of marketing, the success of your blog depends on the relationship you’ve built with your audience. Developing that relationship requires frequent communication. Regularly updated blogs score higher in search engine rankings, making it easier for potential readers (and customers) to find you online.

Write for your buyers, not yourself: Save your stream-of-consciousness poetry or Grandma’s apple pie recipe for your personal blog. Your buyers don’t care. Instead, stick to the topics your customers care about. Offer solutions for their problems, or analyze news stories and market trends that impact their lives. That’s not to say you can’t show personality in your posts. But generally, readers don’t visit a company blog to find dessert recipes. They want information and interactivity. That said …

Don’t advertise: Treating your blog like another Yellow Pages ad won’t net you new readers. Instead, provide the info your reader really wants to know, like tips and tricks, checklists, DIY guides, interviews, etc. Suppose you’ve planned an upcoming promotional event. Instead of posting a schedule or price list on your blog, run a Q&A with one of your presenters or a series of posts about a topic explored at the event in more detail. Remember that a blog is a conversation with your buyers, not an advertisement.

Comments = Traffic: Keep comments turned on, even the negative ones. Healthy debate indicates a healthy blog. Comments from those who disagree with you “add credibility to your viewpoint by showing two sides of an issue, and by highlighting that your readership is passionate enough to want to contribute to a debate on your blog.”

Make it easy for your readers to find you: Give your blog prime real estate on your company Web site. Mention it in newsletters and e-mail blasts. Be sure to use tags wisely, including social media tags for aggregators like Technorati, DIGG and del.icio.us. Finally, be sure your blogging software handles RSS (Really Simple Syndication), a feature that delivers blog updates directly to subscribers. That way, it’s even easier to keep your readers posted.

No matter how attractive a site’s design, if it isn’t practical, it’s not doing its job. Design for the screen involves a new set of requirements to deal with and pitfalls to avoid
There are many good and bad things you can do in web design, the following is a list of some of those options and how you should deal with them.

1. No page counters. Page counters do nothing except make you look like an amateur, mess with your design and tell people information about your site you probably don’t want them to know!
2. Forget blinking or flashing text. The only place you see blinking and or flashing text is on the neon signs of naked bars or websites made in the mid 90s! People don’t like them and expect to see naked people inside sites or buildings that have them … enough said.Let’s discuss an important point about online content/text versus print. People read text off a computer screen at about 1/4th the speed that they do paper.This important fact tells us that we should keep what we want to say on the web short and sweet. If some of my articles have been too long, I apologize for my flapping mouth and keyboard!
3. Make your titles on your web page make sense. One of the core attributes of a web page is its title. The page title is what users will see in there search engine results. People pay attention to page titles, so you should make sure that they are clear.
4. Flash intros. I am guilty of this as much as the next guy. A few years back Flash intros where all the rage, not sure if anyone knew why we needed them, but as it turns out the ‘skip intro’ button is the 2nd most clicked on the web today. Don’t waste your time on Flash intros and in my opinion Flash should be only used in special situations.
5. Under construction pages. Just forget it, if the page is not ready, don’t put it up. If you have links that are pointing to the pages, disable them until your page is ready.There is one exception, MMOW.biz uses an Under Construction page as a placeholder for newly created site, this is to allow you the site admin to find and login to your sites backend. I recommended you don’t disable this page until you have some content in your site.What ever you do, don’t put one of those cheesy ‘under construction’ images on the page.
6. Do keep a common layout throughout your website. Some web designers get bored with what they’re doing and decide to create different layouts for web pages within same website.People like things consistent, so your web pages should be too. That’s why all windows programs have the same look and feel, the same goes for the Mac programs.
7. Don’t create automatic pop-up windows! JavaScript pop-up windows are probably one of the most annoying things you can do to someone visiting your website. If you want to annoy your visitors go right ahead.Pop-ups are typically used to present ads and other ‘non-core’ material to users. If you use pop-up windows, you have to learn how to integrate those elements into your main pages and forget about pop-up windows.
8. Do create a site map page. A site map is a simple web page with text links to all the websites sub-pages organized in proper categories, a lot of people will use a site map if they can find one. MMOW.biz provides a site map plugin to help you create and manage your site map.
9. Don’t centre everything on your web pages. Centred text on pages is just hard to read, just think about having to read a book where all the text was centred! Print rules have been refined for well over a hundred years now, and they work well. When in doubt about layout, think about how they do it in print.With that in mind, for western cultures, left justified text (text that is lined up on the left side of the page) is the way to go. You can centre major titles or something similar, but do it very sparingly.
10. Don’t use too many colours in your website. Colour is a way that people identify things, that is why the Coke label dominantly red and the Pepsi label is dominantly blue. Keep the colour scheme of your website limited to a couple of colours and keep it consistent across your site unless you want to denote some major section.
11. Always try and make things as clear as possible to your visitors, what may be obvious to you may not be to your visitors!
12. Keep your site fresh. Unlike printed matter, a website is not a one-time thing it is an ongoing experience. Be prepared to update your site, at least once a month, adding new information, discarding anything out-of-date.Repeat visitors are always desired, so give them something to come back for. Try to include a “hook”: a service or current information tied to your expertise that will bring users back to your site regularly.
13. Be backward compatible. Using cutting edge technology can exclude readers. Many if not most users will be at least one generation behind, so don’t shut them out.
14. Test your site as visitors will see it. This means viewing your site at several resolutions (640×480, 800×600, 1024×768) and color depths (256, 16-bit, 24-bit), on several browsers (Netscape 2 and later, Microsoft Internet Explorer 2 and later) and OS’s (Windows, Mac). While no site looks identical on all monitors, browsers, and computers, you can design sites that look good on all—but only if you test the site on all. will help you do this in one simple step.