Ancient Website Design Practices That Beginners Should Avoid Part 1

Posted in Tips, Web Design3 years ago • Written by 51 Comments

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:

  • 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

Loltable

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!

114 Written ArticlesWebsiteGoogle+

Rean was the editor of 1stwebdesigner. He regularly writes about freelancing, technology, web design, and web development. Rean also writes at a blog dedicated to teaching people how to make money online.

51 Comments Best Comments First
  • Josh Kohlbach

    Thursday, August 4th, 2011 07:05

    26

    Oh god.. they’re still teaching people to use Marquee? what about blink?! That is a worry.

    I think tables are a perfectly legitimate element, but should be used, like you said, exclusively for tabular data.

    +1
  • Yolanda

    Tuesday, May 15th, 2012 09:44

    51

    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!

    0
  • Gavin

    Wednesday, August 3rd, 2011 09:38

    18

    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.

    0
  • Ray

    Wednesday, August 3rd, 2011 02:30

    16

    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.

    0
  • Darren

    Tuesday, August 2nd, 2011 19:00

    14

    Great post. i am begginer so it is very helpful for me thanks alot

    0
  • Trent

    Wednesday, August 3rd, 2011 09:53

    19

    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..

    0
  • Terri Lockerridge

    Wednesday, August 3rd, 2011 10:46

    20

    I like the use of tables on a website. You can create blocks inside of a large block that can be filled with information that will be separate yet, in keeping with the theme of the website. The most effective use in in eCommerce sites.
    The key is to remember less is more and keep it simple. Yet with a splash every now and then to keep people interested and clicking onto links inside the boxes (tables). .

    0
  • Jo

    Wednesday, August 3rd, 2011 16:01

    23

    Nothing worse than going onto a website and getting that auto play booming through my speakers.

    0
    • Tom

      Thursday, August 4th, 2011 10:01

      28

      Or opening 20 tabs and finding the ONE tab that plays music. :(

      0
  • Lauren

    Wednesday, August 3rd, 2011 15:19

    22

    Great Article! Great information provided on a lot of important stuff for companies that may be redesigning their websites as well.

    0
  • Han

    Wednesday, August 3rd, 2011 18:05

    21

    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!)

    0
  • Heather

    Tuesday, August 2nd, 2011 17:02

    12

    There are times when (unfortunately) you need to use tables, inline styles, and images for nav. Mainly I am talking about designing HTML emails. If you have to design those on a regular basis and want them to be viewed correctly in multiple clients all these things are necessary evils. Until everyone catches up, these just won’t die!!!

    0
    • Rean John Uehara

      Tuesday, August 2nd, 2011 17:37

      7

      And that’s the reason why, at an early stage, we should tell every budding designers to STOOOP! :D

      0
  • Kristelle

    Tuesday, August 2nd, 2011 16:15

    4

    I knew about most of these things, except for the images in the navigation, which I’m completely guilty of :-O although I rarely use images for navigation, I have found it appropriate on occasions when tastefully done. But that’s just my personal opinion. Thanks for this great article!

    0
  • prit

    Tuesday, August 2nd, 2011 15:56

    3

    !!! wipe it clean.
    good post :)

    0
  • David

    Tuesday, August 2nd, 2011 14:51

    2

    i use images as navigations sometimes. it just depends on how good of a designer you are. if your good at using photoshop for that kind of stuff, i say go right ahead.

    0
    • Rean John Uehara

      Tuesday, August 2nd, 2011 16:27

      5

      I’ve seen sites that use images in their navigation, but the problem here is the loading speed of a website. I’ve read about 2 years ago that it only takes 7 seconds for a visitor to leave your site if it doesn’t load within that time. Another problem is that not all have high-speed internet connection. But yes, if the design is impressive I’ll wait for it. :p

      0
  • Jeremy

    Tuesday, August 2nd, 2011 19:54

    11

    This is a decent list, though it does need a little clarification. As others have commented, there is nothing wrong with using images in navigation; as long as you do it properly. Using sprites, css and other tricks (like sliding doors) to create your sites navigation is completely valid web design practice. The text in your navigation, however, should always be HTML text (in other words the text shouldn’t be on the image).

    Tables – as you’ve stated – should only be used for tabular data; just don’t make the mistake of thinking they are “evil” because they’ve been abused in the past (a crime that I helped perpetrate early in my career sadly). Tables do have their place in web design so make sure you don’t ignore them.

    Jpeg images are used for more than just high quality photos. The compression one can achieve with this file format is so good in fact, that one should always check to see whether or not a jpeg or gif will give them a smaller file size when creating images. There is a certain “art” to getting the biggest bang out of your web images. File compress, sprites and background repeat techniques will help you keep your page weight down without having to sacrifice presentation.

    Other things new web designers should avoid include outdated elements like the “Font” tag and “Blink” tag. Inline styles are a no-no as well. The only exception to this (that I’m aware of) is with HTML emails. Unfortunately those little buggers still require one to use archaic HTML tags; just don’t carry over bad practice from email to web page design, and never, ever use the “blink” tag, it is pure evil :) .

    0
  • siggi

    Tuesday, August 2nd, 2011 18:31

    10

    for the very brave:
    http://www.b-ostendorf.de/

    caution! may cause eye-cancer ;-)

    0
  • Peter

    Tuesday, August 2nd, 2011 12:30

    9

    Nice post, i have been using some ancient things, didn’t know that until i read this great post, thanks

    0
  • Adam

    Tuesday, August 2nd, 2011 18:27

    8

    There is nothing wrong with using images for navigation if done properly utilizing sprites and CSS.

    0
  • Karl

    Wednesday, August 3rd, 2011 23:31

    25

    Good post, thanks alot.

    0
  • James

    Tuesday, August 2nd, 2011 12:19

    1

    In-line styles make me want to cut myself.

    0
    • Sandy K. Rative

      Tuesday, August 2nd, 2011 16:38

      6

      @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.

      0
      • Rean John Uehara

        Tuesday, August 2nd, 2011 17:36

        13

        A very good example of a migraine-inducing webpage:

        0
        • Francois

          Wednesday, August 3rd, 2011 22:36

          24

          Ouch, my eyes are hurting ! !!

          0
    • Darren

      Tuesday, August 2nd, 2011 19:02

      15

      ya buddy in-line style is not good for professional web designer.

      0
  • Michael Francis

    Tuesday, October 4th, 2011 04:22

    41

    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.

    0
  • Miko

    Wednesday, September 7th, 2011 07:20

    39

    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.

    0
    • Katrina Payne

      Sunday, January 29th, 2012 23:37

      49

      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?

      0
    • Rory

      Thursday, October 20th, 2011 15:18

      42

      #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

      0
  • Ben

    Wednesday, November 16th, 2011 16:54

    44

    I didn’t get it, your saying “don’t use images for the menu”, but your
    menu is made out of images…?

    0
    • Phillip

      Tuesday, December 6th, 2011 05:14

      46

      Good one and that is true….

      I guess they can further explain…..

      0
      • Stuart

        Thursday, January 26th, 2012 14:32

        48

        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.

        0
  • Maziic

    Monday, December 19th, 2011 22:31

    47

    Pretty cool, I agree with most of this. It’s good info.

    0
  • David

    Wednesday, November 23rd, 2011 10:03

    45

    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.

    0
  • Grant

    Tuesday, August 16th, 2011 21:31

    38

    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.

    0
    • Islam

      Friday, September 16th, 2011 16:51

      40

      Even in W3C they ask you not to use it: http://www.w3.org/wiki/HTML/Elements/marquee

      0
    • Katrina Payne

      Sunday, January 29th, 2012 23:39

      50

      When Netscape Navigator introduced the Blink tag… Microsoft needed something just as aggravating in its web browser.

      Thus was created the Marquee tag.

      +1
  • sanjay

    Tuesday, August 9th, 2011 04:14

    37

    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.

    0
  • Matthew

    Friday, August 5th, 2011 18:57

    30

    There are times when inline styles are actually best (besides HTML email, which is another conversation entirely but if you’re going to use CSS in it, then inline is the most stable way to do it). My general rule of thumb is to use external stylesheets for site-wide or section-wide styles, on-page stylesheets for those rare instances when a particular page has unique requirements, and inline styles if a particular element requires styles that absolutely are not and will not be used anywhere else.

    0
  • Simon Day

    Thursday, August 4th, 2011 15:50

    27

    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!

    0
    • Rean John Uehara

      Thursday, August 4th, 2011 16:19

      29

      Woah, that’s shocking. And probably one of the best reasons to not rely on “drag and drop” applications to build a website!

      0
  • Josh Bedo

    Friday, August 5th, 2011 14:26

    31

    I completely agree with Simon Day’s comment I think using images for a menu is fine as long as you don’t over do it. I can think of some instances where it would be more beneficial if you used an image sprite for a menu instead of relying on @font-face or Cufon. Mostly because with an image you aren’t using javascript so people with it turned off will still see the same thing and you don’t have to worry about browser support or how the anti-aliasing looks different on Safari compared to how it looks in Chrome.

    I also agree on the tables, I think they should be used strictly for tabular data. I know a few people that teach web development and enforce coding with tables over div tags still. Another good tip would probably be to test the site in multiple browsers not just one even if browser statistics say most users use a certain browser.

    0
  • NoeG

    Saturday, August 6th, 2011 02:46

    32

    I 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

    0
    • Bryan Hadaway

      Friday, November 4th, 2011 10:39

      43

      Oh 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

      0
  • Ash Menon

    Monday, August 8th, 2011 10:21

    36

    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.

    0
  • Tim

    Sunday, August 7th, 2011 20:47

    35

    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.

    0
  • Amaran

    Sunday, August 7th, 2011 10:04

    33

    I 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.

    0
    • Amaran

      Sunday, August 7th, 2011 10:05

      34

      oops… this is really embarrassing. My comment above stripped out all of my little tag snippets. LOL

      0
  • John L.

    Wednesday, August 3rd, 2011 09:27

    17

    I would agree that ideally navigation text should be html/css, but when many of the css text/font fx don’t work on some browsers (I’m looking at you IE), its difficult to get cross platform uniformity without resorting to sprited images.

    -1
  • Yolanda

    Tuesday, May 15th, 2012 09:44

    51

    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!

    0
  • Maziic

    Monday, December 19th, 2011 22:31

    47

    Pretty cool, I agree with most of this. It’s good info.

    0
  • David

    Wednesday, November 23rd, 2011 10:03

    45

    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.

    0
  • Ben

    Wednesday, November 16th, 2011 16:54

    44

    I didn’t get it, your saying “don’t use images for the menu”, but your
    menu is made out of images…?

    0
    • Phillip

      Tuesday, December 6th, 2011 05:14

      46

      Good one and that is true….

      I guess they can further explain…..

      0
      • Stuart

        Thursday, January 26th, 2012 14:32

        48

        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.

        0
  • Michael Francis

    Tuesday, October 4th, 2011 04:22

    41

    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.

    0
  • Miko

    Wednesday, September 7th, 2011 07:20

    39

    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.

    0
    • Rory

      Thursday, October 20th, 2011 15:18

      42

      #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

      0
    • Katrina Payne

      Sunday, January 29th, 2012 23:37

      49

      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?

      0
  • Grant

    Tuesday, August 16th, 2011 21:31

    38

    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.

    0
    • Islam

      Friday, September 16th, 2011 16:51

      40

      Even in W3C they ask you not to use it: http://www.w3.org/wiki/HTML/Elements/marquee

      0
    • Katrina Payne

      Sunday, January 29th, 2012 23:39

      50

      When Netscape Navigator introduced the Blink tag… Microsoft needed something just as aggravating in its web browser.

      Thus was created the Marquee tag.

      +1
  • sanjay

    Tuesday, August 9th, 2011 04:14

    37

    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.

    0
  • Ash Menon

    Monday, August 8th, 2011 10:21

    36

    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.

    0
  • Tim

    Sunday, August 7th, 2011 20:47

    35

    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.

    0
  • Amaran

    Sunday, August 7th, 2011 10:04

    33

    I 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.

    0
    • Amaran

      Sunday, August 7th, 2011 10:05

      34

      oops… this is really embarrassing. My comment above stripped out all of my little tag snippets. LOL

      0
  • NoeG

    Saturday, August 6th, 2011 02:46

    32

    I 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

    0
    • Bryan Hadaway

      Friday, November 4th, 2011 10:39

      43

      Oh 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

      0
  • Josh Bedo

    Friday, August 5th, 2011 14:26

    31

    I completely agree with Simon Day’s comment I think using images for a menu is fine as long as you don’t over do it. I can think of some instances where it would be more beneficial if you used an image sprite for a menu instead of relying on @font-face or Cufon. Mostly because with an image you aren’t using javascript so people with it turned off will still see the same thing and you don’t have to worry about browser support or how the anti-aliasing looks different on Safari compared to how it looks in Chrome.

    I also agree on the tables, I think they should be used strictly for tabular data. I know a few people that teach web development and enforce coding with tables over div tags still. Another good tip would probably be to test the site in multiple browsers not just one even if browser statistics say most users use a certain browser.

    0
  • Matthew

    Friday, August 5th, 2011 18:57

    30

    There are times when inline styles are actually best (besides HTML email, which is another conversation entirely but if you’re going to use CSS in it, then inline is the most stable way to do it). My general rule of thumb is to use external stylesheets for site-wide or section-wide styles, on-page stylesheets for those rare instances when a particular page has unique requirements, and inline styles if a particular element requires styles that absolutely are not and will not be used anywhere else.

    0
  • Simon Day

    Thursday, August 4th, 2011 15:50

    27

    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!

    0
    • Rean John Uehara

      Thursday, August 4th, 2011 16:19

      29

      Woah, that’s shocking. And probably one of the best reasons to not rely on “drag and drop” applications to build a website!

      0
  • Josh Kohlbach

    Thursday, August 4th, 2011 07:05

    26

    Oh god.. they’re still teaching people to use Marquee? what about blink?! That is a worry.

    I think tables are a perfectly legitimate element, but should be used, like you said, exclusively for tabular data.

    +1
  • Karl

    Wednesday, August 3rd, 2011 23:31

    25

    Good post, thanks alot.

    0
  • Jo

    Wednesday, August 3rd, 2011 16:01

    23

    Nothing worse than going onto a website and getting that auto play booming through my speakers.

    0
    • Tom

      Thursday, August 4th, 2011 10:01

      28

      Or opening 20 tabs and finding the ONE tab that plays music. :(

      0
  • Lauren

    Wednesday, August 3rd, 2011 15:19

    22

    Great Article! Great information provided on a lot of important stuff for companies that may be redesigning their websites as well.

    0
  • Han

    Wednesday, August 3rd, 2011 18:05

    21

    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!)

    0
  • Terri Lockerridge

    Wednesday, August 3rd, 2011 10:46

    20

    I like the use of tables on a website. You can create blocks inside of a large block that can be filled with information that will be separate yet, in keeping with the theme of the website. The most effective use in in eCommerce sites.
    The key is to remember less is more and keep it simple. Yet with a splash every now and then to keep people interested and clicking onto links inside the boxes (tables). .

    0
  • Trent

    Wednesday, August 3rd, 2011 09:53

    19

    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..

    0
  • Gavin

    Wednesday, August 3rd, 2011 09:38

    18

    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.

    0
  • John L.

    Wednesday, August 3rd, 2011 09:27

    17

    I would agree that ideally navigation text should be html/css, but when many of the css text/font fx don’t work on some browsers (I’m looking at you IE), its difficult to get cross platform uniformity without resorting to sprited images.

    -1
  • Ray

    Wednesday, August 3rd, 2011 02:30

    16

    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.

    0
  • Darren

    Tuesday, August 2nd, 2011 19:00

    14

    Great post. i am begginer so it is very helpful for me thanks alot

    0
  • Heather

    Tuesday, August 2nd, 2011 17:02

    12

    There are times when (unfortunately) you need to use tables, inline styles, and images for nav. Mainly I am talking about designing HTML emails. If you have to design those on a regular basis and want them to be viewed correctly in multiple clients all these things are necessary evils. Until everyone catches up, these just won’t die!!!

    0
    • Rean John Uehara

      Tuesday, August 2nd, 2011 17:37

      7

      And that’s the reason why, at an early stage, we should tell every budding designers to STOOOP! :D

      0
  • Jeremy

    Tuesday, August 2nd, 2011 19:54

    11

    This is a decent list, though it does need a little clarification. As others have commented, there is nothing wrong with using images in navigation; as long as you do it properly. Using sprites, css and other tricks (like sliding doors) to create your sites navigation is completely valid web design practice. The text in your navigation, however, should always be HTML text (in other words the text shouldn’t be on the image).

    Tables – as you’ve stated – should only be used for tabular data; just don’t make the mistake of thinking they are “evil” because they’ve been abused in the past (a crime that I helped perpetrate early in my career sadly). Tables do have their place in web design so make sure you don’t ignore them.

    Jpeg images are used for more than just high quality photos. The compression one can achieve with this file format is so good in fact, that one should always check to see whether or not a jpeg or gif will give them a smaller file size when creating images. There is a certain “art” to getting the biggest bang out of your web images. File compress, sprites and background repeat techniques will help you keep your page weight down without having to sacrifice presentation.

    Other things new web designers should avoid include outdated elements like the “Font” tag and “Blink” tag. Inline styles are a no-no as well. The only exception to this (that I’m aware of) is with HTML emails. Unfortunately those little buggers still require one to use archaic HTML tags; just don’t carry over bad practice from email to web page design, and never, ever use the “blink” tag, it is pure evil :) .

    0
  • siggi

    Tuesday, August 2nd, 2011 18:31

    10

    for the very brave:
    http://www.b-ostendorf.de/

    caution! may cause eye-cancer ;-)

    0
  • Peter

    Tuesday, August 2nd, 2011 12:30

    9

    Nice post, i have been using some ancient things, didn’t know that until i read this great post, thanks

    0
  • Adam

    Tuesday, August 2nd, 2011 18:27

    8

    There is nothing wrong with using images for navigation if done properly utilizing sprites and CSS.

    0
  • Kristelle

    Tuesday, August 2nd, 2011 16:15

    4

    I knew about most of these things, except for the images in the navigation, which I’m completely guilty of :-O although I rarely use images for navigation, I have found it appropriate on occasions when tastefully done. But that’s just my personal opinion. Thanks for this great article!

    0
  • prit

    Tuesday, August 2nd, 2011 15:56

    3

    !!! wipe it clean.
    good post :)

    0
  • David

    Tuesday, August 2nd, 2011 14:51

    2

    i use images as navigations sometimes. it just depends on how good of a designer you are. if your good at using photoshop for that kind of stuff, i say go right ahead.

    0
    • Rean John Uehara

      Tuesday, August 2nd, 2011 16:27

      5

      I’ve seen sites that use images in their navigation, but the problem here is the loading speed of a website. I’ve read about 2 years ago that it only takes 7 seconds for a visitor to leave your site if it doesn’t load within that time. Another problem is that not all have high-speed internet connection. But yes, if the design is impressive I’ll wait for it. :p

      0
  • James

    Tuesday, August 2nd, 2011 12:19

    1

    In-line styles make me want to cut myself.

    0
    • Sandy K. Rative

      Tuesday, August 2nd, 2011 16:38

      6

      @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.

      0
      • Rean John Uehara

        Tuesday, August 2nd, 2011 17:36

        13

        A very good example of a migraine-inducing webpage:

        0
        • Francois

          Wednesday, August 3rd, 2011 22:36

          24

          Ouch, my eyes are hurting ! !!

          0
    • Darren

      Tuesday, August 2nd, 2011 19:02

      15

      ya buddy in-line style is not good for professional web designer.

      0

Comments are closed.

54.205.7.136 - unknown - unknown - US