Ancient Website Design Practices That Beginners Should Avoid Part 1
Rean John UeharaThis 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:
- Will it be easy to maintain when it grows?
- Will it be easy to access?
- How about SEO?
- Will it be easy to update/make revision?
- What will it cost?
- How will the users react to it?
iFrame and Tables
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.
Problems how, exactly?
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!
Animation
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.
Images
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.
Music and Video
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.
Your Turn to Share
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!
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Yolanda
Posted 6 days ago 56I 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!
Maziic
Posted 154 days ago 52Pretty cool, I agree with most of this. It’s good info.
David
Posted 180 days ago 50There 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.
begin
Posted 187 days ago 49I didn’t get it, your saying “don’t use images for the menu”, but your
menu is made out of images…?
Phillip
Posted 167 days ago 51Good one and that is true….
I guess they can further explain…..
Stuart
Posted 116 days ago 53Actually, 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.
Michael Francis
Posted 230 days ago 46Not 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.
PSDHA
Posted 231 days ago 45It’s very useful for me.
Thanks.
Miko
Posted 257 days ago 43I complete disagree with tables. They are an important, if not essential component of web design in a content placing and organization point of view.
Rory
Posted 214 days ago 47#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
Katrina Payne
Posted 113 days ago 54The 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?
cincinnati web design
Posted 271 days ago 41I am thankful I had read through your nice article. Very informative and helpful too. It really help me a lot. Thanks! Keep writing one.
Grant
Posted 279 days ago 40Hi
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.
Thanks
builtbybison
shawn
Posted 265 days ago 42Marquee was an OLD SCHOOL style of making text move reserved for “breaking news” sites and the tackiest of commerce sites.
Here’s some info : http://www.quackit.com/html/codes/html_marquee_code.cfm
Islam
Posted 248 days ago 44Even in W3C they ask you not to use it: http://www.w3.org/wiki/HTML/Elements/marquee
Katrina Payne
Posted 113 days ago 55When Netscape Navigator introduced the Blink tag… Microsoft needed something just as aggravating in its web browser.
Thus was created the Marquee tag.
sanjay
Posted 286 days ago 39I 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.
Ash Menon
Posted 287 days ago 38I 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.
Tim
Posted 288 days ago 37You 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.
amarareps
Posted 288 days ago 35I have a few to add to that list:
Headings and subheadings: Do not style them with < strong> tags and tags to increase font ect. Follow semantics so that the web crawlers better understand the hierarchy of data. I can’t tell you how many web designers I know that still do that. I know H1s show up big, just use CSS to make the font smaller. Think of how a chapter book is laid out… Chapters have the biggest headings, and then it goes down from there.
Fonts: Design Zen encourages us to use least amount of tools to get the job dones. In other words, just because there are a million fonts available doesn’t mean that we should use all 1 million of them in a site. Using restraint in design has more of an effect that going overkill in most cases. Mastering that concept as a NOOB will make for a great up and coming career.
Numbered lists: us the proper tags for those too… Again, semantics. Yes, some people still wrap them in paragraph tags – 1. blah2. plop… using and makes for a perfect numbered list.
amarareps
Posted 288 days ago 36oops… this is really embarrassing. My comment above stripped out all of my little tag snippets. LOL
NoeG
Posted 289 days ago 34I cant believe people use use iframes my moms taking an online class and their stupid website uses them I feel like redesigning it for them
Bryan Hadaway
Posted 199 days ago 48Oh man, I’ve been hired by 4-5 college students now to do their web design assignments. It’s atrocious, the junk they’re teaching people on these cheaply thrown together online classes and then charging them money for it.
I’d get a kick out of it if anyone ever wanted to see my college degree. I’m completely self-taught. When I was first starting out about six years ago the things I was teaching myself on a daily basis were light years ahead in quality and standards compliancy than the stuff college students are being taught.
I get that all the time too, I want to redesign my DSL companies’ website. It’s a hard sale to put it lightly to corporate company that makes more money than you could dream of that their website looks like a 5th grader built it.
Thanks, Bryan