An Unknown Bug Busting Secret To Browser Test Your Free Magento Template

Our Free Magento Template is coming to completion, it’s taken longer than I anticipated but it will be well worth the wait.

This morning I’ve done browser testing across all the known standard compliant browsers, weeding out any style or JavaScript bugs which crept into this Free Magento Template. Debugging browsers is definitely not my favourite past time.

This is where your patience gets tested and where a friend comes in really handy.

I’m testing the following browsers

• Safari 5.0
• Firefox 3.6
• Opera 10
• Chrome 6.0
• ie5
• ie6
• ie7
• ie8
• ie9 Preview

I also would like to share a free tool for testing ie5 – ie9 preview called IE Tester

IETester is a free WebBrowser that allows you to have the rendering and JavaScript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

IEtester a Rapid System to Debug Magento Templates for Internet Explorer, ie5 – 9

You can get IEtester from http://www.my-debugbar.com/wiki/IETester/HomePage you’ll find this great time saving tool to use as it keeps all your browsers nice and tidy

As you can see from the video, I’ve some JavaScript bugs and Box model issues to iron out. The real issues are with Internet Explorer, but isn’t it always last problem to sort. I start by creating templates on the most standard compliant browser first then working backwards, this makes the development cycle quicker.

The order I work in when browser testing is…

1. Firefox 3.6
2. Chrome 6.0
3. Safari 5.0
4. Opera 10
5. Last but not least Internet Exploder Explorer

This is a list of the current bugs I’ve found in the Free Magento Template

Stylesheet

ie7

• homepage: overflow none Overflow was set to auto should have been none
  
• homepage: missing products Caching Issues
  
• homepage: mtt: missing featured Caching issues
  
• homepage: navigation going under panel z-index problem found the solution here http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/
• homepage: default message alignment
• Underline on paging arrow, paging arrow jagged
• Z-index on #nav

Design Improvements

• ie9 border radius http://border-radius.com/
• Yellow tag for colour on nav hover
• Switch from left nav to right column on category page not doing this now, just didn’t feel right.
  
• Check build your own styling as it needs a little more style http://store.magentothemedtemplates.com/computers/build-your-own/computer.html

XHTML Structure

• Basket: related items not showing
• Site map duplicated
• Site map, blue link on black background
• Add to compare broken

JavaScript

• Some errors on homepage this is for all ie, maybe because I’ve combined the JavaScript in Magento

All in all there’s not many errors, most likely a day to fix and improve. Once you’ve got a list of bugs and features, development and design gets so much easier. This is something I learnt many years ago, with large projects. You don’t think about the whole project, you’ve go to break it down into little chunks.

I remember a colleague who was stuck on a site and didn’t know what to do next, in fact he was comatose state, not knowing which direction to turn. I snapped him out of it by saying to him…

You can’t do everything at once, make a list of all the tasks, take the first item on the list, complete it, then do another, then another until your done.

Long structured lists are your friend, a little tip I learnt from Tim Ferriss, is to fold a piece of A4 paper in half, then in half again, you’ll be left with a small piece of paper to write your tasks for that day only. Why do this, you ask! Because that’s really all you can get done in a day.
Sometimes we think we’re super human and we can get it all done in no time, I’ve found out the hard way it’s just not possible, it’s the road to designer burnout…

Please leave a comment or your experience with testing XHTML and CSS.

No related posts.