Articles by Category: Web development

All universities are equal...

Adriaan Bloem has written a post about university websites. To quote:

Usually, where universities come from is the same: academia was among the early adopters of the nascent technology and many ventured out on the web in the early nineties. With the archipelago of departments, institutes, faculties, over a decade many managed to produce hundreds of thousands or sometimes millions of published web pages. Often using different styles, editors, webservers, then CMS tools -- it's not uncommon to find hundreds of (sub)domains within a single institution.

We've been doing a lot of work with universities over the last year or so, and have observed all of the same issues and challenges. After a while, we worked out that universities are uniquely challenging environments because they are the only place that doesn't have a shared sense of corporate identity. You don't work for the university, you work for the School of Dentistry.

We're now seeing university web strategy projects as a piece of organisational change, not as "create a document" projects. I think there's some valuable progress to be made via this approach, but we're still in the early stages of exploring what it means in practice...

Posted by jamesr at 05:55 AM | Permalink
Categories: Content management, Information architecture, Web development

Your new site will be 20% different from current site

Implementing a new website or intranet is a unique opportunity to work with new functionality and ideas and push the bounds of what the site will do. When a new underlying platform is being implemented, such as a content management system or portal, the scope for rethinking the site can be increased further.

Yet, despite all of this opportunity for change, the simple rule of thumb is that the new site will be at best 20% different from the current site.

There are fundamental reasons for this, which will be explored in this briefing. The implications of the rule for the design and technology aspects of the project will also be discussed.

New ideas

'Blue sky thinking' explicitly provides scope for rethinking the purpose and design of the site, allowing radically new approaches and ideas to be considered. Even without this, any site redesign allows for some reconsideration of how the site is designed and delivered, along with a concrete opportunity to implement these changes.

When the underlying technology is also being changed (such as installing a new content management system), the opportunity for change is even greater. High ambitions combined with an opportunity for reworking the site, can generate the desire for significant site changes, such as:

• Reworking the entire site as a 'web 2.0' platform, where content will be actively provided by users.
• Reworking the static CMS-based intranet into a dynamic, personalised portal that will target information to specific staff roles.
• Creating a dynamic, data-driven website that will use user profiles to deliver targeted information and functionality.

These three examples have been drawn from real projects. While desirable in vision, such ambitious goals will always need to be tempered into a concrete scope for the project, and into a clear design for the site.

[CM Briefing 2007-14, read the full article]

Posted by jamesr at 10:51 PM | Permalink
Categories: Information management, James' articles, Web development

Intranets -- why you should care

Patrick Kennedy has posted on why web designers should care about intranets. To quote:

Last night I presented my talk on intranets at the Sydney Web Standards Group meeting. I spoke about the topic of two of my recent posts, namely web developers have the power and intranets: the beast we love to hate. In a nutshell, I covered these points...

Posted by jamesr at 03:09 PM | Permalink
Categories: Intranets, Web development

Web developers have the power

Patrick Kennedy has written a post highlighting that web developers have the power, and should act accordingly. To quote:

At the end of the day, creating and maintaining websites and intranets is about communication, not technology. In order to succeed, and to have yourself heard, you need to be open to discussions with your fellow team members. You need to share the wealth of your expertise and you need to interface with all the different parts of the business.

Posted by jamesr at 10:35 AM | Permalink
Categories: Usability & user-centered design, Web development

Dynamic help in web forms

Luke Wroblewski has written an article on dynamic help in web forms. To quote:

Each of these dynamic Help systems for Web forms has its distinct advantages and disadvantages. As with all design decisions, an understanding of user needs and business goals should inform which of these dynamic Help systems is right for your Web forms. If you've used other types of dynamic Help on Web forms, please let me know, so we can extend this list of options.

Posted by jamesr at 02:40 PM | Permalink
Categories: Usability & user-centered design, Web development

Why invest in social features for your web site?

Joshua Porter has written an article about using social features on websites. To quote:

The runaway successes of YouTube, MySpace, and Flickr have completely changed the landscape of design. One huge change is the rise in socially-enabled web applications, applications that connect users in new and more explicit ways. Witness the trend of "going social" on news sites, where they give their community the ability to comment on and even participate in the news. The design team behind the USAToday.com web site, for example, recently enhanced their site with new social features including comments, reviews, discussion forums, and the ability to make recommendations. Just this past week ABCNews did the same. So what are the core benefits of making this change? Why invest in social features?

Posted by jamesr at 09:32 AM | Permalink
Categories: Area Health Service project, Book & product reviews, Collaboration, Conferences & presentations, Content management, Design & usability guidelines, Document & records management, E-learning, Enterprise 2.0, Information architecture, Information architecture, Information management, Interface design, Intranet Leadership Forum, Intranets, James' articles, Knowledge management, Knowledge management, Metrics & ROI, Photos, Search tools, Usability & user-centered design, Web development, Web development, Weblogs, XML

Web Industry Professionals Association (Australia)

Spreading the word about a worthy initiative:

The new WIPA site was launched today.

The recently established Web Industry Professionals Association (WIPA) aims to foster the development of the Web Industry in Australia and provide forums where people who work in all the different facets of the industry can come together and exchange ideas.

Australian web professionals can now join WIPA through the new site.

WIPA is not just for one web practice or section of the industry. WIPA is for all web professionals in Australia including, designers, content writers, information architects, usability and accessibility specialists, web developers, interface developers, online content producers etc. In short, anyone who works in the business and who has an interest in discussing, promoting and improving the work we do.

