Firstly a bit of background, the company I am working for at the moment recently released a real-time CSS editor (of sorts) which I built that allows customers to style their sites using nothing more than uploaded images and some UI controls – for more details on that you can see a video of it in action on this blog post and some of the amazing results that customers have been able to achieve with it.

Yesterday one customer reported an issue where a large background image (1800×2520) was being shrunk on the iPhone. I did quite a lot of investigation and to cut a long-ish story short I discovered that there is a tipping point where the total pixel-area of an image causes mobile Safari to resize the image. This tipping point appears to be at 2,000,001 pixels.

Read on for a bit more of a breakdown of my experiment results.

To debug this issue I looked at the pixel size of some of our larger background images that were working fine on the iPhone and then tried various sizes to see what the results were. My experiments are shown in the table below (in the order I performed them).

There were further tests in between but I won’t list them all for your sanity but my tests seems to say that it didn’t matter on the width or the height of the image just the total pixel area. E.g. a very wide image < 2,000,001 works just as a very high image does. At 2,000,001 pixels or larger they get shrunk. Note I didn't get it right down to 2,000,001 pixels and this is just an educated guess that it is the actual tipping point.

I’m going to submit this as a bug to Apple I’m not sure what is causing this but another guess of mine is that 2,000,000 is the maximum area that the renderer will handle/cache (you can see this in effect when you scroll around on mobile Safari how it re-draws the page) and so is getting enforced on the background image some how.

Update: 22nd Feb 2010
It seems I should have RTFMed. Apple got back to me with regards to the bug and pointed me at the Known iPhone OS Resource Limits in the Safari Web Content Guide which says:

• The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels.

  That is, ensure that width * height ≤ 3 * 1024 * 1024. Note that the decoded size is far larger than the encoded size of an image.

• The maximum decoded image size for JPEG is 32 megapixels using subsampling.

  JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.

Emphasis added.

If Microsoft Insist On Making It Nigh-on Impossible For Us To Test IE Effectively Then Why Do They Think We Should Bother Supporting It?

But I decided that was a bit too long, so I took inspiration from the soup kitchen chef instead, it’s more to the point.

Anyway the reason I’m back writing about adventures in IE testing land is I have a week of some horrid IE browser testing of my current, JavaScript heavy, project coming up if the first quick check through all versions of IE is anything to go by. Yes I know I should have been testing as I went along, but having to refresh 9 browsers with every change really kills my buzz (especially when 3 of those are IE).

So I did some initial browser testing last week and got zero issues in 6 browsers, but each version of IE threw up massive amounts of JavaScript errors — absolutely all over the place — and we all know how annoying debugging JS is in IE. This combined with my aging (and decidedly creaky) Windows XP Virtual Machine (running in Parallels on a Mac Pro with more than enough grunt to run multiple VM’s all at once) meant that tonight I decided to look for new alternatives (as multiple versions of IE on a single VM have never been great anyway).

So single VM images (as light and quick as possible) was my plan and I started to do some research, and found the following:

• Microsoft handily supply a bevvy of Internet Explorer Application Compatibility VPC Image’s exactly for this situation. Score 1 Microsoft!
• These are Virtual PC images, which is only available for Windows… but I found these instructions for converting them to run with either VMWare Fusion or VirtualBox. Score 1 Mac and the sweet, sweet people on the Internet

So I’m all set right? The steps aren’t that difficult and I choose to try VirtualBox as

1. I’ve tried VMWare Fusion before and wasn’t that keen.
2. I know that VMWare won’t run at the same time as parallels. A big minus there.
3. I’ve wanted to try VirtualBox for a while.

I do a few downloads, the conversion stuff and within the hour I have VirtualBox booting the image. It boots quickly and it’s nippy, I assume they’ve stripped Windows down to the bare bones with just enough to run IE properly – which is what I was going to try and do anyway. Windows says something about having to re-activate so I try, that fails but says I have 3 days so I figure that has to be due to the last step I haven’t completed, which I then do and reboot. Only to get the following:

1. WGA prompt
2. Follow instructions
3. Fail
4. Repeat steps 1 to 3 a couple more times
5. Search Google and find out that they’ve gone and restricted it to running in Virtual PC only. Microsoft FAIL. It’s in the EULA so I should have noticed it… Like I’m going to read every EULA put in front of my face.

Peter L who is the “Product Manager, Internet Explorer, Developer Division” has the following month and a half old update:

I’ve spent some time investigating this issue, and now understand that the VPC images used to work on other hosting environments, but with the latest release, don’t any more. We have a better understanding of the issue now, and while we’re looking for a solution, we don’t have one right now. If you’re using the VPC’s, and they don’t work any more, I encourage you to email me, with your name, how you’re using them and the hosting environment that you’re using.

I’ll drop him an email but I don’t expect to get a resolution any time soon.

So a couple of hours of work and I’m back to square one, the only positive thing I can take from this is VirtualBox seems quite fast and neither it nor Parallels have complained about the other. So I might try converting my Dev VM’s and setting up a new Multi-IE Windows VM on there.

But the big thing I take from this is that Microsoft don’t want you to play with them if you don’t own a Microsoft football. I quite honestly would be quite happy to do that, to never have to open IE again would suit me fine.

Unfortunately that would also mean commercial suicide for a web developer who works on public facing sites.

The elevator pitch for Where to Start With goes like this:

Where to Start With helps you when you’re trying out new bands and artists by providing community-powered recommendations written by die hard fans.

If that new band you want to try has 10 CD’s out, then Where to Start With will give you… well, where to start with them!

