Haven’t found anything suitably inspiring for a while. But this one from Copyranter made me smile.
Being an expert in social media is like being an expert at taking the bread out of the refridgerator.
Posts Tagged ‘web’
Enough people. Please stop building forms where I’m asked to confirm a field I can see quite clearly. Like this example:
Or here’s another example. Which shows right and wrong use of duplicated fields and (horror or horrors) disables cut&paste.
The only requirement for a confirmation field is when entering a value that is not visible, i.e. a password. For anything else I can see the value I’ve typed and “confirm” it’s correct without retyping. Don’t make me repeat myself.
If worried about validity, beef up your error-checking. Don’t delay me with pointless re-typing (or more usually, cut&pasting).
And another thing. While making me repeat myself is bad enough, making me repeat myself and then disabling cut&paste in the repeated field gets you your own special corner of hell.
From Robert Brault:
A blogger is an average person who happens to have a need to count his friends every half hour.
I’m a firm believer that one of the most effective ways to learn is to study mistakes, yours or other peoples. Which is why I used to live at Web pages that suck when first starting out in developing web content.
Just come across a similar, humoured, approach to usability in the Bad Usability Calendar. Highlights a different usability issue for each month. Which means it’s not much use as an actual calendar but very useful as a quick usability prompt.
Granted a bit late now to pick up the 2009 edition. But watch the space for the 2010 copy.
From Carl Sagan:
All of the books in the world contain no more information than is broadcast as video in a single large American city in a single year. Not all bits have equal value.
[Had a few people ask me about this. Easier to write it down....]
By default, links in HTML:
- are underlined
- are in the same font as the rest of the document
- change colour depending on whether the link target has been visited or is yet to be visited in the current browser session.
Note this the last rule “link has been visited” is slightly different to the expected “link has been clicked”. Your links can therefore change their appearance to indicate a visit without ever being clicked. For example if you have two links to the same page, both will change colour when you click one of them and visit the target page.
To change any of these defaults you simply need to define an alternate style for the links.
A word of warning before we start
Be careful when updating the default styles for your links. Users are used to the defaults given above.
If you change them too dramatically some users may not be able to identify your links and not access your content. If changing the styles, ensure you provide some other method to identify the links as links. For example, position in an obvious-looking menu, use different colours/fonts, add an icon or image, use standard wording, etc.
Styling links based on their status
A link is added using the <A> tag. However adding a style for this tag is slightly complicated because the link has four different statuses, called pseudo-classes, and styles can be set for each:
- A:link – link that has not been used, and the mouse is not pointing at it
- A:visited – link that has been used, and the mouse is not pointing at it
- A:hover – link that has the mouse pointing at it (but not clicking it)
- A:active – link (visited or not) that has the mouse clicking on it
There are some rules about the order to define the pseudo-classes:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
An example
For example, assume you want to remove the underline style for the link, but show the underline when the mouse hovers over it. Additionally you do not want visited links to show a different colour to unvisited links. A sample style definition would be:
A:link, A:visited {
color: #0066ff;
text-decoration: none;
}
A:hover, A:active {
color: #0066ff;
text-decoration: underline;
}
Note how the different pseudo-classes for the link tag are identified by “:name”. Eg A:hover defines the style for the hover status of the link, etc. Also note how the same definition can be used for multiple statuses simply by separating the names by commas.
Obviously you can do anything you want on those styles. For CSS text-decoration is the attribute that determines underlined or not.
using these styles in your page
To make use of these styles on your page you need to include your new style definition:
- in the
<HEAD>section (add a<STYLE>section within the head), or - as a separate, linked CSS file
To add the above definitions in the document, add a <STYLE> section in the document head. For example:
<head>
<style>
A:link, A:visited {
color: #0066ff;
text-decoration: none;
}
A:hover, A:active {
color: #0066ff;
text-decoration: underline;
}
</style>
</head>
To link as a separate stylesheet, save the style settings in a text file (don’t include the <style></style> tags) and then add the link to that file in the document head. For example:
<head>
<link href="styles/main.css" type="text/css" rel="stylesheet" />
</head>
If you want to add comments/descriptions in your stylesheet file (you know you ought to!) use /* … */ to indicate those comments.
Styling based on location on the page
Only other point of interest is that you can also set styles for your links depending on where they appear in your HTML. For example we often use links in table headings to allow sorting (click on heading to set order, etc). Since headings have a different default style, we need different link styles just for headings:
TH A:link, TH A:visited {
color: #ffffff;
text-decoration: none;
}
TH A:hover, TH A:active {
color: #ffffff;
text-decoration: underline;
}
Notice how this CSS just refers to links within the tag to allow me to finetune their appearance.
more information
Once you know the pseudo-classes for manipulating link appearance, you are obviously free to make any changes supported by CSS. All these pseudo-classes are part of CSS1 – the full CSS1 specification is on the W3C website.
A useful primer on using CSS and styles is provided by W3Schoools.
From Dr. George Lundberg:
Information on the Internet is subject to the same rules and regulations as conversation at a bar.
From Benjamin Pollack:
“There is a tremendous amount of spit and polish that goes into making a major website highly usable. A developer, asked how hard something will be to clone, simply does not think about the polish, because the polish is incidental to the implementation. ”
The quote was part of a response to a suggestion to duplicate Stack Overflow, and thus save subscription fees to the original. You can read Benjamin’s entire rebuttal, or Jeff Attwood’s succint commentary for more details. Jeff’s article in particular does a good job in summarising what “polish” entails, and by doing so makes it clear how such polish is integral, not incidental, to eventual success.
PHP support for arrays is fantastic, particularly for those of us with a history using ASP. Sorting a single-column array is straightforward (there is a sort() function). But what about sorting a multi-column array? Well, there is a function (array_multisort()) that does it, but understanding how to use it is a challenge. This article hopefully provides a simpler explanation.
If you are using a multi-column array to store data from a database, it is much simpler and faster to get the data directly from the database in the order required (use the ORDER BY clause in your SELECT statement). This function is best used for multi-column arrays that are generated locally, or only in part from a database.
How to
To sort a multi-column array:
- determine which columns you want to sort by
- for each column you want to sort by, copy its contents into a separate, single-column array
- build your array_multisort() command:
- add the new single-column array as a parameter
- optionally follow the array with parameters for sort order and type
- repeat above two steps for each column to be sorted on
- complete command with name of multi-column array to be sorted
sort type and order
Sort type can be:
- SORT_REGULAR – compare/sort normally (default)
- SORT_NUMERIC – compare/sort as numbers
- SORT_STRING – compare/sort as strings
Sort regular uses standard ASCII order (“ABa” is 3 characters in regular order). The other two options operate more logically (eg “aAB” is the same characters now in string order).
Sort order can be:
- SORT_ASC – ascending order (default)
- SORT_DESC – descending order
For example…
For example. here’s a 3-column array we want to sort:
<?php $data[0]['name']= 'Google'; $data[0]['url'] = 'http://www.google.com'; $data[0]['rank'] = 45; $data[1]['name']= 'Yahoo'; $data[1]['url'] = 'http://www.yahoo.com'; $data[1]['rank'] = 17; $data[2]['name']= 'MSN'; $data[2]['url'] = 'http://www.msn.com'; $data[2]['rank'] = 6; ?>
Assume we want to sort this array by rank (ascending order). The first step is to store the rank column as a separate, single-column array. This is easy to do using the foreach command:
<?php
foreach ($data as $val)
{
$sortArrayRank[] = $val['rank'];
}
?>
To sort by this column, use array_multisort and pass our newly created rank array as the first parameter:
<?php array_multisort($sortArrayRank, $data); ?>
To change the sort to descending order, add the required order parameter after the 1-column array:
<?php array_multisort($sortArrayRank, SORT_DESC, $data); ?>
To sort by more than one column (eg to sort by rank, then name), simply repeat the above steps for the subsequent column(s) and add the paramaters to the list.
<?php
foreach ($data as $val)
{
$sortArrayName[] = $val['name'];
}
array_multisort($sortArrayRank, SORT_DESC, $sortArrayName, $data);
?>
more information
The official explanation of array_multisort can be found in the PHP manual.
The term accessibility has quite specific connotations in the internet world. It describes the capability of your site to support users with disabilities:
- colour blindness
- sight loss (up to and including complete blindness)
- hearing loss (up to and including deafness)
- reduced motor skills, etc.
Additionally the disability to be considered may not need to be one that is ‘part’ of the user but could be one imposed on the user by circumstances. For example accessing your site via a mobile device, or in a bright environment.
Published guidelines
As is the way of the web, a series of guidelines have been developed (see http://www.w3.org/WAI/ for details) that provide tangible steps a site designer can take to address accessibility issues. These are prioritised as 1,2,3 depending on to what extent your site is to meet accessibility needs. From the guidelines:
- A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
- A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
- A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.
A site that meets all priority 1 requirements is given a conformance level of A, priority 2 = AA, priority 3 = AAA. You’ll see some sites reporting this conformance level.
What guidelines do you need to meet?
Only government sites, or government sanctioned/supported sites may have mandated conformance requirements. This is particularly the case in the US where federal laws determine the levels of accessibility to be supported.
For the rest of us the choice is private. Grade A (meeting all level 1 items) can be considered the de-facto standard for any site, irrespective of audience or content. It includes such straightforward requirements as providing ALT descriptions for all images (so text readers can describe them) and generally using HTML (and particularly CSS) correctly so different presentations can be created easily.
There is considerable work involved in conforming with the higher accessibility grades, particularly if reworking an existing site or content. We may therefore choose only to go those levels if our particular audience requires it, or if particular elements in our site require it (eg online policies for disabled access would attract more users with accessibility issues and thus warrant higher conformance levels).
Testing compliance
The first step in considering accessibility is reviewing the guidelines and conducting a code review (and/or developing a coding standard depending on project status) which encompasses the core elements.
There are several online tools or services available to allow published sites to be tested easily (and regularly – important if content is changing). The UK’s Royal Institute for the Blind maintains a comprehensive list of such testing services. One of the most famous/useful testing sites was Bobby. Unfortunately this appears unavailable at present.
Accessibility and SharePoint
SharePoint can be configured/developed to provide compliance with several accessibility guidelines. And for sites requiring a higher level of conformance there is a downloadable Accessibility Kit for Microsoft Office SharePoint Server 2007. This Sharepoint team post on accessibility explains approaches using both standard SharePoint and the accessibility kit.
Conclusion
As any other core business system, an intranet needs to comply with the firm’s directives for supporting staff with disabilities. The W3C guidelines provide a clear and comprehensive method for assessing, ensuring and displaying that support.