WIPA is a not for profit association incorporated in NSW. Although the incorporation is in NSW, the association is committed to promoting and representing the work of web professionals throughout Australia. As a clear demonstration of this commitment, the Association Rules provide for representation on the Management Committee from all States and Territories with more than 5 WIPA Members. Also, the position of Vice-President is reserved for a person who does not live in NSW. The current WIPA Management Committee has members from the ACT, NSW and Victoria.

There is a variety of other web-related groups in Australia including, the Web Standards Group, Usability Professionals Association, Oz-IA, AWIA, Mobile Monday and AIMIA. WIPA aims to work cooperatively with all other groups in helping to develop a cohesive and sustainable web industry in Australia.

For more information about WIPA and to join the association visit wipa.org.au.

Posted by jamesr at 07:08 PM | Permalink
Categories: Web development

Separate design and the CMS

There are two major elements to most web redevelopment projects: the redesign of the existing site, and the selection of a new (or replacement) content management system (CMS).

These two elements reflect the underlying issues that typically drive web projects: the problems with the structure and content of the published site, and issues with the management and publishing of the site.

The temptation can be to select a single provider to deliver both the redesign of the site and the underlying CMS. This would, however, be a mistake. Instead, organisations are almost always better served by separating out the design and the CMS, and sourcing these from different providers.

Website redesign

The primary reason for the website project is that the current site is broken. Typical issues include poor site structure, dated design and out of date content.

To address this, organisations should follow a user-centred design process. This involves applying a range of usability and information architecture techniques, such as card sorting and usability testing.

[CM Briefing 2006-18, read the full article]

Posted by jamesr at 02:50 PM | Permalink
Categories: Content management, James' articles, Usability & user-centered design, Web development

Sensible forms: a form usability checklist

Brian Crescimanno has written an article on the usability of forms. To quote:

With so many form elements to choose from, each with distinct advantages and disadvantages, it can be difficult to decide which elements to use in a given situation. Use radio buttons, checkboxes, and select boxes appropriately: for radio buttons or checkboxes, use the "fieldset" and "legend" tags to group the elements logically under an obvious heading. This grouping keeps the form manageable to users, as it can be broken down into smaller pieces in their minds.

Posted by jamesr at 07:48 AM | Permalink
Categories: Usability & user-centered design, Web development

Server side usability

Henrik Olsen has written an article on server-side usability. To quote:

Most usability professionals don't have a driver's licence to web servers and are not aware of the steps that can be taken to make servers behave in a user-friendly way. In this article, we'll take a look at how to avoid that server technology becomes an obstacle to usability.

[Thanks to InfoDesign.]

Posted by jamesr at 07:09 PM | Permalink
Categories: Usability & user-centered design, Web development

Adopting Web Standards (Sydney, Australia)

Forwarded on behalf of Russ Weakley:

Adopting Web Standards - Free briefing for Education and Government

Government and education are at the forefront of the adoption of web standards. To aid in this process, Web Essentials is hosting this free briefing, featuring the W3Cs Dean Jackson, and highly respected web accessibility expert Roger Hudson.

At this preview for WE04, Web Essentials invites you and your colleagues to come for a drink and have your questions answered by industry leaders.

Date: Thursday September 2, 2004
Time: 6:00pm for 6.30pm start (refreshments supplied)
Venue: University of Technology Sydney, Building CB02, Level 4, Room 10
RSVP: rsvp@webessentials.org

Posted by jamesr at 01:50 PM | Permalink
Categories: Usability & user-centered design, Web development

Web Essentials 04 (Sydney, Australia)

I'm passing on a message from Russ Weakley about the upcoming Web Essentials 04 conference. To quote:

Be inspired by the world's leading web standards gurus. Be motivated by the meeting of minds of hundreds of web developers sharing their ideas, techniques and accessibility goals. Gain practical skills and knowledge in web coding, CSS and accessibility.

This is being run by the Web Standards Group, who are doing some great things in this space, and this conference comes highly recommended!

Posted by jamesr at 03:28 PM | Permalink
Categories: Conferences & presentations, Web development

User-centred design for large software projects

A few days back, I posted a question to the AIfIA mailing list about User-centred design for large software projects, as follows:

They [software development firm] are still using the "waterfall method" of software development (requirements, design, develop, test, deploy), and I suggested that this wasn't likely to deliver a product that would be valuable for the end users (although it might be delivered on-time and on-budget, if lucky).

Can anyone point me towards some articles and/or books that would present a user-centred view, specifically for these technology-obsessed folks?

I had a flood of great responses, which I'm going to try and summarise in this post. (See the end of the post for the list of those who so generously responded.)

User-centred design resources for large software projects:

• Rational Requirements and analysis literature
• Microsoft: User-Centered Design Principles
• IBM: What is User-Centered Design?
• User Engineering section of IBM's Ease of Use site.
• Making a Business Case for User-Centered Design, JoAnn T. Hackos, Center for information Development, 2001
• MIL-STD-498 (US Department of Defence evolutionary development principles)
• Alistair Cockburn's pages on the Crystal Methodology
• Larry Constantine's work (speaks to tech folks, especially if they are rational rose or O-O types)
• Collection of Constantine & Lockwood's articles
• Agile Alliance
• DSDM ("DSDM uses an iterative process based on prototyping and involves the users throughout the project life cycle.")
• Jesse James Garrett's Elements of User Experience ("We have a modified *spiral model* that includes users, but we also have an *Elements of User Experience Model* that directly reflects JJG's work)

Thanks to: Thomas Vander Wal, Meg Houston Maker, Charles Dowdell, Peter H. Jones, Christina Wodtke, John O'Donovan

