Post Archive

› August 30, 2003

Color Pick in OS X

DigitalColor Meter Application This post is for anyone (like me) who by all rights should have figured this out, but for whatever reason, never realized it. Mac OS X users: do you need to isolate a color for use in your web design? If the color is part of a graphic file that you have open in photoshop, the easiest way is to simply use the tools in photoshop to pick the color and copy/paste the hex or rgb value for use in your CSS. What about grabbing colors out of a PDF that you have open? You could re-open the PDF in photoshop, but a quicker way would be to use some sort of color picker.

For a while I wondered why there seemed to be slim pickings in the OS X color picking apps available, then recently I found this posting at macosxhints.com, or rather the first comment made to this post, which points us to the built-in DigitalColor Meter of OS X. Which is located in the //applications/utilities/ folder. The little app works very well for isolating a color from any window or application open on your screen. There are output options for the color, and the CMD+Shift+C key chord will copy the color for pasting into your CSS document. There are little things that could be better about the tool, for instance copy/pasting in "RGB As Hex Value, 8-bit" seems to think that you'll always want quotes around your hex number (old-school-style for use in HTML, not helpful for CSS). Also copy/pasting the "RGB As Actual Value, 8-bit" seems to add an inordinate number of spaces between each value. All-in-all, the tool is a time saver - often times I'd rather remove a couple quote characters than open up photoshop, the color picker app has a small footprint. Do you have an app you like to use for isolating colors (OS X or otherwise)? Let us know about it in a comment to this post.

› August 29, 2003

W3C Markup Validator 0.6.5 Beta #1

Zeldman announced that the W3C has released another version of their super helpful validation service. Give it a whirl and validate your site with the new "Fussy Parsing" option turned on. See how the web-graphics site fared.

› August 28, 2003

Kudos DutchCelt

If you visit Egor Kloos's weblog DutchCelt.nl you'll be impressed with the design work. Then, after admiring it for a while, you might look under the hood and see that it's XHTML 1.0 Strict with CSS for layout, and it's also clear that he has an active interest the semantics of his markup structure.

I really enjoyed finding Egor's site the other day, thought you might like to see it too (it's on our blogroll now). Oh, and yes, he knows that the mini-calendar on his weblog page should *semantically* be structured in a table, he just wanted to see if he could get it pixel perfect with divs and floats.

› August 27, 2003

Standards : Designing for the future

Ian Lloyd, whom you may know from accessify or as a member of the webstandards group, has written for Mezzoblue's "A Second Voice". I highly recommended reading his article - Standards: Designing For the Future. It's reminded me to be grateful for the growing number of opportunities I've had of late to control the coding situation and use standards based design, and inspired me to re-think situations where I haven't been that fortunate.

Fussing over blogrolls

Off and on I've been mussing about with various methods for creating a blogroll for this site, here are some notes about the matter. Today I've published a new incarnation of the blogroll, made available on a page dedicated to the matter.

What am I looking for? A blogroll can of course, just be a list of links to various weblogs you like to read. That being the case, it's a rather simple matter to setup an include that is easily edited, or simply make it part of your homepage markup. The complications come in when one wishes to make the list more of an mini-aggregator, sorting by date, or highlighting recently updated blogs. The information about when a site has been updated can be gathered via a service such as Blo.gs or blogrolling, or from a weblog's syndication feed directly. Gathering this information seems worthwhile to me, since it allows regular readers (and me) to quickly get up to speed with top notch sites. Aggregators are great, and I do use NetNewsWire Pro regularly, but there's something extra one gets when reading weblogs in their intended form, call it pseudo-meta-visual-context (e.g. - someone complains about layout of other websites, yet their own is not much better).

What have I tried? I've tried a bunch of different solutions. For a long time I used Phil's blo.gs script, which worked great but for some reason I seem to have bad luck using blo.gs and/or my lack of true php skills is tripping me up somehow (other's have used it with great success, it's well worth a try). For a short while, I tried using some MT-Plugins to do the job. I didn't have the patience for it, but Jason Bergeman of IzzyWizzy did, and he explains how to do it. I tried a number of other solutions as well, but recently, I switched gears after finding this post on Milo Vermeulen's site regarding an output script he made for the php based online aggregator feed-on-feeds, which is based off the very nicely constructed magpie rss parser. I took Milo's output script, and modified it to do what you see now on the blogroll page.

