Post Archive

› August 31, 2004

Mozilla.org redesigned again

I've been watching the website-beta of mozilla.org for a while, but now I see they have finally made the change and changed the main site. I always thought the white area with the Mozilla logo up in the upper left corner looked wrong in the previous design, but this time I think the visual identity team have really made the interface great. They have made the site slimmer and cleaner and reduced the crowding that I think the old design had. Overall, great work, guys!

JavaScript Quine Contest

So, you know what a quine is? No? It's a script that outputs it's own source code listing. This is a contest to write a JavaScript quine. The contest will run until 2004-09-12. Winners in the cathegories First Posted Quine, Fastest Quine, Smallest Quine, and Most Elegant Quine will be given a GMail invite (unless they already have one, in which case they will have to do with the glory of having won the contest). Content rules will be as follows:

Updated to clarify things a bit.

view rest of article

› August 30, 2004

Scalable Inman Flash Replacement

"Scalable Inman Flash Replacement (sIFR) approaches text replacement in a totally different way than previous methods..."

A detailed and well documented article.

› August 29, 2004

Reader feedback wanted

So I've been trying out this reBlog system, I really like the functionality that it adds - namely the ability to browse through posts made by anyone on the blogroll and make quick note of their posts here at webgraphics. The reBlog specific MT template tags means that there's lots of different ways to actually implement this functionality. So I'm asking for feedback, either in comments to this post if you'd like to discuss, or in an email to me. Here's what is on the table to consider:

  • Should reBlogging even happen, or would you rather only get original content here?
  • Do you like the idea of reBlogging, but would prefer it to be separated from main posts, and with a different RSS feed? (making it more of a typical sidebar blog)
  • Perhaps you like having both regular posts and reBlog post folded into one feed, but don't like how I've styled up the reBlog posts (definitely needs work), perhaps you have suggestions on how you'd like to see it?

Thanks in advance to anyone willing to share their opinion on this stuff, your feedback is greatly appreciated.

CSS Directory

› August 28, 2004

The Anatomy of an Icon


Since releasing some icons of my own, I've received quite a few messages asking "how do you create an icon?". Well, I can't tell you how to create an icon -- but I *can* tell you the steps I take to create an icon. There may be easier ways. There may be better ways. Here's a quick look at the methods and techniques I used to create an icon from the Overcast set.

Clearing Absolutes Again

SafariStand

Having more fun with new reBlog functionality, here\'s where I\'d put any notes about the above link. I\'m setting up these reBlogs to be simpler than full out posts - for example, no link permalink/comments.

Plugin that adds bookmark searching, separators, and other niceties. Plus source code coloring!

Markdown 1.0

Another reBlog test post (see previous post here).

John G says:

Markdown 1.0 is finally out of beta.

Blogmarks and ReBlogging

Simon just posted:

I just posted my 1000th blogmark.

And coincidentally, this is my 1st reBlog post. What is reBlog? The page just linked has a good explanation:

A reBlog facilitates the process of filtering and republishing relevant content from many RSS feeds. reBloggers subscribe to their favorite feeds, preview the content, and select their favorite posts. These posts are automatically published through their favorite blogging software.

I already had feedonfeeds installed, so I just upgraded to the reBlog version of same scripts to gain this bridge between feedonfeeds and MovableType. Now in doing so, the really ugly scripts I had put together that made up the blogroll page became outdated and non-functional, but that's ok - it was messy and needed reDoing anyways. So if you liked the blogroll page, look for it in the coming days - hopefully a zippier version.

Alright, let's see how this whole reBlog pans out, I'll leave comments to this post with any feedack to report. (as it turns out, I removed commenting from my reblog posts, but the process went smoothly - and the app is a lot of fun to use, takes just a little getting used to).

MovableType Upgrade

I upgraded to MovableType 3 figuring that this site qualifies as non-profit. The upgrade went pretty smoothly with one exception. Comment author links *by default* use a redirect cgi. For whatever reason, this caused the author links on this site to be suddenly broken. It can be turned off pretty easily though, just set the no_redirect="1" flag in your template. Thought I'd post this in case other folks have been considering upgrading.

› August 27, 2004

Transparent Layering for CSS Testing

In my never-ending quest to see what I'm doing while working on CSS based markup, I've come up with another mini-helper tool. This one's pretty simple, the idea is to show how items relate to each other by revealing where they overlap.

To do this, you'll need 3 things:

  • A PNG compatible browser (Firefox, Safari, etc)
  • A transparent PNG image to use, or take this one
  • One line of css: * {background-image: url("t.png");}

If you've got a PNG capable browser, you can check out the results on my test page. If you don't, imagine a bunch of blocks of varying darkness of orange. What's going on here? As items are nested within each other, the background gets darker and darker. The background image is a 10% opacity PNG that ends up overlapping (10% + 10% = 20%) with each nest. It allows for 9 levels of nesting, which I'd imagine is plenty.

I think this could be useful for the early stages of setting up a CSS layout, but what do you think? Anyone have suggestions for improvement on this idea? Maybe different colors for different element types? Maybe a favelet?

› August 23, 2004

Resolution Testing

A killer feature of IE, yet largely untapped, is the css zoom filter. I demoed this at web-graphics back in April. Using Iframes with style="zoom:.2" one can get a live thumbnail of a page -- with active links and scrolling.


Chris C. recently sent me a modified version of the code from that demo with zoom in/zoom out.

view rest of article

Broadband and Dial-Up

This MetaFilter post links to a Reuters report that asserts

More than half of all U.S. residential Internet users reached the Web via fast broadband connections in July, outpacing use of slower, dial-up connections for the first time...

