<- Older :: Newer ->

Archive for June, 2007

25 Jun 2007

Speech on web usability @ Slo-Tech NEST

Tags: ,

Every July, Slo-Tech holds a big Friday-to-Sunday “geek gathering” at the Slovene seaside. They’ve just announced this year’s event and I sort of volunteered to give a speech on web usability there. I’ll be on Saturday, July 21st in the afternoon.

I’ll be presenting some main topics a designer should be aware of, when it comes to web sites - What to do and mostly what not to do to please the visitors. Expect live demos too ;) Oh and the speech is going to be in Slovene language.

Read the NEST 2007 page @ Slo-Tech for more info on the event as well as how to join it. See you there? :)

2 Comments

19 Jun 2007

How to move that footer to the bottom

Tags:

I’ve had this problem many times before. I want to put the footer at the bottom of the page. Even when there is little content, I don’t want it floating around somewhere. I want it to stick to the bottom edge of the browser.

So here’s a solution I’m using on this very blog. How does it work? First it makes sure that both body and html are of at least 100% height. Now by applying position:relative; to the body, we can absolutely position our footer inside of it. And make sure the body gets stretched when there is more content in it that fits the browser window. Using min-height:100%; does the trick in just about any browser but IE6 and older. But IE6 will resize the body so as to fit the content, even if it has a fixed height of 100%. But it will only do si in strict mode. This is achieved by specifying a doctype. So put a line like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
at the very start of your html document. No tags (not even < ?xml ... ?>) should come before the doctype.

This trick doesn’t work for IE5.5 and older (footer overflows the content), so we have to make sure we make a special rule for them to make it look at least a bit decent.

Footer demo - here is the demo. See the source for more info. It’s commented step by step so I think you should be able to understand what I did.

No Comments

16 Jun 2007

HTML5

Tags:

W3 has presented us with some differences between the “old” HTML4 and the new HTML5, which is still under development. HTML5 brings a few new features aimed at some modern trends, such as web applications.

Here are some of the features I found interesting:

  • HTML5 is joining html and xhtml markup. Documents may be written in either HTML5 or XHTML5
  • It does not allow nesting of block and inline elements under the same element. So this is incorrect: 
    <div>
    <span></span>
    <div></div>
</div>
  • Some new elements are introduced, such as article, dialog, header, footer, time, … No more <div id="header">...</div>!
  • Input’s type attribute now has some additional options, such as email, url, date, …
  • Replace attribute is introduced, telling us what happens to form elements after the form has been submitted. Narrows some javascript down.
  • contextmenu global attribute has been added to allow a context menu personalization
  • Frames are gone. Iframes only.
  • getElementsByClassName() is added to the DOM
  • innerHTML is now considered a standard

I quite like where this is going. It brings to more semantic markup, which is good for project organisation and none-css capable browsers such as screen readers and text-only browsers.

HTML5 differences from HTML4 - see for yourself
HTML5 specifications

No Comments

14 Jun 2007

A bouncing ball to sit on

Tags:

Well this is a bit off-topic, but I guess it’s a part of designer’s workspace so it counts ;)

I’ve always realized my sitting position is bad and unhealthy. And since I spend quite an amount of time in front of my computer it started to worry me. I did hear some good recommendations about sitting on a fitness ball, so I had to try it. The basic principle is it moves with your back instead of deforming it. Click here for a demonstration.

So yesterday I borrowed one to try it. After the first hour I got all dizzy of bouncing and moving about. But then it got better and I gotta say I quite like it. I have no trouble with stability and it does force me to sit more correctly when I don’t want to fall off. And besides, it’s fun! You can just bounce around while listening to your favorite tune and not worry about a thing.

Continuing the enjoyment of healthy sitting, I read Tina Kogoj’s tips for sitting behind a computer screen (in Slovene). She describes how bad back and arm positions can cause big stress for your muscles, leading to much pain. Ouch. So I reordered my desk a bit, lifted my monitor and inflated the ball a tad more. This way I can achieve those right angles (1, 2, 3)

All in all, this might save me from some back problems in a couple of years. And I hope I’ll get some of you readers to at least think about your sitting position for a moment :)

No Comments

12 Jun 2007

Safari 3 - text-shadow

Tags: , ,

Yesterday, Apple released it’s Safari 3 beta for OS X and Windows. I’ve been playing with it and it seems quite nice. Windows users did report some problems (and even more problems).

Anyway, I’ve been looking at the web standars project page just now, and noticed the menu looks rather weird in safari. So I’ve investigated a bit and found out it uses text-shadow. So I made a little test case. See how it renders in Safari. Pretty neat, ha? I don’t think any other browser supports this currently. Firefox 2.0.0.4 and Opera 9.00 sure don’t, but I’ll check a few newer versions later today.

update: Opera 9.2 and Firefox 3.0 alpha fail to render text-shadow

update #2: It seems this is old news. text-shadow has been around since safari 1.1 and is said to be working in konqueror also. But what are the big guys (firefox, opera, ie) waiting for?

No Comments

11 Jun 2007

Cheat sheets

Tags: , , ,

Marc Andreessen posted a nice cheat sheets collection. These are short programing / scripting manuals, allowing quick reference to commonly used code. The list consists of php, html, css, javascript and google cheat sheets. These can be of great help at times. Do check it out.

Here’s a quick list of the ones I liked. All fit on one A4 page and are in PDF form. So you can print them out and stick em on your wall or your desk :)

No Comments

<- Older Entries :: Newer Entries ->