the webdesign tag
I took it!
This is a no-brainer but….
I know that some of my readers (shame on them) don’t know about A List Apart or the annual Web Design Survey, so I feel obliged to tell you about it.
The web design industry exists for more than a dozen years, yet there is a strange absence of data about our profession. A List Apart is trying to change that. With their second annual survey for people who make websites, you can help them collecting more statistical data. If you’re a web designer of any description, you should fill it out – it only took me a few minutes to do so.
The 2008 survey corrects many of last year’s mistakes, giving more detailed questions for freelance contractors and owners of small web businesses. There are also better international categories (good for me), and many other improvements recommended by those who took the survey last year.
If you, too, are from Europe, here is the current exchange rate: 1 € = 1,54 US $. Remember that you might get 13 or 14 annual salaries.
Visualizing Inline Links
Joen of Noscope has just suggested, what I’ve been trying to tell people for nearly a year. With the advent of pages commonly referred to as “Web 2.0” sites, the styling of inline or AJAX links became an issue. Usually links have to be indicated to the user, since clicking them slowly loads a whole different page and the user is unable to interact with the current page. The common indicator we use for links is the hand cursor.
AJAX or JavaScript links, however, immediately change a part of the page you’re looking at, without reloading the whole page and without disturbing the user experience. The user can still interact with the page. For example on Pageflakes - the personalized start page I’m using - you can find both types of links: normal ones that take you to another page and AJAX links that allow you to edit settings or reload embedded RSS feeds. The cursor for both types of links is the same, a hand. For the Web-savvy, this might not pose much of a problem, we intuitively know most of the time what type of link we deal with but for other users, this can be increasingly difficult to discern.
The solution Joen proposes, and what I have previously used in these cases, is simply not changing the cursor at all. In reality, it’s not a link, it’s more of a pushbutton that looks different, so why not use the same cursor we use for buttons?
The implementation is rather easy as it only requires a simple cursor: default; rule. To allow for fallback (if the user has no JavaScript, the AJAX link becomes a normal link), I just embedd the stylesheet with JavaScript so I get a hand cursor for people without JavaScript, where the link actually reloads the page and a default cursor (pointer) for people where the link only affects the current page.
Adding a stylesheet via Javascript is rather easy too:
<script type="text/javascript"> <!--//--><![CDATA[//><!-- if( document.getElementById && document.createElementNS && document.getElementsByTagName ) { var javacss = document.createElementNS( "http://www.w3.org/1999/xhtml", "link" ); if( javacss ) { javacss.setAttribute( "rel", "stylesheet" ); javacss.setAttribute( "type", "text/css" ); javacss.setAttribute( "href", "/_css/java.css" ); javacss.setAttribute( "media", "all" ); document.getElementsByTagName( "head" )[0].appendChild( javacss ); } } else {
document.write( '<link rel="stylesheet" href="/_css/java.css" type="text/css" media="all" />' );
}
//--><!]]>
</script>
So, what do you think?
Simulate Color Blindness with Color Oracle
I just noticed an interesting article on color blindness over at Pixelgraphix. Color Oracle helps webdesigners to view in real time, what a website would look like for people suffering from one of the various color blindnesses. The filter is applied to the whole screen so it’s completely independent from the browser and even works with images in Photoshop.
Color Oracle is free and available for Mac OS X, Windows and Linux.
Cork’d sold
What started as a side project for Dan Benjamin and Dan Cederholm on a Mac Mini in a collocation facility has grown to be one of the largest online communities for wine tasting. In about one year the site amassed about 20.000 users. A lovely design paired with a big community got the site quite far.
This week, the creators of Cork’d announced the sale of the site to Gary Vaynerchuk, the host of WLTV. A really nice outcome for everyone, especially since Gary seems to be a guy who understands the values of good design and a community. If you haven’t seen him before, watch this little summary - it’s worth it.
Congratulations to they guys from the iceberg!
Panic’s 10th Anniversary: Coda
The stars finally seem to be in a good constellation for web designers this month. Adobe shipped Creative Suite 3, CSS Edit was upgraded to 2.5 and we are seeing the first Alphas of Firefox 3. Iwas even more excited, when Steven F. commented on Panic’s 10 Year Anniversary:
“It is by a more or less random coincidence that on the day after our company’s tenth birthday, we will be conducting by far our biggest, most ambitious new software launch of all time. I hope you’ll come by to check it out, especially if you make web sites.”
What Panic released a few days later reminded me once again why a Mac is the best platform for developing websites: Coda is just the application I’ve been waiting for all my life. I’m not merely enthused, I’m seriously stunned.
Coda is a single, tiny application which handles all your webdesign needs. Editing (X)HTML and CSS, previewing, FTP (of course), Terminal access and a great reference book, all in one. The Panic team introduces Coda with the words:
“So, we code web sites by hand. And one day, it hit us: our web workflow was wonky. We’d have our text editor open, with Transmit open to save files to the server. We’d be previewing in Safari, running queries in Terminal, using a CSS editor, and reading references on the web. ‘This could be easier,’ we realized. ‘And much cooler.’”
You can read more by Panic co-founders Steven Frank and Cabel Sasser. And John Gruber also has a nice review of Coda on his web site.
CSS Edit
Web 2.0 in style? Now it’s Web 2.5 in style! Macrabbit has released version 2.5 of their great CSS editor. And best of all, it’s a free upgrade for owners of the previous version.
I Took the 2007 Web Design Survey
“People who make websites have been at it for more than a dozen years, yet almost nothing is known, statistically, about our profession. Take the survey and change all that.”
Since Eric Meyer asked nicely, I just took the 2007 Web Design Survey. It only takes 10 minutes and you get a nice badge and can even win a ticket to An Event Apart, an iPod or other nice stuff.
Do Your Share For Webstandards
WaSP needs your help. In a few weeks, the WaSP Street Time will be founded, based around the concept of a record company Street Team. The aim is to give everyone an opportunity to get involved with web standards evangelism in their local area and workplaces.
“The WaSP Street Team is about you. No, not all the other YOUs reading this but YOU you, in your actual skin. The idea is that together we create a number of tasks - challenges if you will - to help the promotion of web standards in your local community.”
WaSP has always been about grassroots and involving the community is a good step forward. I’m sure the Street Time will be a great success. If you want to participate, have a look at the Street Team website and sign up to the announcements list today.
Tingelets - Bookmarklets for Designers
Tingelets is a new, free and practical service for designers and developers. Basically it’s a set of bookmarklets that you can place in your browsers bookmark bar for immediate use. When you click on them, they highlight various elements in the current page. You can highlight tags, elements by id, elements by class and even tag sets (for example <ul> and <li> as a combination). Since they work in almost every web browser, they give you the possibility to compare web layouts on the fly.
The Tingelets are the newest project from Maurice Kühlborn and they are extremely well done. When you click on a tingelet, the corresponding element or elements are highlighted with transparent PNGs which display the name of the highlighted element.
It’s a perfect and quick solution for troubleshooting and diagnostics without having to resort to external tools like Xyle Scope.
