Web Design
February 17, 2007
Hi,
I decided to create another blog post to make it easier to find the updated version of the important matching columns script – it was buried in the originals article’s comments.
Notes:
–
Updated script by: Jonathan del Mar
I have modified the script to work with multiple class groups also with elements with multiple class names
/*
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com
Modified to work with multiple class groups also with elements with multiple class names
by Jonathan del Mar (dec-14-2006)
How it works: just apply the CSS class of ‘column’ to your pages’ main columns.
to work with different classes
add
var columns = new Array(’class_name1′, ‘class_name1′…);
by Jonathan del Mar
by default the script will call
matchColumns();
and the default class_name is ‘column’
(see the bottom of this script)
by Jonathan del Mar
*/
matchColumns=function(my_class){
var divs,contDivs,maxHeight,divHeight,d;
// get all elements in the document
divs=document.getElementsByTagName(’div’);
contDivs=[];
// initialize maximum height value
maxHeight=0;
if (!my_class) {
my_class = ‘column’;
}
my_regex = new RegExp(’(.* |^)’ + my_class + ‘( .*|$)’);
// iterate over all elements in the document
for(var i=0;i elements with class attribute ‘container’
//if(/\bcolumn\b/.test(divs[i].className)){
// modified by Jonathan del Mar to match ‘column’ in multiple classes
if(my_regex.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container elements
for(var i=0;i
var columns = new Array(’class_name1′, ‘class_name2′, …);
to your html header.
read more
January 7, 2007
I’m happy to announce the public beta release of our new web template sharing site: Webshapes.org.
From the site:
Webshapes, a community-driven website template resource.
- Contribute your open-source templates: help build the community and get your name out there!
- Download templates to learn web design, or use them to rapidly build your own websites.
URL:
Visit Webshapes
This is a public beta release and I appreciate any feedback (good or bad) that you have.
Thanks,
Stefan Mischook
www.killersites.com
read more
December 26, 2006
One of the first things new web designers are tempted to do is add sound to a web site.
Many times though, this is a bad idea because sound slows pages down and often times, annoys people.
The rules of sound on a website:
- If it doesn’t help the web site to communicate the message – you should not have sound.
- Give users a choice whether to listen or not.
Like any other aspect of a website, the decision to add sound should be well thought out.
… just because you like the first few seconds from Dark Side of the Moon, that doesn’t mean looping the mp3 will help your home repair website.
But if (for example,) you had a home repair tip or two, then it would make sense to provide a few mp3’s that people could download – if they choose to.
The best two ways to add sound to a web page:
In a nutshell:
- Just link to mp3 files. This is the easiest way.
- Embed a Flash based mp3 player so that people can play mp3’s right in your web pages.
There are other ways (Windows media, Apple Quicktime) but the above two are universal and easy to work with, for both the web designer and website visitors.
One last point, if you use a Flash mp3 player to add sound to your website, this will prevent people from copying your mp3’s. Well, it will make it much harder.
Stefan Mischook
www.killersites.com
www.killerphp.com
read more
December 22, 2006
Though Frontpage is dated (the last release was in 2003) it is still a widely used piece of software.
It has enough attention in fact, that many new web designers ask:
‘Is Frontpage still a program that you should to learn?’
The short answer: no
WHY NOT LEARN FRONTPAGE
The major reasons are:
- Frontpage generates dated code that is not considered acceptable these days by most web designers.
- Frontpage has just been replaced by Microsoft’s new web design software: Expression. As such, Frontpage will not be updated and Frontpage users will be left in the dust.
- Most professional web designers use Dreamweaver – that means most web design companies use Dreameweaver.
Of the above reasons, I think the fact that Frontpage has essentially been discontinued, is reason enough to not get into it.
WHAT SHOULD A STUDENT OF WEB DESIGN LEARN THEN?
This really depends on where you see yourself going: if you plan on working for a web design firm, then you probably need to learn Dreamweaver.
If on the other hand, you are more or less working for yourself, then any web design software will probably do – or even none at all!
That brings me to my last point: learn to build web sites by hand.
BTW: there was a little chatter about MS Expression on the forum recently.
CIAO,
Stefan Mischook
www.killersites.com
www.killerphp.com
read more
December 18, 2006
The ‘bargain hunter’ type of person, can sometimes be a reasonable sort of human being that respects you as a professional, and is only looking for a good value for their money.
… Then there is the other type; those who seem to have no respect for you and in the end, will just drain you of your mental and emotional energy.
PSYCHIC VAMPIRES
A long time ago, I read a strange (but entertaining) little book that warned of a type of person, a person that would drain you of all your energy just by being around them.
(We’ve all been around them before … after just a few minutes of seemingly light chatter, you feel tired and drained.)
The book referred to these people as ‘psychic vampires’ – leeches that suck your energy, much in the same way a vampire sucks your blood.
Bargain Hunters are often times psychic vampires, and should be identified and then avoided at all cost.
… it is better to be on the unemployment line, than to be in service of a psychic vampire client.
IDENTIFYING THE PSYCHIC VAMPIRE CLIENT
Everyone has their own thing, but there are some common characteristics found with this type of person:
- They ask a lot of questions – too many.
- They are whining passive aggressive whelps – little pathetic beast that will hound you endlessly.
- They will suggest that the work you do ‘isn’t that hard … really’.
- They will complain that your prices are too high … regardless of reality.
PSYCHIC VAMPIRES SEEK OUT THE WEAK
No matter how experienced you are, you have to always be on the lookout for this sort of person.
That said …
Unfortunately, these most vile of bargain hunters, tend to go after relative noobs to the game … the less experience the better.
They’re attracted to beginners, because they know that their chances of molesting a poor unsuspecting junior (web design) fool, are much better than if they targeted a crusty old web nerd, such as myself.
… So if you are new to the web design game, be extra vigilant!
CONCLUSION
I wrote this piece because I was just the subject of a psychic vampire’s attack.
Fortunately, experience has taught me well, and I was able to quickly identify the blood sucker, and fire his ass before he drained me too much.
Yes, it is OK to fire a client sometimes!
Thanks,
Stefan Mischook
www.killersites.com
www.killerphp.com
read more
December 13, 2006
I’ve been asked this many times:
‘What are the steps to becoming a professional web designer?’
To make a long story short, you need web design skills (listed below) and lots of practice to develop your skills.
A NERD’S ROAD-MAP TO (BECOMING A) PROFESSIONAL WEB DESIGNER
- Learn HTML
- Learn CSS
- Learn basic design skills – how to make a page look good: color combinations, white space etc.
- Learn how to produce images for use on the web. Photoshop or something similar will have to learned.
- Build a portfolio of websites.
After you’ve mastered the techniques and technologies of web design, you will need to show your skills – that’s where the good portfolio comes in.
That means it is time to build websites for yourself, friends and strangers.
Practice makes perfect … with each new site that you build, and with each new ‘client’ that you work with, the better you will become.
ABOUT WORKING WITH PEOPLE/CLIENTS
You may have not considered it, but being able to work well with people, is just about as important as having good coding skills!
… You need to learn how to communicate well, because it is crucial if you want to get the job done.
I will get more into that in another article.
Thanks,
Stefan Mischook
www.killersites.com
www.killerphp.com
read more
December 10, 2006
Ah, web designing nerds, you have studied hard, validated your pages and now you’re ready to leverage your skills for fame and fortune … ok, maybe for just a steady paycheck.
When it comes to the earning a living, what matters most, is what your potential clients are concerned about.
The musings of ivory tower nerds (who probably don’t get too many jobs) often times does not help to pay the bills!
… Code is not beautiful (a fat bank account is) and the Web standards means nothing to the people who put the food on your table.
(Now I’m in trouble!)
THE HIERARCHY OF CLIENT CONCERNS
When it comes to web design, I think the hierarchy of client concerns are:
- Price – everyone wants to save a buck!
- Design – a website has to look good. Remember the job is ‘web designer‘ and not ‘web coder’.
- Usability – though clients have no idea what ‘usability’ is, they just want the site to navigate easily.
- Google position. If you can make a site rank on Google quickly (even with obscure search terms,) you will be god.
Notice that Web standards and code that validates is not on the list.
Thanks,
Stefan Mischook
www.killersites.com
www.killerphp.com
read more
December 10, 2006
Web monkeys are web designers who make their living designing websites. That may seem like a redundant statement, but there are many out there who are just casual web designers …
I wanted to point that out because this article targets the full time web designer (web monkey) and not the casual web-nerd.
SWINGING WEB MONKEYS
Swinging web monkeys are those few smart web designers who don’t rest on the laurels – they continue to learn.
.. If you want to stay competitive and pull ahead of the pack (of nerds,) you ought to spend time learning new technologies, techniques and even be brave enough to graduate to ‘code monkey’ status.
CODE MONKEYS
I defined what a code-monkey is in a previous post. But in a nutshell, code monkeys are nerds who are inclined to code and not design.
For these people, I strongly suggest that they learn to program – especially PHP. But even if you are a great web designer, I still suggest that you become a little ‘code-monkeyish’ and learn some PHP – it will make your web design better.
SWINGING: CODE MONKEY STYLE
It is even better to learn several programming languages because with each new language, you will gain a better overall understanding of programming – and that’s just the half of it!
When you learn a new programming language you will:
- Gain a deeper understanding of languages in general.
- Learn new methods of solving problems.
I was reminded of this just recently when I took a serious look at Ruby. As a played with this nifty language, I found that it expressed concepts (that I had trouble with in Java,) in such a way that it was finally made clear.
.. Because I bothered to learn a little Ruby, my understanding of Java got better!
Beyond the conceptual level, I also picked up some practical programming strategies that I could apply to both my Java and PHP programming.
CONCLUSION
So there you have it; it makes sense to learn new techniques and technologies, if you want to stay ahead of the game.
Thanks,
Stefan Mischook
www.killersites.com
www.killerphp.com
read more
December 2, 2006
Recently on the killersites.com forum a question was put the the group:
“Do you use a template as a web designer, it does save time, and you can add your own design on a template etc……”
You can read the other members comments on this, but for me, I found that templates are an essential tool in the web design process.
–
Back in the late 90’s, when I ran a web design firm, we actually developed our own set of web templates that cut down our production and cost considerably. At the same time, the web sites themselves became better and better since the code in the templates got more and more refined.
So if you are a web designer and you want to save time and money, build your own mini-collection of web templates or start shopping at a web template shop.
Once again, I’ve included a podcast / mp3 for those who like to listen.
Thanks,
Stefan Mischook
www.killersites.com
www.killerphp.com
read more
November 28, 2006
The Web standards zealots have been running rampant on the Web, spewing their tripe of how you must follow the Web standards no matter what is happening in the real world.
… Why pay attention how (the most popular) web browsers read and understand code? To hell with them, so says the Web standards zealots.
No, instead of pulling our heads out of the sand, we should follow the W3C wish list of how code should be rendered, and use a bunch of fragile hacks to make our pie-in-the-sky code work.
DON’T BE FOOLED
As you read this, you may be asking yourself why would anyone ignore reality? If it’s raining, it makes sense to use an umbrella – even if the weather man says it ain’t raining!
Well, I would have to agree with you. After I read the weather reports, I look outside…
Unfortunately, many in the web design community haven’t. They blindly follow the teachings of the web standard zealots, despite the facts their websites are hacked up, require more work than necessary, and add no real value or advantage to the web site.
WEB STANDARDS MYTH DEBUNKED
I will not go into the details here, I’ve covered that elsewhere. But consider these myths:
- By following the Web standards you will save money on bandwidth: yes, bandwidth is expensive (sarcasm) and saving a few kilobytes is going to make a difference … ya right!
- By following the Web standards your code will be forward compatible: except for your hacks where many have broke in IE 7 – I hate to say it, but I told you so!
Clean code (regardless if it is Web standards compliant or not) makes for easier to maintain pages. Most (99.999%) of us are building average websites where bandwidth limitations are not even being approached – hosting is dirt cheap and getting cheaper all the time!
In the days of high-speed Internet, video (Youtube) and mp3, to quibble about 5k savings on a web page is a classic example of the old expression ‘penny wise and pound foolish’.
XHTML FOOLISHNESS
Along with Web standards foolishness comes XHTML foolishness. First a little background:
Nerds, being what they are, love to get the ‘latest and the greatest’ – makes them feel special. So it is only natural that they gravitate to XHTML – the new and better HTML. Yes nerds, I know XHTML is XML.
The point is that XHTML is not ready for prime-time … if you know what I mean. It has two major flaws today:
- IE6 and IE7 will not render XHTML properly, so all the supposed advantages are totally lost!
- XHTML makes working with the DOM (and thus AJAX) a real pain. Since AJAX is the future of web application development it would seem silly to me to hinder DOM scripting in any way.
I mention XHTML because many Web standards zealots are enamored with XHTML, and so the pattern of continued denial of reality goes on. Tisk, tisk tisk.
WEB DESIGN NIRVANA
I hate it when people bellyache but don’t offer a solution, so here it is:
- Use the latest HTML and just be sure to close your tags and that the code is properly formed. This makes the pages easier to maintain and makes DOM scripting work easier.
- Don’t use hacks! Use IE conditional comments to deal with browser issues like IE6’s problems with CSS positioning etc.
The real world Web standards are found in the browsers being used, not what the W3C would like them to be.
Best,
Stefan Mischook
www.killersites.com
www.killerphp.com
read more
