I’ve been quite busy with various things lately, hence no blog updates. Sorry for that. But I do have something to show.

I’m working on a website design for a freshly-opened Slovene company, called Zemanta. They were in a hurry and therefore aired a demo website a bit ahead of schedule. Click here for the page.

They had the idea of showing users a demo of what they can do - a content enhancement system. We discussed a bit, drew a few paper demos (as thought by user interface expert Jure Čuhalev) and then I did the actual design. They liked it and made it work.

The demo currently takes any paragraph of text and “enhances it” with some fancy links, keywords and an image. Currently it’s Slovene only. But English speaking users can just use the prepared paragraph, click GO and look at the pretty animation ;)

I hope you like the design. And sorry about the orange…

When Safari 3 was released as a beta about 2 months ago, it brought some cool features. One of them were the so-called “Resizable Text Fields”. What it means is that any textarea element can be resized by dragging its lower-right corner. This feature comes in handy when you have more text to input than the website author predicted. You can resize your field to avoid scrolling it. Great.

But as many web developers are aware, more freedom to the user means more worries to the designer. By resizing the text field, a user can affect the look of a website. Of course, a page should allow some customization, but what about extreme values (too small, too wide, …)? Will they make my website fall apart? Well, the good developers of Safari thought of that. Therefore textareas in Safari respect the CSS2 minimum and maximum widths and heights. For example, when a max-width of 300px is set, a user will still be able to resize the text field, but no wider than 300 pixels. Neat.

Another nifty thing we can use is the CSS3 resize property. This allows us to limit the resizing of an element (in this example, the textarea) to horizontal, vertical, or none. So by applying textarea { resize:vertical; } the user will be able to resize textareas vertically, but not horizontally.

A word of advice though - Resizable text fields were introduced to help the user. Even though we can prevent resizing all-together, it’s usually not a smart thing to do. Users like to use such features so don’t take this away from them. Do limit resizing within some reasonable values if you think it’s necessary, but don’t take it as an excuse for bad element positioning.

I’m impressed by how many developers still haven’t learnt to use labels in their pages. I mean, how hard can it be?

What are labels anyway, I hear you ask. Label is an HTML element, which describes an input field. Let me demonstrate:
<label for="uname">Username:</label> <input id="uname" type="text" />
Here I establish two elements. An input field, which doesn’t say much on its own and a label, which tells us what this input is for. The for attribute of the label matches the id of an input field. One can also put the input directly into the label…
<label>Username: <input type="text" /></label>
Which I prefer, due to the fact it’s shorter. Labels can be assigned to just about any form field. They are “text level” elements and can be styled with css.

So why should you use labels? There are various reasons, which you probably don’t really care about, like semantic coding, browsers being able to visually match the label and the element (although this is your job) and offering help to people using screen readers to help them see. But here’s one that should change your mind - Allowing users to click on the label to focus the input field. As an example, take all those “I agree to …” checkboxes. Isn’t it lovely how you can just click the text in order to check that checkbox? This works in all modern browsers that I know of. Mind you, that I don’t consider Internet Explorer 6 to be a modern browser, though.

To all those who still have no clue what I’m on about, try this demo.

One thing my blog is missing right now is the “blogs I read” list (I’ll have to add that some day…). So here are some of them, which you might find interesting:

• BannerBlog - We all hate banners. But a few of them are really original so we like them. BannerBlog collects such banners. Example.
• Dave Shea’s mezzoblue - Author of the famous css Zen Garden. He doesn’t post often, but when he does his entries are very thorough and informative.
• QuirksBlog by Peter-Paul Koch - Any time I need css or javascript help, google takes me to his resources page. This guy is good. Also see what he links from Elsewhere on the ‘Net.
• journal // hicksdesign by John Hicks - A designer, the author of Mozilla Firefox and Thunderbird logos. He’s always fun to read. Also see the sidenotes.
• Mark Boulton | Journal - A css and typography expert. Has quite a few nice tips.
• Snook.ca - “tips, tricks, and bookmarks on web development”. He has some nice tips there. I also love the comments system on his blog.
• Smashing Magazine - A variety of information to consider when designing.
• The Web Standards Project - Not really a blog, but the recent buzz does offer some interesting reading on web standards.
• A list Apart - Again, not a blog, but a collection of some great articles.
• Digital web magazine - Another place where to find some interesting articles on web developement.

I have all these in Google Reader, which is a great way to track many websites at once (to the more tech-savvy readers, it’s an RSS reader).

Sometimes you want to edit a remote file, but are just too lazy to fire up a FTP client. So, can you do it in a browser window? Of course you can. With a little help of server side scripting. I am using a PHP script to accomplish just that.

See the demo
View source
.txt file, which the script edits

If you view the source you’ll see it’s really simple. PHP offers commands to read files from disk and to save them. All that’s left is to provide a simple interface for editing. Mine is very basic, but I’m sure you can do better.