Valhalla Island

Let me tell you something, I’ve seen it all since before Netscape was even a glint in some venture capitalists eye and If I know anything it’s this, the Internet is not a truck, it’s a freaking freight train packed full of idiots.

The Internet, summed up in a beautifully written article by Greg Storey.

This is a followup on my digged post about Good-Looking, Sharp Offset, CSS Text Styling. It got a lot of attention with over 600 diggs, 55 digg comments and over 40 comments here, I’m yet to see the traffic amount yet, Analytics hasn’t updated yet. Most of the large response was negative and it happened so quickly I didn’t get a chance to respond in my comments so I want to address some issues people brought up.

I think many people didn’t bother reading the post the whole way through before voicing how horribly inaccessible it is. At the end of the post I said this:

It’s definitely not accessible as the text has to be repeated twice. With styles turned off the heading text will be displayed twice, screen readers will read it twice and search engines will record it as written twice. Perhaps that’s the price to pay for pretty headings. I see it as better than a heading image with no alt tag. Providing the information twice is better than not providing it at all.

After that Rob and a lot of others with very similar comments wrote this:

That’s kinda nice, however it is not semantically correct. A screen reader will read the h1 text twice, your best bet would be to use javascript to insert the span dynamically.

I’ve already mentioned that a screen reader will not read it correctly but Javascript is not a solution. Most of the time blind users will be using a system wide screen reader that sits on top of a normal browser, the normal browser will render the Javascript and the screen reader will read it. Although using Javascript will save you having to manually repeat the HTML. Jani offers a very nice, compact Javascript addon to my code. But as I said, this method has no accessibility advantages but may prevent search engines from reading twice. Thanks Jani!

A few commentors also mentioned the existence of the CSS 3 property text-shadow which I’m aware of. While this will be the absolute best solution when all browsers support it, at the moment only Safari does. It’s not a solution at all if it doesn’t work in 98% of the browsers people are currently using.

Hostilemonkey really is quite hostile with his comment:

Anyway, I’m not adding anything new, much like the author, who clearly misunderstands what CSS is for. Top tip - read Zeldman.

Is CSS not used for styling HTML? Maybe Zeldman’s Designing with Web Standards I read a few years ago is out of date by now. I understand that I’ve added markup and content to produce a presentational effect but I knew that when I wrote it. I didn’t claim it was accessible or semantic, I warned of that in the post.

Another more semantic and accessible solution offered is one by Barryke suggesting server side image creation of the text before dynamically creating the styles and markup to support it. While the end result of this is ideal with no duplicate content, degrading well and displaying correctly there are drawbacks. If the image is inserted via an <img> tag it’s still not semantic if using it as a heading, to get around that, a CSS rule must be created with the dynamic image as the background and to keep that accessible we’ll need a hidden span inside that to hide the text while the image is showing and to show the text when CSS is turned off. While the content isn’t duplicated (unless you count the text being duplicated in the image and in the markup as duplication) there’s much more markup, including an extra span. And finally, this method takes a lot of code and a lot of time to set up, getting something like this to work within something highly dynamic like a WordPress theme would take some serious work.

When posting the snippets I knew it wasn’t accessible and I knew it was adding extra markup and content to achieve a presentational goal. While saying that, it’s a simple, quick and easy solution to a problem where there is no perfect solution (besides the barely supported CSS 3 text-shadow) that will look great, with no detriment, to 99% of your website visitors.

It’s hard to describe this effect, which looking at the title is obvious. This is the kind of styling places like Joyent use in their level two headings, with a very slight white offset. Although theirs are buried within images, mine are CSS (with a little extra markup) and valid xHTML 1.0 strict. Here’s what it does.

Before

After

I think it’s a very nice effect. One that’s obviously not for all text but is a nice decorative touch on headings and other special text. The problem with this effect before has been that it couldn’t be used in a dynamic situation, it had to be embedded with an image.