Posted by jamesr at 10:41 AM | Permalink
Categories: Information architecture, Usability & user-centered design, Web development

Mountaintop corners

Dan Cederholm has written an article on how to achieve rounded box corners using only CSS. All very nifty, to quote:

Because an element’s background-image sits on top of its background-color, we can use transparent GIF images that create the illusion of rounded or shaped corners and borders. By keeping these decorative graphics within CSS, we can achieve flexible containers that can change color with the update of a single CSS rule. Happy hiking.

(I'll say it again, there's some really great work happening in the CSS world at the moment...)

Posted by jamesr at 01:01 PM | Permalink
Categories: Web development

CSS drop shadows II: fuzzy shadows

Sergio Villarreal has written an article on an improved technique for creating drop shadows using CSS. To quote:

The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike what an image editing program would produce (a fuzzy shadow). Given that the shadow image is effectively clipped at those points, we felt this was an unavoidable inconvenience, chiefly due to Internet Explorer’s inability to display PNG’s transparency natively.

Posted by jamesr at 02:15 PM | Permalink
Categories: Web development

Gurus v. Bloggers, Round 1

Andrei Herasimchuk of Design By Fire judges a "showdown" between the sites of the gurus versus the bloggers. To quote:

I've gathered examples of web sites of a few well known -- and highly respected -- web, design, and technology Gurus, along with a few web sites of a few well known Bloggers in the design sector.

What are we going to do with them?

Have them duke it out, Celebrity Deathmatch Style! (Ok… without the fun claymation or witty writing. You get what you pay for.)

While this is extremely funny (and very tongue-in-cheek), it does make some valid points about site designs. Hmm, must get around to my site redesign (which has been in the pipeline since January).

Posted by jamesr at 01:02 PM | Permalink
Categories: Information architecture, Usability & user-centered design, Web development, Weblogs

Zebra Tables

David F. Miller has written an article on how to easily create zebra tables (tables where the rows have alternating colours) using CSS. To quote:

Ever since CSS hit the big time, the table has become increasingly rare. Semantic markup and CSS have replaced tables as layout tools. Tables are now relegated to their original role: displaying data stored in records (rows) and fields (columns).

However, their new status doesn't mean that they still can't be the targets of a designer's styles and a developer’s hacks.

Posted by jamesr at 11:53 AM | Permalink
Categories: Web development

CSS vault

The CSS Vault provides a gallery of sites designed using CSS, as well as a pile of supporting CSS resources. Well worth a visit.

[Thanks to Reloade.]

Posted by jamesr at 09:24 AM | Permalink
Categories: Web development

Template files for web projects

e-consultancy has published a set of template files for web projects, including the following:

• Contract for Web Services
• Web Project Plan
• Usability (various)
• Site Map
• Functional Specification
• Technical Specification
• Content Plan
• Privacy Policy
• User Agreement
• Wireframes
• Style Guide
• Maintenance and Service Level Agreement
• Site Evaluation Framework

(A more comprehensive version is available for purchase.)

Posted by jamesr at 02:31 PM | Permalink
Categories: Information architecture, Usability & user-centered design, Web development

The Perfect 404

Ian Lloyd has written an article on creating the perfect 404 page (the "page not found" page). To quote:

Welcome to the world of the Error 404 page. You've requested a page -- either by typing a URL directly into the address bar or clicking on an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser's built-in ability to explain what the problem is. We can do better than that, can't we?

Posted by jamesr at 06:34 PM | Permalink
Categories: Web development

Colored boxes - one method of building full CSS layouts

Russ Weakley has written another practical tutorial on building full CSS layouts. To quote:

How do you go about building a full CSS layout? Is there an overall method that can be used for any layout?

This article explains one method of building a full CSS layout from start to finish. The method, based on positioning colored boxes and testing across a range of browsers, can be used to build a wide range of full-CSS layouts.

Posted by jamesr at 08:24 AM | Permalink
Categories: Web development

Liquid layouts the easy way

Russ Weakley has written another excellent tutorial, this time on using CSS to create liquid layouts. To quote:

This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.

[Thanks to logos.]

Posted by jamesr at 10:11 AM | Permalink
Categories: Web development

Links to CSS and web standards resources

Andrew Fernandez has published a site that provides an excellent set of links to CSS and web standards resources. To quote:

Here you'll find a whole bunch of links to some of the vast resources out there. These are places I've have gone to and still visit for help and to learn. As new resources are constantly popping up, watch this space for changes. I've tried to order stuff as logically as possible.

[Thanks to InfoDesign.]

Posted by jamesr at 08:24 AM | Permalink
Categories: Web development

Architecture of the World Wide Web

The W3C has released a working draft on the architecture of the World Wide Web, which provides an overall vision for developing and using the web. To quote:

The World Wide Web is a network-spanning information space of resources interconnected by links. This information space is the basis of, and is shared by, a number of information systems. Within each of these systems, agents (people and software) retrieve, create, display, analyze, and reason about resources.

Web architecture includes the definition of the information space in terms of identification and representation of its contents, and of the protocols that support the interaction of agents in an information system making use of the space. Web architecture is influenced by social requirements and software engineering principles, leading to design choices that constrain the behavior of systems using the Web in order to achieve desired properties of the shared information space: efficiency, scalability, and the potential for indefinite growth across languages, cultures, and media. This document reflects the three bases of Web architecture: identification, interaction, and representation.

Posted by jamesr at 03:50 PM | Permalink
Categories: Web development

Selectutorial - CSS selectors

Max Design has published another excellent tutorial, this time on CSS selectors. To quote:

Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.

Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.

[Thanks to the Web Standards Project.]

