How Does Your Blog Really Look?
43
Image by Gwennie2006 We all think we know how our blogs look. We look at them everyday. We boot up our computers, fire up the browser and…
Wait. What web browser are we using? And is it even a computer?
Firefox or Internet Explorer? PC or Mac? Windows or Linux? Desktop or handheld? iPhone or PS3?
There are a lot of possibilities, but some are more important than others. This is the order that I would recommend testing them in, and how do the test.
Start Off Easy – Standards Browsers
Even if you use Internet Explorer (IE) for daily browsing, I recommend that you start in one of the other browsers.
IE’s view of the page will look different to Firefox’s, and to IE’s credit, it is much easier to make a patch for IE than for Firefox.
- Download Firefox (And I recommend the Web Developer Extension as well. Endlessly helpful!)
- Download Opera.
- Download Safari (There is a Windows version).
When your page looks right in Firefox (Or either of the others), then 99% of the time, it will look right in the other 2 as well. Three of the four major browsers done.
Prepare for A Headache – IE6 and 7
NB – I’m a Windoze Windows user, so I only know how to test IE on Windows. If you know how to do it for Mac or Linux, pleases let me know in the comments! Sorry.
Update: For Linux users, try IEs 4 Linux. Thanks Dandellion!
For Mac users, try IEs 4 OSX. Thanks Matt!
By default, it isn’t possible to run both IE6 and IE7 on the same computer. However, with IETester,it’s easy.
IETester can be used to test both IE7 and IE6 on Vista and XP (As well as IE8 and IE5.5, if you want those as well). Download it for free from Debug Bar.
Work on IE7 first. It will be the easier of the two to solve problems for. When that’s done, move onto IE6.
To make debugging easy, use conditional comments to give each version of IE its own stylesheet (Or its own rules inside your regular stylesheet).
Getting Mobile – Opera
![operahandheld[3]](/wp-content/uploads/2008/06/windowslivewriterhowdoesyourblogreallylook-2256operahandheld3.jpg)
To test how your blog looks in a mobile environment, the easiest way is to load up the page in Opera, and press Shift+F11.
You will now see your page as it would be if rendered by Opera on a mobile. You can adjust this appearance by creating a mobile stylesheet.
e.g. for WordPress users with a handheld.css in their theme folder:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/handheld.css" type="text/css" media="handheld" />
The Fun One – iPhone
If you’re a Mac user, you can download the free Software Development Kit from Apple, which includes a complete iPhone simulator.
If you’re a PC user, you’re less lucky. Sites like Test iPhone and iPhone Tester claim to emulate the experience, but they do a poor job.
They both zoom in to 100% view, leaving a lot of vertical and horizontal scrolling (On the iPhone, the page is zoomed out by default, so the whole width fits on the screen). They also show a bug for the background image of this site at least, but the bug does not appear when using my iPod Touch.
If anyone knows of a better Windows iPhone emulator, please let us know.
In the meantime, if you want the peace of mind of knowing that your site works on the iPhone, drop your link in the comments and I’ll check it out for you.
Drawing the Line
There are many more browsers out there. Flock, Konqueror, Camino. However, most of them won’t be worth the effort of debugging for, unless you have time on your hands.
Use your web analytics program to find out which browsers are being used on your site. In Google Analytics, go to Visitors > Browser Capabilities > Browsers and OS. Then make sure your blog works perfectly on these, and well enough on the others.
What browsers have you tested your blog on?
Enjoy this post? You should follow me on Twitter!
About the Author
Michael Martin
Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies.
Related Posts
-
In Defence of Internet Explorer
14th December 2007
-
How To Make Your Blog Printer Friendly
9th August 2007
-
Does Valid Code Help Your Blog?
29th August 2007
-
Perfecting Your Printed Posts
14th August 2007
Flock and Camino should work straight out of the box because they are based on the Firefox rendering engine.
I disagree about not testing with Konqueror because one day you might write an article about linux and then you’ll get a ton of passionate linux users visiting. It’s worth making them welcome – and Konqueror does not take much effort to support, it’s a well made browser.
I’d also recommend testing in a text-based browser, like lynx, to check how bots and search-engines will view your site and verify that navigation works without needing Javascript.
One more tip – test your RSS feeds in a variety of readers too.
Bookmarked for future reference. Cheers Michael!
I cannot agree that it is easier to make a patch for IE than for FireFox. You don’t have to make patches for FF, if page passed validation then it will work and look in FF. Same doesn’t work for IE. That is why there are patches for IE.
Linux users usually install IEs4Linux for testing purposes. http://www.tatanka.com.br/ies4linux/page/Main_Page
And a great site is http://browsershots.org/ which test your design in dozens of browsers, OS’s and screen sizes.
Andymurd,
I didn’t know that about Camino. Thanks for sharing! I knew it was true for Flock, but FF3 is about to be released. Over time, the two will get more and more distinct I imagine. That’s why I mentioned Flock separately.
You could well be right about Konqueror, and even the text-based browsers, but most Linux users will visit using FireFox, and the mobile Opera test will do well enough for text based I think (It disables Javascripts as well). If you have the time, then by all means test away, but if you don’t have the time, I don’t think it will cost you too much.
The RSS tip is a great point. I’ll definitely have to get around to that. Thanks! :)
David,
Glad you found it useful!
Dandellion,
I know what you’re saying; that FF follows W3C recommendations, and you should code by those recommendations.
But if you know how IE works, it’s just as easy to create a working page in IE as it is in FF really (And it would be very tempting to do so if your daily browser was IE)
However, your page that works in IE won’t work in Firefox (Because IE is poor with standards, like you said), and there is no easy way to make it work in FF without breaking it in IE. Firefox is hard to patch.
But if the page works in FF, then you can create IE-specific stylesheets to fix it. Those conditional comments are one of the best features about IE. Couldn’t be easier to patch it up. That’s what I was recommending in the article. :)
Thanks for sharing the Linux link! I’ll add that to the post now.
Great advice, some people really don’t get that there are more browser out there worth testing. As you said, it’s a priority to make sure your site works with your user-base’s chosen browsers before thinking about the others.
My blog does work in IE6 though the shadows down either side of the content area are PNGs, so there is that background colour issue. IE6 isn’t one of my most common visitor browsers though, but I will eventually fix it.
I’m not really a Mac user, but I’m pretty sure that you can run Windows using parallels and check at least one of the relevant IE versions that way.
Mike,
Sounds like it’s such a small issue, it won’t get in the way of their browsing. Definitely counts as a working site. :)
Joshua,
That’s a good point. But they would have to buy the Window OS license? Pretty expensive, though it’s true that it would work. (Expensive assuming everything is done legally of course… ;) )
@ Michael: It does add to the cost, but a lot of designers/developers already invest in it for the odd piece of Windows software that they can’t live without.
Mac users can use IEs4OSX: http://www.webmaster-source.com/2008/05/14/ie4osx-run-internet-explorer-on-your-mac/
It has IE6 and IE5.5, but the IE7 standalone it inclued doesn’t really work yet.
Joshua,
Ah, then it’s a good solution for them. Cool.
Redwall,
Thanks! That looks great; I’ll add it to the post now.
Just the opposite – provided you are following standards. If the page has valid (X)HTML and CSS, it is very easy to patch it for FireFox and any other standards compliant browser.
The problem with IEs is that they are incompatible – if you fix something for IE7, chances are that the page won’t work in IE6. Even don’t want to talk about IE8 with its regexp-based CSS parser :-)
Actually, IE tester is too buggy to use it for testing something serious in IE6 – a lot of things does not work, IETester crashes etc… Moreover, I didn’t find any acceptable way of using IE Developer Toolbar in IETester (of course, I can do that with registry hacks, but it sucks).
I’m a Linux guy, so I already have Konqueror, Opera, FireFox and derivatives (Galeon, Iceweasel, Kazehakase, Flock, Dillo – actually they do not look the same because they use different Geckos). For IE6/7 I have a virtual machine with IE6 and IE7 Standalone + Safari/Win. In exceptional cases I use browsershots.org service (BTW, highly recommended).
Yes, you even can run IETester in Parallels – it will work.
You can download Virtual PC and Windows images with different IEs for free. VMWare understands VPC’s images, not sure about Parallels.
You can use FireFox with Web developer extension installed – press Ctrl-Shift-S and you will see the page without any stylesheets.
Dude you need to get out more
I learned the hard way when I started tweaking my blog! I was amazed to see that things didn’t look the same :lol:
I usually test my blog with http://browsershots.org/
(this is not spam, just a useful link I found long time ago!)
Yes, mine works in IE6 or at least that’s what browsershots showed me. But that did take some custom IE styling through since IE is quite annoying with having slightly different ways of interpreting margins and paddings and rendering fonts in different sizes. Why the heck 16px for example has to be bigger in one browser than the other is a wonder to me :P.
But it should be compatible with IE5.5, IE6 and IE7. Only tested 7 myself but the others render correctly in browsershots so.
It’s not compatible with IE8 as IE8 once again handles margins and paddings differently, not just from all non MS browsers but also from their own previous browsers. But that’s going to be solved once IE8 actually officially launches, perhaps they might still change that.
Well I had plenty of problems with IE6 when I was releasing my first own design for blog, less problems with the second one and as of now, I haven’t discovered any problems with the current, 3rd design for my blog.
However, I have never had any problems with IE7 so the only reason I wasn’t using it instead of Firefox was simply the fact that it’s from M$ … although it uses less resources than FF2.
An alternative to IETester would be Multiple IEs, which doesn’t run on Vista as far as i know.
Great article, as always, Michael. :)
Oh, I didn’t know that you could have the IEs on a Mac. Thanks for the link!
I’d like to point out that people may also want to test their sites on older versions of Firefox, as well. Firefox 1.x has this annoying habit of placing an ugly horizontal line right across horizontal CSS menu bars [I read somewhere that this is one of those old bugs]. You may not think that’s necessary, but what about those who are on public libraries or on outdated school computers?
As for browsershots, yeah, I guess it’s good, but waiting for the queue and realizing that your screenshot’s already gone would be annoying. XD Doesn’t happen all the time, though. :P
Vladimir,
I think we’re arguing different points here.
“Just the opposite – provided you are following standards. If the page has valid (X)HTML and CSS, it is very easy to patch it for FireFox and any other standards compliant browser.”
Definitely! But that’s not the sort of patching I meant. That is just making your webpage work in the standards browsers.
You then have to make it work in IE, and thanks to conditional stylesheets, that patch is very easy to make.
Wheras, if you had made your page in IE first (Just as easy to do as making it in FF is really), you would then have to patch that page to work in standards browsers as well, but the standards browsers dont have a feature like conditional stylesheets.
Do you see what I mean now? The point is that no-one should use IE as the first browser they build their webpage in. :)
About the rest; I have Virtual PC with an IE6 image as well. IETester seems handier though. Only came across it a few days ago! :)
Zhu,
That’s a good site, but the waiting time for your screenshots to appear can get irritating I think! :(
Slevi,
Hehe – I don’t understand the font thing either. They seem to get bigger again in IE8! My slogan jumps to 2 lines… :(
Lance,
Multiple IEs is a great progam. I used to use that until I swapped to Vista. I quite liked loading up the really, really early IEs, just for the fun of it.
Pam,
Thanks! You’re right about FF; I didn’t think of FF1 at all. Looking at my stats, FF1.5 was 0.37% of the last month. It’s not much, but I should still test it out. Thanks. :)
Michael,
I meant exactly what I meant: that is, even if you write for IE, you should make sure that your markup is valid. You see, W3C standards describe how user agent should handle valid HTML/XHTML but the do not describe how to recover from errors. What we get is that IE displays invalid markup its way, FireFox – its way, Konqueror – another way.
That is, if markup is invalid and the page is looking good in FF, it does not mean that it will look good in another standards compliant browser.
Let’s go back to IE. All of its CSS bugs are well known. So when you want to patch your page for standard compliant browsers, you are doing in reverse what you would do to make standards compliant page look fine in IE ;)
As for conditional stylesheets – yes, they are very convenient. But when you have a very complex design, it is so easy to forget to update a declaration for IE in another file when updating the original declaration. This is why I still prefer CSS hacks (generally speaking, conditional comments are also hacks); moreover, these hacks are still valid CSS.
Vladimir,
I think you worry far too much about validity. So long as a webpage works as it should across browsers, does it matter if it’s valid or not?
And I agree that FF is the better browser; that was my point from the start. But IE is the easier one to patch by far.
What is easier to do; learn all of the bugs in IE6 (Like the reverse coding you mentioned), or add a conditional stylesheet with CSS that will only apply to IE6?
For simple layouts it does not matter, for complex ones – it does. Validity is very important in XHTML, especially if you are using validating browser or serving your content as application/xhtml+xml (as W3C recommends for XHTML documents). Example from my past experience: when I put div inside of h2 by mistake (divs were used for rounded corners in a liquid box and were absolutely positioned), page looked fine in IE, FF, Safari; in KHTML, that div was in the bottom of the page – KHTML used its own fallback mechanism (remember, they are not standardized) to recover from error and display the page.
Another example: create a table and place opening form tag after opening table tag but before any tr (like this: <table><form><tr>). Depending on complexity of your design (mainly CSS), you may see very interesting bugs.
You see, if it is valid, it is guaranteed to look the same in standards-compliant browsers. If it is not valid, it may look different. Even if it looks fine in, say, FF3, it may break in FF 3.5 when they fix some bugs. Invalid markup is akin to CSS hack – today they work, tomorrow they don’t.
Don’t you have to learn CSS bugs in IE6 if you are going to add a conditional stylesheet for it? I assume you know what you are fixing in conditional comments; for example, you are aware of doubled margin in floating blocks and you know that they are fixed either by setting display: inline to the floating block or by halving the margin, and not like this: “left margin is too large? OK, let us decrease it? Still too large? Let’s decrease it once more”.
I mean, if you want to patch your page for IE quickly, you have to know about IE quirks; and if you know its quirks, both “straight” and “reverse” coding will be easy.
Valid XHTML does not always guarantee IE compability,
especially with jQuery, sIfr or other tech implemented.
If layouts are validating in XHTML and are working in each of the previously mentioned browsers, IE (except of IE8) always adds its own gadgets like double margin or own expressions.
I’m sure all developers have certain designs that work flawlessly in OP, FF or Safari but fail terribly in the awkward IE family, so it’s time to release a compatible IE8.
btw: thanks Martin for the editing feature, saved me from some typos =)
My favorite way to test my site on other browsers is to visit a store like Best Buy and open my blog on various computers. I test the site and then leave it open for the next person to ‘discover’!
To test IE6 Compatibility, I use MultipleIEs program.
It allows you to use IE 6, 5.5, 4, 3.
http://tredosoft.com/Multiple_IE
Enjoy!
Brad
http://browsershots.org/ – check your website in a bunch of different browsers, on different platforms, painlessly.
Hi, this is great info. I do like to test my stuff in various browsers too. You are correct, in that you will find it looking somewhat different here and there. Thanks again for the info :)
http://www.GrfxDziner.com/HelpDeannaCremin1.html
Nice! Thanks!
For a quick test of IE5, 6, 7 and 8 I like to use:
http://ipinfo.info/netrenderer/
It’s a great tool to test all my IE6 css bugs.
Hi, sorry to go off topic, but my sister graduates on Tuesday and I really need to find her a cool gift that she will remember forever…
Anyone who knows a really unique gift that doesn’t cost a fortune?
visit us!
newsbox.cc
newsbox.us
nbstatus.wordpress.com
NOW!
http://www.dug-portal.com/
BESUCHT UNS JETZT – VISIT US NOW!
I have problem with IE 6
I hear Safari doesn’t look the same on Windows compared to Mac? Thought you would get the same results? I don’t have a Mac so wondering if that is true.
Are there still people using IE6. I think most people hate this one.
Can you please check my website on Iphone?
http://lemy.co.uk
Cheers!
thanks for the info! always is useful to know how to check your blog in different browsers
Dear, I make one website with DIV code, JS, FLASH, PHP based and that design i can see adjuctly sizes in IE7. But when i open this site to IE6, IE8++, Mozilla Firefox, Opera, Google Chrome & Safari, i see there having changes. my design top banner move to download bottom navigation going up and body going to left? Why i have this problem? How going to solve??? I need your advice??????
With Rgds,
Raihan
+8801712048181
raihan_mazumder@yahoo.com
Thanks for the resources. I think that this is one of the most annoying thing for me as a website owner. You think that finding the “perfect” design is the hardest part, but in reality it’s only part of the game. The other frustrating part is to get that design to flow through the majority of browsers in the market. I honestly find IE6 to be the most problematic one.
Every viewer has their own perception and overview when it comes to different blogs. Maybe your perception is also different to other people.
our blogs look. We look at them everyday. We boot
Thanks for the info,,, I love it
Hi there, since you offered, can you please let me know how my blog, http://www.localuniverse.net looks on your iPhone?
Thanks very much!
I really am impressed with how much you have worked to make this website so enjoyable. Thanks a lot for your effort. Many thanks to the person who made this post, this was very informative for me. Please continue this awesome work.