Style vs Design

So what’s the difference between design and style?

I’ve had to explain that to quite a few clients that think all they need is a good looking website and they will make millions. It has to work and the design has to (subconsciously) show users how it works and it’s a perk if it looks good (style).

I’ve been thinking about this a lot and about what a web designer should focus on. Is it all about functionality of a site and making everything “work” or is it all about making it look “pretty” and fresh. Facetious I know, obviously it sits happily in between the two somewhere. But where is the question. I love reading articles and stumbled on this (apparently 2005) gem for the first time recently: Jeffrey Zeldman’s Style vs Design. Don’t ask me how I haven’t come across it before, but it’s awesome and it hit the nail on the head for me so I thought I’d share.

dilbert usability comic

Web designers need to not only make a site work, but make it appealing to the intended audience. What looks good on a website for one audience won’t necessarily apply to another.

The web used to look like a phone book. Now much of it looks like a design portfolio. In fact, it looks like the design portfolio of 20 well-known designers, whose style gets copied again and again by young designers who consider themselves disciples.

I worry because young designers who confuse style with design are learning to copy their heroes’ technical tricks and stylistic flourishes, but not necessarily learning to communicate in this medium.

It is cool to make a new effects and transitions with css3 and the like, but let’s not add these styles to a design that doesn’t call for them. We should ask each client/project what their needs and audience is and work on solving that problem aesthetically for that situation.

More to read:

Javascript to show/hide elements update with jQuery

I never expected it, but one of the most popular (most commented) posts on this blog is a javascript post from about 3 years ago. I was showing how to hide and show elements on a web page with some simple javascript using getElementById and altering the display or visibility attributes of the element. It still works – although I hear every once in a while that certain browsers have issues with is sometimes, but the truth is I haven’t used this code almost since I wrote it. I have converted to jQuery! And it is much easier to code, easier to read and even nicer to browsers. So I’m writing this update post to proclaim the antiquity (3 years on the internet is a long time) of getElementById and the benefits of jQuery!

There isn’t much more to say about it really. I hope you’ve heard of jquery and if not, please go check it out it’s pretty easy to pick up! One thing I will mention is the potential bloat to having to load a javascript library. But most of my projects lately have included jQuery because I’ve been using it much more than just showing and hiding elements. But remember our friend cache? Remember that if you’re using jQuery on a whole site, the user only loads it once, and if you load it from the google hosted version of jQuery they likely will already have the script in their cache. The current version is hosted at http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js, so just link to that script on your page and you’re free to throw in any jquery onto your page.

Well, check out the code; I hope it’s pretty self explanatory and you can see it in action. I always have to see things work to understand them and learn from them.

Javascript