Starting work on a new WordPress theme today I wanted something a little better looking than flat text for the main headings, being a WordPress theme where the titles change contanstly between blog and post this style could not be embedded in a static image so I got to work on a CSS and (x)HTML version. Here’s the style.

h1 {
     color: #000;
     position: relative;
     }

h1 span {
     color: #fff;
     display: block;
     position: absolute;
     top: -1px;
     left: -1px;
     }

And the HTML markup to go with.

<h1><span>Lorem Ipsum</span>Lorem Ipsum</h1>

The extra text is within a display: block; span rather than a div which by default is blocked to keep things valid. Divs aren’t allowed in a h1, spans are. The colour you want for the top text is specified in the span and the offset colour is in the h1. You can style the h1 like normal after that, although don’t give it anything like padding or text-indent, that’s likely to stuff it up.

It’s definitely not accessible as the text has to be repeated twice. With styles turned off the heading text will be displayed twice, screen readers will read it twice and search engines will record it as written twice. Perhaps that’s the price to pay for pretty headings. I see it as better than a heading image with no alt tag. Providing the information twice is better than not providing it at all.

Tested and works in IE 6, IE 7, Firefox 2 and Safari. You can see the working example here.

Advertisement ↓

Some prominent web hosting services providers offer remarkable web site design services as well. In this regard they not only offer different types of hosting like reseller, dedicated or cheap web hosting to their clients but also provide tips on web design. One can register cheap domain name with them as well. Reliable hosting services along fast internet connection are essential for any business web site. Leading ISPs provide free wireless internet connections too on trial basis where as provide broadband links as well.

It’s been a really long time since I’ve made any theme updates at all, even with known errors in Sunburn mainly. Today I set out to update all of my themes, I fixed and changed Sunburn around and I added some nice features to Chewy. I got to Day Dream and decided there was nothing to change or update, it does just about everything.

I’m really happy with the updates I made to Chewy. It’s much more customisable now, the option of a flat background colour has been added and turned on as default. The girly, stripey backgrounds were something that I think was turning people away from it, although the option to use them is still there. With the background gone it looks much cleaner, more refined and elegant I think.

I hadn’t been to Chewy’s home in a while and I hadn’t installed Akismet spam filtering. One post had over 1500 spam comments, there were 600 in moderation and every other post had at least 600 spam comments. Whoa! I had to hit the database and just empty out the tables in there. Akismet has already caught 35 spam comments since this morning on that blog.

Sunburn just got some bug fixes to stop things breaking when text was wrapped onto two lines. I got really sick of seeing blogs using Sunburn that were broken and looked crap.

Development on all my current themes has now finished. Time to put those behind me and start on a few new projects, including a new WordPress theme or two.

If you’re a web developer, use a Macintosh and love using wonderful serif fonts like Georgia then your job is a satisfying one. Anti aliasing of fonts on OS X is superb but after having a quick check of your serif-font-using website on a Windows machine and you might suddenly regret using Georgia all together. Wishing you stuck with the old web faithful.

Serif fonts should look good online and if you’re using a Mac they definitely do look good. Windows, by default, renders serif fonts online so badly that the readability advantage of using a serif font is lost. With the clear type option on (Windows users - display settings » appearance tab » effects » use method to smooth font edges) the result is definitely better but still not ideal.

For a better look at exactly what is happening let’s look at a zoomed in character, the uppercase s is a good example.

Absolutely no smoothing on the default Windows S. No anti aliasing at all looks great at really small sizes where heavily anti aliasing is just a blur. OS X has the ability to turn off screen font smoothing on an app by app basis. Programmers often dislike their monospaced fonts smoothed so TextMate has the option to turn it off. Personally I was happy to see anti aliased fonts on by default in TextMate.