And? Well, I've put up the blogroll page partially to see how it performs as part of the site, it's neither complete in how it functions, nor polished in how it looks. Let's see how well it operates over the next few days, although it already seems very sluggish. Sluggishness almost certainly due to my haphazard modifications - perhaps if I can modify the script to publish results, rather than doing a live querry.

This nonsensical rambling has been brought to you by: The need to get past this and work on other more important things™

› August 26, 2003

ASP.NET and xHTML Compliance

There is a cry among ASP.NET developers for xHTML compliance. In my own search for a solution I have found something I would like to share. This post on ASP.NET discusses some possible workarounds to the problem.

According to the post and others the major offenses are the illegal "name" tags and an improperly placed "input" immediately after the form opening tag that holds the view state information. This solution strips the name elements out and wraps the view state element in a div tag.

While you are there take a moment to add your own voice to the discussion of why Microsoft should provide xHTML compliant code. I enjoyed someone's idea that the developer should be able to specify the target HTML specification that ASP.NET should use instead of relying on browser sniffing.

› August 22, 2003

ReUSEIT

Bob Sawyer has put together a fantastic contest with ReUSEIT: redesign Jakob Nielsen's useit website with XHTML and CSS. Dr. Nielsen's sentiments through his Alertbox publication on useit and many other efforts have garnered responses ranging from devoted enthusiasm to unabashed distain. Here is a chance for designers [you] to really show their stuff, and to make a strong point about it by using web standards. It's not just for the challenge either, great prizes are being offered.

New Subscription Feature

You may have noticed that we have this new subscription feature here at WebGraphics. I wanted to take a moment to explain what it is, and to give proper credit to the fine folks who created it.

The functionality comes from the ever resourceful ScriptyGoddesses: Subscribe to Comments

This script enables any reader to sign-up for email notification whenever a comment is made to a particular post. A fine feature to have, simply for those interested in tracking a particular thread, but it does much more. There is a subscription managment interface, which allows subscribers to see which posts they are subscribed to, a "mass unsubscribe" unsubscribe feature, and of course, subscribers can simply track the posts that they find interesting.

view rest of article

› August 21, 2003

Safari Favicon Cache

This post is dedicated to the 1 or 2 people who share the following attributes:

  • Read this site regularly
  • Use Mac OS X Safari as their primary browser
  • See a green leaf-ish favicon next to the URL in the address bar
  • Really want to see the new updated WebGraphics favicon, so much so that they are willing to delete a folder from their computer to do so.

Or possibly this is helpful to those developers who just need to refresh their Safari favicon cache for some site they are working on. The solution, like many OS X solutions, can be found at Mac OS X Hints.

You might consider this a shortcoming of Safari, but frankly I think the Win IE problem (favicons simply deleted when you empty cache and choose "delete all offline content") is much worse. Seems Mozilla based browsers handle the favicon situation best.

CSS problem diagnosis trick

If you visited the new WebGraphics design with Windows IE, up till now, the sub-pages were all out of whack. Specifically the left (larger) column on many pages was rendering too wide for the containing block that surrounds all elements on the page, and was therefore pushed to below the navigation bar - yuck.
I fixed it just now, and - as is usually the case for me with these things, the cause was a stray margin or width setting hidden somewhere in my CSS. Of course there are many bookmarklets to that will put boxes around various elements to help you diagnose problems like this - but what happens when you highlight all divs and other elements you can think of, and still can't see the issue?
On a whim I tried using Centricle's show specific elements in an undocumented way: when it prompted me for "Which elements?", I entered: "*", it prompted me for a color, I entered "red". The result? Everything had a red box around it.
I highly recommend this diagnosis method for when things get confusing with your CSS layout.

› August 20, 2003

Web Based Color Pickers

A couple of years ago, I made an extended review of all the web based color pickers I could find floating around. The information is old, but I think still somewhat valuable, so rather than trash it during the transfer to our new server, I'm copy/pasting it into this post. I'll provide a link to it's new home from the old URL, and now anyone can feel free to add to this list via comments. It will also be easier to remove outdated links in this form, but alas, I still have major layout quirks to iron out with the new design of this site, and little time available. Oof, it's funny how old this markup seems, I gotta clean this up.

