Testing Times

Err..hmm, this post was written in 2008. It's quite out of date now! Web technologies have moved on a lot, and so have I.

This post is quite sweet in that it documents the point at which I began learning and using CSS techniques...

Preview of New Web Page DesignBack from a short break and onwards with the business of developing my website. I have finally tamed the CSS code I have written for the new "tableless layout" of my website and am currently testing pages. One thing I always seem to struggle with is the simple choice of color-scheme! I know it shouldn't happen to an artist, but choosing colors for web page design is something I could spend hours deliberating over, together with fonts. I humbly accept that there is most certainly a skill to web graphics. (I will at some future point publish some tips for choosing web page colors.)

Working on moving the existing website to the new design, has not been unlike being handed a blank canvas. Indeed, there is so much more that can be achieved with the layout, design and the order of content. I have found myself spending a fair amount of time learning to use Photoshop, as well as familiarizing myself with CSS coding. Having opted for a "liquid" style design (i.e. one that resizes with the browser window), I have also had to get calculations right. So I would be lying if I said it hasn't been a steep learning curve.

As I said in my previous post, I would not be going live with the new design until it looked good in all the major browsers. I also mentioned that there are problems with the way some browsers, and namely, Internet Explorer display CSS based designs. I have a new found fondness for IE (not)! One problem for me is that I do not have Internet Explorer 7 (IE7) or IE8 on the PC I use (to upgrade from IE6, I would have to install some updates that would conflict with other software I regularly use.) I have found myself writing the code for Mozilla Firefox browser first, then carrying out amendments for Internet Explorer. I have downloaded windows versions of Opera and Safari to see what the new design looks like in these browsers. I also came across a helpful piece of free software called IE tester, which enables you to see how your webpage looks in the previous & your own current version of IE. There is also an excellent free open source project which allows you to test your web design in many different browsers at Browsershots, although you will have to wait a little for results.

TBH I am now mostly resorting to accessing friends PC's to check my design in IE7! So be warned, if you move your site to a CSS based design, you must carry out some browser-testing to check the site is looking as you want it, or at worst is legible. If you check out this test page using IE 7, you probably wont see any of the images on the right-hand side, and the text accompanying the images may be illegible. Now I do have a fix in mind for this, but it does serve to demonstrate how important content may be lost to the viewer if a web page isn't tested in different major browsers. The test page itself bans search engines from indexing - a necessary precaution I will also post about at a later date. In the meantime, I will welcome constructive criticism of the new look design which can be seen on the test page, if anyone wishes to comment!

4 comments:

Anonymous said...

Goodluck on your site! One thing I have a difficulty in deciding over is which font to use. :)

Naj said...

TY!

John Dyhouse said...

Hi Naj, you just popped up on Blogrush....how you been?

Like your new page style, looks very professional, but as you say I cannot see any graphics or much text on the RHS - I have IE7.
In the centre, I think the normal font is great but personally I feel the titles in red stand out too much by combining a colour change with the font change. The emphasised text suffers from the same problem. The link font is great, mirroring the background.
The LHS looks very good and I don't think I could fault it.

Naj said...

Hi John, I'm fine, nice to hear from you. Thanks for the feedback!

I have solved the IE7 problem now (the solution was to insert some code to trigger what is known as hasLayout).

I really thought the example was worth including to show how important browser testing is to ensuring all the information on your pages is displayed.

I have a serious IE8 display problem, grrr, but that browser is still in beta testing stages and has bugs too!