G3 Global is a SAP Channel Partner specialising in the implementation of SAP ERP solutions in the Media industry.

The old site was built using static php pages, had a dated design and was disjointed in a few areas. So, we set out to improve the site by putting more emphasis on our products, the introduction of a fresh design, a flatter hierarchy, a blog, and an events section.

The design was done by “Andy, the chief coffee drinker” at Caffeinehit Ltd . I have to say that he did a great job after lots of Starbucks Grande latte’s and a few design workshops in our offices.

I did the implementation of the site and for those of you that care…yes the geeks , I used wordpress as the CMS solution along with a number of plugins which I either downloaded and hacked or wrote myself.

Overall I really enjoyed working on the site and I think it has been well received by the rest of the company. Now all we need to do is get everyone blogging…so I’m going to have to answer questions like – “what’s a blog?”, “how do i put a list into a post?”…blah, blah, blah

Besides Andy, thanks also go out to Chris and Drew for their hard work and guidance. Good effort lads!

Even though I am a huge Firefox fan, I am fully aware that the majority of internet users still use Internet Explorer. What makes this statistic even scarier is that about a third of these users are using IE6 or IE5.

Now as a web developer, I spend a lot of my time building user interfaces (UI) and if I am going to be taken seriously by anyone, my work has to look good in all browsers. So, this causes a number of headaches when trying to get a site looking good in IE6 because of its lack of support for certain CSS rules.

I have got two machines at the moment, one of which is running Ubuntu and the other has Windows Vista on it. While I was still on Windows XP I used to use multiple IE’s so that I could get my sites looking good in all the browsers. However multiple IE’s doesn’t work on Vista, so I have felt a bit stranded for the last few months and had to resort to virtual machines with Virtual Box.

There is however a new browser application called IETester which allows you to have multiple tabs open in different IE versions – just brilliant!! I use the IE Tab plugin for Firefoxwhich allows Firefox tabs to render like IE7, but with IETester one is able to view all the versions of IE, even IE8…which is pretty cool.

Although this is a pretty good scenario, it would be much better if everyone started using Firefox, but there is more chance of a global financial recession and a black American president…wait, those things have already happened, so maybe there is a chance

The utility is called Browsershots and it’s kick-ass! Well that’s only if you are worried about what your site looks like on numerous different web browsers on different operating systems. Different strokes for different folks

The application generates screenshots of your site in the different browsers and then you can download the pack of images and be uber critical about your CSS.

The site which I am talking about is http://bd4d.com, which stands for By Designers 4 Designers is built using the seagull php framework with the new cms module

General comments

Media Temple Installation

During the live installation I encountered a few problems, most of which related to permissions of files on the server:

The main one however were the permissions of the /var/lib/php/session/ folder – it has to be writable

Plugins that I found really useful during development

There were two firefox plug-ins that I found very useful during development of the site:

Colorzilla – gives you # codes for colours on any webpage
IE tab – allows you to open up ie7 tabs within firefox, which is great for cross browser compliant xhtml/css

Thanks to the developers of these two add-ons

Paypal

The site has a payment gateway for listing jobs and events which has transaction processing done by Paypal.

In terms of project mistakes, this was one of the biggest we made. The support that James received from Paypal was extremely poor and the general documentation which they supply is often out of date and incorrect. I am amazed that they have become such a successful company, when it is so difficult to integrate their transaction processing into one’s site.

However after a lot of waiting for accounts to go live, numerous queries, emails, phone calls and a lot of frustration, we did eventually get the transactions working. It is working fine now, but it was definitely not worth all of that hassle.

I would be interested to here about other experiences from developers using Paypal – hopefully you had a better one than we did.

Site Features

Showcase

The section of the site that I am most proud of is the Showcase section, which has flash and movies of some really cool clips which the bd4d guys have done. The section allows comments to be made on each of the movies and I think it looks pretty slick – even if I say so myself

To get the section functioning, I used the following:

A comment manager which Dmitri initially developed and then I adapted that code to be used for the site.

To prevent spam on the site I used captcha package from the php pear library

And I used the following code in the template to hold the movies/flash files:

< object width="550" height="400" >
< param name="movie" value="{webRoot}/themes/bd4d/showcasemovies/
{oItem.media}" >
< param name="quality" value="high" >
< embed src="{webRoot}/themes/bd4d/showcasemovies/
{oItem.media}" quality="high" width="{oItem.width}" height="{oItem.height}" autostart="true">< / embed >
< / object >

Events

The Events calendar uses the default seagull events module as a basis, but there where a few enhancements made to fit the requirements of the site. The majority of the development of this section was done by James and I think that he did a pretty good job of it.

The calendar looks pretty slick and works really well, also the backend of the seagull events module provides a lot of flexibility for administrators wanting to manage events.

Job board

The Job board uses custom managers in the default module and as I have mentioned in my section about paypal, it allows members of the site to post jobs for a fee. The transaction processing handles straight paypal payments as well as credit card payments which are verified by paypal.

Conclusion

As I mentioned in the introduction this site took way longer than expected and there were a number of hard lessons which the whole team learnt. But at the end of the day, the site looks pretty good and works as expected, so in some way it can be seen as a success.

Instead we will be hard at work in a cold and gloomy London, which is really not as bad as it seems. One of the things we have been working on is a project which is really close to the heart and will hopefully benefit the whole of Southern Africa.

The aim of this project is to hold a “web and emerging technologies conference” in South Africa. We want to get international speakers, who are industry leaders and who would like to give some advice to Africans involved in the Web and IT industry.

I have been doing quite a lot of research over the past few months and I really believe that a conference of this nature will be beneficial to the “African technology community”

We have a site up at and running (www.technologyforafrica.org), which is still undergoing some final testing before we start to contact Southern African companies involved in the IT industry. However, if you have any comments or suggestions please contact one of us, or just post a comment to this article.

I am hoping that we will get positive feedback from the majority of people who we contact because I think the concept of “Technology for Africa” is a fantastic opportunity.

The previous site was almost completely table based – yuck!! Dan Cederholm has a chapter in his book Web Standards Solutions, which is titled “Tables are evil?”. Now of course tables should be used when one is displaying tabular data, but in this case there is no tabular data on the site, maybe just some on the administrators CMS.

The “old” way of using tables for layouts is just so blotted and messy. Having tables within rows and doing styling within the code and not in the CSS, makes the site soooo difficult to manage and I am already seeing the benefits which the W3C have brought to website development.

So, some of the immediate benefits of not using tables, which I have been reminded of are the following:

• Much less code – which means smaller files – which in turn means less space on your web server
• Less code means less bandwidth and if you have a site with thousands of hits a day, this will have a huge impact on overall performance.
• The ability to access the site with portable devices-mobile phones, PDAs etc.
• It’s much easier to update layouts and styling via the CSS

I know that there are still loads of sites out there that are table based and which work perfectly. So I am not saying that it’s completely wrong to use them. It’s just that it’s so much easier not to use tables and there are lots of additional benefits which have become apparent in recent years.

While I was studying, my programming lecturer always talked about the importance of commenting and he used to subtract marks from projects if the code wasn’t commented correctly. I am now realising how important a simple thing like commenting can be, especially if there are multiple developers working on a project.

I am sure that a vast majority of developers do use comments in their code and I will definetly make sure to use them more appropriately in the future