A number of things have changed since I last took on a website redesign 5 or 6 years ago.  First was that I am now designing on a Mac given my switch from PC’s back in 2008.   This can make it difficult to debug unless you have access to PC’s with various versions of Internet Explorer.  Secondly, mobile devices cannot be just an afterthought anymore.   Significantly more people are accessing web content via iPhone, iPad, Android, etc.   Lastly, web browsers have had several revisions – each version can make changes that can really screw with your layout, and there are certainly more web browsers to contend with now.

Google Browser Size

How big is too big?

One of the first questions to answer is basically how big your layout is going to be.   Especially for a photography website, the size of the images then becomes a key factor in this.   I originally started off thinking I could go much larger in my layout and image sizing than I had previously.   My Google Analytics stats tell me that a vast majority of my visitors are on resolutions of 1024×768 or greater.   Then I discovered this cool tool in the Google Labs area called Browser Size.

This site gives you an onion skin overlay of any website, and shows you the percentage of users that will see that area without scrolling and the corresponding display size in pixels.   It is particularly important that key information is placed in areas most people will see.   In addition, I believe horizontal scrolling is still generally a no-no unless it is a specific feature of the site design.   I had to redo some of my original layout and image sizing upon discovering that a significant amount of people would have to also horizontal scroll to see the entire page.   From the overlay, you will see that the optimal width is between 950 and 1000 pixels.

iPhones and iPads

I  learned that Apple has designed Mobile Safari for a default web page width of 980 pixels.  A number that interestingly falls right in the middle of the Google Browser size recommendations.   It doesn’t mean that other sizes cannot be displayed in mobile Safari.  They just might not have optimal scaling and accessibility.   Apple goes into a lot of detail on options designers have for site design for their products at the link above.

iPad testing

If you don’t have an iPhone or an iPad, and are not part of Apple’s App developer program – testing things out on these devices can be a bit of a shot in the dark.   Generally I don’t think many designers even worry about it unless targeting them specifically.    Mobile Safari seems to be fairly flexible anyway in accommodating most things, except for Flash.

I did find some iPhone simulators, which didn’t seem accurate at all.  Since I do have an iPhone , the simulators I tested did not accurately portray what the page really looked like.   There is a very nice site for the iPad called iPadPeek.   You can punch in any website and it shows you how it will display on the iPad.   I have found this one to be quite accurate.    If you go over the 980 pixel width, some funky things can start happening with how they are displayed in mobile Safari.  As far as other mobile devices, I have not investigated them as much.

Adobe Browser Lab

The dreaded IE!

There are quite a few testing sites around that offer simulations in many of the different browsers and versions out there.  I have tried a few of the free ones, others require subscription fees.  None of them were as helpful and as polished as Adobe Browser Lab.   Browser Lab offers display simulations in different versions of the most popular browsers – IE, Safari, Firefox, and Chrome.   For the time being, it seems free to use, but it seems it may become part of a CS Live subscription in April 2011.

I liked that you can display 2-up views to compare one version versus the other.  You can do overlays, and easily switch between various versions.  However, the previews are not live, they are still screenshots.  In the screenshot here, you can see part of the issue in my nemesis IE6.   I still haven’t fixed this, don’t know if I will spend the time to figure out why I get that vertical line.   It is little things like this that really drive you bonkers.  Unless you are a browser wizard, it can take a lot of time (at least for this amateur web hack! 😉 ) figuring out how to remedy these little layout quirks that don’t end up causing issues in later versions or other browsers.

I have stated it before, and will state it again, I can really admire professional website designers and the hassles they must go through.   Trying to find a peaceful middle ground to optimize your site for is no easy task.  Testing live dynamic content is tricky to do across platforms and browsers.  Hopefully for anyone taking on a website, the three sites linked above will give you some help and guidance to keeping your sanity.