Total Followers 132,503
This article is intended for beginners in the field of web designing and web development. It talks about old design practices that have died off several years ago, but up to now some are still being used. The goal is to discuss why these practices are bad and to instill in the minds of budding designers and developers that doing the right thing even if it’s hard to do and hard to learn will greatly pay off in the future.
For professionals and experts in the field, we need your knowledge and opinion here!
When designing you should always think several steps ahead because the initial design can make or break everything. Always ask yourself the following:
For employers/clients out there, there will be designers/developers who will sacrifice future convenience for a little comfort at the present moment. Like doing things the wrong way (because you won’t notice the difference anyway) because it’s easier and faster to do. For goodness sake designers and developers, do the right thing from the start even if it’s harder to do and harder to learn.
Wait, what did I just talk about?
First, with tables. <table> was designed for tabular data, not for structuring websites. It’s for showing figures like in Microsoft Excel. Obligatory, it was once a fad to use tables to structure websites, but that was pre-CSS. If you made the reckless mistake of structuring a website using tables, I’m afraid if you do not correct it soon, it will be a snowball of problems in the future.
1. SEO – according to a friend of mine who’s into web development, although content inside a table is crawled by search engines it is still better to use <div> because it is crawled first. When it comes to crawlers, the first thing they see is the most important.
2. Code and Maintainability – wait, code is for coders, not for designers! Wrong. Even if you consider yourself a pure designer, you should still learn how to code. Especially learn the workings of HTML and CSS. Now, tables are very hard to maintain, especially when the website is a large one. Aside from the labyrinth-like nested code of tables, there is the issue of maintaining it properly. In cases where a large website, using tables, needs to be updated..it will be hard to pull data and restructure the website. That I promise you.
How about iFrames? iFrames are cool. You can load a single frame without affecting the other frames. It can also be used to..wait, what? iFrames are more ancient than tables (lol). Users will have trouble bookmarking an iFramed website because there are literally many pages in one page.
So, what should a budding designer and developer use?
For the love of Batman, use CSS and learn AJAX. <div> is much better, and was designed for this very purpose: easy to maintain. You want to load data easily without refreshing the whole page? Learn AJAX!
Even Nathan Fillion is disappointed.
Even the slightest movement can be detected by your peripheral vision. Humans have evolved with very sensitive peripheral vision to avoid a predator’s attack. Over thousands of years, once we’ve all become conveniently secured from vicious animals, the almost-instant reflex is still with us, making slight movements outside our focus irritating.
This is also the reason why advertisements with animations should die, especially on blogs and news websites where people spend a great deal of time reading, with eyes focused on each line. A slight blink to the right will instantly remove a reader’s attention, although in due time people will learn to filter them out, it still bugs many people including me.
This brings us to marquee. They were once hot, at least for noobs, I even used to add one on every webpage during my freshman year in college. To beginners out there, NEVER! Sadly, I know a couple of high schools and colleges that teach their students to use marquee.
No, please, don’t use images for your navigation. Aside from sacrificing the website’s loading speed, you are also telling the whole world that you’re greatly outdated.
Let’s take bad practice to another level: different image on hover. Never. Even if your client says so, fight to the death for your right to practice what is proper.
If the website’s purpose does not require it to display images, it’s better to design using CSS. I’ve seen websites use background images that load like a turtle, what’s worse is that they’re full 1024×800 images.
Instead of using images for navigation, use text and CSS for effects.
Then there’s the question of what image format to use. I’m no expert when it comes to this so I’ll refer you to a post by Rachel Arandilla (one of 1stwebdesigner’s regular contributors) about Different Image Formats. It should give you a good idea of what image format to use for the web. Mostly, it’s PNG and GIF, with an exception of JPEG for high-quality photos. Still, visit and read the article for an in-depth explanation.
Specifically background music. A startled visitor will ask, “where is the boombox?!” and will just close the site, a 100% bounce.
I’m not a fan of name calling, but just this once I will name one website that auto-plays its video: Sidereel.com. Follow these easy steps: 1. select one TV show and click it, 2. wait for it…, 3. wait for it…, 4. did you hear it? It’s auto-play!
In any case, never auto-play anything. If you need to auto-play it, at least have the decency to start it on mute.
These are very basic, and very old, practices that were once hot. A lot of has changed since these outdated methods were considered cool or good, but there are still people who are go down the wrong path. So, how do we prevent this from happening? By telling the world the correct practices. Now it’s your turn to share!
Ancient practice is ancient. Watch out for part 2!
Get The Only Freelancer crash course you will ever need to read!
Rean is the editor of 1stwebdesigner. He regularly writes about freelancing, technology, web design, and web development. Rean also writes at Knowledge Salad, a blog filled with weird and interesting facts. One of his goals is to help his fellow Filipinos earn money online, to help them build a career out of working from home, just like what he has been doing for years now.
Tuesday, May 15th, 2012 09:44
I do agree with the iframes. Iframes are an annoying way to say, “Hey! I’m an amateur!” I do think tables are needed, but not as often. Great post!
Monday, December 19th, 2011 22:31
Pretty cool, I agree with most of this. It’s good info.
Wednesday, November 23rd, 2011 10:03
There are two things I want to say:
First, I wonder if I got lucky with my college class because I see people here bashing other college web design classes and my class taught me these same rules (div over table, images, etc). Go USU.
Second, I AGREE COMPLETELY with using div tags instead of tables. I just took over a website that was built by tables before and it is SO HARD to change anything on it! I have redone a lot of it with div tags but still have forever to go. But now that the home page is back to div tags it takes only a minute or two to update it.
Wednesday, November 16th, 2011 16:54
I didn’t get it, your saying “don’t use images for the menu”, but your
menu is made out of images…?
Tuesday, December 6th, 2011 05:14
Good one and that is true….
I guess they can further explain…..
Thursday, January 26th, 2012 14:32
Actually, you’ll find that the menu isn’t a pure image. It’s a CSS bounding box, with an image inside of it. In other words, it’s flexible. It’s pure CSS. The image can be changed easily, it can be found easily using the inner tags and isn’t overly irksome on loading.
Tuesday, October 4th, 2011 04:22
Not bad advice, and comments.
How does your friend know that search engines favor content in a DIV over content in a TABLE? That would be the only reason I would change the structure of my website(s) and remove the tables.
Wednesday, September 7th, 2011 07:20
I complete disagree with tables. They are an important, if not essential component of web design in a content placing and organization point of view.
Thursday, October 20th, 2011 15:18
#learncss {
float:right;
margin-right:5px;
text-align:center; }
To Think you would have had an empty table cell to position this text on the right hand side of the container
Sunday, January 29th, 2012 23:37
The only tables you should be using in a web site are SQL Tables, and the wooden table you prop your computer and coffee on top.
End of statement, end of point.
If you cannot be bothered to learn CSS, JQuery and HTML5′s methods of handling these items, as well as the paradigms of thoughts that go into xhtml… then you should never design a website ever again.
Your website needs to be read by robots. In fact your website will be read by a robot, who then translates it into a method a human can observe! Some use the standard robots like Firefox, Internet Explorer, Opera, Chrome, Safari, Rekonq and others…. and it might confuse you, “I’m designing for a user.”
No… you are designing for a robot, to display stuff to the user. If you confuse the robot, which using the table tag as erronously as you have been, obviously, you make it hard for the user to see your website. Sure, at one time, the robots were recoded to try to guess what the erronous code of the table tag was suppose to be. That only made it HARDER to debug websites… not easier.
So, be kind to our robot friends… don’t use the table tag. Okay?
Tuesday, August 16th, 2011 21:31
Hi
Nice article and it helps to know what more experienced designers think of the aspects that learners and beginners should stay away from. You lost me on the marquee bit? What is it exactly and what function is it supposed to fulfill.
Friday, September 16th, 2011 16:51
Even in W3C they ask you not to use it: http://www.w3.org/wiki/HTML/Elements/marquee
Sunday, January 29th, 2012 23:39
When Netscape Navigator introduced the Blink tag… Microsoft needed something just as aggravating in its web browser.
Thus was created the Marquee tag.
Tuesday, August 9th, 2011 04:14
I know some designers that uses image to design a website, if the mock up size is 1024×900 they will slice the whole image and put it in the website. And the worst thing about this, they call themselves a better designer! lol.
Monday, August 8th, 2011 10:21
I disagree with the part about iFrames and tables. Yes, they’re outdated when it comes to displaying proper content. Tabs can do what we used to rely on iframes for previously, and divs can usually do the work for tables. But iframes and tables still have their uses, and shouldn’t be completely kicked out of the curriculum. Iframes, for example, are the key for a dynamic image/file upload (pseudoAJAX) that I came up with. And tables are still useful for displaying lists. As for search engines prioritizing divs over tables, I’m sorry, but I think that’s fake. I can’t believe that any search engine would be taught that regardless of their actual content, a div is more important than a table.
Sunday, August 7th, 2011 20:47
You cannot call structuring with tables just a “fad”. It was a bonafide way to design sites, just as CSS is right now and probably won’t be 10 years from now.
Also, ALL HTML emails MUST be designed using tables, because that’s what email programs support. Tables for structuring are, unfortunately, still very relevant.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Simon Day
Thursday, August 4th, 2011 15:50
I have seen some truly horrendous code come my way for redesigns. One had 16,000 lines of code in the HTML but the page only contained 4 links, 5 paragraphs and 5 images o.O
I also disagree with images for navigation. This is fine as long as the text for the link is there. I still do this on around 30% of my designs and there really isn’t anything wrong with this as long as care is taken.
You did miss a biggy in your list…
Just because you can slice and export a design in software like ImageReady doesn’t mean you should! My latest client had serious SEO problems and when I looked at the HTML it was images for everything and dozens of spacer images for the layout. His whole site didn’t contain a single piece of text (Even the alt text was blank). Never, ever, ever use a programme to generate the HTML for you. I’ve yet to see a single one where the code it produced wasn’t anything but dreadful!
Rean John Uehara
Thursday, August 4th, 2011 16:19
Woah, that’s shocking. And probably one of the best reasons to not rely on “drag and drop” applications to build a website!
Trent
Wednesday, August 3rd, 2011 09:53
i really like your post and indeed many things you have discussed which are not good to use i was using it.. but after reading your post my vision is cleared..
Gavin
Wednesday, August 3rd, 2011 09:38
I agree with all of these minus the images for navigation. There are somethings css can’t do that a nice sprite can. Coding images for your nav is brilliant if done correctly. I’m not saying the actual menu item should be an image, always use text for your nav but to make it look good, there is nothing wrong with images.
Ray
Wednesday, August 3rd, 2011 02:30
I am guilty of using some of these old style techniques. It’s hard to teach an old dog new tricks. Speed is a big concern. Poorly coded pages with all kinds of things loading up large images, flashy animated stuff, and all that looks nice, but can slow a page or website down considerably. If a page isn’t mostly readable in a couple of seconds I don’t stick around long, and I doubt others will either.
Han
Wednesday, August 3rd, 2011 18:05
Images are fine in navigation as long as they are correctly marked up and can be read by search engines and screen readers. Sprites are the perfect example of this add the correct text in the box and use css to move it far far away from the page (text-indent: -9999px <- though theres some controversy around that too lol!)
Lauren
Wednesday, August 3rd, 2011 15:19
Great Article! Great information provided on a lot of important stuff for companies that may be redesigning their websites as well.
James
Tuesday, August 2nd, 2011 12:19
In-line styles make me want to cut myself.
Sandy K. Rative
Tuesday, August 2nd, 2011 16:38
@James: Ditto.
Also: White content text (12pt or smaller) on a black page background. That’s always good to induce a migraine that lasts for days.
Rean John Uehara
Tuesday, August 2nd, 2011 17:36
A very good example of a migraine-inducing webpage: http://www.jkrowling.com/textonly/en/
Francois
Wednesday, August 3rd, 2011 22:36
Ouch, my eyes are hurting ! !!
Darren
Tuesday, August 2nd, 2011 19:02
ya buddy in-line style is not good for professional web designer.
Karl
Wednesday, August 3rd, 2011 23:31
Good post, thanks alot.
Jo
Wednesday, August 3rd, 2011 16:01
Nothing worse than going onto a website and getting that auto play booming through my speakers.
Tom
Thursday, August 4th, 2011 10:01
Or opening 20 tabs and finding the ONE tab that plays music. :(
Darren
Tuesday, August 2nd, 2011 19:00
Great post. i am begginer so it is very helpful for me thanks alot