I'm often confused by type choices web designers make. In my opinion, readability needs to be of utmost concern, not the look of the site. After all, how many sites do you visit that you don't intend to read? Readability of the type on your site can definitely affect how many returning visitors you have.

While I'm not a type expert, I have been working in the print publishing world for quite a few years. And because of that, I've been exposed to and learned more about type and readability than most would probably want to know. I'd like to share a little of that knowledge and epxerience.

Serif or Sans-Serif Typefaces?

There are two kinds of...

continue reading ...

If the design of this site looks relatively coherent, congratulations! Your browser does a good-to-excellent job of supporting web standards like CSS-1, HTML 4.01/XHTML 1.0, and scripting languages. If this site is readable and usable but looks as plain as an Amish coat, your browser does not support web standards. Fortunately, you can easily upgrade to one that does. Before you start shrieking, perhaps you'll hear us out.

What have you done?

We've upgraded the design of A List Apart to comply with web standards, some of which (like CSS1) date back to 1996. This, of course, is the year 2001.

Why doesn't it work in old browsers?

They were not built to comply...

continue reading ...

Research shows that low-vision people need dramatically different web design. CSS lets you give them what they need.

Readers of A List Apart will by now be quite familiar with screen-reader users, the largest group of disabled web surfers whom standards compliance actually helps. In a previous article, for example, I examined how well image-replacement techniques work in screen readers (not very).

But - surprise! - most people with impaired vision can still see something, and a large but unquantified segment of this group sees well enough to use a computer with a magnified or zoomed display. We have not done a good job of catering to...

continue reading ...

by Category | by Date

Anti-Spam

Getting the most out of MT-Blacklist - MT-Blacklist/Comment Spam Clearinghouse: Getting the most out of MT-Blacklist Birdhouse notes on Comment Spam - Why this web host is forcing comment registration Blacklist to Mod Security - by Peter Wood Brad Choate: SpamLookup - anti-spam plugin Interview with a Comment Spammer - The Register's interview with a blog comment spammer. MT-Approval Plugin - Prevents comment spam from spam bots MT-DSBL Open Proxy Comment Filter - from Brad Choate MT-Moderate - Plugin for moderating trackbacks and comments from Chad Everett Mod Rewrite to Block Bot Spam - Mod Rewrite method to divert comment spam bots to a 403...

continue reading ...

Introduction

With the most difficult part of running Movable Type -- the installation -- behind you, it is time to get started using MT.

It all begins with The Movable Type Content Management System (CMS). This script is the heart and soul of what makes powerful weblog publishing possible.

The CMS contains the majority of the intelligence and work flow that makes Movable Type what it is. Whether it involves posting an entry, adding a colleague as an author, or publishing your content with a whole new style, it is the CMS that is doing the heavy lifting.

By default the CMS script is...

continue reading ...

It can be difficult to move from a static, pixel-based design approach to an elastic, relative method. Properly implemented, however, elastic design can be a viable option that enhances usability and accessibility without mandating design sacrifices.

A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. Because font sizes vary, the em is a relative unit that responds to users' text-size preferences.

It is perhaps easier to adopt a print-like, static approach to design because there is less to think about when dimensions don't change. To employ an elastic approach, however, is to fully exploit the capabilities of computer...

continue reading ...

From the crown of its cranium to the tips of its Ruby-slippered toes, A List Apart 4.0 is both old and new. Old in its mission to help people who make websites see farther and jump higher. New in its design, structure, publishing system, and brand extensions.

The magazine has long advocated accessibility and web standards, providing deep and sometimes controversial insights into these areas and not infrequently presenting ideas and methods that change the way you think and work. We will never abandon this subject area, but we are once more widening our gaze to encompass disciplines and themes beyond those that have obsessed us for the past five years.

I say "once more"...

continue reading ...

The new style sheet and templates in MT3.2 can be daunting to the non CSS expert. Changing the position of the sidebar from the right to the left shouldn't be so difficult. Once understood, it is a bit easier to do.

Changing the Sidebar Position

The MT3.2 stylesheets and templates are designed to have the columns laid out in order, starting with the column named "alpha". The columns, in order are alpha, beta, gamma (if you have a 3-column layout), and delta (a hypothetical fourth column that one could create). If you change sidebar position from right to left, the order of the columns still needs to be the same on your index and any archive templates where you have placed a...

continue reading ...

The Web Standards Project's ( WaSP) Browser Upgrade Initiative ( BUI), has spurred many a designer to move towards more standards compliant web design, using CSS rather than tables for layout to save user bandwidth while enhancing underlying semantics, accessibility, and reach.

"Tables are dead..."

Several designers have taken Jeffrey Zeldman's lead in posting tutorials that have helped us get over the initial hump of table-less design. The first efforts have focused on creating two or more columns using CSS positioning instead of tables, thus allowing for a (complete) separation of structure from presentation. These broader techniques have been documented and...

continue reading ...

As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change.

What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. For example, I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.

Of course the reason that we don't mark them up in that way is that we don't want a bullet in front of every link in our navigation area. In a previous article I outlined several...

continue reading ...