Windows Clear Type makes an effort but the detail of OS X’s anti aliasing really stands out when shown against Windows with Clear Type on. With that level of smoothing OS X fonts should be unreadable at small sizes but they’ve been clever and included an option (on by default) that stops anti aliasing when fonts drop in size below a specified value.

Steve Jobs spoke about operating system fonts and the importance of them being beautiful in his emotional 2005 Stanford commencement speech.

It’s interface differences like this that I notice all the time between OS X and Windows. Why isn’t the Clear Type option on by default? When I tried to introduce my Mum to the joys of anti aliased system font she said it was “horrible and blurry”. Yet she’s never complained about type being blurry on my computer.

The implementation of font smoothing on Windows is bad. Something as important as the type on your computer, the single most important thing, they’ve failed to implement well. It’s so bad that I would consider switching from what should be a beautiful and readable typeface in Georgia to a sans serif like Verdana on my website.

Kuler fills a massive void. An amazing flash tool by Adobe to create and share colour palettes. I’m bad at choosing colour so I often use Illustrator’s colour palettes but there’s just not enough of them and not enough good ones. Finding more is difficult so Kuler fills that gap so brilliantly well.

From first glance I was greeted with the most popular palettes people had created and was immediately impressed. They were so good I just wanted to use them right then and there, they made me desperately want to design something. Mint Chocolate Chip, Blueberry Beach, Camo3, Sunburn and Rainforest are just a few that stood out as brilliant (because it’s Flash there’s no permalinks but you can search for those inside the app).

I was impressed at people’s ability to choose five separate colours that go together so well (although it doesn’t have to be five colours). So I checked out the create section to see how they were put together. My socks were blown off, Adobe have made it so easy that I was able to put this together in literally two seconds.

Kuler uses some great picking rules like Analogous, Triad, Shades and Compound colours in the picker that make it super easy to create some beautiful palettes. Shades and Analogous are my personal favourites. You’re also able to easily go custom. Colours are specified in many formats too, HSV, RGB, CMYK, LAB Colour and 8 bit hex.

On top of all this wonderful stuff is the ability to export palettes for easy use in Adobe programs like Illustrator!

While it requires the latest Flash player and a sign up to download and share your own palettes it’s no doubt worth it. Kuler is something I will be using over and over again.

800 pixels Just a fine width to stick with Let’s not go broad sheet

In business, email is the best form of communication. Emails just cut the bullshit, you don’t need to inquire about a person’s wellbeing at the beginning of every email, you cut straight to the point with as few words as possible.

Here’s a typical phone call and email to get the same information.

A Phone Call

“Hey Barry, how are you doing?” “Hey! I’m well, how about yourself?” “Oh, you know, busy as hell, I barely have time to eat or sleep let alone spend any time with the wife or kids” “You’re telling me, my desk is piled a mile high with work I’ve got to get done” “Just gotta do your best to work through it” “Yeah” “Look, I’m just calling to get the FTP details for that little web app I got you to make a couple of months ago for Generico” “OK, give me a sec to find them” Two minutes pass “OK here you go, ftp.generico.com, imauser and imapassword. All in lowercase. Got it?” “Yep, thanks a heap! They just want a link added to the footer” “Right, well you have a good one” “Yep, you too, thanks! See ya” “Bye”

An Email

Hi Barry Could I get the FTP login details for Generico? Cheers Jim Jim Here you go. Address - ftp.generico.com Username - imauser Password - imapassword Barry

No small talk, just the information you need. I think you should always greet the recipient and sign off but that’s where the niceties should end. I try to transfer the no bullshit nature of email to other forms of communication in business but all I get is everyone demanding to know how I am, even people I’ve never spoken to before, want to know how I am.

The perfect email should have a small greeting, should ask or say what you need to in the absolute least words possible and should sign off.

Email is actually slower for my Mum because she misses the point of email completely. If I need to send an email the time between pressing the new email button and pressing send is usually less than a minute. My Mum will go through five or six revisions of an email before she actually sends the final copy. It takes her over half an hour and not because she’s a slow typist, she’s very fast, she just thinks it has to be perfect but in an email, short and to the point is perfect.

