Year: 2005
February 22, 2005
This list summarizes my often time controversial positions for everyone to see and attack!
Attacks aside, I felt it was time to come out with a new list of best practices in web design with the aim of making web designers lives a little easier.
🙂
THE DO’S AND DON’TS OF PROFESSIONAL WEB DESIGN
- Don’t use CSS hacks – they will break in IE7.
- Do use IE conditional comments to write CSS code that only IE will see*.
- Don’t use XHTML in your web pages because:
- XHTML is not properly supported in IE6, IE7 and some other browser – this makes up about 80-90% of the browsers being used today.
- XHTML is restrictive in terms of:
- the tag attributes you can use.
- it makes DOM / AJAX scripting that much more trouble.
- Even in a perfect world, XHTML does not provide a significant advantage over HTML 4
- Do use HTML 4.01 doctype.
- Do use CMS’, Blogs and web templates as much as possible – saves time and money.
- Do make your websites accessible.
- Do use CSS for page layouts if CSS based layouts are NOT a big headache; otherwise use HTML tables.
- Don’t get fooled into believing that Web Standards based websites will have any practical impact on how well your websites and web design will do in the market place. 99% of the world doesn’t care and even worse – most don’t even know what the Web Standards are.
- Do break out of the Web Standards if they get in the way of getting the job done – Web Standards are NOT holy scripture.
- Don’t nest tags too deeply – nested div’s are just as bad as nested table’s.
Notes:
CSS hacks are often used to hide CSS code from IE so that you can manage the inconsistencies between IE’s broken DOM and better browsers like FireFox.
Hacks in a nutshell: you have one set of CSS rules that work for IE and another (hidden by way of CSS hacks,) for FireFox and other more compliant browsers. Using CSS hacks is a bad idea (that should have never been suggested) because they depend on something that is ‘broken’.
As an alternative, IE conditional comments make sense because they serve the same purpose as the hacks: to allow us to serve IE only code to IE, and not any other browsers. In addition, IE conditional comments are a feature of IE and not something that is broken.
ON DOCTYPES:
People have written long blathering articles on doctypes and on which ones to use. Being a practically minded person (who keeps reminding my long-winded father to ‘get to the point’,) I wanted to give people the quick- skinny on doctypes:
What are doctypes?
The doctype is a little bit of code that tells the browser how to read your web pages – it tells the browser which (of its many) ‘engines’ to use. As you may have guessed, we have several options.
What doctype should we use in our pages? Your Options:
- HTML 4.01 Strict
- HTML 4.01 Loose
- HTML 4.01 Frameset
You can cut-and-paste any one of these:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
–
Just in case it is not clear, you insert only one (of the doctypes) at the top of your web page. So which one should you use? Use the first one: HTML 4.01 Strict
Final comments:
There are other doctypes but they relate to XHTML … and we know that you shouldn’t use XHTML.
Bye for now.
Stefan Mischook (The Web Heretic)
read more
February 22, 2005
Short answer:
JavaScript is not very important when you look at it from a practical perspective.
OK, why?
Simple really- about 10% of the people on the Internet have their JavaScript turned off – they’re afraid that it might pose some security risk.
Even though that fear is unjustified, the fact remains that you can’t depend on JavaScript working for a significant audience. That means you can’t use JavaScript for any critical work on a public website.
read more
February 21, 2005
The Zen of CSS Design uses websites (derived from the CSS Zen Garden website,) to teach CSS based layout along with a smattering of other web design topics.
NOTE: many of the techniques described in this book depend on hacks that we now know will cause big problems with the next Web Standards compliant version of IE – IE7 will break many common CSS hacks. So don’t buy this book for the CSS advice since it is riddled with the use of hacks.
If you’re really into the ‘design’ aspect of web design, you may want to consider this book.
Note: this is not a beginners book, you need to be comfortable with CSS and HTML/XHTML.
This book reminds of Eric Meyers glossy books on CSS except:
- This book deals with design principles as they relate to web design. Where Meyer’s books are more about the ‘nuts and bolts’ of CSS layout.
- The websites showcased are stunning.
read more
February 21, 2005
In a nutshell: This is a great book for web designers with some experience.
The book’s content is organized into what they call ‘secrets’. A typical ‘secret’ may be few paragraphs to at most, a couple of pages.
This makes it a handy desk reference, as it’s packed with very useful snippets of information that are presented in a concise manner – the author gets to the point quickly.
What does the book cover:
- The ‘tools’ that a web designer can choose from.
- Usability – how to make your websites easier to use.
- Website project management – this chapter was a little boring for me.
- Scripting – but many of the sample scripts are little weak.
- CSS – good discussions of the practical use of CSS.
- Making websites accessible.
- XHTML and HTML – again dealing with the questions people have today.
- and much more.
When it makes sense, there are good examples with each ‘secret’.
– –
I highly recommend this book for active web designers.
read more
February 20, 2005
Preamble: This is an older post, but it is still accurate:
The short answer: These days, the line between a scripting language and a programming language is blurred. As such, in practical application, the differences are meaningless. So the answer is: no.
Some details … what a nerd might tell you: Scripting or writing scripts, is programming within a program. Traditionally you would write scripts to automate certain functionality within another program. Traditionally scripts would have very specific task like for example: reading a text file to extract all the email addresses.
Why use a scripting language?
- Easy to learn – compared to traditional programming languages.
- It takes much less code to do something with scripting than when using a traditional programming language.
read more
February 20, 2005
The web design world is going through major changes, changes I think many web designers are just not aware of.
It comes down to 3 things:
- Blogs/CMS software: these are turn-key template driven web sites. This is not just a visual component – Blogs/CMS systems have built-in functionality (‘engines’) that makes maintaining a website trivial.
- Web site templates: purely a design template, whereas Blogs and CMS offer both visual and functional aspects.
- Pod Casting: the emergence of audio and soon video content on the web at levels never seen before.
These three developments I believe are changing the face of web design, in a way that we have not seen since the first web design software came out years ago.
The days of building websites from scratch will soon fade, and become something very specialized – there are just too many advantages in using a CMS/Blog or a website template.
THE POINT:
As a web designer, you should jump at this opportunity – begin to learn about how you can use web templates and Blogs/CMS to build your own killer websites faster than ever before.
read more
February 19, 2005
XML is another one of the big buzzword these days, it is an important technology that is widely used, but that doesn’t mean you should look for ways to use it.
Technology is there to solve problems, so if the problem warrants the use of a particular piece, then by all means use it, but not just for the sake of using it!
HOW KILLERSITES USES XML
I use XML daily for application server (web servers on steroids) configurations and for simple data storage.
Typically you wouldn’t use XML directly in a web page unless for example, you wanted to create an RSS feed – RSS is not really meant for human eyes, though it is human readable.
You can check out the killersites forum’s RSS feed if you’re curious about XML.
read more
February 19, 2005
When you think your website is done and ready to launch, it’s time to go over this checklist.
I always look for these elements in web sites:
- Clean easy to update design/structure.
- Good usability in the design – and all that implies.
- Fast loading ‘light’ pages.
- Intelligent use of technology – using Flash when it makes sense not because you want a ‘cool’ intro!
- The website’s ability to convey the meaning/message of the website quickly if not instantly.
THE DETAILS
1. Clean easy to update design/structure:
Just a few short years ago the web was full of dancing mice, spinning globes and animated construction workers, things have now changed where design principles are now actually put to good use … amazing!
🙂
A problem with many websites, is that the design is not flexible. Websites constantly change; if you find that putting in a new navigation button is going to take a lot of work, you have to reconsider your design.
You should be able to freely and add and remove elements from your pages with little to no trouble – that only makes sense.
read more
February 19, 2005
More and more there are grumblings in the Java community – the language is showing its age and Java nerds are starting to look elsewhere … slowly.
In their search though, I have found that Java nerds tend to ignore or dismiss PHP … instead they look to Python and marginal languages like Ruby as the potential alternative.
WHAT’S THE DEAL?
I have to ask myself, why are Java nerds ignoring one of the most popular languages in the world? Why are they ignoring a technology endorsed by IBM, Oracle and used by Yahoo?
I think much of it comes down to Java elitism and false perceptions about PHP, it comes down to these points:
- PHP is a scripting language that is easy to learn – Java elitism has a natural dislike for anything easy.
- PHP has a procedural history that makes Java users snicker – despite PHP5’s full blown OO feature set.
- PHP syntax can be a little inconsistent at times – this is true.
On the flip side, Java users seem to ignore some very important facts about PHP:
- PHP is ubiquitous. It’s hard to NOT find a host that supports PHP.
- PHP is fast and scalable – Yahoo proves that.
- PHP easy learn, easy to write and is fairly concise.
- PHP has a huge community where there are plenty of open source tools available.
- PHP can be maintainable: there are database abstraction frameworks (PEAR DB), there are templating frameworks, MVC and other frameworks so that you can build maintainable scalable applications in PHP.
One argument you hear from the Java camp is that PHP is a web application only language … pratically speaking. This is indeed the case but what about Java? Most Java projects are web applications, Java on the desktop is but a small fraction of the Java work being done.
Ok, you have cell phone and other small device work, but the fact of that matter is that most Java projects are web applications.
Beyond Java
Bruce Tate wrote an excellent book (‘Beyond Java’) criticising Java and speculating on what the next big language will be. Not surprisingly, he spent little time on PHP.
Not to take anything away from the book, it’s really good. Nonetheless, from the perspective of someone who wants to make a living, it only makes sense to strongly consider a language that is so well established and easy to work with.
WHAT AM I DOING?
I think for the time being, when it comes to small and medium sized web applications, PHP can’t be beat. I have hung up my Java-shoes and now look to PHP for any new projects.
Stefan Mischook
read more
February 19, 2005
NOTE: This article is theoretical – CSS tables are not supported by the browsers yet, and cannot be used. I wrote this article to make a few points and to expose people to lessons learned in software development: that grids are an excellent way to layout user interfaces.
Stefan
–
Grid layout patterns are commonly used in creating software interfaces – in web design we call them ‘tables’.
But today HTML table based layout is generally frowned upon because:
- HTML tables render/display content in a fixed format/style that might not display properly in certain types of browsers.
- Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong … gosh darn it!
There are other reasons why some web designers will say HTML tables suck:
- HTML tables cause code to be bloated and thus pages will take longer to download.
- HTML tables will make your website less search engine friendly.
- HTML tables will make your websites less accessible.
The last 3 points are myths and should be ignored – I covered that in other articles.
That being said, the first point about tables imposing a fixed format/style (where formatting and structure are intertwined – that’s bad,) is very real and very important. It is so important in fact, that I will do what I can to avoid table based layout despite the extra work and problems this can cause.
It’s a terrible shame
Using a grid/table to create UI’s is intuitive, too bad that table based layouts are so controversial … but there maybe is a light at the end of the web UI tunnel: CSS table layouts.
What the heck are CSS tables?
From the W3C:
‘The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely parallels the visual layout of the table.’
Now in English:
CSS tables are just a set of CSS attributes that you can apply to (probably) div tags to create a ‘table’. Check out this code snippet and things should clear up:
<div class=”table”>
<div class=”row”>
<div class=”cell”>
<p>Yallow!</p>
</div>
</div>
</div>
This is an official W3C specification, I’m not inventing anything here!
So why invent CSS tables when we have HTML tables?
The answer is simple young grasshoppers: to gain the advantage of table based layout while avoiding the problems (mentioned above) with HTML tables:
- HTML tables format content in a fixed structure that might not render properly in certain browsers.
- Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong.
CSS tables can’t be used in any browser today, so why mention them?
I have two reasons why I wrote this article:
- To educate people of this long term possibility and maybe to start stirring things up – it would nice to have this web design tool.
- To make a point about grid based layouts: they have merit and should be considered.
Stefan Mischook
read more
