Results
A List Apart, Tutorials, 11 KB, 775 words
{Part II of a two-part series.}
In Part I, we showed how Slashdot could save money and reduce bandwidth requirements by converting to semantic XHTML markup and CSS layout. In Part II, we explore how standards-compliant markup and deft use of CSS could make Slashdot (and your sites) play nicely in print and on handheld devices.
Printer-Friendly Slashdot
The print.css file adds a feature that Slashdot didn't have before, and it is only 10 lines of CSS code. We simply turn off the floating on each <div>, and then do a display:none; on any <div> of information that is useless to a printed documented, such as search, advertisements, etc. {The ALA 3.0 print style sheet takes a similar approach. - ...
continue reading ...
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 ...
A List Apart, Tutorials, 26 KB, 3773 words
What Zen was to the 70's (most famously with motorcycle maintenance), the Tao Te Ching was to the 90's. From Piglet and Pooh to Physics and back, many have sought sense in applying the Tao Te Ching to something (the Tao of Physics), or something to the Tao Te Ching (the Tao of Pooh). It can be a cheap trick, but lately it has struck me that there is more than a little to be understood about web design by looking through the prism of the Tao.
Daoism is a philosophy, like Buddhism, a way of living, of being in the world, which stems from a text of great antiquity, the Tao Te Ching, whose 81 "chapters" enigmatically sweep across human experience, but with a strong...
continue reading ...
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 ...
Movalog, Tutorials, 31 KB, 1212 words
For a few months, I had deliberated adding a WYSIWYG Editor into the Movable Type entry screen and when Typepad implemented an editor into its interface I got jealous. So, here's a way to implement the very powerful HTMLArea into Movable Type (currently only Internet Explorer, Mozilla browsers and other Gecko based browsers supported)
1. Download HTMLArea 3.0 rc-1 and upzip it 2. Upload the files to a folder called htmlarea in your StaticWebPath 3. Open up tmpl/cms/header.tmpl and add the following in <head>...</head> tags
<script type="text/javascript"> _editor_url = "<TMPL_VAR NAME=STATIC_URI>htmlarea/"; _editor_lang = "en"; </script>...
continue reading ...
Movalog, News, 30 KB, 1197 words
As you probably already know, Movable Type 3.2 was released and boasts a stunning featureset. I personally have plenty of plugins, tools and other announcements to make which are all related to this release. The first of which you've probably guessed by the title. I present the Movable Type Style Generator. Quite simply, click on any element on the page and a box will appear allowing you to change any of the element's properties from background color to font faces and styles. After you're done, hit the Download button to get the stylesheet, 3.2 compatible! The beauty of this style generator is since it creates 3.2 compatible stylesheets, you can use them across any of Six Apart's...
continue reading ...
Movalog, Tutorials, 31 KB, 1150 words
Learning Movable Type has an article that guides you through the steps of creating a three blog layout. The only problem is that the #container width has ben set to 904 pixels. This means that on a 800x600 layout you're going to get the nasty horizontal scroll.
The best way around this is to create a fluid three column layout ( what are fluid/fixed layouts ?).
1.Change the width of #container to 90%
2.Delete #center and corresponding div tags in all your templates
3.Duplicate your sidebar, find the following/similar code in your stylesheet #right { float: left; width:200px; overflow: hidden; }
And replace it with the following: #right { float: right; width: 20%;...
continue reading ...
A List Apart, Tutorials, 15 KB, 1686 words
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 ...
Movable Type Weblog, Tutorials, 23 KB, 1171 words
Question
In Movable Type, entries or comments or other objects are often shown in lists. For example, the main index shows the most recent entries, a category archive also shows entries, or an individual entry archive shows comments. I preferred if not all items in such lists were styled the same. For example, there should be an alternating white / gray background. How can this be done?
Answer
Fortunately, the answer can be given in a generic way. The technique that I am going to show can be used with all types of objects (entries, comments, categories, etc.) and any number of different styles.
For showing the basic idea I will create a list of entries using 3 different styles....
continue reading ...
A List Apart, Tutorials, 18 KB, 2188 words
Web designers are not programmers, and that can often be a problem when you need to create an active element in your web site using server side scripting. Programming is no light task, it seems, and most designers whimper and cower away when faced with even a small snippet of Perl or C.
Fear not, however, because Active Server Pages and VBScript make it easy to deliver effective server side scripting. This article assumes you know a little bit about how computer programming works, but you don't really need to know anything about VBScript or Visual Basic at all to get started. I'll walk you through two very useful ASP applications, and when you're done with this tutorial,...
continue reading ...
Eat Drink Sleep MT, News, 20 KB, 1071 words
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 ...
A List Apart, Tutorials, 31 KB, 3981 words
An unauthorized companion to the Online Style Guide of the Branch Libraries of The New York Public Library
XHTML is the standard markup language for web documents and the successor to HTML 4. A mixture of classic (HTML) and cutting–edge (XML), this hybrid language looks and works much like HTML but is based on XML, the web's "super" markup language, and brings web pages many of XML's benefits, as enumerated by the Online Style Guide of the Branch Libraries of The New York Public Library.
If you want your site to work well in today's browsers and non–traditional devices, and to continue to work well in tomorrow's, it's a good...
continue reading ...
Movalog, Tutorials, 33 KB, 1540 words
Tutorial cross posted on Learning Movable Type and Movalog.
With Movable Type 3.2, Six Apart launched a new markup and stylesheet structure that has also unified their three platforms. These new templates and stylesheets (from now on referred to as themes) have been called tag soup due to the sheer number of <div>s and indents.
What a mess - why did they do it?
The new themes can be quite intimidating the first time you come across them however Six Apart have created these new themes for several reasons: • First of all, Typepad, LiveJournal and Movable Type now share exactly the same markup. This means that a theme will work on any of these three platforms and designers can...
continue reading ...
Movalog, Tutorials, 31 KB, 1233 words
UPDATE: Multiblog 1.1 has been released which fixes bugs with the GlobalListings. I have updated the tags in this tutorial to correspond to MultiBlog only.
Have you got two or more blogs that you would like to 'merge.' By merge I mean show all entries on one page, chronologically and inline - for a greater understand take a look at my blog. The front page shows entries from the main blog plus the sideblog - the sideblog entries are formatted differently, the little bars !
The plugins you will need are: * MultiBlog * GlobalListings
Multiblog does have the GlobalListings plugin built into it, but at the time of writing this tutorial that section of the plugin didn't work. So I am using...
continue reading ...
Movalog, Tutorials, 30 KB, 1205 words
UPDATE: No more CSS, have MT auto indent.
The "Primary Category" drop down menu just lists the categories sorted alphabetically and doesn't obey the category heirarchies you may have setup. This is especially annoying if you have several similarly named sub categories under different parent categories. So here's a hack that will change the way that field works, the categories will now obey the category heirarchy as shown in the screenshot (click for a larger view) It's probably best to note that I'm not the most perl savvy and this code may not be the most efficient/quickest/best way to do it but it works for me.
You'll need CMS.pm, open it up. Replace everything between
## Load...
continue reading ...
A List Apart, Tutorials, 18 KB, 2183 words
When I started out as a web designer, accessibility seemed quite a simple and achievable goal: provide alternative descriptions for all your graphics, and make sure the background colour and text color have good contrast. Accessibility was easy, took little extra work, and the resulting page didn't look different from millions of other first-generation web pages out there, i.e., dull, grey and unattractive.
Time has moved on and accessibility on the web is no longer simple. From being a largely text-based medium that was easily accessible via a variety of high- and low-tech devices, the web has now become a rich multimedia environment.
As a result, much of it is now...
continue reading ...
A List Apart, Tutorials, 10 KB, 882 words
For your style-sheet-switching pleasure, A List Apart offers the Switcher, a piece of JavaScript that dynamically changes page styles. Functional as it is, it quite unfortunately relies on the user to have both JavaScript and cookies enabled. There's not much we can do about the cookies, but we can sidestep client-side processing with a little help from PHP.
PHP is a scripting language available on many, many servers. It's fast, it's free, it's open source and it handles everything on the server side, so there's no need to worry about users who have disabled client-side scripting in their browsers. If you're not sure if your host...
continue reading ...
A List Apart, Tutorials, 20 KB, 2444 words
This week, Microsoft released IE5 Macintosh Edition, the first shipping web browser to meaningfully support two key standards: HTML 4, and Cascading Style Sheets (CSS) Level 1. This is good news whether you use a Mac or not, because the browser not only empowers webmakers to begin building standards-compliant sites, it also cures headaches caused by trying to support Mac-based visitors.
Equally noteworthy is what's missing from IE5/Mac: meaningful support for XML and the DOM. On that level, IE5/Mac is just like IE5 for Windows: not good enough. Then again, no shipping browser is good enough, because no browser truly supports these standards, one of which has been...
continue reading ...
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 dictionary.com !
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:
Quicktags.js
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 ...
Brad Choate, Tutorials, 81 KB, 3107 words
It's a shame MT doesn't provide year-based archives because some of us have enough entries for them even if Movable Type hasn't been out that long! Here's what my 2001 blogging year looks like. Well, you can create them manually-- and since you only have to do it once a year, it isn't too bad. Click the 'more' link for details...
All you have to do to build a year archive is create an index template...
continue reading ...