Being a web professional and a general big user of the internet a good browser is important to me. When you’re using Windows it’s obvious which browser you should be using, Firefox. It fits so well and there’s no real alternative, not that you need one.

After switching to OS X I was faced with a brilliant default browser in Safari and I really liked the idea of using the default browser. It was good too, until I was faced with writing a Wordpress post. Now I’m a WYSIWYG man, I believe in the WP editor producing good code and I just much prefer using the editor. Safari (anything WebKit) does not support the Wordpress WYSIWYG editor and until the latest WP version, didn’t even show quick tags.

So I downloaded Camino, set my homepage to the jimwhimpey.com/wp-admin/post.php and I’d use Camino whenever I wrote a post. Then Camino got spell-checking support and I was excited, Camino was the perfect blog posting browser. But having to use two browsers soon got annoying, I might have bookmarked something in Safari to blog about and so I’d have two browsers open. Just not having everything in one place was annoying and I thought why not just switch completely to Camino and I did.

Now Camino was pretty good for a while, it was very Mac like, it did everything Safari did plus WYSIWYG editing and spell checking but I found myself using Firefox daily for the web developer toolbar, as well as my internet usage toolbar. I’d recently updated to 2.0 and noticed an improved interface.

Again I was using two browsers, so I dumped Camino and switched to Firefox as my default. Firefox does everything each of the others does plus the web developer toolbar, extensions in general, multiple service searching (that’s extensible) and the best webpage string search of any browser, a feature I use often and appreciate a lot.

Although there’s shortfalls to Firefox too. While the default interface is OK, the icons are very Linux like, unpolished. The refresh and stop icons are both shown at all times, I like Camino’s solution for this, displaying the stop icon if it’s loading or refreshing and showing the refresh icon in it’s place when it’s fully loaded, you can’t stop loading a loaded page and you can’t refresh a page already refreshing, it makes sense. These interface problems should be easily fixed by just downloading a new theme, I spent an hour looking for something better and just couldn’t find it, the default, despite it’s shortfalls is the best available. Maybe it will take a little time before some good 2.0 themes are developed? Or I’ll make my own.

On top of that, components inside Firefox do not use OS X’s components, buttons are square, drop boxes are blocky. It almost feels like I’m in Windows while using Firefox. I think it may be like this so they can use almost identical code for each OS build and I’m sure that it will change in time but right now, it looks crap.

While these issues aren’t as large as the others I was having with other browsers it still stops the browser being perfect but is there a perfect browser? I’m beginning to think not.

Review ReviewMe Bloggers being paid per post The end of the world

This is a post at The Uber Geeks which really has quite a nice homepage but the single post pages are covered in so much crap it’s difficult to find the post content. To help everyone out I’ve highlighted the actual post content in green, the rest is advertising, meta information and advertising disguised as meta information.

The sentence asking me to digg the post is almost as long as the article itself. If I liked the sentence-long post enough to digg it, it’d be half as much a digg for the sentence telling me to digg it. Which brings me to my next point…

Digg means “like”. For example, I like your new design / I dig your new design. To digg something is to publically announce you like it for the purpose of making it known to others that may also like/dig it and therefore also digg it. When a post ends with the sentence “Did you like this post? Consider digging it”, I read it as “Did you like this post? Consider liking it publically”.

To extend on the post by 37 Signals about stupid amounts of social bookmarking links on blog posts. I see it as arrogant, especially in this situation. You insert something in your theme, whether it be via a plugin or hard coding, that attaches a prompt for readers to add every post to every social bookmarking site, presuming every post you write is worthy of being bookmarked and submitted to sites full of the latest news and best articles on the internet.

Some posts on The Uber Geeks certainly are digg submit or bookmark worthy and in that case I will digg them or bookmark them. I’m not just picking on The Uber Geeks here, this post was just a good example, there’s many sites much worse.

