100 hits12345

21. Abstracting CSS

MezzoBlue, Tutorials, 14 KB, 1025 words

The further you abstract the structure of your markup, the weightier your CSS file becomes. It's inevitable, and by all indications, the way things are meant to go for two important reasons: it fulfills the complete separation of structure and presentation, and CSS is cachable - each new page load pulls new content alone, without pulling new presentation.

Structural purists would like you to write markup that looks like so:

Markup Listing 1

<body> <h1></h1> <h2></h2> <p></p> <p></p> <p></p> <h3></h3> <ul> <li><a></a></li>...

continue reading ...

22. Dynamic Site Design: Displaying Thumbnails with a Random Background

Eat Drink Sleep MT, Tutorials, 23 KB, 994 words

While we often talk about "dynamic" sites and site designs, let's face it, they're all rather static: the same basic templates are used with different content. "Fluid" designs allow for some variation, but most use the same computer to view every site, so they won't see the "fluidity" (if that's a word). For the most part, that's a fine thing - a connected, familiar view of every page makes your site more comfortable and easier to use.

I wanted to overcome some of the static-ness of most site designs with Scrapbook. Photos and photo galleries are a popular thing on, so they were an obvious...

continue reading ...

23. Exploring Footers

A List Apart, Tutorials, 19 KB, 2057 words

One of the nice things about old-school table layout methods is that they enable you to create liquid page designs very easily. If you want to center content vertically or stick a footer to the bottom of the browser window, all you have to do is include one main table with a height of 100% and position elements inside of it.

With web standards, you can't do this anymore. The table height property is deprecated in XHTML, and web standards recommend that you avoid using tables for page layout. To divide structural markup from presentation, CSS is the way to go - but if you want to use CSS for vertical positioning, you face a lack of support from some mainstream browsers....

continue reading ...

24. Dynamically Conjuring Drop-Down Navigation

A List Apart, Tutorials, 13 KB, 1164 words

Wouldn't it be great to allow our users to reach all the pages of our site via a handy drop-down menu - without expending extra effort adding one to each page?

We can, by harnessing the powers of a seemingly forgotten HTML element and adding a tap of our JavaScript wand (or a drop of a less magical PHP potion).

The missing link

The LINK element is part of the HEAD section of an HTML document, and provides links to other documents (including style sheets). Some browsers use its data to show a toolbar - alas, the son of the giant of Redmond does not, and his followers are legion.

Let's teach it what to link

If we want to link to several articles,...

continue reading ...

25. Daemon Skins: Separating Presentation from Content

A List Apart, Tutorials, 16 KB, 1641 words

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 ...

26. Columnize

Staggernation, Plugins, 15 KB, 1392 words

This Movable Type plugin implements a set of template tags for displaying text in multiple columns. Your text will be broken up into approximately equal portions, and the HTML formatting you specify (i.e. a table cell) will be repeated once for each portion.


To install the Columnize plugin, upload the file to the plugins directory within your Movable Type directory. If you do not already have a plugins directory, create one before uploading the file. For more information about Movable Type plugins, see the documentation.


Please address questions, comments, bug reports, feature requests, interesting usage examples, etc., to mtplugins [AT] staggern...

continue reading ...

27. Fear of Style Sheets

A List Apart, Tutorials, 17 KB, 2105 words

If you don't know what style sheets will do for you and your audience, you can review the spec online; or see Dr Web {Dr Web is now off-line - Ed.} for a quick tutorial. We'll be here when you return.

Cascading Style Sheets (CSS) save bandwidth, vastly reducing the size of your files when compared to old-style <FONT FACE> markup. With styles, your sites load faster. You work faster, too. Styles shave grueling hours of grunt-work off your design workload: one brief CSS document can style an entire domain; and when it's time to redesign, you can execute site-wide changes in minutes instead of days.

Style sheets bring genuine leading and sophisticated...

continue reading ...

28. To Hell With Bad Browsers

A List Apart, Tutorials, 21 KB, 2563 words

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 ...

29. A Roadmap to Standards

MezzoBlue, Tutorials, 22 KB, 2337 words

This afternoon I was asked by a friend what I would recommend to an old designer who wants to learn more about web standards, CSS, XML, and XHTML.

This is a perfect example of when an email response is better posted here for a wider audience (and Google). So here's my answer: this is a comprehensive, informal, and somewhat long-winded roadmap for anyone who has heard about web standards, thinks they might want web standards, but doesn't know where to start.

Stop! Before you do anything, the most important thing you can do for your learning process is accept that a) it's going to take time, and b) you will be frustrated along the way.

But you're not alone....

continue reading ...

30. Retooling Slashdot with Web Standards

A List Apart, Tutorials, 14 KB, 1568 words

