As I said my previous post, I’m going to write brief reviews on some of Saudi Arabia’s leading companies’ websites. I’m planning to keep it short yet meaningful, so instead of actually writing a long review on each one, I’m going to test each one by going through the following five checks:

Code inspection:

A quick look behind the scenes to determine the quality of the code, and detect some of the horrifying errors.

Cross-browser look & feel

How a website looks and functions in standard compliant and non-standard compliant browsers. I’m going to use Mozilla FireFox to represent standard-compliant browsers, and Internet Explorer to represent….well…itself.

Cross-resolution compatibility:

How a site looks in different screen resolutions.

Replace images with ‘alt’ attribute:

A web site’s images might fail to load for any reason. This test will show how usable a web site is without its images. I’m going to use FireFox’s web developer toolbar extension to perform this test.

Document size:

How dialup-friendly a web site is (since the majority here are still using dial-up or slow ADSL connections).

Overall:

How well does the site perform overall.

I picked those because they don’t only concern Web Developers, they concern end-users as well (except the first). I’m also pretty confident that none of the sites I’m going to feature are going to be standard-compliant nor use valid/cross-browser codes, so there’s no reason to include any standard compliancy or code validation tests.

First Web Site: Jarir Bookstore

Jarir Bookstore, considered to be THE bookstore in my big city (Riyadh) at least, is one of the first places to check whether you need books, laptops, mobile phone and many other things – that’s why their slogan is “..not just a bookstore”.

Code Inspection:

For a table-based website, it’s doing just OK; It uses a doctype at the top, which is unusual. I still don’t see why the designer decided to include an empty </style> tag and a link to a style sheet at lines 70-71.

The ~620×172px Dell offer image in their homepage at the moment is sliced to 8 parts, which are assembled using a table. I can see what they’re trying to do (faster loading speed, eh?), but unfortunately for them, that wont happen.

Cross browser look & feel:

Seems like it’s working fine in FireFox, I’m not sure about other browsers though. No complaints here.

Cross-resolution compatibility:

Under 800×600 screen resolution, you will have a horizontal scroll bar since the “offers” are a bit out of view. Under higher resolutions, the layout is left-aligned which makes reading more difficult.

Replacing images with ‘alt’ attribute:

The small “offers” images and the main offer image both disappear leaving no clue what they were about. The top navigation is not visible anymore since it’s white text on a white background.

Document size:

~61kb (main page) shouldn’t be a problem for slower connections. It would be better if they avoided image slicing though.

Overall:

Jarir bookstore’s web site just “gets the job done”. Their biggest mistake though is that they’re using English as the main and only language for the website when most of thier visitors are Saudis, which makes Jarir’s website pretty useless to them.

I’ve made a tableless version of Jarir’s homepage about a year ago, and took it to their head office with some suggestions to improve their website. They did almost everything I suggested and even asked for my code. I didn’t give it to them. They just made the improvements without even thanking me (never do anything for free).

Second Web Site: Mobily

The newborn and rapidly evolving telecommunication company in Saudi Arabia. In 1 year it became a tough competitor to the 13-years-old Saudi Telecommunication Company.

Mobily is known for constantly providing it’s customers with greatest offers and the lowest rates in the market. It pays special attention to its customers, and we’re going to see whether it pays equal attention to it’s Website or not.

Code Inspection:

Apparently, Mobily keeps offering their customers great deals even in their HTML documents. Their home page’s source code has eleven </html> tags. ELEVEN!! That’s 11 HTML documents in one! This mistake itself makes the code terrible and hard to follow. What were they thinking?

The rest of the code is just a bunch of nested tables with meaningless parts. 1659 lines of code (including unnecessary empty lines) just to make that simple interface? If I were their web designer, I’d consider a career change.

Cross-browser look & feel:

Ok, so we know that it might be sometimes difficult to make a layout that looks and functions the same in Internet Explorer and standard-compliant browsers, but I’ve never encountered any difficulties in linking pages. Most of the links in Mobily’s website work only in Internet Explorer! And why are they using Javascript for a simple link? Let me guess, it’s their portal software?

The whole website is useless for a user who uses a better alternative browser because of those non-functional links. They don’t realize that they’re going to lose customers this way.

Cross-resolution compatibility:

The layout is a tiny bit wide for 800×600 users, but it’s not an issue here. The layout is centered under higher resolutions, which is good.

Replacing images with ‘alt’ attribute:

Almost everything disappears except for the navigation.

Document Size:

196 kb for their homepage. Even if they need to use a lot of images for their ads, they still can reduce the size of the document by using better code.

Overall:

In short words, Mobily’s site is a joke. It was coded by people who are worse than beginners. Everyone knows that an HTML document is supposed to have one </html> tag to mark it’s start and end, not eleven! The links should’ve also used simple <a> tags instead of Javascript. Whoever made this site should be ashamed of himself.

Third Web Site: Saudi Aramco

Aramco is one of the largest oil companies in the world. I don’t much about this company except that it has too much money.

Code Inspection:

This one is no different than the others. It ’s yet another software generated code. The first Javascript script is placed between the end of the </head> tag and right before the </body> tag. The script starting at line 245 is HUGE. It’s used to display sub menus in the navigation. I bet modifying the menu takes a plenty of time. If we look at the bright side, only one </html> tag is used.

Images were used for the words in the top horizontal navigation even though they don’t use a special font. Even worse, JavaScript was used to swap the images on mouse hover instead of CSS.

Cross-browser look & feel:

The flash object gets a smaller width/height in Firefox and sub menus of the main navigation hides behind the flash object when displayed.

Cross-resolution Compatibility:

Seems like the site was designed specifically for 800×600 screen resolution. It’s docked to the top-left corner on higher resolutions with plenty of white space.

Replace images with ‘alt’ Attribute:

Just like the others. Most of the images disappear including some needed links.

Document size:

A 104kb layout could be significantly reduced with a cleaner code.

Overall:

Yet another website that was specifically designed for Internet Explorer. At least some parts still work with Firefox (unlike Mobily’s website).

Conclusion

When i started writing this entry, I intended to write about at least 5 big companies. But once i finished writing about the third web site, i realized that they all share the same set of issues with minor differences, so i thought 3 are going to be enough.

I’m hoping that companies are going to pay attention to web standards in the near feature, otherwise I’ll have to move out of Saudi Arabia to get a job in web development. :p