Debate at the Mefi post revolves around the effort involved with efficient web page construction - a problem made easier to tackle (in many but not all respects) by semantic X/HTML coding with CSS for presentation.

Besides the more critical benefits of accessibility to the visually impaired, and to handheld devices - isn't a 1/4 second page load time significantly nicer than 1/2 second load time from an experience standpoint? Just say "no" to tag-soup slowdowns.

› August 22, 2004

Browse happy

The Web Standards Project has been busy - Browse Happy - "Internet Explorer can make your computer unsafe. Why not switch to a browser that's more secure?"

Microsoft has other problems too, it seems.

Hivelogic Relaunch

The Hivelogic Narrative is relaunched and looking very sharp. The attention to detail really makes this three column layout fit together well. Dan folded in google adsense ads so that they are somehow not obtrusive, and not completely hidden - a tough balance to achieve. Well done!

› August 17, 2004

So many things wrong.

"Frontpage 2003" is still the current version in August of 2004? I guess that's the problem with using a date in your product name. Or maybe it's an indication of a larger updating problem.

Here's an article featured on the FrontPage homepage within the Office website: "Create a structured page layout by using layout tables and cells." Wow that's disturbing.

Now, I realize that a browser message came up on the page linked above because I'm using the Safari browser deep into Windows country, but I was quite amused to see that even the supported browsers aren't really supported. Check out this screenshot to see what I mean: Large screenshot GIF (196k). It sounds more like an apology than a browser notice.

By far the most disturbing thing I found here, a single short paragraph that actually caused me to wonder if a class action lawsuit could be inspired by such statements:


A good way to settle on a design layout is to find and copy another page design, one that meets your needs. There are many design ideas on the Internet.

I'm going to be sick.

Fixed-width versus Fluid.

(Sorry for all the links, this post has a lot of examples.)

Nick raises an interesting question regarding Fixed Width designs over at Digital-Web.

Given that Adam Howell, Andrei Herasimchuk, Dave Shea, and Doug Bowman all have moved to a fixed-width design, does this mean fluid is wrong? Or dead? Or just too damn hard?

Not so says Nick, who promptly recommends the excellent articles Fluid Thinking and The Dao of Web Design.

The thing that I remember is years ago I saw Jeff Veen give a talk about his work on Webmonkey, and how they embraced fluid. They embraced it, and made it work in very cool ways. And it worked in cool ways because it was the nature of the medium. At least, that's what I remember taking out of that talk. And it's always stuck with me to a degree.

I guess the main question is Design for the Medium, or Design for Presentation/Design/Print?

› August 12, 2004

A web standards checklist

A quick web standards checklist that can be used as a handy tool for developers during the production phase of websites or as an aid for developers who are interested in moving towards web standards.

Article
Presentation
Downloadable checklist pdf

› August 11, 2004

New to CSS?

If you aren't already making your own CSS based layouts, or if you need to learn the basics of cascading style sheets, you might want to jump on this opportunity: Westciv's free course tour has just opened CSS Level 1. Maxine from WestCiv let us know:

Since we first published our collection of self paced courses many many people...have purchased the courses, but undoubtedly many more have followed them for free online. Right now we're at a really good stage in the cycle for someone who needs to learn CSS because we've just started our foundation course, CSS Level 1.

For the expert CSS-ers who read this weblog, consider recommending these courses for that buddy of yours that wants to learn how to do all that crazy CSS stuff you won't shut up about.


› August 10, 2004

Transparent CSS Menu

Dan "dew" Thomas came up with a very simple way to create a transparent CSS menu. It uses a flicker free pixy rollover method and an easy to understand IE filter hack.

› August 7, 2004

CSS Optimizer and This year's DOM

Version 3.0 of the CSS Optimizer has just been released.

When web standards are being discussed, more often than not it's CSS that takes centre stage... until now. This Year's Document Object Model.

› August 4, 2004

reBlog

reBlog by Eyebeam R&D version 0.9.b is out, it's a web based RSS aggregator based on "Feed on Feeds" and also a plugin for your favorite blog tool.

reBlogs are useful to individuals who want to maintain a weblog but prefer curating content to writing original posts. They can also enable organizations to tap the contributions of their employees, members, and communities-at-large in order to easily redistribute relevant content.

And while this might seem redundant, the tool isn't meant to be replace your existing blog tool, because it's a plug-in, you could use it how you see fit (I'm thinking it might be good for a side-blog).

I've been enjoying the eyebeam reblog, which they are testing the software with, especially since you can always follow the trail of where each link came from.

The Learners

All of you designers out there know who Chip Kidd is right? Of course you do. And all of you are so enamored with his design that you just had to read his book, The Cheese Monkeys, right? Of course you did. Well then you will all be delighted to hear that he is writing a followup story called The Learners which is being serialized by chapter every Thursday over at USA Today. You are going over there to read it now, right? Of course you are.

Update on Web Accessibility Toolbar

Accessible Information Solutions recently released the latest version of their Web Accessibility Toolbar: Version EN 1.1. New features include:

  • one step access to enable/disable IE settings
  • keyboard access to all menu items, hotkeys on major functions
  • removed reliance on javascript for many functions

Also released is a French [beta] version in association with braillenet.org and an Italian version in association with webaccessibile.org.

› August 3, 2004

Scratchmedia Courses

Ben Hunt of Scratchmedia design has been busy writing about 60 different articles, tutorials and case studies "for everyone interested in creating effective web pages". His writings concentrate on conceptual methodology rather than "how to make a button". I especially like that comments can be left for any page of the site, which makes it more of a set of living documents, and is a proven value add (just as it is for the php docs). Check it out at Web Design from Scratch.