Clarity of Design

A web page that has a clear design makes life simple for visitors and would attract many more visitors to take action than a web page with an obscure design. Emurse is one good examples of a clearly designed web page.

So what makes the above mentioned web page tick? I believe it is the presence of the following elements:

• The page is not cluttered with a lot of content.
• Three steps of action are clearly indicated: Creat, Send and Share.
• Background color of the three actions is distinct and clear.
• Simple navigation is kept at the bottom with a small font size.
• The funtion of the site is clearly spelled out: "emurse means resumes, improved."
• Sign in and sign up forms are clearly shown.

I believe such clear design would lead to many visitors taking action because they can easily grasp the intention of the site and know what action to take. Confusing the user with a complex and obscure design is nothing to be proud of.

Breadcrumbs in Navigation

Simple web sites can do with a simple navigation system. Sites with a navigation structure that is only one or two levels deep can get along with links listed in a sidebar. More complex sites that have a navigational structure that is more than two levels deep would best augment their navigational system with breadcrumbs.

Breadcrumbs are so useful in web sites that have a deep navigation of 4, 5 or more levels. In such web sites, it would be really confusing to the user if breadcrumbs were absent and would look really messy if the navigation was implemented using nested menus.

One Billion Web Pages Analyzed

Just above a year ago, Google made an interesting study in which it took a sample of over 1 billion web pages and analyzed them to discover how HTML tags are actually being used on the Web. The results of such study might be interesting to web designers and web developers. Have a look at those enlightening web authoring statistics from Google.

Dreamweaver CS3 Announced

I was excited about the announcment of Adobe Dreamweaver CS3. I had been using Dreamewaver 8 for a while and before it used Dreamweaver MX 2004 and Dreamweaver MX. I've even used an earlier versions as well which I can't remember its name right now. I believe Dreamweaver is a really powerful product although it has a bit steeper learning curve than its competitors.

The Anchor Tag

I used to think that the only way to make internal links inside a web page pointing to sections found in the same web page was to surround the target section with an anchor tag like this:

<a href="section-name">Some Link Text</a>

I just by coincidence while scanning the W3C documentation for anchor tags discovered that there is another method which in my case proved to be easier and more compact.
Let's say you have a section in your web page titled as follows:

<h2>My Section</h2>

If I wanted to link to such a section, I would modify it as follows:

<h2><a name="section-name">My Section</a>

But I discovered that I can alternatively write it as follows:

<h2 id="section-name">My Section</h2>

This has the exact same effect as the first method and looks neater and easier to write.

By the way, using internal anchors and linking to them from the same web page helps a lot in search engine optimization (SEO). Google seems to love web pages that have such links in them. They give spiders many clues and Google just loves this and usually ranks such web pages high.

Python Tutorial

Python is an object oriented scripting language used for developing web applications. It is not as popular as PHP, yet it's code is neater and cleaner. Google uses Python extensively in its web applications. Here is a basic python tutorial for new comers to this cool scripting language.

Amaya - W3C's Web Editor

Amaya is an open source web editor hosted by the W3C themselves. Amaya supports HTML, CSS, XML, XHTML, MathML, SVG and other XML applications. The interesting thing is that Amaya is both a web editor and a web browser at the same time! A lovely concept promoted by the W3C.

Class Vs. ID in CSS

I've had this question in mind of several years by now. What is really the difference between using ID and using class in CSS. I Googled it for years but just couldn't get it despite reading the many attempts to answer this question. Still I did not completely comprehend the difference between using them and why we needed two different methods in CSS to for styling.

That was until I got, by chance, across the most clearly stated answer I have ever seen. Here is the difference between ID and class in CSS. Not only does this make clear the difference between them, but it also gives direction to when to use each.

ISO HTML

HTML is a web standard developed by the Word Wide Web Consortium. The ISO has taken HTML and made a neater standard out of it by removing deprecated HTML elements and bringing out a tighter edition of HTML. The ISO HTML standard is called ISO/IEC 15445:2000.

One of the interesting features for instance of ISO HTML is that if you use an <h1> tag you cannot use an <h3> tag directly after it, but you must follow the <h1> tag with an <h2> first then you may use an <h3> after that. I think this gives you the picture and a taste of what ISO HTML is all about. It tries to make HTML more neat by removing deprecated elements and adding some restrictions to come up with a tighter HTML than that of the W3C.

The question remains however on who will be using such a standard and whether it will ever gain popularity on the web. I personally believe it will not, yet still I find it interesting to use it.

Web Design Course at Resala

I was delighted today to receive a phone call from Islam who works at the Masr El Gedida branch of Resala. I had previously volunteered to deliver a mini-course in HTML there. He asked me to start a fresh web design course. I really missed Resala having not been there for a couple of weeks. I agreed to deliver the course.

My plan is to start with the basics of HTML, give a little CSS then move on to Dreamweaver. I plan to make the course light and simple. I want it to act as an introduction and to pave the way for a correct start in web design.

The course will start tomorrow Friday 20th of January 2007, God willing. It will be from 1 PM to 3 PM every Friday at the Masr El Gedida branch of Resala. The course is free to attend.

Cool Web Design

Here is a stunning example of what I call cool web design. The gradient background color, the splash of colors at the top left, the simplicity of design, the large space of 'air' in the page to breath in, the links and the fonts all make this web page have a soothing effect on the mind and soul. That's what I call cool web design.

Bad Web Sites

I came across this article that explains to you how to avoid making a bad web site. It lists many common mistakes bad web sites fall into and gives direction to where one should head when making a web site. I recommend reading it. Actually, it is a chapter in a book with the name Philip and Alex's Guide to Web Publishing.

HTML + CSS Training at Resala

I'm currently delivering a brief mini-course at Resala Masr El Gedida introducing HTML over 4 sessions of 1.5 hours each. That training starts at 10:00 AM every Friday. I've already delivered the first session.

I'll also, God willing, be touching upon CSS so that new comers to web development/web design would make neat web sites from the start without suffering from using the deprecated font tag or struggling with the table tag to define page layout.

This mini-course at Resala is totally free of charge is is being delivered in the small 8-computers lab at the Masr El Gedida branch of Resala.

I really enjoyed delivering the first session a lot. I'm thinking of volunteering to deliver a brief introductory course about Ruby on Rails at Resala also after I finish the current one God willing. A prerequisite for attending such a course would have to be at least some knowledge of web development in either PHP or ASP in addition to awareness of object oriented programming concepts.

You may call Ahmed Momtaz or Islam who are responsible for the computer lab at Resala Masr El Gedida via one of the following phone numbers: 6207801 / 6207802 / 6207803 / 6207804 /6207805 / 6207806. Then ask to be connected to the "Computer Training Center". You can ask Ahmed or Islam about the time the course is starting or about the availability of other free courses delivered by other volunteers.

If you are expert in some IT field and you have a talent in training, perhaps you may like to volunteer and deliver some course at Resala. You may call 19450 using a regular phone line to be routed to the Resala branch nearest to you.

Usability Study

When developing a web site, it's a good idea to keep usability in mind. One can make usability studies in order to find out how to improve the design of his web site, but good usability studies can be expensive. Another good alternative I often resort to is to follow the findings of large companies that have already invested in usability studies. Their findings can be safely assumed to be strong indicators to what a site with good usability should be like.

Have a look at how Google redesigned its Google Base homepage. Google is a big fan of usability.