Posted by jamesr at 08:20 AM | Permalink
Categories: Web development

Three column CSS layout generator

CSS Creator has published a tool for easily generating three column CSS layouts. To quote:

The CSS layouts are based on an excellent 3 column CSS layout designed by Douglas Livingstone. The generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer.

Browsercam Screen Captures show the layout working well in most browsers. Netscape 4 displays the columns in place minus the background colors, all other CSS capable browsers available for testing work well.

[Thanks to logos.]

Posted by jamesr at 12:57 PM | Permalink
Categories: Web development

Flowing and positioning: Two page models

John and Holly Bergevin have written an article on flowing and positioning in CSS. To quote:

In doing web design work, it is likely you have heard terms such as "Normal flow" and "CSS Positioning." However, if you are accustomed to using tables for controlling the placement of page elements, you may be slightly hazy concerning what these terms actually mean. If so, it's time we got down to some basics on the ways web pages are visually constructed on the screen by current browsers.

[Thanks to Simon Willison.]

Posted by jamesr at 02:53 PM | Permalink
Categories: Web development

Float: The theory

John and Holly Bergevin have written an article on using CSS floats. To quote:

If you are like most people, the whole issue of Floats is rather intimidating. The theory is difficult to grasp, and on top of that, the bugs are rumored to be numerous and nasty. Well fear not, because we will walk through the concepts, some of the bugs, and the practical uses of floats, in nice easy stages. Be assured that you will suffer no ill effects. Rather, a vast new world of positioning will open up before you. Onward!

[Thanks to Simon Willison.]

Posted by jamesr at 02:50 PM | Permalink
Categories: Web development

Multiple Internet Explorers

A technique has just been discovered that allows multiple copies of IE to be run on a single machine. Why is this interesting? Well, it allows sites to be easily tested for compatibility with earlier versions of Internet Explorer, without having to resort to some sort of "virtual PC" solution.

Posted by jamesr at 08:16 AM | Permalink
Categories: Web development

Research-Based Web Design & Usability Guidelines

Usability.gov has published a set of comprehensive web design & usability guidelines, consisting of a massive 128 page, 39.2Mb PDF book. To quote:

The primary audiences for the Guidelines are website designers, managers, and others involved in the creation or maintenance of websites. A secondary audience is researchers who investigate Web design issues. This resource will help them determine what research has been conducted and where none exists.

[Thanks to elearningpost.]

Posted by jamesr at 05:17 PM | Permalink
Categories: Usability & user-centered design, Web development

QuirksMode

Peter-Paul Koch has published a website on workarounds for browser incompatibilities. To quote:

QuirksMode.org is the personal and professional site of Peter-Paul Koch, freelance web developer in Amsterdam, the Netherlands. It contains more than 150 pages with CSS and JavaScript tips and tricks, and is one of the best sources on the WWW for studying and defeating browser incompatibilities. It is free of charge and ads, and largely free of copyrights.

[Thanks to Simon Willison.]

Posted by jamesr at 08:40 AM | Permalink
Categories: Web development

Web Design Practices

Heidi P. Adkisson has published a website called Web Design Practices which explores some of the common interface design practices, and their usability. To quote:

This site is an outgrowth of my Master's thesis, completed in December, 2002 at the University of Washington. My interest in continuing my research lead me to launch this site in September of 2003. I also felt that the data I had collected (and plan to collect) would be more accessible in a web-based presentation. I encourage those interested in conducting related research to also refer to my thesis, which can be downloaded at my personal web site www.hpadkisson.com.

The data presented on this site are intended to inform design decisions, not dictate them. Common practice does not necessarily equate with best practice---and the relationship between consistency and usability on the Web is remains a lightly researched area.

This site certainly brings together some useful pointers and samples on a range of practices. Worth a visit.

[Thanks to xBlog.]

Posted by jamesr at 12:06 PM | Permalink
Categories: Information architecture, Usability & user-centered design, Web development

Floatutorial

Russ Weakley has published another excellent CSS tutorial, this one on learning to use floats. To quote:

Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

[Thanks to Simon Willison.]

Posted by jamesr at 11:34 AM | Permalink
Categories: Web development

Independent-Testers.org

Found via Beth Mazur and IDblog: Independent-Testers.org, an independent community site for testing websites for cross-browser compatability and accessibility. To quote:

As a web site designer an important part of developing the site is testing. To ensure your site can be accessed by as many people as possible, many aspects need to be considered with your testing. You need to test different browsers (including different versions of the same browser), platforms such as Windows and Mac, what it will look like with or without CSS, if the site is accessible by disabled users, to mention a few.

We have put together a panel of independent people who can test web sites for web developers.

An interesting idea...

Posted by jamesr at 11:01 AM | Permalink
Categories: Usability & user-centered design, Web development

Listutorial

Russ Weakley has written an excellent tutorial on using CSS for lists. To quote:

Listutorial takes you through the basics of building CSS lists with "background images for bullets" and "simple rollovers" with a few variations along the way.

Posted by jamesr at 11:12 PM | Permalink
Categories: Web development

Styling lists using CSS

I've been amazed at how far Cascading Style Sheets (CSS) have come in the last six months. As an example, Russ Weakley has published Listamatic, which brings together a pile of different approaches to formatting lists using CSS. To quote:

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list using samples from Eric Meyer, ProjectSeven, SimpleBits and others.

[Thanks to Simon Willison.]

Posted by jamesr at 06:58 PM | Permalink
Categories: Web development

Validation just got better

There have been some good improvements to the W3C Markup Validator. To quote:

The big news in this version is internal support for custom and customizeable error explanations. This means an end to digging all over the net drying to figure out what an error message means; just turn on the "Verbose Output" option and the explanation will be displayed inline with each error message.

When the W3C Markup Validator is running in "Fussy Parsing" mode it will complain about all sorts of things that are technically legal in HTML, but which is known to be problematic in practice and probably not what you wanted.

[Thanks to the Web Standards Project.]

Posted by jamesr at 03:28 PM | Permalink
Categories: Web development

An essay on W3C's design principles

Bert Bos has written an essay on W3C's design principles. To quote:

The Web is all about helping humans communicate, but what hopefully becomes clear from this essay is that writing specs also is a form of human communication. There is one word that summarizes nearly all the fancy keywords of this essay, and that is: usability.

Posted by jamesr at 11:15 AM | Permalink
Categories: Web development

Windows web browser capabilities

One of the biggest pains about making Web pages is having to keep track of which browsers support what features. Wouldn't it be nice if there were some way to keep track of it all? Well, we've whipped up a few articles and charts to make things easier for you.

Posted by jamesr at 04:47 PM | Permalink
Categories: Web development

The nine pillars of successful web teams

Jesse James Garrett writes about the required competencies in web teams, which are presented as a diagramatic model. To quote:

Every Web team has its own take on dividing up roles and responsibilities and implementing processes for design and development. Formal titles, job descriptions, and reporting structures can vary widely. But the best teams I?ve encountered have one important thing in common: their team structure and processes cover a full range of distinct competencies necessary for success.

While this article is targed at web design, it is also relevant to intranets. It is interesting to compare this to my much-simpler article on the roles needed in an intranet team .

Posted by jamesr at 11:36 AM | Permalink
Categories: Information architecture, Intranets, Usability & user-centered design, Web development

Unlocking hidden navigation: access keys

Stuart Robertson has written about the value of access keys on web pages. To quote:

ALL YOUR FAVORITE applications have shortcut keys. So can your site, thanks to the XHTML accesskey attribute. Accesskeys make sites more accessible for people who cannot use a mouse. Unfortunately, almost no designer uses accesskeys, because, unless they View Source, most visitors can't tell that you've put these nifty navigational shortcuts to work on your site. In this issue, Stuart Robertson unlocks the secret of providing visible accesskey shortcuts.

[Thanks to pixelcharmer.]

Posted by jamesr at 01:42 PM | Permalink
Categories: Usability & user-centered design, Web development

Tim Bray on search engines

Tim Bray has written the first of a planned series of articles on search engines. To quote:

This is the first of a series on search, by which I mean full-text search. Anyone who uses computers now uses search pretty well every day, so this is an important chunk of our technology spectrum. This piece covers the business and history angles; future instalments will explain how search engines work and the interfaces to them. I plan to conclude with a description of the next search engine, which doesn?t exist yet but someone ought to start building.

[Thanks to Jeremy Zawodny.]

Posted by jamesr at 01:32 PM | Permalink
Categories: Information architecture, Search tools, Web development

GNU wget

Thanks to some discussions on the Sigia-l, I've become aware of GNU wget, an open-source tool for taking a full copy of a website. To quote:

GNU Wget is a free software package for retrieving files using HTTP, HTTPS and FTP, the most widely-used Internet protocols. It is a non-interactive commandline tool, so it may easily be called from scripts, cron jobs, terminals without Xsupport, etc.

This could be very handy when taking a snapshot for a content audit, or for taking a copy of an intranet offsite to allow for a more convenient expert review...

Posted by jamesr at 01:09 PM | Permalink
Categories: Intranets, Web development

Views and forms: principles of task flow for web applications (part 1)

Bob Baxley writes about the fundamental principles of task flow for web applications. To quote:

The hypertext environment of the Web presumes a style of unfettered browsing and exploration that is not particularly conducive to the full and valid completion of specific tasks, operations, or database transactions. Creating web applications that support the full and valid completion of specific tasks, operations, and database transactions, therefore requires some understanding of how to manipulate the medium to that purpose. To wit, the following few thousand words serve to describe both the fundamental building blocks of HTML-based web applications as well as the three ways in which those blocks can be arranged to provide various types of task flows.

Posted by jamesr at 10:45 PM | Permalink
Categories: Interface design, Web development

Tabs using CSS

Oskar van Rijswijk writes about using CSS to create tabs (such as the ones on Amazon). He also points to a site by Joshua Kaufman called the CSS Tabs project.

All good stuff...

Posted by jamesr at 11:07 AM | Permalink
Categories: Web development

CSS Zen Garden

If you would like to see an amazing demo of CSS in action, have a look at the CSS Zen Garden, which showcases what can be done with just CSS. Truly beautiful!

[Thanks to Simon Willison.]

Posted by jamesr at 10:51 AM | Permalink
Categories: Web development

Business benefits of web standards

Tristan Nitot has written an article summarising the business benefits of web standards. To quote:

"More with less" seems to be the mission impossible for web designers: Addressing more customers, a broader audience, more diversity in terms of browsers, more accessibility, users asking for more speed, while spending less to maintain or redesign a web site. Caught between a rock and a hard place, web designers face a formidable challenge. Yet they are finding an unsuspected ally in the battle: web standards.

[Thanks to the Web Standards Project.]

Posted by jamesr at 09:55 AM | Permalink
Categories: Web development

New home for CSS support charts

Netscape devedge has taken up the challenge of maintaining the much-used CSS support charts. These list which CSS1 and CSS2 features work in the different browsers.

While the lists don't include the latest browsers, there are plans to bring them up-to-date shortly...

