by Mashhoor Al Dubayan
I used to think that freelancing is not possible for me. Most (if not all) of the local customers want VB forum installations, table-based designs and/or 90’s style web sites (scrolling text, moving GIF images…etc). Besides, they naturally want Arabic websites. Arabic is a right-to-left language. Imagine the complexity of using right-to-left contents with left-to-right markup.
2 weeks ago, I’ve been unexpectedly contacted by a foreign client who have seen my work in one of Sitepoint Forum’s contests. My schedule was busy enough, but i thought It was a good opportunity to give freelancing a try, and test my ability in understanding requirements, meeting deadlines and so on. The deal was basically to code a Web Site mock-up, and integrate the design with Wordpress installation.
The Website is called FreelanceDaddy, and basically revolves around freelancing. It contains guidance for those freelancers who are just starting out (good coincidence, eh? ;)). I’m happy with the outcome of my work; The website matches the mock-up almost perfectly. And the fact that my client was very satisfied with the results makes me even happier.
I must say that freelancing isn’t as easy as i thought. It’s pretty stressful even though i had good client (i wonder how much I’d suffer with a bad one?). I think it would’ve been much easier if i didn’t have a day job though.
by Mashhoor Al Dubayan
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.
Read the rest of this entry »
by Mashhoor Al Dubayan
In my country, Saudi Arabia, there is almost no single company that considers web standards when designing their Web Sites. I’ve met a few people responsible for different corporate sites, and some of them weren’t convinced just yet. They think that it’s just an extra step, or a new fad that will fade away soon. And that what really matters is making a Web Site that just works.
After having a few conversations with local web coders/designers, I’ve concluded that they refuse to switch for the following reasons:
- More than 50% of them think that the only web browser out there is Internet Explorer (seriously), which leads to excessive use of propriety code.
- Recruiters, when seeking web designers, will require FrontPage 2003 (or Dream weaver MX) experience instead of asking for what really matters.
- Many (if not most) companies let their “graphic designer” handle web design.
- FrontPage 2003 is a Microsoft product, therefore they won’t even care about web standards unless Microsoft does.
- Their portal software is still using non-standard and/or propriety code.
- Lack of Arabic books, Web Sites and tutorials on how to make standard-compliant Web Sites. I’m not sure if they even exist.
In this post, I’m going to write why companies should make modern, standard-compliant Web Sites. And by “modern, standard-compliant” I mean:
- Separating web pages’ structure (HTML), layout (CSS) and behavior (JavaScript).
- Writing valid, standard (not propriety) HTML/CSS code.
- Writing standard, cross-browser and unobtrusive JavaScript code.
- Applying good coding practices, which make documents accessible, cleaner and flexible.
Note that the following reasons do not cover all of the advantages. If they don’t convince you, however, then I honestly don’t know what will.
Read the rest of this entry »
by Mashhoor Al Dubayan
If there’s one thing that frustrated me so much in JavaScript, it would be dealing with events (thanks to Internet Explorer). Most of the scripts handling events out there contain lots of browser and/or feature sniffing to decide which event method to use. For example, the following is a code excerpt from Sitepoints DHTML Utopia (the worst books I’ve read on the topic by the way):
if(window.event) // IE check
el = window.event.srcElement;
if(e && e.target) // standard-compliant browsers
el = e.target;
This seems like the only way for many JavaScript coders to deal with browser differences. That’s what i thought ,too, until i read Wrox’s Professional JavaScript for Web Developers (a must-get). The book’s author, Nicholas Zakas, introduces a much more convenient way for dealing with events. It basically involves using a cross-browser event object which creates DOM-like event methods for Internet Explorer.
Read the rest of this entry »
by Mashhoor Al Dubayan
One thing that really frustrated me about web design is that every time i wanted to make a web page, I’d first have to set the margin/padding of all of the elements to zero (since different browsers assign different margins/paddings to elements), then re-adjust them to whatever i want. It was convenient, but it got tiresome quickly.
To overcome this frustrating routine, i had to make a reusable style sheet with default properties defined by myself. This way, I’d only need to do quick adjustments whenever i code a new page, since i know how i usually want my elements to look like.
The first line of code in the style sheet sets all of the elements padding and margin to zero; line height to 18 pixels and font family to Arial. I use ‘Arial’ (or sans-serif) most (if not all) of the time, so why don’t i just assign it beforehand to every element?
The second line defines paragraphs’ properties. The third is just a little trick to force FireFox to show it’s scroll bar (since IE constantly show the scroll-bar and i need a way to compare my layouts in both browsers perfectly). The rest of the lines define properties for lists (ordered and unordered), headers, emphasis elements and image links. These properties could be overridden later when they aren’t suitable for part(s) of my document.
Defining default properties beforehand saved me 50%+ of the time i used to spend on writing style sheets. It’s something you should consider if you’re not doing it already. 