All posts by bogeywebdesign

accessibility, css, web design, webstandards

Designing for cross browser compatibility

One of the best and worst things about the web is the fact that when it comes to your choice of web browser the program you use to access and view the internet – you have multiple options. From the standard Internet Explorer (PC) or Safari (Mac) to open source projects like Firefox to outsiders like Camino and Opera.

The problem is that all of the browsers interpret (X)HTML – the code websites are written from – very differently and all of them have their own internal style sheets and form controls. What this basically means is that a site designed in one browser can look vastly different in others especially older or non-standards compliant ones like IE6.

There are 3 main ways to deal with browser compatibility issues – having the right tools, designing with web standards, and utilizing filters or conditional statements to feed alternative styles to less compliant browsers.

Tools

The first step to dealing with cross browser issues is to design in a compliant browser. In most cases, the best one to start with is Firefox. The simple reason for this is the vast tools it gives a web designer to pinpoint problems and quickly debug code. Two of the best are the Web Developer’s Toolbar and Firebug.

The Web Developer’s Toolbar gives you the ability to edit CSS on page to test fixes quickly, to outline specific elements, disable cache easily to enable testing (since CSS is cached naturally) and many other useful features outside the scope of this article. Firebug is one of the best design tools available allowing you to inspect elements on the page, see the cascade of styles applied to that element to narrow down bugs or rendering issues, and even allows you to edit the (X)HTML on page so that you can quickly test for different scenarios. Both of these will save you a great amount of time while you are designing your site.

Web Standards

Web standards is the practice of writing (X)HTML using standards compliant code – basically utilizing correct tags for elements, using CSS for presentation, markup for content, and limiting the amount of markup to the least amount necessary to complete the task and provide enough “hooks” for your CSS. Some of the benefits include improved Search Engine Optimization and the ability to re-design your site later on simply by editing the style sheets. The other benefit is the fact that you use CSS for presentation – allowing you to deal with presentational issues relating to browsers easily.

After getting your markup done it’s time to style your site. The easiest way to avoid compatibility issues later is to reset the styles on all elements. This is done because different browsers use different styles for elements. One might naturally put 10px of padding on a p tag and another might put 10px of margin. This is the root cause for many rendering issues found later. A good reset style sheet was posted recently on Eric Meyer’s site.

If you’ve done both of the above then you are now setting yourself up to have the least amount of issues possible. Depending on the complexity of your site it might look exactly the same in most of the browsers – Firefox, Safari, IE7 and (hopefully) IE6. If not, the next step is to utilize filters and conditional statements.

Filters and conditional statements

Filters should only be used when nothing else can. If you have designed in Firefox then at this point you should have no issues in that browser. Internet Explorer will be covered in the next paragraph. Opera has no way to filter CSS to it. It typically has few rendering issues that do not pop up in Firefox though and any that do typically you must live with. The only browser not mentioned is Safari which does have a large user base. In your main style sheet you can define styles to target only Safari by using the following rule:

:: root (parameters) { styles }

So now you’ve covered the most compliant browsers: Firefox, Safari and Opera. The only one left is IE. IE has it’s own set of filters but utilizing them is not advised because they get messy as you have to override main styles for IE6 then in many cases re-override those for IE7. The best practice is to use conditional statements. You simply define additional style sheets – for example looking at the source of this site you’ll see a sheet called mainIE6.css – and put the rules for those browsers in them. Microsoft has defined conditional statements that can then feed those styles to whatever IE version you define and only IE. The standard way to do this follows:

<!–[if IE 6] (style sheet link) <![endif]–>

Other operators beside if include lt (less than), gt (greater then), lte (less than or equal) and gte (greater than or equal). So lte IE6 would target IE6 and below. The operator gte IE7 would target IE7 and above – and so on.

Now you have the tools to correct any rendering issues that might pop up.

In conclusion, the best way to deal with cross browser compatibility issues is to limit the chance for them to appear by using the right tools, standards compliant markup and CSS. Some issues will always appear and the few that do can then be handled by using either filters or conditional statements. Remember always to test in multiple browsers to find the issues. At a minimum your suite should include IE6, IE7 and Firefox. If you have access to a Mac then Safari should be included as well.

