Several weeks ago, Jen from life begins @ 30 posted some interesting statistics here on the most common screen resolutions in use today. She also offered some useful suggestions for how to see what your blog looks like in resolutions other than the one in which you normally work. A related question that I have been thinking about lately is how my blog appears to those accessing it through other browsers running in other operating systems. I recently came across a very useful tool for answering this question, one that I do not think has been discussed or mentioned on this site before (please forgive me if I somehow missed it).
The BrowserCam website allows you - normally for a fee - to see how any URL appears through any one of 65 different browser/operating-system combinations. The available operating system options include Macintosh OSX 10.3, Red Hat Linux 8.0, Windows 2000 Professional, Windows 98, and Windows XP; the browser options encompass all of the most popular ones (IE, Firefox, Mozilla, Opera, Netscape, Safari, Konqueror), and include certain older versions of these browsers as well. The site is far from perfect, but it is fairly intuitive; you simply type in the URL, check off the browser/operating-system combinations that you want to see, and specify the resolutions (640x480, 800x600, and/or 1024x768) in which you are interested. You then get thumbnail images of what the website at the pertinent URL looks like in each of the specified instances. There are other advanced services and features available as well.
The service is not cheap; it costs $19.95 for 24 hours of unlimited access, or $59.95 for a full month of unlimited access. Notably, however, BrowserCam will give you one free 24-hour trial period in which you are permitted up to 200 screen captures. I signed up for this earlier today, and I personally have found it extremely valuable. I was fascinated - and in some cases horrified - at how some people out there have been seeing my site, despite the fact that it looks perfectly normal on the computers to which I have immediate access.
So, after an iterative process of tweaking my template a bit and then running another screen capture, I was ultimately able to improve the percentage of browser/operating-system combinations in which my blog will appear at least more along the lines of what I intended.
I suspect that many of us are not hardcore enough to require ongoing access to this service; I certainly am not. But if you're just setting up your template, if you have recently made a substantial revision to your layout, or if you're simply curious to see how your site looks to your readers, you might find even a single session to be helpful. And given that the first session is free, there's really no downside.
P.S. Just to be clear, I have no affiliation with BrowserCam; I just found the tool to be quite helpful, so I thought I would pass along the information to the rest of you.
Subscribe to:
Post Comments (Atom)
4 comments:
this is great, considering the question I am about to post shortly, however, even if you can see how horrific your site looks on some other browsers, how do you know what to do to fix it?
That's the part that beats me.
shame it is so pricey
Yes, figuring out how to fix it is definitely the challenging part. I ended up doing the only thing I know how to do in such cases, and that was experimenting with anything and everything that struck me as a potential source of the problem until something worked.
For example, on my own screen, the two columns of my blog get laid out perfectly side by side. On several other browsers, however, the right column was pushed all the way down the page - such that it didn't even begin until after the left column ended. I figured that this might be caused if the width of the content region is not great enough to accommodate both columns. But a review of my template confirmed that the content region width was greater than the sum of the widths of the two columns. Plus, the page renders properly on my browser - suggesting that this cannot possibly be the problem. Nevertheless, I experimented with increasing the content region width little by little, and lo and behold, the problem ultimately disappeared. Not a theoretically-based solution that I can even begin to explain, but a solution nonetheless.
Incidentally, and just FYI, I suspect that the inverse of the above problem may be occuring with regard to this site. That is, on my screen (with IE 6.0/Windows 2000), the right column is pushed all the way down the page, while it presumably is not on others' screens. The same is true for several other blogs that I have visited.
Same thing for FREE:
http://browsershots.org/
Too bad the queue is days long. I personally have 3 machines set up for testing pages and I still miss things.
As for fixing browser problems, understanding how IE misunderstands the box model and how different browsers handle floats is key to building pages with CSS without tearing your hair out.
This is a subject too big for a simple answer. Check out:
positioniseverything.net
for explanations of css and other rendering bugs in modern browsers
Floaturial - basic of floating elements
What margin collapsing is all about
Absolute vs. relative positioning
I agree this is an important part of website design. Some code tools (I use Homesite) already have the feature of checking across different platforms and browsers.
I would like to put forward here that this is a good case for one to hire a professional in regards to website design. This is a good topic to bring up with a potential designer as a concern.
While its fun to figure out how to code and set up our food blogs, alot of these issues take some real hammering on. Solving these issues are the sort of details that distinguish someone-who-makes-websites from a real gem of a professional web designer.
Post a Comment