Ancient Website Design Practices That Beginners Should Avoid Part 1

Door globecom op zo, 2014-12-28 14:28

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.

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

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.

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!