Random Tidbit: I really like SEOmoz. I like their article on getting traffic from Digg comments even better – though I’m a bigger fan of Reddit personally.

Helium.com

Life after 3.0

So I wasn’t really able to talk about it before now, but the site I worked for has officially launched our new version – of which I’ve been a major part in since I started in January.  It’s also what’s kept me preoccupied these past few weeks as we fixed minor things in it to get it live yesterday.  We’ve already heard good feedback from our users and I’ve gotten lots of compliments on the UI (which is what I do) – though to be honest 90+% of the design work was done by other people, I just did the XHTML and CSS.

Anyways, check it out if you want to see another big example of my work.  There are still large portions I want to change – some of our dynamic boxes should be switched to the sliding doors method for example – but overall I’m quite proud.

magicthegathering, microformats

Great Decks

Stumbled onto a great article called “10 Decks in 10 Weeks.”  It’s from the writer that does the building on a budget series.  Some really good deck ideas that can be done – online or off – relatively cheap.  Some very powerful decks and new ways to use cards that I’ve kept around but haven’t been able to work decks around.  Really good reading.  He goes through all the basic 2 color combinations and designs a wide variety of decks.

If nothing else it’s good to see another very experienced Magic player’s design strategy and sort of get into their mind as they build, test and modify a deck.  I had thought that I was getting pretty good at deck building but the card drawing and mana acceleration ideas really opened my eyes.  I might have to make another pass through my decks again.

Random Tidbit: I’ve been looking into and trying to better understand the purpose and power of microformats.  One thing I’ve found is that it’s good to be posh.

css, web design, webstandards

Modular Web Design

So I’ve been reading a lot about modular web design. Basically what it stands for is creating a web site – essentially a template – in such a standards compliant and well thought out manner that redesigning the site later on requires you to only modify the CSS file. It’s not a new concept – it’s something that was introduced when CSS was created and made famous by the CSS Zen Garden. Recently sites have been recreating their own personal zen gardens allowing for quicker redesign turnaround.

It’s a process I’ve used since I read up on the Zen Garden. The last 3 sites I’ve done – including my own – were done off a basic template. In essence it was a wire-frame design. And now, if I wanted to update any of them – and I’ve done small ones from time to time – I have enough hooks typically to just add or modify CSS rules. Though this doesn’t work if you go from a simple design, like my site, to a more complex design – with things like rounded corners especially. In those cases you will have to modify the XHTML.

Though it’s simple it’s not a process all beginners can copy though. And it’s an excellent learning tool. So later this week I hope to upload 2 templates – one being the wire-frame and one a more meatier zen garden-esque template. Stay tuned.

Random Tidbit: Along with Web 2.0 has come a new workplace. An article I saw on A List Apart talked about the “Long Hallway” – basically it talks about how in the new workplace designers/developers can collaborate from home offices around the world, building a team with no set office.  It’s something I’ve been thinking about for awhile and very interesting.

magicthegathering

Future Site Pre-Release Tournament

If you’re a Magic fan and have never been to one of these – you definitely should go.  It was challenging and I built the wrong type of deck, but still managed to pull off a 3-1 record and win 4 extra packs of Future Sight.  Some of the new cards are very cool.  It was also very interesting to see the strategies people play in sealed.  Creature based and beatdown decks are the way to go for sure.  2 colors and 40 card max deck as well.  I went red/white and looking at the one deck that beat me and the ones that gave me trouble, if I had to do it over again I’d probably go green/blue based on the cards I got – I almost did at the last minute.

It’s interesting to see cards that I wouldn’t normally see in my playgroup come out and clean up.  3/3 creatures and saproling tokens seemed to rule the boards.  I suppose it makes sense – with the limited number of rares available to each player you’re less likely to get game stopping, big nasties.  The guy that beat me had a nasty green guy and combo that just pumped everyone and gave them trample.  The best I had was a Tarox Bladewing – which did strike fear in a lot of people surprisingly.

This is definitely something I will do next release and I’m considering using some of my extra commons – and maybe even uncommons and rares – to build sealed kits and try this format with my friends.  Pretty cool.