The solution I came up with was to use the tel: URI-scheme that is found in most mobile web browsers including: iOS, Android, WebOS, Symbian, and Internet Explorer. Using this, I was able to create a simple HTML link using the following syntax:

<a href=”="tel:8009229999">(800) 922-9999</a>

This link when clicked will trigger the internal phone system either from a browser or from within PhoneGap to initiate a call to (800) 922-9999. I haven’t yet tested this strategy with PhoneGap on non iOS devices but I anticipate it should work in most if not all cases. I can say it working splendidly on the iOS app I currently have in development.

Related posts:

1. Solved: Problem Linking to Google Maps Using PhoneGap and Childbrowser Plugin Today, I had an odd issue which took me a...
2. How to get Fixed Header and Footer Toolbars in jQuery Mobile 1.0 At Zipline Interactive, we have been doing mobile websites for...
3. How to Detect a User’s Language with PHP I was recently looking for a simple way to automatically...

One of the the biggest problems facing mobile web developers is the ability to create fixed headers and footers on mobile websites and HTML5 powered mobile applications. The problem is caused by the lack of standard support for the CSS properties position:fixed and overflow. Originally, these were not supported because they interfered with the touch interactions of the phone operating system but as of iOS5 and Android 2.1 there is rudimentary support for position:fixed. If you would like to see the level of support for these properties in the various mobile browsers, there is a handy chart available here: http://e.com/css-fixed.

The good news is that default support is on the way. The bad news is that it is not here yet. Regardless of the mobile platform you are targeting, there will be a large percentage of users that are unable to use your interface properly if you rely on position:fixed or overflow. In jQuery Mobile, there is a default solution. They have built in toolbars that mimic a fixed header and footer by fading out and repositioning as the screen moves. While this is an improvement, it is still not a solution for a developer wanting a native app look and feel.

So what is the solution?

After a great deal of research and testing I found there were two primary solutions for this problem being used by fans of the jQuery Mobile platform. They both use Javascript to modify the elements and mimic the scrolling functionality of a native application.

Solution 1: iScroll jQuery Mobile Plugin

URL: https://github.com/yappo/javascript-jquery.mobile.iscroll
This jQuery Mobile plugin is a wrapper for the iScroll Javascript function. (http://cubiq.org/iscroll-4) This plugin is made up of a single file that drops in to your HTML and then is initiated by adding ‘data-iscroll=”scroller”‘ to the element you want to scroll. This plugin was very easy to setup and worked, however, the animation was slow on android applications and when loading websites on the iPhone I had a persistent space at the bottom of the page that I could not remove. I believe it was caused during loading by the default iPhone toolbars but I am uncertain. I searched online and wasn’t able to find a suitable solution. Many users have reported this solution worked well for them and several indicated they were using it successfully with the PhoneGap platform.

Solution 2: Scrollivew

URL: http://jquerymobile.com/test/experiments/scrollview/
Download URL: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
This jQuery Mobile plugin is actually sponsored by jQuery and is currently listed under their experiments section on the jQuery Mobile website. It was a bit harder to get running. It required 4 files, 3 Javascript files and 1 CSS file, although, I was able to lump them together into existing application files to minimize HTTP requests. This solution worked very well for my application. After installing the scripts I simply added data-scroll=”true” to the element I wanted scrollable and the plugin took care of the rest. One important thing to note about this solution, is that in addition to simple fixed toolbars, this plugin also allows scrolling of on page elements left or right and can also handle scrollable lists with inline headers.

My Conclusion:

After extensively testing both of the primary scrolling options for jQuery Mobile I feel like the jQuery Mobile Scrollview is the best solution. It was very easy to install and configure, offered great support on iPhone and Android devices, and has more options and configurations available to customize your application. In addition, it may at some point be integrated into jQuery mobile as default functionality to serve as a bridge until position:fixed and overflow are full supported by the majority of active smartphones.

No related posts.

a:hover, a:focus, a:active {
    outline: none;
    -moz-outline-style: none;
}

You may need to modify this accordingly to your application. The command outline: none; removes the border in current versions of Firefox and the hack -moz-outline-style: none; applies to older browsers.

No related posts.

The video is from the Poetic Prophet (AKA The SEO Rapper) The rap is actually pretty funny. I have seen a couple other videos from the SEO Rapper but I hadn’t come across this one. Some of my favorite lines are:

“Don’t use italics use emphasis”

“Don’t duplicate it or you might face a litigation”

“Your photoshop functions, slice that design, do your layout with divs, make sure that its aligned”

“Please don’t use tables even though they work fine, when it comes to indexing they give search engines a hard time”

“The competition will get bitter, you’ll shine like glitter”

It isn’t every day you hear a rap song about web design. In fact I have only heard a couple and they were mostly done by white guys skinnier than I am. In all honestly I can’t believe this exists but since it does you have to check it out. If you’re really bored check out some of his other videos. I know some of you may have seen them already but if you’re like me and missed out on the SEO Rapper thus far, you need to check him out.

No related posts.

If you’re a Windows user try it out: http://code.google.com/p/ibbdemo2/downloads/list?can=1&q=

Most things rendered similar to how they actually appear on my iPhone but the use is much clunkier than on the actual iPhone.

No related posts.

The first company I will name because they’re actually using Flash correctly. The company is called Seven2. They create Flash based websites for movies like Rush Hour 3 and online games for places like Nick Jr. I believe it is fine to build these types of projects in Flash. These companies, organizations, or promotions are using traditional means to drive users to the websites. Movies like Rush Hour 3 are going to be found by searching for their name directly and users expect a certain amount of interactivity from a site for a major motion picture. While I still hate the amount of time all flash sites tend to take to load, the guys at Seven2 know what they’re doing and they create some great marketing pieces for the right clients. Their clients are the exact people that need interactive Flash websites.

Unfortunately, the “Company 2” doesn’t do things quite as well. This company whom I won’t name works with local businesses in varying industries. Their clients include a broad range from realtors, to shops, restaurants, to manufacturing firms. Almost every one of the sites they’ve developed is 100% Flash based. Just like Seven2, this company creates some great designs. Unfortunately, unlink Seven2 their clients don’t need all Flash websites. This company’s clients are primarily local companies, and companies in industries that really need successful search engine optimization to thrive. Customers of this firm do not rank well in the search engines. Over the last year, we have talked to a few previous customers who have never gotten a lead from their website. Not because it isn’t well designed but because people simply cannot find it. Often websites designed by “Company 2” cannot even by found by searching for the exact name of the company. We work with a number of local companies that generate a lot of business through their website. Before working with us, many of these customers had a website for years and had began to see it as black hole not as a powerful lead generator.

All Flash websites serve a purpose but they’re not a good fit for most local or even national businesses who intend to drive traffic from the search engines. I feel firms that are out there selling and creating these are doing their customers a serious injustice. The goal of any web developer should be to create a return on investment for their customer. Not to win awards or impress their developer friends.

No related posts.

At first, I was reluctant to believe him. I figured the problem was probably a local issue since this was not something I had seen before and was clearly browser related. After doing some local testing I discovered that an attempt to print longer pages, anything that translated into more than one printed page in IE7 did indeed result in endless looping of the page count in print preview.

Surprised there actually was a bug, Thomas and I did a little research on the web. We were unable to find many others that had encountered the same problem. The few posts we found were primarily people asking how to solve the problem on forums. Unfortunately, with no solution provided. We did come across a posting on MSDN where one user suggested the problem only happened with CSS based layouts and his suggestion was to rebuild the entire website in tables. Since this seemed ridiculous to us we decided to instead investigate further.

The first thing we did was make sure our code was valid. We validated both our CSS and our XHTML successfully. We also made sure we had the proper character set and did a visual once over of the source code. Since the website rendered properly in all major browsers including IE6 and IE7 we were stumped. We decided to start commenting out elements. First we removed all JavaScript and CSS. This solved the print preview problem but obviously blew apart the layout. We then added back in the CSS and found that the print preview bug returned. This narrowed the bug down to our CSS documents. Our website contained two CSS documents. One CSS document had all of the text formatting and another held the presentation formatting. We commented these documents out one by one to narrow the problem to a single document. We discovered the problem was in our format.css file. We then went through this document removing various declarations until we were able to find a singular declaration that was causing the problem.

The problem turned out to be with the float attribute in our navigationWrapper. The original code looked like this:

#navigationWrapper {
	width: 100%;
	background-color: #8F4807;
	float: left;
	}

