Make your blog look great on any browser - even on mobile
One of the issues that every blogger face - especially after a theme change or browser upgrade - 
is that his blog starts misbehaving with different browser applications and screen resolutions. The issues can range from minor painting issues to major alignment problems. Majority of the issues can be solved by making the theme code XHTML compliant and by avoiding making changes to the blog platform’s core codebase. Added third party (advertisements, tracking code, badges etc) scripts are other culprits that make a blog look ugly sometimes.
In this post, I would like to provide some tips and tools that will make your blog look great in every possible browser and device - provided the browser application itself is majorly bug free.
How to test your blog on different desktop browsers?
The browser war is getting hotter with recently Google entering this space as well. It is virtually impossible for anyone to test your blog or web application on all browsers. However, as a minimum quality standard one should run their blogs on at least the following leading browser applications:
- Microsoft Internet Explorer
- Mozilla Firefox
- Google Chrome
- Opera
- Apple Safari
However, the theme and plugin developers may need to do a lot more on various operating systems and platforms. Sometimes, it is very difficult to get your blog tested all major versions of these browsers and that is where the BrowserShots.org comes to your rescue. Using this cool website, you can test verify the screenshots of your relevant pages on all leading web browsers and their major releases (from past as well) on multiple platforms.
How to mobile enable your Wordpress blog?
The Wordpress platform is not naturally designed for mobile devices and their browser applications. However, the number of mobile users browsing the web is growing at an alarming pace. While browsing around, I found this cool plugin by Alex King that, when configured, can really help mobilize your Wordpress blog by adjusting it for lower form factor and supported browser capabilities. You may want to check it out.
Testing on mobile browsers or emulators
The following are some of the leading mobile browser applications (some in beta still) that you can download and install on your mobile device to read your blogs.
- Opera Mobile - More powerful, CSS2 and XHTML compliant than Opera Mini
- Skyfire
- Minimo - Mini Mozilla browser
- TeaShark
Microsoft had released a mobile browser named Deepfish sometime last year, but I could not get the right download link. There are a number of other mobile browser applications that are still under development. You could read about some of them in this wikipedia page.
Rather than directly installing the web browser applications and testing, you could also test them on emulators such as Online Mobile Emulator or Winwap Smartphone Emulator.
As a general guideline, if you want your website or blog to be accessed by mobile devices, you need to also make it as light as possible. This would mean lighter HTML-script file sizes and smaller, lighter images. Also, avoiding Flash content and sticking on to basic video/audio formats would definitely help.
I hope this post was very useful to you. Please bookmark and share to make it available for a wider audience.
September 30th, 2008 at 9:29 am
Mobile browsing while it is increasing by leaps and bounds still has a lot of catching up to do. On my mobile I have played with many mobile browsers, but have settled with OperaMini as the default browser. It simply rocks and on my touchscreen mobile it performs the best.
Coming to testing the websites and how they look and perform on different browsers, http://browsershots.org/ is simply the best and one that I used a lot of times.
Testing is good and essential, but unfortunately most of the world still uses Internet Explorer and that’s one browser your blog/website should be optimized for without fail.
September 30th, 2008 at 11:55 pm
Rajiv, Opera Mini rocks for sure. I came to know about browsershots only very recently
after one of the readers mentioned about the same.
As for the testing part (of this blog), I am yet to make my header/banner area mobile friendly… still working on it.
Cheers,
Ajith
October 1st, 2008 at 1:55 am
Thanks for the info. Those sites will be really helpful for me. I hate always having to open up 4 different browsers to make sure everything looks ok. This is a real time saver.
October 1st, 2008 at 7:21 am
ITs necessary mate, 5% of my traffic is from Smart phones !!
Abhishek’s last blog post…NO Comment in Akismit Spam Queue
October 1st, 2008 at 9:46 am
@Jared, you are so right. Until recently I used to test my site on a couple of versions of Firefox and IE at least. However, having two versions of the same browser to test is kinda difficult and hence browsershots.org is really handy.
@Abhishek, yes…the mobile traffic is steadily increasing. So it’s important to make blogs mobile browser compatible!
October 1st, 2008 at 12:46 pm
Hi Ajith - What great resources. I’m testing my blog now in Browser Shots. I’m in the waiting process. Thanks for sharing this.
Barbara Swafford’s last blog post…It’s All About Me - An Interview
October 1st, 2008 at 1:28 pm
Hi Barbara,
It was Kim (Woodbridge) who mentioned about this cool website… so the credit goes to her
October 2nd, 2008 at 3:53 pm
Its always better to make your Site all browser friendly.
It should include Safari, Firefox, and yes IE too
Mobile browsers automatically convert our sites to look better in them.
Chetan’s last blog post…Send E-mails with others E-mail IDs.[Fake Mail]
October 2nd, 2008 at 10:35 pm
Chetan, mobile browsers do not always automatically convert the pages to look ok in them. My blog is an example, it (especially the header) behaves a little differently with a couple of mobile browsers.
Cheers,
Ajith
October 5th, 2008 at 8:14 pm
Thanks for the info.
Salwa’s last blog post…Avoid Getting Banned From Google