Tip of the Week #6: Cross-Browser Design

PBwiki does an amazing job of maintaining cross-browser compatibility in its basic design, so much so that people have told me about editing their wikis from their Blackberries. The designers work hard getting layouts and skins to look the same in every major browser, and for the most part, you’ll never ever have to think about making sure your page looks the same in Internet Explorer, Firefox, Safari, etc. That’s awesome.

Nonetheless, as people spend more time with their wikis, they will undoubtedly experiment. Maybe they learn a little HTML and create a few layouts within the content area. Maybe they are even more experimental and learn CSS to skin their wiki in bold new ways. Maybe they are really ambitious and begin fiddling with Javascript. Regardless of the situation, and especially if your browser of choice is not Internet Explorer, you’ll want to know that things look okay in other browsers.

Interpreting Some Data

In a previous post, PBwiki showed a few graphs of the browser trends in PBwiki. Here are some of the highlights:

1. Nearly 3/4 of all users use some version of Internet Explorer, and nearly 3/4 of that group continues to use Internet Explorer 6. The new Internet Explorer 7 makes up most of the remainder.
2. The remainder, about 1/4, is dominated by Firefox. About half of Firefox users have upgraded to 2.0, and the majority of the rest are at least using Firefox 1.5.
3. Safari leads the rest of the pack, but not by much. The rest include Konqueror, Opera, etc.

The point is that regardless of the browser you like, if you’re developing a wiki seriously (or any webpage for that matter), you need to prioritize based on your audience. In most cases, that means making sure everything looks right in the maximal audience range: Internet Explorer 6.0+ and Firefox 1.5+.

Discovering Problems

The best place to start is to install a couple different browsers on your computer. On my own computer, I have Internet Explorer 7, Firefox 1.5, Firefox 2.0, and Opera 8 installed. In addition to that, I have Internet Explorer 6 running on a Virtual PC. But unless you’re a web developer, that’s probably going overboard. If you’re running Windows, then it’s probably fine to have Firefox 2.0 and Internet Explorer 7.

On the other hand, if you want to have a lot of options without installing anything, there’s this wonderful tool:

BrowserShots.org

This page allows you to enter a URL and specify different operating systems and browsers on which to test the page. After about 30 minutes, machines running the specified setup will show you snapshots of your page on the given system. It’s like having a circle of friends running every possible setup, but you can be as anti-social as you want.

Some Common Problems and Solutions

1. Large elements below SideBar – Some browsers may not wrap a large element, like a table, iframe, or a <toc> with really long descriptions, correctly. In particular, the object often falls down to the row below the SideBar if it is present. You can force it to be small enough by wrapping it in a styled div:

   <div style="margin-right:250px"><toc></div>

2. CSS selectors – If you’re experimenting with CSS to make a PBwiki skin, you’ll probably want to try all the different selectors, which are useful to define specific elements to change. However, some selectors, such as the child selector “>” and the sibling selector “+” will not work in Internet Explorer 6 and earlier. The best way to handle this is to use normal descendent selection and avoid those situations.
3. CSS properties – IE 6 and older lack a few common CSS properties, such as position:fixed. If something isn’t appearing how you’d like, do a Google search for that property and see who else has the problem. (as an aside, position:fixed is a complicated problem that should be avoided until enough users switch up to IE7)
4. Sloppy HTML – A lot of times, things will turn out exactly how you want them to in Internet Explorer, but no other browser. If that’s the case, it may be because IE is a bit more relaxed in its handling of bad syntax. Make sure all your elements are closed (i.e. <div>…</div>) — many people neglect to do closing tags for their <td> and <tr> tags in tables in particular.

Conclusion

Designing an aesthetically pleasing wiki is an experimental process. Play with it, and don’t be afraid to ask questions of others with more experience. That might include asking around the forums, talking to your geeky web developer friend, or you can even send me an e-mail. Pushing the limits of your comfort zone is the only way to try new things, so keep at it!

Next week is currently unplanned, so send me some e-mails and let me know what you want me to talk about. Later!

Jason Nguyen