The whole idea behind this site came from a need me and my friend found ourselves having; many times we would hear a song or read about a band that sounded interesting but then when we did go to try that band we would find they had a handful of releases out already. Where is the best place to start with them? Traditionally unless you got a specific recommendation for an album you would just try the lucky dip approach and hope you found a winner. If you got lucky you might have just found your new favourite band, however if you picked a rotten egg you may dismiss your potential new favourite band based on your opinion of one of their poorer releases.

A personal example was when I was recommended to listen to Porcupine Tree and given one song to try. That song was awesome, however Porcupine Tree have a massive back-catalogue (9 albums, 6 live/compilation albums and 4 EPs) and from trying a few releases out I found that they are very diverse and I still haven’t managed to get into them, although from that initial song I really wish I could. What I really needed was a guide to tell me where to actually start with Porcupine Tree, for example something that said "for starting out with Porcupine Tree what you really need to buy first is their album X".

This is how Where to Start With was born and also basically how it works — each band or artist will have an article about them which gives a short history/description of the band and each of their main releases (e.g. Albums & E.P.’s) with a little description. Any user can add these articles and each article is in the wiki-style, e.g. anyone can edit the descriptions to add new information and fix mistakes etc.

The real core of the site comes into play when people start adding their opinions on artists, once again anyone can do this, but it is better for people who are currently fans of the artist to add their opinion. Each opinion includes a rating, a recommendation (more on those later) and a personal comment on each of the albums for the artist. We then take these opinions and produce an article that gives you recommendations on where to start with the artist, what to try after that and even sometimes what to avoid.

What makes this different to other sites?

Well, whereas other sites, software and services may give you reviews, the most popular or most listened to albums those may not necessarily be the best releases to start off with a new artist.

For instance Reefs debut album "Replenish" is absolutely amazing and one of my all time favourite albums, however pretty much anyone interested in starting with Reef would be best advised to start with their second album "Glow", which is much more accessible in general. Another clear example would be Nirvana, I personally hardly ever listen to Nirvana’s "Nevermind" album any more (as I know all of Nirvana’s albums inside and out, every cough and guitar string noise included) and I would rate "In Utero" as my favourite album however "Nevermind" obviously would be the album I would recommend anyone new to Nirvana should start out with.

But going further than that after you have tried the "essential" release Where to Start With helps you with which release to follow the essential release with, a wildcard album and even sometimes what to avoid – these can be really difficult to determine from the other methods.

About the recommendations.

Each Where to Start With article can have the following recommendations for each release to help guide you:

• Essential: The the first release to try, the best introduction to the artist.
• Follow with: The next release to try after the essential release.
• Also recommended: Another good release to try.
• Wildcard: A release that may not be "the norm" for the artist but still could be interesting. If you try the essential release and weren’t so keen this should be different enough to be worth a try.
• Avoid: Yes, some users will also tell you what to avoid.

The votes of each person on each release are added up to ensure that each article has one of each of the above recommendations (where applicable) and the more opinions that are added the better the recommendations become. You also have access to personal comments of each person who gave their opinion to give you a better insight into why they voted how they voted. And finally, just in case there is a close call between releases you can also see the breakdown of the votes for each release.

Sounds great, how do I get started?

Well we’re currently in private beta and have been running with a small handful of users for the past couple of weeks but are accepting applications to the beta and adding new users on a daily basis. The reason we’re currently in private beta is to ensure that the platform is solid and discover any issues, we’re not sure how long this will take but we obviously want to be out of beta as soon as possible. We also have setup a dedicated blog for Where to Start With which you can follow if you want to be kept up to date with progress of the beta and other new things (as we’re not finished adding features yet).

It’s working for me already!

Even with the small handful of users in the initial phase of the private beta I’ve already found one new band who I would have probably a) never heard of and b) not known where to start with without the site. There is more on this in the post It’s working for us on our blog.

So give it a whirl, and do get in touch to give us your thoughts etc.

It’s quite a nice idea and really well executed. What I really liked is the fact that they’ve obviously spent a little time designing this thing (both from a UI and functionality point of view). It’s really quite refreshing to see something like this appear in an era when most simple ideas I see like this end up running on a blog or a wiki platform.

So if you’ve got an iPhone head over there and vote, if you haven’t head over and take a look at the design.

Now in my defense, the “important message” isn’t that obvious (to me anyway) in my default sized (wider) browser than it is in the screen shot. But lets take a look at it anyway:

“You clicked on the button indicating you are a new user…”

No I didn’t. Hell, until you pointed those out I really didn’t even notice them.

That’s right two bold pieces of text between two input boxes that I filled out and I missed them. Not once, but every time I’m presented with this page.

Now it may just be me, I’m sure Amazon do lots of usability testing, but surely it could be better by doing any of the following:

1. Don’t show the password box until I select “I am a returning customer”.
2. Make returning customer the default option, surely that is more than likely to be the case?
3. Don’t title the submit button “sign in using our secure server” when that’s not what it’s doing (see 1).
4. Don’t try to cram two functions into the same form.

Any of these will make the experience easier for the user, and also mean that there is less validation to be performed on submission of the form.

Now as a developer I know that things like this can sometimes happen. They get done, no-one really notices it or looks at it in any great detail from one month/year to the next. But still every time I use Amazon lately there is something that blocks my path consistently, which for some reason my brain doesn’t learn. I guess if I’m presented with a sign in page and two input boxes that my learned behavior of enter username, enter password kicks in and that’s why I don’t see the radio buttons between.