Is it really worth the visual clutter added to your site, added to every post? Is it worth coming across as someone who believes everything you write is worthy of digg submission and bookmarking?

I liken this trend to the use of target=”_blank”. It’s assuming and forcing something on me that I will do myself if I want to.

Continue reading →

The whole culture and style of Apple’s interface design can be summed up looking at one application, the Dictionary.

Back and forward navigation, some easy and obvious text sizing buttons and a search field. Results displayed instantly as you type in alphabetical order. The real beauty is in the individual results pages.

An unobtrusive title to distinguish between the dictionary and title. A non-bold, just bigger sized heading, my personal preference for headings. Text is laid out with care and in the right face. The order is perfect, meanings, derivatives, origin. Even the default width of the frame is perfect. Entries in a dictionary are never very long and the width of the window keeps it at the most readable width.

A lot of people everywhere could learn a lot from the dictionary interface.

Tales of Myspace’s difficult to use and ugly backend were always floating around my ears although I’d never used it, now I have. The stories weren’t exaggerated at all. I consider myself an experienced user of all types of applications, online or offline, that’s able to quickly learn and become comfortable with a new system.

When I bought my first Macintosh worries about having to learn a new operating system never even crossed my mind. When it had to go back to the shop, not wanting to go back to Windows for a week, I tried out Ubuntu and had no trouble finding my way around. I even set up a dual boot between KDE and Gnome to see what each was like and was quickly comfortable in both. That said, the Myspace backend is really hard to use and I’m still not comfortable.

If you’re able to use Myspace with no trouble at all you’ve gotten yourself into some really bad habits. Working around Myspace is really difficult, holes need to be jumped through over and over again. It’s laborious to use, it’s hard work. Why people have stuck with something so difficult to use I can’t understand. If you haven’t used Myspace before this is the login screen.

Find the login form! At the very top of the page is a web search. Let’s think about a typical use of Myspace. A user has typed in the Myspace URL, are they there to use Myspace or are they there to perform a web search? Yet the very first thing on the page is a web search.

Then there’s the advertising, two huge ads built into the content area. If you think that’s bad let’s wait until we hit your personal admin area.

On the other hand, there’s Facebook. I’ve been using Facebook for a little longer than Myspace and the use has been far more frequent, I really enjoy using Facebook. Facebook has nearly identical basic functionality to Myspace, you have friends, you have a wall for people to leave comments on, there’s photos, a little information about you, etc. Let’s have a look at the Facebook home/login screen compared to Myspace’s.

Look what the very first element is, the login screen. I could take a guess that 90% of users coming to this page are returning visitors and that all of those are at that page to login. The other 10% would be there for the first time, for them, there’s a little about what Facebook is and an obvious option to register. Apart from those two things, there is nothing else, not even an ad.

I kept a bit of whitespace at the bottom in the screenshot because I wanted to demonstrate the space they could have potentially taken up, but didn’t. Here’s each applications home page, the first screen after logging in.

Again with the web search on Myspace, did the user just go to Myspace and login to do a web search? Must have, Anything else on Myspace is way to hard. Facebook’s admin area is brilliantly organised, the left column contains a Facebook search and all your own information. the centre news feed contains recent things your Facebook friends have done, something you may really be interested in. The right column is secondary information that doesn’t fit in either other column.

Myspace’s admin screen is so full of useless bullshit it’s hard to comprehend. You have to scroll down to see if you have any new friend requests or message. Of course the prime real estate up the top is reserved for massive advertising. For a minute I thought I was on ANZ’s website. Cool new people? There’s 128 million people in my network? The date? Who cares. It’s just useless shit filling up space.

I could go on forever but really Facebook is now open to everyone, not just university students. Please consider ditching Myspace for Facebook and telling all your friends to do the same. Facebook do a lot of things right and I’d love to see them rewarded for it.