[cc lang=”javascript”]
$(document).ready(function() {

$(‘.hide_it’).click(function(){ $(‘.to_hide’).hide(); });

$(“.show_it”).click(function () { $(“.to_show”).show(“slow”); });

$(“#toggle_it”).click(function () { $(“.to_toggle”).toggle(); });

$(‘.fade_it’).click(function() { $(“.to_fade”).fadeTo(“slow”,0); });

$(‘.fade_out’).click(function() { $(“.to_fade_out”).fadeOut(); });

$(‘.reset_all’).click(function() {
$(‘.to_hide’).show();
$(“.to_show”).hide();
$(“.to_toggle”).show();
$(“.to_fade”).fadeTo(“slow”,100);
$(“.to_fade_out”).fadeIn();
});
});
[/cc]

show-hide-jquery-screenshot

HTML Code

see it in action on the demo page
[cc lang=”html”]

testing hide js div

hide it


Show me slowly.


testing the toggle functionality of jQuery


testing fade out. you’ll notice that this is set to display:none once the fade is complete.

fade out


testing fade to 0. this fades out just as fadeOut, but it does no make the display none, so the page layout isn’t modified, just the visibility of this element.

fade it


[/cc]

Notice that with jQuery we can use a class or an id as a selector. This is great because you can show a whole slew of elements that share the same class at once. Remember that you can only have one id on a page at once since it must be unique.

See the demo page for working examples.

And don’t forget to read up on the api for jQuery here jQuery hide, jQuery show, jQuery toggle, jQuery fadeOut, jQuery fadeIn, jQuery fadeTo.

StomperNet FormulaFIVE Launch Web Design

StomperNet relaunched the popular FormaulFIVE and I was responsible for the design of the landing pages. Here are screenshots from the launch, FormulaFIVE was teased with a couple video trailers and even packaged with some bonus videos called the Cash Booster series.
Aviary stomperf5-com Picture 2Aviary stomperf5-com Picture 1Aviary-stomperf5-com-3a
Go to stomperf5.com to view the page.

Flash Video Issue: loadbar (size) vs playbar (time) usability

This deals with some issues I’m having with the seekbar of a player. The seekbar is the area that displays the video time as a bar that shows your current position/percentage of the video, it can also display the loaded portion of the video among other things as well. Including the video players I’ve made, most player code seems to use bytesLoded / bytesTotal to calculate the amount loaded and display in the loadbar (or whatever you call it), this load bar relates to the filesize as it reads the bytes loaded out of the total. In this same scrub bar area, I like to display the current video time in the playbar as the currentTime / totalTime, notice that this relates to the time and not the file size.
seekbars
Since video is usually a variable bit rate, the loadbar (size) and the playbar (time) are not representing the same data of the video. Let’s consider an extreme example case video that consists of a first half containing live action with lots of colors and motion while the second half is a still image black and white slideshow. Understandably the first half of the video will be larger in file size than the second half, even though they each represent the same duration or half of a video… So the first half of the loadbar (size) would not correctly represent the first half of the playbar (time). So the user who watching the video load to the half point, and scrubbing to halfway through the video by clicking the load bar will see errors… The player will not be able to play the halfway (time) yet because that time is not yet loaded, even though the file is halfway loaded (size). So if we allow scrubbing through the video by clicking on the loadbar, there is a good chance that the user experience suffers because the loadbar (size) and playbar (time) are not interchangeable
Calculating display bar actionscript code:
[cc lang=”actionscript”]
//bar is display bar mc
//bar.bg.width is used as a constant to scale the percentage to the full bar width
bar.sizebar.width = (ns.bytesLoaded / ns.bytesTotal) * bar.bg.width;
bar.timebar.width = (ns.time / duration) * bar.bg.width;
[/cc]
Scrub on click actionscript code:
[cc lang=”actionscript”]
//calculate from percentage of bar width to time for seeking to
jumpSeekTo = (bar.mouseX / bar.bg.width) * duration;
ns.seek(jumpSeekTo);
[/cc]

A possible simple solution I’ve thought of is to just display a loading graphic if they click a time which has not yet loaded, but that seems counter intuitive and backwards, since the load bar would display that time as having being loaded.

I have not seen anything in documentation or anywhere online that suggests any other way to display the amount loaded which would represent the amount of TIME loaded rather than SIZE. Is there a way to know what time has loaded in the video and display that in the loadbar rather than display the percent of kb loaded?

Can anyone see something I am missing?

P.S. I already tried a couple forums to no avail: Actionscript.org forum post and gotoandlearn forum post.

StomperNet Strikes Again! with FormulaFIVE

StomperNet has been a ‘buzz’.

After Andy’s ‘Mea Culpa‘ why wouldn’t it be…

But this is so much better and bigger, learning many lessons from the last launch – StomperNet strikes again!

Teamed up with Paul Lemberg a new product called FormulaFIVE (F5 for short).

Just launched a video to excite the industry!
So check out stomperf5.com now!

formula five landing page

Custom Flash Video Player @ FreeIQ and StomperNet

squambido_1
The flash video player designed and developed for Free IQ and StomperNet. Plays video and audio content for a user. I implemented 85% of the actionscript, creating intuitive interactivity and functionality. External xml plsylist, author biography display, content details, share by email, social bookmarking, get embed codes, and more. Sleek design for maximum intuitive user engagement including navigable playlist, author biography, video detail, embedding, email, social bookmarking, volume control, full screen, multiple size options, etc.
squambido_2squambido_4squambido_5squambido_6squambido_7squambido_8

More About Squambido

squambido_3

The Free Line | Logo Design

Brad Fallon had me make a Logo for his new site, The Free Line Report.
free line logo

About the Free Line:

The Free Line is based on the concept of “Moving the Free Line� — the idea that you can grow your business, faster and more effectively, by giving away more.

Today is the age of short attention spans where interruption ads bombard us every waking minute. If you want to get more new customers, you’re better off figuring out how to give more — a lot more — first.

About the Free Line Report:

The Free Line Report is a short video podcast about internet marketing, online video, Web 2.0, and e-business.

With less than two minutes per day, you can keep up with the latest news you can use.

New Circle Cube Logo

Here’s the new circlecube logo! I’ve had it for a while, but hadn’t uploaded it.

I still have to update my theme to incorporate it. I like the green transparent circlecube graphic in the header now but it’s gotta go… and plus it’s a little too green.

Circle Cube Logo Dec 2007

The common 2d © symbol and a 3d cube.
I’ll have to figure out a way to make it interactive… hm…

Any ideas?