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.
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
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.
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
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.
Tag is used for the flash file and Mozilla browsers are just fine with the flash file.
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.
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.
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.
A cross-browser design will have a consistent look when browsing it with different browsers at different
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!
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.
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.
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.
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)
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
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
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
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.
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
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
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.
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.
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.
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:
[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:
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.