{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 ...

31. "Email Me" Contact Forms

Learning Movable Type, Tutorials, 34 KB, 2158 words

Providing contact information on your weblog can be useful to your site visitors who may want to email you directly rather than submit a comment to one of your entries. You can choose to write out your email address, provide a mailto link (see MailTo Syntax for how to write out a mailto hyperlink), or you can provide a contact form. Contact forms are often preferred because they can easily hide your email address information from the spammers who regularly scour the web looking for email addresses to harvest.

I have researched and tested two free PHP-based contact form scripts - TheSiteWizard Feedback form and DodosMail - either of which you can easily implement to add a contact form...

continue reading ...

32. Separation: The Web Designer’s Dilemma

A List Apart, Tutorials, 11 KB, 1011 words

With all the discussion about separating presentation from content (and structure), it's easy to lose track of the goal. So let's step back, define our terms, and take a look at why it matters.


The major reason to separate presentation from the rest of the page is simple: to simplify any change from a slight design adjustment to a full-fledged redesign. To achieve complete separation of the presentation, we must isolate everything specifically and solely geared towards style.

Contrary to what you might be thinking, this isn't limited to just the CSS, not even on a site like CSS Zen Garden. It also involves HTML tags and properties...

continue reading ...

33. What the Hell is XML?

A List Apart, Tutorials, 18 KB, 1809 words

XML (Extensible Markup Language) is the Eurodollar of web development. Both XML and the Euro bring order to chaos; both offer undeniable, wide–ranging benefits; both are poised, in 2002, to change the way we do things. Frankly, both scare the crap out of people.

For web developers, 2002 is a time to conquer fears and take their first hands–on approach to XML. It's time to examine XML and realize the practical benefits that it can provide to web projects today.

The bankers can fend for themselves.

XML, HTML & Databases

If you need a good analogy to describe XML to other people, don't mention HTML. Although XML looks a lot like HTML,...

continue reading ...

34. Why Don’t You Code for Netscape?

A List Apart, Tutorials, 12 KB, 1120 words

Q. Your website looks nice in Internet Explorer 6, but really bad in Netscape 4.7. Is this the type of web page design that you are recommending to your readers? The worst problem is that it doesn't even look like the same page!

By the way, the buttons that supposedly let the reader choose the font don't work in NS 4.7.

As a web designer, it's important to me that my site not only look good in both browsers, but that all readers will see the same design and formatting.

Please explain the logic of designing only for one browser.

Cordially,[Name withheld]

A. Thanks for writing. We don't design for only one browser. We design for all browsers and...

continue reading ...

35. Onion Skinned Drop Shadows

A List Apart, Tutorials, 25 KB, 2054 words

Editor's Note: The techniques demonstrated in this tutorial are not for everyone. The design method works its magic by nesting divs that have no semantic or structural value. If that bothers you (and there are good reasons why it might), this is not the tutorial for you. On the other hand, if you wish to create visual effects that expand and contract to fit any object, require no image manipulation, and render the same across all browsers, then "Onion Skinned Drop Shadows" may be just what you've been looking for.

Onion skinned drop shadows?

Yes, onion skinned. Animators use onion skinning to render what is impossible to see otherwise: a...

continue reading ...

36. QuickTags Part II

Movalog, Tutorials, 33 KB, 1508 words

UPDATE: I had pulled out the functionality to check spelling with this toolbar, well I've put back the functionality. Just download the quicktags.js file that coressponds to your version of MT again and re-upload it. A new button called "Dict." will appear that will query a highlighted word to !

Please go to the MT 2.x instructions to fix a problem with the Quicktags not aligning properly.

This tutorial will allow you to have the Quicktags I described in my previous entry but is not restricted to MT 3.01D.

The files you will need:


The MT 2.x Version | The MT 3.x Version

Upload the quicktags js file to your staticwebpath - ie the same folder than...

continue reading ...

37. Pocket-Sized Design: Taking Your Website to the Small Screen

A List Apart, Tutorials, 19 KB, 2107 words

Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling.

The Opera browser runs on handheld devices of all screen sizes and resolutions, some of them only 120 pixels wide. We work for the company that produces Opera, so we can offer a degree of insight into the functions of Opera for handhelds. In this article, we've prepared a set of general suggestions for creating a...

continue reading ...

38. Expandable List Menus

Learning Movable Type, Tutorials, 36 KB, 2476 words

If you have a lot of content - entries, categories, sidebar information - sooner or later things may begin to look a little cluttered on your weblog. One way to address this is to make some of your lists expandable and collapsible, as I have done with LMT's Table of Contents. There are probably many different ways to do this. I have found one method, based on Javascript, that is simple to implement and appears to work fine, from Bleeding Ego.

1. Upload listmenu.js to your server.

Copy the following script into a new file with a texteditor. Save the script as "listmenu.js". Upload the script to a location within the public directory of your server using an FTP program. (You can...

continue reading ...

39. Text Wrap

Learning Movable Type, Tutorials, 40 KB, 2953 words

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 ...

40. LMT Links

Learning Movable Type, Links, 43 KB, 2483 words

by Category | by Date


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 ...


You want to post some comment? Please use the announcement post on the Movable Type Weblog.

If you want to give some feedback concerning a specific query, please use the feedback button that is shown after a search has completed.

mgs | September 27th 2005