This hack is deprecated in favour of the MT Protect plugin. Please use the plugin instead of this hack!

One of the biggest wants with MT is to password protect individual entries. There are several hacks and bits of code that allow you to password protect entries but many of them are long winded and many involve separate categories. I wanted a simple way to selectively password protect entries no matter what the category, what blog etc.

So I created a new field on the entry screen (click screenshot for a larger view) that would contain the password. For this to work you will need to be using MT 3.1x, mySQL and PHP. To see this in action see the front page on my blog, enter the password "password" and you will be granted access for 10 days....

continue reading ...

Web developers have various methods for creating print friendly versions of their websites. By using a server side routine or print stylesheets, the print version may strip out images and navigation that lose their meaning on the printed page, and perhaps display the page in a single column using a different font with a different size.

But what happens when there is no printable version, or the printable version includes ads or other settings that don't suit you, the user? That's where user stylesheets come in. Armed with a little CSS knowledge and some web development tools, you can easily create your own print versions formatted exactly the way you want them....

continue reading ...

Updated March 23, 2005

Once you are uploading images to your MT weblog with ease, you might on occassion want to wrap text on either side of the image, like so:

Placeholder Latin text - Vt enim quidam monumentis suis testati sunt, in Hispania pro consule et a sociis pecunias accepit emendicatas in auxilium aeris alieni et Lusitanorum quaedam oppida, quanquam nec imperata detrectarent et aduenienti portas patefacerent, diripuit hostiliter. Gallia fana templaque deum donis referta expilauit, urbes diruit saepius ob praedam quam ob delictum; unde factum, ut auro abundaret ternisque milibus nummum in libras promercale per Italiam prouinciasque diuenderet. In primo consulatu tria milia...

continue reading ...

2.5 (2002.10.08)

• Localization: the MT interface can be available in multiple languages, on a per-author setting. • Integrated Jay Allen's mt-search (Thanks, Jay!). We've made the following changes from version 1.31b: • Rewrote ``new comments search'' to make it more scalable (using recently_commented_on functionality) • Added a search log through the Activity Log. • Added search request throttling, to help against denial of service attacks. • Merged mt-search.cfg directives into mt.cfg....

continue reading ...

{Part I of a two-part series.}

Ask an IT person if they know what Slashdot's tagline is and they'll reply, "News for Nerds. Stuff that Matters." Slashdot is a very prominent site, but underneath the hood you will find an old jalopy that could benefit from a web standards mechanic.

In this article we will show how an engine overhaul could take place by converting a single Slashdot page from their current HTML 3.2 code, nested tables, and invalid, nonsemantic markup, to a finely tuned web standards racing engine. The goal is not to change Slashdot, but to rebuild it with web standards and show the benefits of the transition.

Before you panic because...

continue reading ...

You've seen them before: links that say "click here for printer-friendly version" or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

That means somebody (or a script) had to take the original document and convert it to a stripped-down version that's more suitable for print output. Maybe that somebody was even you.

Print style sheets to the rescue

One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single document. We're pretty used to styling...

continue reading ...

05.31.2005

Movable Type Cheat Sheet

One of the great things about Movable Type being localized into a number of languages and having such a broad international presence is that we get great contributions from our community around the world. The latest contribution is Jörg Petermann's Movable Type Cheat Sheet, which he's published in both German and English.

The Cheat Sheet, available in both PDF and PNG formats, covers all the standard Movable Type template tags, as well as common attributes for the tags and the date format used for output. Most of these tags also apply to TypePad's advanced templates as well, so it's worth keeping a copy of the Cheat Sheet...

continue reading ...

08.31.2005

Simple Example Templates for Movable Type 3.2

Chris Vannoy has posted some simple Movable Type templates based on the new default templates in Movable Type, but with much of the XHTML structure stripped out so they're easier to read. As Chris explains in his following post, they're not designed to be used on an actual site, since the styling would be pretty ugly by default, but they're a useful basis for creating your own completely custom design if you just need a place to get started.

We'll be producing additional documentation about all the new abilities that templates and styles have in Movable Type 3.2, but this is a great place to start if you...

continue reading ...

1.4 (2002.01.07)

• New default templates no longer use <label> tag in the Remember info? checkbox for the ``remember me'' JS, because it was breaking XHTML validation. • Fixed Linked File Templates so that, when linking a template to a new file that doesn't yet exist, the permissions will be set correctly (based on umask settings in mt.cfg). • Added new default templates and made them customizable by stylesheets. • Added the Comment Error Template to specify the layout of the page a user receives when there is an error with his/her...

continue reading ...

We all have our daemons. They lurk behind the scenes, driving us, seducing us. Their powers can be quite magical.

In the Unix operating system, for instance, the many background tasks that occur behind the scenes are controlled by processes called daemons. Following the Unix tradition of keeping the names of things short, a "d" is appended to the end of the name of the task that the daemon controls. Thus the daemon that controls the hypertext transport protocol (http) on Unix based web servers is called httpd. Similarly, ftpd controls TCP/IP file transfer.

As designers, I often think that we have a design daemon (designd) controlling our creative impulses. When my...

continue reading ...