The odd part is that this same exact code appeared in other elements in the same CSS file that did not cause a problem for IE7. Even though this makes no sense whatsoever the bug needed to be repaired and since there wasn’t actually anything invalid about this CSS we just switched float:left for display: inline-block for this one element:

#navigationWrapper {
	width: 100%;
	background-color: #8F4807;
	display: inline-block;
	}

Thankfully this solved our problem. Now, print preview functions great and our website still appears perfect in all major browsers including Internet Explorer 6 and Internet Explorer 7.

If you have a similar problem please report your details as a comment. We’re hoping to catalog experiences with this bug so that other users can benefit from your experience. Since this bug is relatively unknown we want to help anyone experiencing it find a workable solution. Good luck!

No related posts.

The video lasts about 20 minutes but has some cool and interesting information about Google and their index.

No related posts.

Unfortunately, many of the features of Bespin are not yet enabled. Currently you can’t do a whole lot with it but I can see some serious potential. Their website suggests that you will be able to easily load popular open source code and the program has some collaboration functionality that looks like it has a lot of potential. I have read that Bespin intends to allow you to collaborate even going so far as to share your environment with other programmers.

While I am excited about the move to cloud computing and all of the new product offerings I am also a little nervous. Many of the cloud-based applications I have demoed are buggy and functionality is inconsistent. One I do use on a regular basis, or at least Deanna does, is Basecamp. It is less software like than many newer online applications but it seems to be very stable. The last thing I want is to edit an important web document in my online IDE and have some JavaScript error occur that causes my file to be saved blank.

I think for now I will continue to stick with my desktop applications for business use. As much as I love to be an early adopter I think I am going to let some other programmers work the bugs out of these online environments before I jump in.

Check it out: https://bespin.mozilla.com/

No related posts.

While this is good news for designers who want to look trendy but can’t write off the oversized expense as a tax deduction. I wonder what kind of problems it will present to app designers. Now there will be 4 variations to consider, with varying feature sets. The original iPhone, the iPod Touch, the iPhone 3G and the new $99 iPhone all are significantly different. For some apps and games it won’t matter but for some that want to incorporate GPS or the camera it may increase the number of logistical issues. It will be interesting to see what Apple decides. It may be that 3G and GPS stay intact as research firm iSuppli estimates the cost of these options at $20.

Regardless, Apple expects they can sell 20-30 million of these cheaper iPhones in fiscal year 2010 boosting their smartphone market share to almost 20%. Now maybe Adobe and Apple will actually get serious about making Flash work on the iPhone.

No related posts.