Main content is placed here which is surrounded by
horizontal menu, left navigation bar and my picture on the right.

Welcome to my online portfolio !

Sorry I need to update this portfolio. I am planning to create another site which will be based on my current abilities. Thanks a lot for your patience. I successfully completed Interactive Multimedia Developer Program at Algonquin College in Ottawa, Canada in 2009.

For samples of my work including graphic design, a small Twitter web application and a PHP Forum please contact me.

Please Join us in Facebook at: Visually Impaired Users Group

Are you looking for a CSS freelancer and XHTML coder who writes codes based on W3C standards considering Web Content Accessibility Guidelines?

Does web accessibility matter to you? Are you looking for a CSS coder and XHTML Freelancer who writes codes to create accessible CSS layouts and web sites?

Are you looking for a Freelance web designer who can create cross browser and cross platform websites?

Are you looking for a Freelance Front End Coder who can help you to reach to as many audiences as it is possible on earth!

If you answered YES to all of the above questions , then you are at the right place. Please read on and keep in touch.

About Me

As a Canadian Citizen, I am available to commute globally and/or relocate immediately*. [*]:Update,Please see the contact section. I am a highly detail oriented Front End coder / XHTML Freelancer / CSS Freelancer. I do hand code XHTML, Html and CSS based on W3C standards considering the Web Content Accessibility Guidelines (WCAG).

I do have strong knowledge of Java Script DOM, HTML DOM and XML DOM.

I can now program PHP, MYSQL, AJAX, JQUERY, Light Java Script, XML and object oriented action script 3.

I can work with Adobe Suite Programs such as Flash, Dream weaver, Illustrator, After Effects and so forth.

I have excellent knowledge of Typography, Color theory and design principles.

I am committed to providing a high quality service and my clients' satisfaction.

About Portfolio

This Layout conforms to the WCAG 2.0 L2 . I have tested it with A-prompt online service.

This layout as a sample of my work, uses a unique design in terms of cross-browser compatibility , cross-platform compatibility and layout stability. All the work has been done by me. I have tested this layout with Firefox 1.0.7, Netscape 7.2, Opera 8.01, IE 6 and IE7 on Windows XP platform.

A separate style sheet is written for Safari which will function based on the detection of the safari browser when the page loads. Even though safari browser will be fine if java script is turned off, however, to have a horizontal scroll bar when the browser's window is resized java script must be turned on.

This Portfolio contains a flash file. No <embed> Tag is used for the flash file and Mozilla browsers are just fine with the flash file.

This is a cross browser, cross platform, Stable and accessible layout.


Accessibility

What is accessibility?

The following description of accessibility was obtained from Nicky Danino's article:

Accessibility can be thought of as "providing access regardless of the situation or circumstances." In the context of the World Wide Web, accessibility is a measure of how easy it is to access, read, and understand the content of a Website.

Why should I have an accessible website?

As Trenton Moss states in his excellent article:

One of the main benefits is increased usability , which, according to usability guru, Jakob Nielsen, can increase the sales/conversion rate of a Website by 100%, and traffic by 150%. [*]

[*] :Current studies by Dr. Jackob Nielsen, indicates that the average business metrics improvement after a usability redesign has declined from 135% to 83% . However ROI (Return On Investment) remains high because usability is still cheap relative to gains.

Whether or not Jacob has studied the impact of improvement on usability for blind, visually impaired and etc. users and has considered it in his report, is a question which will need to be answered.

Trenton Moss tells us about the benefits of web accessibility in his other article which is about better search ranking.

The following was obtained from his above mentioned article.

One of the main benefits of Web accessibility is that a Website that's more accessible to people is also usually more accessible to search engines. The more accessible your site is to search engines, the more confidently they can guess what the site's about, giving your site a better chance at the top spot in the search engine rankings.

[Back to Top]      [Go to End]      [Side Nav]      [Links]

Usability

What is Usability?

According to sitepoint's definition of Usability:

Usability refers to the ease with which a user can use an interface to achieve their goals.

Why should I care about Usability?

Well, let's have a look at what Andy Hagans suggests in his article, which is about java script and usability:

Some users choose to disable JavaScript and applets in their browser's preferences, while other users' browsers do not support these technologies at all. Likewise, search engines' "browsers" do not read scripts; therefore a webpage's usability should not be crippled when scripts are not supported. Otherwise, search engines may not even index the page, let alone rank it well.

And wrap it up with the evidence that optimalusability provides for us:

All the evidence shows that sites that are easier to use perform better in terms of: selling more, holding users for longer, prompting more frequent visits and reinforcing the reputation of the site owner.


[Back to Top]      [Go to End]      [Side Nav]      [Links]

Cross-browser Design

What is a cross-browser design?

A cross-browser design will have a consistent look when browsing it with different browsers at different monitor resolutions.

This online portfolio uses a cross browser layout. Browsers such as Safari, Firefox, Netscape, Mozilla, Opera, Konqueror, AOL, Internet explorer 6 and Internet explorer 7 will render this layout with a consistent look at different monitor resolutions!

There are 152 screen captures of this layout browsed by above mentioned browsers available at the following external link. To view screen captures of this layout, click on this link .

I would like to thank Manfred Staudinger for helping me out with solving the IE6 problem in regards to shadow of the header, which was related to the interference of IE conditional comments and other css rules that I was using. Go to his article

As he points out in his article, using a downlevel-revealed CC inside a downlevel-hidden one which fixed the above mentioned problem, was originally introduced by John Lascurettes and a link back to his portfolio is an appreciation of his help.

For more information on IE conditional comments you may browse the original document at msdn .

Why should I have a cross-browser web site?

Nowadays there are a lot of browsers out there that users use them to access the internet. Some of these browsers are w3c compliant browsers, whereas the others such as Internet Explorer do not comply with the standards in some cases. The fact is that, it does not really matter what browser YOU use to navigate your web site. What matters is that what browser your users and potential customers use to browse your website.

Since users use different browsers to access the internet, it is crucial to ensure that a design have a consistent look when browsing it using different browsers. This will help you to reach to as many people as you can and it will increase the accessibility of your web site.

But the question is, providing that there are a lot of browsers out there, Do we really need to design a web site for all of them? The answer is Yes and No.

Yes, because you want to increase your web site's accessibility and reach to as many audiences as you can.

No, because the cost of creating such a design will be very high, unaffordable and maybe unrealistic. Also it will be time consuming and impractical in some cases.

Why? well, if we refer to the statistics, we will notice that Internet Explorer 6 is the most common browser which is followed by Firefox and Internet Explorer 7 . Therefore we do not really need to design for all of the browsers in the market.

What should we do then?

In general, it is a good practice to design a web site for Firefox, Netscape, Opera, IE6 and IE7 In Microsoft Windows environment and to test it with a text browser such as Lynx.

Creating a cross browser, fast loading table-less layout is my passion. I do test all of my designs using the above mentioned browsers to make sure that my design has a consistent look when browsing it with these browsers.


[Back to Top]      [Go to End]      [Side Nav]      [Links]

Cross-Platform Design

What is a cross platform design?

A cross-platform design will have a consistent look when browsing it with different operating systems at different monitor resolutions.

Why should I have a cross platform web site?

There are different operating systems such as Windows Vista, Windows XP, Windows 2000 Professional, Linux and Macintosh installed on computers.

To ensure that you will reach to as much audience as you can, it is crucial to create a cross platform web site. This will increase the accessibility of your web site.

This Portfolio uses a cross platform layout. To view screen captures of this layout using different operating systems such as Windows Vista, Windows XP, Windows 2000 Professional, Linux and Macintosh use the following external link.

This link will take you to screen captures of this layout on different platforms.

Upon request, I will test my design using the Browsercam online service to make sure that my design has a consistent look when browsing it with different operating systems.


[Back to Top]      [Go to End]      [Side Nav]      [Links]

Layout Stability

What is Layout Stability?

Layout Stability refers to the elements of a layout such as divs, paragraphs etc. including body itself, not breaking apart, remaining stable, usable and readable when the browser's window is resized.

Note: If all the elements of a design are stable, however, body itself pushes to a side when resizing the browser's window, The layout is not considered as a stable layout.

Can you tell me more?

Unfortunately, apparently this issue has been under estimated and I could not find any article in this regard on the internet . So I decided to address this issue in here.