[Thanks to the Web Standards Project.]

Posted by jamesr at 09:47 AM | Permalink
Categories: Web development

Writing for the web: part 1

Gerry McGovern lists some useful guidelines for writing for the web. His top ten rules are as follows:

1. Know your reader
2. Take a publishing approach
3. Keep content short and simple
4. Write active content
5. Put content in context
6. Write for how people search
7. Write great headings
8. Write great summaries
9. Write great metadata
10. Edit. Edit. Edit.

[Thanks to Peter J. Bogaards.]

Posted by jamesr at 06:40 PM | Permalink
Categories: Usability & user-centered design, Web development

Heading styles in CSS

Eric Meyer has released a resource of 50+ template heading styles using CSS. Just cut-and-paste the provided source code, and you're away. To quote:

Headings in Web pages -- marked up with h1, h2, h3, h4, h5, or h6 elements -- help the reader determine the purpose of sections in content. It also does one other thing: it helps the reader judge if the material is something they want to read. And if your heading is visually stimulating, the odds are better that the section will capture your reader's eye. So, with a dash of design, we can utilize CSS to stylize those Web page headings to catch the reader's eye and encourage them to read on.

There should be a lot more resources like this, to make CSS much more accessible for all web designers.

[Thanks to Simon Willison.]

Posted by jamesr at 11:34 AM | Permalink
Categories: Web development

Blurbs: Writing previews of web pages

Dennis G. Jerz discusses how to write blurbs, the brief descriptions that summarise what readers will find at the other end of links. To quote:

A good blurb should inform, not tease. Usability testing will help you determine the best way to lay out your blurbs, but this document will help you write the content.

[Thanks to elearningpost.]

Posted by jamesr at 06:07 PM | Permalink
Categories: Interface design, Usability & user-centered design, Web development

Analysing searches on BBCi

Martin Belam has written a truly excellent article on his research into search behaviours on BBCi. This works through a wealth of information collected, and highlights some very interesting results.

A must read for anyone looking to analyse search engine results...

[Thanks to High Context.]

Posted by jamesr at 12:47 PM | Permalink
Categories: Information architecture, Search tools, Web development

Automating the web (screen-scraping)

Simon Willison has pointed to a number of web screen-scraping tools in his weblog. These are useful for two reasons: they can be used to automate web activities that the websites themselves don't easily support; they can also be used as a testing bench for web development. It's the latter that interests me. So onto the tools:

• Screen-scraping with WWW::Mechanize
  An article by Chris Ball describing a Perl library for screen-scraping.
• Snoopy
  Snoopy is a PHP class that simulates a web browser. It automates the task of retrieving web page content and posting forms, for example.
• PyWebPerf
  PyWebPerf is a performance measuring tool written in Python which simulates a web browser fetching a page (handles cookies, multiple threads, image and css download). Command-line and cgi interfaces are provided, with a scripting facility coming soon.

Posted by jamesr at 08:12 AM | Permalink
Categories: Web development

Book review: Content Management Systems

Published by Glasshaus, Content Management Systems (Dave Addey, James Ellis, Phil Suh & David Thiemecke) is very much written by web developers for web developers. The casual, coloquial style of writing should appeal to those readers looking for the real information, without all the hype or jargon.

The book starts by outlining the state of many websites: ad-hoc in design, requiring huge amounts of manual labour. It then spells out the key benefits of implementing a content management system (CMS), and proposes some general principles to follow throughout the project.

The core of the book walks through the key components of a CMS, with a particular focus on the web. Authoring, content management, and publishing are all outlined, although not in great depth. Like the rest of the book, these sections are peppered with useful comments from the authors, along with valuable anecdotes from real projects.

Both buying and building a CMS are explored, although the latter does not really provide enough detail for anyone other than a guru developer to follow. The book then concludes with a walkthrough of the implmentation process, from beginning to end.

If you are a looking for an easy-to-read introduction to better managing your website with a content management system, this is your book. If you are responsible for an intranet, or are looking for more on CMS methodology, you may want to consider other titles.

Posted by jamesr at 01:14 PM | Permalink
Categories: Book & product reviews, Content management, Web development

Website size checker

Search Engine World has released a simple website size checker. Put in your website URL, and it will tell you:

• Total web page size
• Visible text size
• Size of HTML tags
• Text to HTML ratio
• Number of images
• Largest image size
• Size of all images

Posted by jamesr at 02:29 PM | Permalink
Categories: Web development

Printing the web

James Kalbach talks about designing websites that can be printed, either by making the one page work on paper, or by providing an alternate "printable version". Sounds pretty mundane, but there's a lot of good tips in this article.

Posted by jamesr at 04:30 PM | Permalink
Categories: Web development

Using site evaluations

Dorelle Rabinowitz has written about using site evaluations to communicate and engage with clients. Plenty of samples and examples are provided, and the whole article is strongly business-focused. To quote:

How do you prove your worth to clients in today's difficult economy? One of the tools in my arsenal that has proved tremendously effective is a website evaluation (or assessment). Performed as part of a sales proposal, a site assessment can help you speak knowledgeably about solutions to your potential client's problems. As part of a "discovery" phase of a project, it can help uncover opportunities for improvement. Additionally, it can serve as a benchmark to be tested against later in the design process. Because many clients understand ratings, site assessments early in a project can help you and your clients speak the same language, establishing a base vocabulary you can reference later when you do user research, personas, card sorts, and usability tests.

Posted by jamesr at 04:23 PM | Permalink
Categories: Information architecture, Usability & user-centered design, Web development

Even more style guides

As expected, discussions on sigia-l has thrown up more good style guides:

• Web Style Guides: Mostly from Universities
  A big list of primarily University-sourced web style guides.
• CSU Web Style Guides
  A brief but useful listing of web style guides
• Carnegie Mellon Web Publishing Style Guide
  This guide was developed to assist the university community in designing Web sites that support Carnegie Mellon's identity.
• BCR Web Site Style Manual
  The Web Style Handbook lists the standards authors are to use to achieve uniformity.

[Thanks to David Williamson.]

And one more to round out today's listings:

• GE Style Guide
  The Style Guide will help you to decide which option is right for you and, once you have chosen, give you access to the templates, logos, fonts, and other graphic elements you will need to create your site.

[Thanks to Gene Smith.]

Posted by jamesr at 10:22 AM | Permalink
Categories: Design & usability guidelines, Usability & user-centered design, Web development

Using HTML wireframes and prototypes

Julie Stanford has written an excellent article on using HTML for wireframes and prototypes. In it, she clearly sells the benefits of this approach, and addresses some of the common concerns. To quote:

Mention the use of HTML for wireframing or prototyping, and some information architects and interaction designers frantically look for the nearest exit. In some circles, HTML has acquired the reputation of being a time-consuming, difficult undertaking best left to developers. I’m here to convince you that this is very far from the truth. In fact, using HTML as the basis for your wireframing and prototyping can be a quick and rewarding experience with fabulous benefits, including easier user testing, improved client communication, and faster, more effective use of design time.

But wait, there's more! Beyond this issues paper, Julie provides a full Dreamweaver primer designed to get you up to speed on creating your own prototypes. Outstanding.

Posted by jamesr at 12:50 PM | Permalink
Categories: Interface design, Usability & user-centered design, Web development

Death to "click here"!

Nathan Ashby-Kuhlman has written a passionate blog about the pointlessness of click here links. Taking a usability stand, he highlights that eliminating needless words is always worthwhile. To quote:

Television stations do not tell viewers how to operate their remote controls. Newspapers do not instruct readers in removing papers from delivery bags. It’s time news Web sites stopped telling readers how to operate links.

[Thanks to ia/.]

Posted by jamesr at 10:08 AM | Permalink
Categories: Interface design, Usability & user-centered design, Web development

Resources on building an XML-based website

Catching up on a backlog of stories: John E. Simpson has written an article on learning to build websites using XML. In it, he points to a comprehensive set of websites, books and articles which help to sort out the tangle of useful XML technologies.

Posted by jamesr at 04:17 PM | Permalink
Categories: Web development, XML

Updated HTML and XHTML validator

The W3C has released an updated HTML and XHTML validator, which includes support for XHTML 1.1, MathML 2.0, additional character encodings, and more. You can either validate a URL, or directly upload the page to be checked.

(Read Robin Cover's news item for a good summary.)

Posted by jamesr at 04:12 PM | Permalink
Categories: Web development, XML

Web credibility

Consumers International has released a report on web credibility, which looked at key health, financial and price-comparison sites. The results are worrying:

• 49 percent of health and financial sites failed to give warnings about the appropriate use of their information. For example, they did not warn consumers searching for health or financial advice that they should consult a professional before acting on advice given.
• At least 50 percent of sites giving advice on medical and financial matters failed to provide full information about the authority and credentials of the people behind that advice.
• Only 57 percent of general advice sites gave sources for that advice.
• 39 percent of sites that collected personal information did not have a privacy policy.
• 62 percent of sites contained claims that were vague and unspecific.
• 55 percent of sites said nothing about how up-to-date their content was.
• 30 percent of sites provided no address or telephone number.
• Only 41 percent of the sites that recommended products gave sources for their prices.
• 26 percent of sites gave no clear information about who owned them.
• 60 percent of sites provided no information that indicated whether or not their content was influenced by commercial interests (e.g. partners, sponsors or advertisers).

[Thanks to Content Matters.]

Posted by jamesr at 08:21 AM | Permalink
Categories: Web development

Conducting a competitive analysis

Thomas Myer writes about how to conduct a website competitive analysis, from a usability perspective. To quote:

Conducting a competitive analysis is an important part of the job if you're a usability engineer or information architect. A good competitive analysis not only produces usability metrics but also aids decision makers in their strategic goal-setting and planning. Done right, a good competitive analysis can steer a Web development project in the right direction.

Posted by jamesr at 08:13 AM | Permalink
Categories: Usability & user-centered design, Web development

Death of keywords

Danny Sullivan from Search Engine Watch reports on the death of meta tags. To quote:

Now supported by only one major crawler-based search engine -- Inktomi -- the value of adding meta keywords tags to pages seems little worth the time. In my opinion, the meta keywords tag is dead, dead, dead. And like Andrew, good riddance, I say!

To me, this really highlights the challenges (futility?) of the so-called "semantic web", where everything describes itself, cross-linking happens automatically and accurately, and search engines only return useful results...

If we can't get even simple keywords tags to work in practice, what hope is there for RDF, and the rest?

[Thanks to IDblog.]

Posted by jamesr at 04:11 PM | Permalink
Categories: Information architecture, Search tools, Web development

Link checking tool

We've finally found time to hunt down a good link checking tool, both for our use, and for one of our clients. Working within the budget constraints of our client (they don't have a budget), we sourced a free tool.

Having had bit of a play with it, I can soundly recommend Xenu's Link Sleuth. It has a clean design, is efficient, and produces a very useful report. Well worth a look.

Posted by jamesr at 10:51 AM | Permalink
Categories: Web development

Getting a website moving