I had one small box, I copied it and tried to move it directly under and inline with the first box, it was impossible. Moving it one notch to the left caused it to be much further out of line, the closest it can get is frustratingly not inline. Why on earth would these boxes not be able to line up? Sure there’s the excuse that it’s positioning is based on a limited grid but aren’t the boxes on the same grid?

Writing text documents in a text graphics application then exporting to PDF is easier than trying to do anything in Word (as well as being far more visually pleasing).

I have finally got some money spare to buy two Fullbleed shirts. They’re all so good, I’ve narrowed it down to four from which I have to choose two:

The things to think about - Will it go with dark blue jeans? Will I be able to wear it out everywhere? Will it go with different shades of Khaki shorts? Which has the coolest message? I really dig the message in the yellow shirt but is it too bright and attention drawing?

Help me out?

The True Story of Audion

Miss Aniela takes many good photos. Nearly every photo is a portrait of herself. She does cool things with multiplicity and each photo has a large description (compared to most Flickr descriptions) that are interesting to read.

I think she’s very good.

Good furniture is like good architecture, it affects your mood, you couldn’t stand at the door of the Chateau de Chambord and not feel a sense of awe. Not that my new desk is any where near that grand but it (with all my other new stuff) really changes the feel of my room.

It makes it feel like I’m growing up and I have someone to thank for that.

I’m in love with furniture. Mum and I went to the recently opened Ikea to buy some. It’s pretty big, so I took some photos.

Ikea do a lot of things right and I ended up buying some much needed stuff including a new desk. I’ll post some photos of that tomorrow because it’s been a big weekend and I’m really tired.

When I bought my latest computer I thought it’d be cool to get a nice matching mouse. I didn’t like the idea of using a trackpad or only having one button. I also liked the idea of a horizontal scroll ball. Then when my computer broke so did the Mighty Mouse, it wouldn’t scroll down anymore and it was annoying.

So when I took it back with my computer they gave me a new mouse and I was happy again. Recently it’s been starting to feel uncomfortable and now the scroll ball has broken again. It’s not the most ergonomic mouse, like a friend at uni said “it’s like pushing around a bar of soap”. Having to lift your left finger completely off the mouse to enable right clicking is frustrating.

On top of that, the squeeze buttons on the side of my old Mighty Mouse were so difficult to squeeze they were useless. On the new one, they’re so easy to press I was doing it by accident all the time. The default function for squeeze is expose’s show all windows, so I disabled that button.

So I’ve been looking for a replacement, something that works, something wireless and something that fits in my hand nicely.

The Logitech MX Revolution has gotten a few good reviews and it looks great. At $145 it’s a tough decision.

I’ve started a Lost blog at jimwhimpey.com/lost. It’s an episode by episode round up and some speculation on season three episodes as they’re aired in the US. It starts with episode five.

An inspirational read, it’s a shame about the cover design. I always hated it when books bragged about their best seller achievements on the cover.

Matt linked to Ohloh for WordPress in IRC a couple of days ago. I was amazed, so I looked around.

It’s a monitoring site for nearly every open source project there is. It’s so full of amazing statistics like the amount of lines each person has contributed, the breakdown of languages used in the project, the ratio of code to comments and my favourite, the estimated cost the project would take to code from scratch.

Something else I found interesting was not only that open source projects are listed but so are the open source languages that they’re written in. You’re able to see the same information about languages like PHP 6, Python and Ruby. How interesting!

Ohloh estimates that if it was to started from the ground up WordPress would cost $660,000. Here’s some other interesting figures for other projects - Firefox $670,000 - Mediawiki (runs Wikipedia) $3,800,000 - Joomla $1,800,000 - Open Office $93,000,000 (interestingly, 39% written in HTML) and The Linux Kernel $82,000,000 with Linux founder Linus Torvalds writing the vast majority with 4,300,000 lines of code.