Changelog » Design

More Hivelogic envy

Sun, 23 Nov 2003 22:33:36 +0000

When I started this blog I used Hivelogic for inspiration. Since then my template has changed a few times. Well, just recently Hivelogic went and redesigned. It hardly suprises me that my first reaction was to whip out TextPad and start playing eith my site templates again…

La La La La Laaa…

Sat, 11 Oct 2003 03:40:49 +0000

Sweet Jeebus the iPod has sweet ads! Is there any doubt as to why this company is cool?

Seriously though, what other tech company pays this much attention to customer experience? From the OS (check out the Panther box) to the hardware Apple puts in the extra effort to make things “pleasant.”

Of course, using OSX for any length of time drives me up the wall… But I’ve always hated the global menu bar.

I just have a hard time getting excited about my Acer with XP. Especially when the TV-Out won’t work.

Pure CSS Tabs

Sat, 03 May 2003 15:00:00 +0000

For some reason CSS Tabs are a big topic of late. I recently spent some time with the issue when trying to redesign my old weblog. I never used the design, but came up with a nice solution (in my mind). I’m using the design on my home page at the moment (though its days are numbered). The end solution has a few quirks, but looks good in most modern browsers.

To begin we have all the previous attempts I studied:

Mark Newhouse
This didn’t quite work for me, but helped get me started
Mark Pilgrim
The tabs don’t line up very well in Epiphany on Linux, but I liked how he used CSS to decorate the “front” tab.
Dean Burge
This was the look I wanted to get

In addition, the following sites also tackle the problem:

Meg Hourihan
The example looks good, but uses
for her tabs instead of a list.
Richard Rutter
Has a cool 3D effect, but the CSS is pretty complex as a result. Also has secondary navigation associated with each tab.
Dan Cederholm
The example looks really nice, but uses images.
Joshua Kaufman
Using Epiphany on Linux, the tabs don’t align with the baseline, spoiling the effect.

Webgraphics has most of these (and a few more) linked in one convenient place.

I’m rather fond of my own solution. The HTML and CSS are both quite simple. The HTML uses an unordered list inside a

    Home
 Journal
 About

The CSS is a little more complicated, mostly to show the correct “front” tab depending on the current page. I use an id selector on the element to identify the current page.

Next I display the list items inline, and remove all padding and margins.

 #tabs {     font-size: x-small;     border-bottom: 1px solid black;     padding-top: 20px; }  #tabs ul {    margin: 0;  padding: 0; }   #tabs ul li {   list-style: none;   display: inline; }

To get the tab effect, I give each anchor a small border and pad the sides out a bit (optional).

 #tabs ul li a, #tabs ul li a:link, #tabs ul li a:visited {  border: 1px solid #000;     text-decoration: none;  padding: 0 10px;    margin: 0; }

Finally, I give the current tab a white border on the bottom so it appears to be in front of the others. I use the id of the element to determine which tab gets to in front. I borrowed this idea from Mark Pilgrim’s version.

 #home #tabs li#t_home a, #journal #tabs li#t_journal a, #bookmarks #tabs li#t_bookmarks a, #photos #tabs li#t_photos a, #about #tabs li#t_about a {     font-weight: bold;  border-bottom: 1px solid #fff;  background: #fff; }

The result is pretty nice:

(above) The result in Internet Explorer 6 for Windows

(above) The result in Mozilla Firebird for Windows

(above) The result in Opera 7 for Windows

I’ve put up a simple example.

Do you speak Flash?

jackson — Tue, 26 Nov 2002 16:29:16 +0000

Judging from these portfolios you’d think everyone in Scandinavia knows Flash and does design work for a living. Hm, maybe they do…

Anyways, I like this one.

Is there beauty in ASCII art?

jackson — Sun, 27 Oct 2002 16:00:55 +0000

I like simple designs. Crowded pages are distracting, they move the user’s focus from content to presentation. This usually makes finding content ona site a chore rather than the natural function of the site.

I appreciate sites like NTK, craigslist, and Google becuase content is presented in a clean, straightforward fashion. They make good use of hyperlinking and try to help me find what I want. Material is neither hidden nor obfuscated. I wish that more sites would forget neat DHTML and Javascript tricks and simply present the user with information. Make the site easy to navigate, and provide hints about where a user might find additional information. If you want to keep a user at your site, give them something to see. Don’t make it a chore to find information or users will leave befor they really find what they want.

Visual design has its place. But I would rather have a easy to use site with no graphics and minimal layout then a beauftiful site with nothing to say.

Of course, I will accept that for some sites, design is their content. These sites may continure to ignore all of the above.

Big Idea

jackson — Thu, 31 May 2001 04:21:30 +0000

New big idea… Ok, so I really dig task-centered user interface design, it makes sense to me that design should concentrate on what people really do rather than what designers think they do. Keep it simple people. I like the new task stuff in Windows XP Beta, though the presentation is ugly… I think the new built-in cd burning is a good example of something damn usefull and damn easy to use. I don’t like the stupid boxes in web explorer view, I always ditch those. Same with the thumbnail view, useful, and easy to use.

So anyways… My new big idea is to expand this whole idea and build an entire OS interface around it. These means getting rid of the whole application idea and moving the focus of the UI to the document. Admittedly, I don’t think this is for everyone… But I think it would be a huge leap in usability. It would shorten the cognitive gap people must cross in fitting UI paradigms into their world view.