Peter Merholz has written an article outlining eight steps to get your Web site moving again. In it, he discusses reasons that websites grind to a halt, and how to reinvigorate them:

1. Build an Independent Web Team
2. Get Your Organization Involved
3. Study Your Customers
4. Assess What You Have to Offer
5. Develop a Flexible Structure
6. Design a Useful Style Guide
7. Implement a CMS
8. Consider Personalization

I would have liked to see a little more practical advice, perhaps focusing on evaluating the problems with the current site using usability testing, but it is still a good article.

[Thanks to ia/.]

Posted by jamesr at 04:00 PM | Permalink
Categories: Web development

Final website recommendations

Now that the intranet report for the Area Health Service has been reviewed and signed-off, I've had a chance to finish the report on the review of the website. This includes the following recommendations:

Strategic recommendations

• Focus on depth, not breadth
• Comprehensively restructure the website
• Provide complete facility information
• Empower the website administrators
• Use the website to reduce call volumes
• Implement a new content management system

Tactical recommendations

• Maximise the value of the homepage
• Eliminate duplication
• Eliminate ‘happy talk’
• Remove jargon and medical terminology
• Clearly distinguish between the intranet and website

In many ways, this was the easier report to write. In the end, it boiled down to: "Work out what the website is for, and do that well (and nothing else)".

Posted by jamesr at 11:11 AM | Permalink
Categories: Area Health Service project, Information architecture, Web development

Search interface patterns

Liz Danzico explores the different ways that a search interface can be designed. She identifies four different patterns:

• standard
• surfacing
• qualifying
• passive

This article is useful, in that it helps to define a "language" for describing search interfaces, allowing interface designers to communicate more clearly.

(The design of the site itself is also very cool, and has given me a few ideas to store away for a future project.)

Posted by jamesr at 10:12 AM | Permalink
Categories: Interface design, Web development

Broken websites

Jeffrey Zeldman writes a passionate and well-informed article on why 99.9% of Websites Are Obsolete. This highlights the curse of hacked HTML, and proposes some ways forward (using web standards). To quote:

Peel the skin of any major site, from Amazon to Microsoft.com, from Sony to ZDNet. Examine their tortuous non-standard markup, their proprietary ActiveX and JavaScript (often including broken detection scripts), and ill-conceived use of Cascading Style Sheets—when they use CSS at all. It's a wonder such sites work in any browser.

Posted by jamesr at 01:10 PM | Permalink
Categories: Interface design, Usability & user-centered design, Web development

Marketing government websites

Ptricia Daukantas summarises a discussion at the recent US FedWeb 2000 conference on how to market government websites. In all, they came up with 93 individual suggestions about how to bring greater traffic to public sites, many of them building on the not-for-profit status of the organisations.

Posted by jamesr at 05:04 PM | Permalink
Categories: Web development

Web credibility

The Stanford Persuasive Technology Lab has published a set of guidelines for ensuring web credibility. This is a good list, backed up by extensive research:

1. Make it easy to verify the accuracy of the information on your site.
2. Show that there's a real organization behind your site.
3. Highlight the expertise in your organization and in the content and services you provide.
4. Show that honest and trustworthy people stand behind your site.
5. Make it easy to contact you.
6. Design your site so it looks professional (or is appropriate for your purpose).
7. Make your site easy to use -- and useful.
8. Update your site's content often (at least show it's been reviewed recently).
9. Use restraint with any promotional content (e.g., ads, offers).
10. Avoid errors of all types, no matter how small they seem.

[Thanks to Simon Willison's weblog.]

Posted by jamesr at 01:03 PM | Permalink
Categories: Web development

Another good viewpoint on accessbility

Jeffrey Zeldman writes eloquently in his weblog on why accessbility doesn't mean ugly.

Posted by jamesr at 12:06 PM | Permalink
Categories: Web development

Accessbility weblog

Mark Pilgrim is in the middle of a 30-day exploration of website accessbility on his weblog. There is a lot of very good stuff in here, all extremely practical.

A must for all web designers.

Posted by jamesr at 11:59 AM | Permalink
Categories: Web development

Interface design patterns

Martijn van Welie has published a site listing Interaction design patterns. These are his take on interface creation, from the perspective of object-oriented design.

The principle is that the major archetypes are specified, thereby standardising the elements that make up a user interface. It's a good idea, even if it needs a bit more work, and a lot more peer review.

Posted by jamesr at 03:31 PM | Permalink
Categories: Web development

Sensible use of JavaScript in forms

Jeff Howden has written a step-by-step tutorial on Forms & JavaScript Living Together in Harmony. This helps a web designer build web pages that still work, even when JavaScript is turned off.

Posted by jamesr at 03:17 PM | Permalink
Categories: Web development

WaSP

The Web Standards Project (WaSP) is in the news again. I love these guys, and I've been a quiet supporter since their establishment in 1998.

This is something that I'm passionate about: getting support for web standards in all commercial browsers. This will save users grief, developers a lot of hassle, and provide more options for consumers.

I encourage everyone to drop by the WaSP project, and see what they can do to help...

Posted by jamesr at 12:10 PM | Permalink
Categories: Web development

More browsers, more use

There is a story making the rounds at the moment, highlighting a small (but significant) drop in marketshare for Internet Explorer. The winners? Apparently Opera, Netscape and Mozilla are all on the increase.

According to one survey, that makes current usage at:

Why am I mentioning all of this? Well, I for one would be very happy to see a return to the "browser wars" days. Only then will then be a chance that all browsers will fully implement web standards. Which would make everyone's life easier...

Posted by jamesr at 02:25 PM | Permalink
Categories: Web development