Let's have a look at the descriptions provided by cabinetoffice:


The layout and overall visual formatting can be 'rigid', where elements of the page are directed to appear in absolute sizes and positions on a screen, 'fluid', where elements of the page have hints about relative sizes and positioning, but can be flexibly scaled or rearranged to suit the particular display available.

Each of these layouts has its own pros and cons, which I am not going to discuss it in here. A perfect layout will have a consistent look in different browsers ,without breaking apart, regardless of the circumstances at which it is being browsed.

There are a lot of web sites on the internet focused on readability and usability while they do not meet the layout stability requirements. Some of them are experts in the world wide web and it is really unfortunate how they have missed the important part.

Layout stability is directly related to readability and usability. If a web site fails to meet the necessary requirements for layout stability, then filling it with articles about readability and usability does not make any sense at all.

So how we can meet the requirements for layout stability?

Well, apparently for a lazy coder, tables are the fastest way. It is true that tables if used for layout, can meet the layout stability requirements with a little knowledge, if coded correctly, without any extra effort. However using tables for layout, other than for tabular data, is not recommended because of accessibility problems.

So, we will have to use divs, but bear in mind that liquid layout will not be able to provide the necessary environment for layout stability purposes. Therefore, you will need to stick to the fixed layout.

I have accomplished this by combining liquid and fixed layout though which is presented in this portfolio.

My portfolio uses a stable and cross browser layout. Browse it using different browsers at different resolutions. Resize your browser's window and observe the elements remaining at their positions. There will not be any overlapping divs or paragraphs etc. The entire layout is stable, usable and readable regardless of the circumstances.

For more information and call for case study and research please see the Layout Stability Research

I will take the necessary steps to ensure that the layout of your web site is stable, usable and readable when the browser's window is resized.


[Back to Top]      [Go to End]      [Side Nav]      [Links]

Breadcrumbs

What is Breadcrumb trail?

Breadcrumb links or breadcrumb trails are single line of links and a type of navigation aid showing a web page's location in the site hierarchy.

This is a sample of breadcrumb: (Note that all the items should link to the respective page)

Home > Computers > Accessories > Webcams

Why should I use Breadcrumb trails in my website?

A visitor can be lost easily in your website if your web site contains a lot of child pages. To prevent this from happening and help users find their way in your web site, It is a good practice to use breadcrumbs.

Of course if a site does not contain many pages, breadcrumb links might not be necessary, however for the high volume sites breadcrumb trail , as Usability expert Jakob Nielsen suggests in his article, are increasingly useful.

Jakob Nielsen states in his article:

Breadcrumbs have always been a secondary navigation aid. They share this humble status with site maps. To navigate, site visitors mainly use the primary menus and the search box, which are certainly more important for usability. But from time to time, people do turn to the site map or the breadcrumbs, particularly when the main navigation doesn't quite meet their needs.

Despite their secondary status, I've recommended breadcrumbs since 1995 for a few simple reasons:

  • Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
  • Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
  • Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
  • Breadcrumbs take up very little space on the page.

Does Breadcrumb trail have anything to do with SEO?

Shari Thurow Search expert tells us in her article about how using breadcrumbs will increase search engine optimization of your web site.

An excellent study about Breadcrumb Navigation by Bonnie Lida Rogers and Barbara Chaparro at The Software Usability Research Laboratory of Wichita State University, is worth a lot to have a look.


[Back to Top]      [Go to End]      [Side Nav]      [Links]


CSS Drop Down Menus

What is CSS Drop Down Menu?

CSS Drop Down Menu contains menus and submenus created using CSS only. No java script will be used when creating these menus. All submenus operate based on CSS rules.

Why do I need to use CSS Drop Down Menus in my web site?

Well, since it does not use java script, it will increase accessibility and usability of your web site. In other words if a user has turned off java script for whatever reason, your submenus will function correctly and s/he can still use your web site efficiently.

I can make your website more accessible and more usable by creating CSS drop down menus. No need for Java script anymore!


[Back to Top]      [Go to End]      [Side Nav]      [Links]

Standardization

Let's have a look at the description of "web standardization" which CTIC Foundation provides for us:

The aim of web Standardization is to give uniformity in the techniques of portals and web sites construction. This is the way to guarantee the quality and the accomplishment of fundamental social aspects, to improve experience and user's satisfaction, to reduce maintenance development costs, to increase scalability and to ensure the compliance with legal requirements in areas such as accessibility and data protection.

I am available as a freelancer to standardize a non-standard web site or create a web site based on W3C standards and make your dreams come true. Please contact me for more information.


[Back to Top]      [Go to End]      [Side Nav]      [Links]

Search Engine Optimization (SEO)

What is Search Engine Optimization?

Based on the definition provided by wikipedia:

Search engine optimization (SEO) is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results. Usually, the earlier a site is presented in the search results, or the higher it "ranks," the more searchers will visit that site.

I do optimize web pages for search engines to ensure you will get a high traffic for your website by keeping the file sizes of your web pages down, utilizing different methods such as using external cascading style sheets (CSS), CSS rollovers etc. and by maintaining a good content to code ratio to let search engine spider read the content easily.


[Back to Top]      [Go to End]      [Side Nav]      [Links]

WCAG

What is Web Content Accessibility Guidelines?

Let's have a look at what W3C suggests:

The guidelines are intended for all Web content developers (page authors and site designers) and for developers of authoring tools. The primary goal of these guidelines is to promote accessibility. However, following them will also make Web content more available to all users, whatever user agent they are using (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.). Following these guidelines will also help people find information on the Web more quickly. These guidelines do not discourage content developers from using images, video, etc., but rather explain how to make multimedia content more accessible to a wide audience.

There are fourteen guidelines in WCAG. Each guideline is associated with checkpoints which describe how to apply that guideline to particular features of a Web page.

For more information you may browse the Web Content Accessibility Guidelines.

An Excellent free software from University of Toronto is available to download at A-Prompt Site to check local pages for accessibility.

You may try the A-Prompt online service at A- Prompt on-line service.

Visit the W3C website for a Complete List of Web Accessibility Evaluation Tools.


[Back to Top]      [Go to End]      [Side Nav]      [Links]

Other design Considerations

  • Color of font and contrast of text are important in terms of readability of the content of a web page as Jakob warns us against.
  • Unit of font size is important as well in terms of scalability as indicated in W3C website and check point 3-4 of WCAG.
  • Specifying a proper Line-length would be a challenge and I would recommend paying a close attention to it when designing a page. For more information on this, read the following articles:
    [text_length]
    [line lengths]
    [Limiting Line lengths]
  • Line height is another factor which definitely plays an important role on the readability of the content of a web page. For more information on this read the following articles:
    [Lengths]
    [line-height]
  • Calculate the Flesch Reading Ease of your web pages utilizing the JuicyStudio's online Readability Test and make sure FRE of your pages falls between 60-70 which is the proper specified range. This portfolio has a Flesch Reading Ease of 60.48 .
  • Specifying links at different places to aid users navigate to different locations on the page such as "back to top" and "Go to End", "Go to Links to Other sites" etc. where a web page unavoidably has been created in more than 3-4 scrolls and avoiding inserting a horizontal scroll bar, would effect the usability of the web page.
  • Providing a proper content to white space ratio, specifying proper margins for the elements of the design and providing a proper contrast would increase the readability of the page.
  • Grouping similar elements and avoiding distributing them in different location of a page will help users to find the information faster and would increase the usability of the page.

[Back to Top]      [Go to End]      [Side Nav]      [Links]

Employers

Finally, it is time to hire me! :) .

For information about my competitive Hourly/Weekly/Monthly and Yearly rates, please contact me. Your satisfaction guaranteed.

        Please Contact me at :              

I do normally reply to your email in one day. If you do not hear from me after 24 hours, I have not received your email. Please use the following email to resend your email. Thanks.

My alternative email

Subscribe to the Visually Impaired Users group feed that I am hosting at Facebook RSS feed

Please note that I would not work on sites which promote Porn, Alcohol, Guns, Illegal activities and/or contain stolen copy righted materials.

Disclaimer: I do not control the content of pages provided by search engines nor I am responsible for it's content.

[Valid XHTML 1.0 Strict] [Valid CSS] [WCAG 2 Level 2, check it with ATRC Accessibility Checker]