Archive for May, 2007
published by Dan in CSS | Tools & Resources | Web Technology | Website Design | Website Standards
Last time I explained how the javascript that we can use to change the stylesheet. What we need to do next is to make the user’s choice persistent all across the website, which means, it should be applied to all other documents, and the way to do this is to make use of cookies.
We need create a function that will return the current stylesheet and functions for reading and storing the cookie.
The first function can be implemented by looping through all the link elements, then three checks: check if the link is a stylesheet, check if it’s a preferred or an alternate style sheet and lastly check if the style sheet is active. Then we return the title if all the three checks are satisfied.
This is the function:
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}
then we create the function createCookie and readCookie to store and read cookies, respectively.
The functions for the cookies can be implemented as:
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
and
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
To finish, we will need to add event listeners (onload and onunload) to the window. This will be discussed next.
published by Dan in Accessibility | Web Technology | Website Design
This is the third part of a series of post on dynamic switching of style sheets. The first post discussed the basic CSS knowledge required, and the second post discussed the background on style sheet switching and why it has to be implemented in javascript.
The script is a simple one, with three main building blocks:
a way to check if the link element is a link to a style sheet,
HTMLLinkElement.getAttribute("rel").indexOf("style") != -1
a way to check if the title attribute is defined, and
HTMLListElement.getAttribute("title")
if the rel attribute contains the word “alt”
HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1
We then use the three javascript checks above to create our style sheet switching javascript method. To do this, we loop through all the link elements in the document and disables all the preferred and alternate style sheets that the user did not select and enables all the preferred and alternate style sheets that the user selected. Below is one implementation of the switching function:
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
The method above already implements the switching mechanism that we want. But what if the user goes to another part of the website after selecting a desired style sheet? At this point, the preferred style sheet will be enabled regardless of the user’s choice. This creates a problem of not giving a whole personalized experience. What we need is a mechanism to make the user’s choice style sheet persistent. This can be done through the use of cookies to store the user’s preferences.
Next time I will discuss the other scripts that needs to be implemented to address this issue.
published by Dan in CSS
In the previous post i tried to setup the knowledge foundation in creating dynamically switching style sheets. I discussed the three different relationships that external style sheets have to your document: persistent, preferred and alternate.
So how does the style sheet switching mechanism work? When a web document is initially loaded, the persistent and preferred style sheets are applied to the document. Alternate style sheets can be selected by the user to change the formatting of the page. According to the W3C, this style sheet switching should be done through the browser, through a browser feature. While Mozilla (Firefox and Semonkey) and Opera browsers provide this feature, Internet Explorer unfortunately does not. So we end up with alternate style sheets but no way of accessing them through Internet Explorer.
With Javascript along with the DOM, we can create a script to provide a cross-platform way for users to select the style sheet that they want to use. In order not to break the style switcher feature of Mozilla browsers, we should use the link tags according to the rules of the W3C. Then we can use cookies to store the users’ style sheet preference. This way, the choice is reflected in the whole site and not just in one page.
Now that I have explained the background of style sheet switching, I will discuss next how to implement the actual Javascript.
published by Dan in CSS
Using CSS to control what your website looks like is the first step towards a good website design. To give more options to your users, you may implement way to dynamically switch between different style sheets.As you know, external stylesheets can be associated with documents using a list of link elements in the head. Three different relationships exist between your document and external stylesheets: persistent, preferred, and alternate.
Persistent
Persistent stylesheets are enabled and are combined with the current active stylesheet of the document. Persistent stylesheets can be used to apply a fixed and common style to all stylesheets. To make a style sheet persistent, set the rel attribute to “style sheet” and don’t set the title attribute
Example:
<link rel="stylesheet"
type="text/css" href="example.css" />
Preferred
Preferred style sheets are enabled when the document is first loaded. They can be disabled if the users selects an alternate style sheet. To make a style sheet preferred, set the rel attribute to “style sheet” and name the style sheet with the title attribute.
Example:
<link rel="stylesheet"
type="text/css" href="example.css"
title="Default_Style" />
You can also group multiple style sheets by naming them using the same title attribute. If more than one type of preferred style sheet is specified, the type declared first takes precedence.
Alternate
Alternate style sheets are not enabled by default but they can be selected by the user as alternatives to the preferred style sheet. To specify an alternate style sheet, set the rel attribute to “alternate stylesheet” and name the style sheet with the title attribute.
Example:
<link rel="alternate stylesheet"
type="text/css" href="example.css"
title="alternate_style" />
Next post I will continue with ways of implementing the style sheet switching mechanism.
published by Dan in Flash
Flash is probably one of, it not the most widely deployed proprietary technology that allows the deployment of rich internet applications and web designs today. According to studies, 98% of US web users have the Flash player installed. Flash can enhance the design of your web sites by giving you exact control on almost every part of your design. But improper use of the technology can also give bad effect to your design. There are things that you should therefore consider when using flash in you design.
Using flash in your web design compromises its accessibility. This is becaue flash-based websites are generally not indexed well by search engines unless proper measures are done. One good practice is to specify an alternate content for your site to explain what it is about. This way, browsers without flash player installed can still view your website and this will also allow search engines to crawl your site’s content properly. Most flash-based sites however are still inaccessible by screen readers for disabled users. Therefore, when deciding to implement your whole design in flash, consider if these limitations will limit the usefulness of your site to your target audience.
A good compromise on when to use Flash is to integrate it into the whole design as a part of html. This way, you can take advantage of what Flash can do to enhance your design’s overall impact without really being affected by its limitations. For example, most menu or navigation systems can be implemented in flash. Video and other multimedia components are also best implemented in Flash. Making good use of flash can vastly improve your site’s web design if done the right way.
published by Dan in Usability | Website Design
One of the design considerations that a web designer must grapple with is the decision to use a fixed-layout or a liquid design. For the new designers out there, a web page designed with a fix-width layout is one whose width dimension is set to a fixed value, so that the users will see the same layout dimensions regardless of their browser size. A liquid layout on the other hand is meant to adjust its width based on the size of the user’s browser.
Early web designs were naturally fixed-width because some of the early web designers came from the print media where they’re used to having the full control on the dimensions of their final design. This changed though when designers realised that not all web users use the same viewing dimensions (i.e. their browser may be set to different sizes). This is also one of the big advantages of using a liquid over a fixed layout: you are able to design for your different users.
The idea in a liquid layout is to continually fill the page as the user changes its browser size. Multi-line content should wrap a the right margin unless the browser width becomes too narrow to make your content readable, in that case you should allow scrollbars to appear.You should allow your main body content to fill the new space, while keeping navigational elements anchored to your desired position.
Liquid layouts are harder to implement, and even much harder to nail. It is however a way to cater to most of your users who maybe viewing your pages with a limited setting. And one of the foundations of a good web design is the ability to design within these limits imposed by your users’ least common denominator.
published by Dan in Web Development | Website Design
The planning phase of website design is very important since it is the part when you decide exactly what you need. The things you should consider when planning a website are its purpose, your target audience, the actual content and the website’s compatibility and restrictions.
The Purpose - Defining the purpose of the website is the first thing you need to do when planning a website. The next parts of the planning phase depend on what the purpose will be. By having a very specific purpose in mind you will be able to define who your audience will be, the scope of the content, and the more technical website specifications.
Target Audience – Your target audience are the people who you expect and want to visit your site. Your target audience will be visiting your site because your site has something to offer them that they need. This is why your purpose should be clearly defined to help you identify your target audience. Once the purpose is defined you can figure out what kind of users you can expect to benefit most from the website. You can have a broad audience as long as they share specific characteristics common to them that identifies them a group of people who will benefit from your web page. Some characteristics you might want to consider are: demographics (age, ethnicity, religion, etc.), information needed, work and web experience, and their computer’s specifications.
Content – The website’s content takes intensive planning since you will need to evaluate the needed content, the scope, and how you will organise and present the content. Again you will need a clearly defined purpose to be able to determine the scope of your content. When organising the content you will need to make an outline defining each topic and sub-topic and determine the hierarchy of content.
Website Specifications – Your website’s specifications will again be determined by the website’s purpose. Will you be using HTML only or will you be using CSS? What web browsers will you make sure your website is compatible to? And what formats will you use for the images embedded within the site? It is during the planning of specifications that you determine compatibility issues.
published by Dan in Tools & Resources
Sorry Windows web developers, this tool is only for the mac.
Coda is Panic Software’s latest product offering catering to the web developer crowd. Panic’s slogan for Coda is “one-window web development”, and true to that, it aims to make the workflow for web development easier and more intuitive. What coda aims to do is provide in a single application what would normally take at least four separate mac apps to do. It provides a central hub for your projects called sites, it provides a feature-rich text editor, an intuitive and simple file and ftp browser, a built-in html previewing component powered by Apple’s webkit, a fully-featured CSS editor, a terminal client, and to add the icing to the cake, a set of built-in references for web development.
For the web developer looking for a way to optimise his workflow, Coda excellently fulfills this need. In Coda, your website projects are represented as “Sites”, providing a smart starting point for your website development projects. Sites opened will instantly restore themselves exactly as you have left them, connecting to ftp servers, restoring editor states, and allowing you to start coding again in a flash.
One of the more interesting feature of its text editor is the ability to code simultaneously with someone through the network, taking advantage of Apple’s standards-based Bonjour technology. You can also share files and track changes through Coda.
All in all Coda delivers a very good experience and workflow for the web developer.
published by Dan in Usability | Web Development
As a diversion to my ongoing series on top-down usability design in web development, let me discuss about a very simple yet useful design element: the breadcrumbs. A single-line navigational element in a website that provides an intuitive and consistent navigational system for the users of your site.
The breadcrumbs usefulness can be loosely illustrated by the classic fairytale of Hansel and Gretel. In that children’s story, the two main characters left breadcrumbs in their path on their way to the witch’s house so that they’ll be guided back when they return. In the same way breadcrumbs are all about the navigational idea of returning to a previous point. In web design, breadcrumbs are implemented as a single row of text in every page of the site that gives the user an idea where he is in the hierarchy of information of the site. A user can navigate up this hierarchy by simple clicking the corresponding breadcrumb.
It is important to note thought that the breadcrumbs, as mentioned, should reflect the information hierarchy and not the user’s navigation history. The breadcrumbs should not aim to emulate the browser’s back button.
Breadcrumbs provide the user a good sense of direction and the feeling of being in control because it provides him an idea where he is in your site’s hierarchy. Being that way, he is able to navigate more efficiently around your site. Breadcrumbs also provides a consistent way of moving around for the user. And consistency is a very important element in usability. Breadcrumbs may take only a few of your site’s development time, but its one of those “little things” that makes your users more comfortable with your site without them being conscious about it.
published by Dan in Usability
As with the waterfall model of doing things, a good web usability design process starts with the big things. Once you have set these things right, then you go on to the little details of web usability.
You are not the User.
Your preferences may not reflect that of your website’s target users. This is why it’s important to wear the user’s hat during the whole design process. The common mistake most designers do is to assume that the user will see the design in the same manner that they designed it. Conduct surveys and learn as many things as you can about your users and incorporate that knowledge into your design.
Communicate Clearly
It’s very important that the user picks up the website’s message clearly and in the most efficient way. You only have a few seconds to convince a new user that the website’s worthwile so make sure that the content is communicated properly to the readers.
Provide the Information that Users Want
This is very simple and fundamental design consideration; choose your target users, learn about them and the information that they want, then give them that information.
Provide an Easy Site Navigation
User experience is all about providing the navigation and information architecture that conforms with the user’s expectations. Getting to the right information in the quickest way possible is a very important thing for the user. Your users will be happy if they find information quickly and in the places where they expect them to be.
0845 838 7448 
