In order to emulate the popular iPhone apps we decide to use jQtouch (good basic how-to article). It does a good job of wrapping most of the touch events, making a smooth looking site on iPhone and other touch devices. We were able to take advantage of a few HTML5 (the “placeholder” attribute) and CSS3 (border-radius and gradients) features which was fun. I was able to test and debug the site using Safari (developer tools allow you to emulate iPhone) and my Android phone.

Everything was coming together nicely until I had to test on the Blackberry. After overcoming the challenge of installing the Blackberry MDS service and a couple device emulators I was finally able to do some testing of my mobile website on the Blackberry browser. I had 3 devices I was using to test (client is in Canada, these are 3 of the popular Blackberrys offered by Rogers): Bold 9000, Curve 8900, and Curve 8520. I was surprised at the differences in html and css rendering across these devices, despite the fact they are all running 4.6 version of the Blackberry browser.

Here are a few of the things I learned about making a mobile website that can be used on a Blackberry device:

• Give inputs size attributes (both the Bold 9000 and the Curve 8900 required this)
• Buttons – use padding and margin (the Bold would not center align text)
• Images cannot have width: 100%
• Float right = bad. Use absolute positioning instead
• Text areas – sigh, still not sure what will work to make them scale nicely
• Use <meta content=”true” /> – tells the browser you have optimized the site for handheld devices
• If you are using XHTML – ensure that your HTML validates. Or use

 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Update: This could be handy: CSS3 media queries

// Get the current day
DateTime today = DateTime.Now;
bool isWed = today.DayOfWeek == DayOfWeek.Wednesday;
while (!isWed){
    today= today.AddDays(1);
     isWed = today.DayOfWeek == DayOfWeek.Wednesday;
}
// add to the first Wednesday
 DateAttending.Items.Add(new ListItem(today.ToLongDateString(), today.ToShortDateString()));
// Now add 9 more
for (int i = 0; i < 9; i++)
{
      today = today.AddDays(7);
      DateAttending.Items.Add(new ListItem(today.ToLongDateString(), today.ToShortDateString()));
}

Works great, and the client was very impressed (they had been updating the drop down list by hand on their old website)

We discussed discontinuing support of Internet Explorer 6, which I am all for. But I can’t quite let go of having it around for checking, since some people are still forced to use it – because of old operation systems or work restrictions. A recent Digg survey found that users couldn’t change to another browser because they had no administrator access to their computer, weren’t allowed to upgrade, or simply couldn’t upgrade because they were still running Windows 2000, ME, or 98. We decided not to support IE6 anymore in that we wont go out of our way to make things work in it, but will still check IE6 for major layout issues (box model issues, etc…) So I decided to update my IE7 to 8, and keep 6 running in my VM.

I still don’t know which is worse – Internet Explorer 6 or 8. I guess time will tell. I think my first challenge with IE8 will be dynamically created check boxes, which were not properly supported in previous versions of Internet Explorer.

var i = document.createElement("input");
i.type = "checkbox";
i.className = "CheckBox";
i.id = "uniqueID";
// this is what I forget - Firefox allows .checked, IE must have .defaultChecked
i.defaultChecked = [true/false];
// always use labels
var l = document.createElement("label");
// ALWAYS use for attributes on your labels. FF allows .for, IE must have .htmlFor
l.htmlFor = "uniqueID";
l.appendChild(document.createTextNode("checkbox label"));

They’ll intersperse their code–those strings of instructions that result in nifty applications and programs–with helpful comments and directions, explaining why they wrote the lines the way they did and exactly how they did it. The code becomes a type of “roadmap” for others who might want to alter it or add to it later.

I have definately worked with code like this:

Men, on the other hand, often try to show how clever they are by writing very cryptic code.

To be fair, I have seen great code written by both genders, and not so great code written by both. But I have worked with far more men than women programmers so it is hard to compare.

I recently spent quite some time making Century21.ca look decent in IE6, the following is a quick cheat sheet of the most common fixes I used.

1. { position: relative }
   Adding this property can fix all sorts of bugs, from peekaboo bug to repeating character bug. In some cases removing this property can also fix things.
2. {width:auto | pixel value }
   Another common peekaboo fix. Also broken box model fix – add left and right padding and border to box width.
3. {display:inline}
   Element is floated and has any margin larger than zero .
4. {margin-left | right: -3px}
   Repeating character bug. More
5. {background-image:url();
   background-repeat :no-repeat;
   background-position: 0 0; }
   
   If background images are not showing up and you are using shorthand try breaking the properties apart.

More details and hacks

Methods to target Internet Explorer 6 and below

/* targets IE6 & below - CSS valid */
* html {}

/* applies property in IE6 & below - CSS invalid */
_property: value;
/* applies property in IE6 & below - CSS invalid */
-property: value;

Today I came across a great article by Christian Heilmann on his site about Web Developers and some of the unique situations we face. A favorite line:

You can be the most amazing developer in your field but if you cannot communicate and distribute this wisdom to others, you are not a lead developer or should get a manager role.

This perfectly describes the situation at one of my former jobs – the so-called “Lead Programmer”
was incapable of sharing or distributing programming knowledge, and it hurt the company. Just one of the reasons I am glad to have moved on. I wonder if it has gotten any better there…