view rest of article

Mini-Tab Shapes

Dan at SimpleBits has put together a method for using little graphic shapes in your list-based navigation, Mini-Tab Shapes.
While we are on the subject of CSS - you might not have seen a post made here shortly after we went down: it's about another bit of genius from Pixy - No-Preload CSS Rollovers.

› August 19, 2003

showheadinfo bookmarklet

To celebrate that WG's back, a small bookmarklet that displays the meta-information stored in the header of a webpage: showheadinfo showheadinfo (new URI).

How it works + credits:
The JavaScript string (stripped from the Squarefree "show blocks" bookmarklet) triggers an external stylesheet, which is applied on the current html-document. This external stylesheet is very similar to the one Eric Meyer used for his Show Everything: Revealing Normally Hidden Elements article, but adds the content property and attr() function for displaying the header's attribute values, too.

Needless to say, showheadinfo only works in recent Gecko browsers (+ Safari). Firebird 6.1 0.6.1 even renders the related and reverse related URIs as links!

And as always: tweaks and additions are welcome.

Web-Graphics returns with new look

Hi, pardon us, I know we've been gone for a while, but we're back now, and we've put on something more comfortable now.
If you have a semi-modern browser, you're looking at a whole new design for this site, created by longtime Web-Graphics author Arturo. If you're using an older browser, you're still seeing an improved page, although somewhat less visibly - I've cleaned up the XHTML quite a bit too.
There's much to report about why the site went offline, and what choices have been made for this re-design [more soon]

› August 13, 2003

Image Replacement Articles

Image replacement is a technique that's used to replace text inside an element with an equivalent image. This is a list of the best image replacement articles that I've found.

Douglas Bowman: Using background-image to replace text. Douglas explains the Fahrner Image Replacement technique with two examples.

Dave Shea: In Defense of Fahrner Image Replacement. Dave wrote another article that explains the FIR technique and also discusses its shortcomings.

Stuart Langridge: Another image replacement technique. Instead of hiding the text as FIR describes, this method moves it out of the way and improves the semantic quality of the markup.

Seamus P. H. Leahy: Image Replacement—No Span. Seamus independently developed the same method as Stuart.

Mike Rundle: Accessible Image Replacement. Mark's Mike's method is similar to the method developed by Stuart and Seamus.

Tom Gilder: Gilder Image Transform Technique. Tom uses an empty span element to compensate for users using a browser with CSS support but with images disabled.

The holy grail of image replacement is a method that uses semantic markup, works in screen readers, works with images turned off and works in most browsers. I haven't heard of such a method yet, but you can guarantee it will be linked from this entry when I read about it.

If you know of any other good image replacement articles, please add them in the comments.

› August 11, 2003

Older Posts

The "older posts" feature that can be found on the bottom of the homepage is one of my favorite aspects about Pepe's new design work. I think of it as an organic solution to a number of problems:

  1. Where do new readers go after reading all homepage posts?
  2. How do infrequent visitors catch up with posts?
  3. How does one keep the homepage lenth somewhat consistent in a blog?

Three posts are shown on the homepage all the time, older posts are filtered through the elegant system. If (>3) posts were made this month, they are listed individually, with a comment count and link. Then below this, months are listed for this year. Then years listed.

Much of the functionality to make this happen is not currently "built-in" to the MT scripting language, but because MT stores it's pre-rebuild data in MySQL, you can really querry for any bits of data with a bit of work. Also rediculously helpful was the Compare Plugin for MT, it's a great tool for tinkerers.

› August 10, 2003

Almost there

It's now over a month, but finally I think the new site is almost ready to go live. A small highlight of some of the changes:

  1. Added comment subscription feature for individual posts
  2. The sort-by-how-current blogroll feature should be nearly ready (just need to decipher a persistent bug)
  3. The resources page is now it's own blog in MT, this will allow any author to add more resources - the categories are true MT categories, so if it get's too much for 1 page, we will have many display options to choose from
  4. All the other "static" type pages are now MT templates, to take advantage of the next item in this list
  5. Extensive use of MT template modules, all the recurring elements can be called via template modules, which are sort of like includes except the processing happens on rebuild, rather than each time the page is viewed.
  6. A bunch of other features, like the last 5 comments on the homepage sidebar, etc.