Website Design – Common Mistakes and How to Avoid Them

Website Design – Common Mistakes and How to Avoid Them

Written by: Nicola Choi Posted on: 22nd January 2018 Share this post:

Why Website Design is Crucial

So, why is website design crucial?

For quite some time, businesses have associated websites with marketing. And this misconception may have set them back in more ways than one. There is a lot more to a website than just marketing. It affects nearly every aspect of your business’ online presence, from traffic and SEO to click-through rates and lead conversion.

Most businesses are under the wrong impression that running a website is merely a part of their marketing efforts.  But it is a lot more than that. Your website is your brand’s identity on a platform that is being accessed by billions of people across the globe at this very moment. It’s your business in a URL.

It certainly doesn’t sound like just another marketing tool now, does it?

What Statistics Have to Say

Statistics tell us that:

  • Web design influences close to 94 percent of first impressions. It implies that bad web design is the biggest reason why a visitor mistrusts or rejects a site.
  • As many as 75 percent of users admit that they judge a company’s credibility based on their website design.
  • When a visitor has a bad user experience, there is an 88 percent possibility that they will never return to that particular website again.

Many factors need to be considered when aiming to create an appealing first impression. The spacing between elements, structure, symmetry, colours, amount of text and the font all leave an impact on the overall design of your website.

These elements need to be mixed and matched in the right proportion to transform it into an interface that draw customers towards it.

It’s the Right Question

You can only find the right answer if you ask the right question. So if you’re asking yourself why web design is important for your business, you’re already on the right track.

Research recently conducted to try understand the impact website design has on various aspects of a business may help you understand the importance of having a well-executed website.  The participants in the study were made to go through several healthcare websites. And they were asked which websites they disliked visually and which they found visually pleasing. They were also questioned about the factors that led them to trust or mistrust a particular website. The factors they listed were:

  • Complicated layout
  • Too many advertisements and annoying pop-ups
  • Small font size or difficult to read content
  • Website design that fails to raise curiosity
  • Websites that took too long to respond

When participants were asked about the websites they disliked, 94 percent of the participants cited website design as the most influential factor. Content came in lower on the priority list.

However, this doesn’t imply that content is any less important than website design.

When the same participants were asked about the websites they found easy to trust, 83 percent of the participants said it was the quality and usefulness of content that made them like the website.

When asked further about why they liked the content, they said it was fresh, informative, unbiased, clear and relevant to their requirements.

This helps us to deduce that when a visitor rejects a website, it is mostly due to faulty design. But when they like a website, it is mostly because of the content inside.

The Better Half of Content

Content and website design are the two pillars of a good website. It is therefore illogical to try to ascertain which is more important than the other. Even if you have quality content to provide to your readers, it will be of little use if the interface of your website makes it impossible for the viewer to even stay on your page.

Similarly, if your website is rich in design but lacks the basic quality of content that visitors expect when they arrive at your website, the rich design will amount to nothing.

It is therefore recommended that you find a perfect balance between the quality of content and sophistication of design.

But the great news is that search engines will do this for you. Your site will never rank highly on the search engine results page if they are not convinced that your site is as useful as it is good looking.

Because ‘It’s Complicated’ with SEO

Website design shares a complicated relationship with SEO. While website design is more dynamic in nature, SEO is here to stay for a long time. The design fundamentals that are popular today can become outdated tomorrow. Therefore every business is required to look at design trends with a long-term strategy in mind.

While current trends shouldn’t be completely ignored, one shouldn’t get too carried away by the fleeting design trends either.

You may have noticed a new design pattern that many websites have adopted in which the website seems to go on like a long scroll. This design is known as parallax. Website owners have taken a liking towards it because they believe that it keeps the users engaged.

But just because website owners like it, it doesn’t mean that search engines have to as well. And they have no reason to be a big fan of it because this parallax design decimates the traditional structure of websites and changes the way crawlers have been operating for years.

While it is too soon to arrive at a conclusion regarding the future scope of parallax design, one thing is for sure. It may not excite visitors for years to come and can have negative implications on your rankings as well.

On the other hand, we have responsive website design. Search engines clearly have an inclination towards this design. You cannot blame them, because we are inching closer towards a mobile-optimised Internet world.

Websites having responsive website design have a reduced risk of suffering from the consequences of hosting duplicate content. This type of design makes it unnecessary for businesses to run multiple websites. They are also known to be extremely effective at lowering bounce rate.

There is plenty of evidence to prove that each design feature you include in your website, whether it is the structure of your HTML page or the amount of Flash used, impacts your search engine rankings. However, the direct implications of using different design trends on SEO is still harder to understand.

Impact on Branding

Not every design element that you use on your website should be associated with your brand image. But one also cannot deny that each design element leaves its own impression on the overall brand image of your company.

When a visitor is browsing through your company’s website, they are forming an image about your brand. If your website has too many pop-ups, you could be mistaken to be a brand that does not really give much priority to a customer’s UX experience.

It takes a lot of effort for brands to create an image that visitors recognise as trustworthy.

One can think of branding as a long-term investment in which every business has to make periodic contributions. One can also think of brand image as a perception. It is ultimately about what a customer perceives a brand to be.

For example, a brand like Nike is perceived to be a brand all about movement, sport and flexibility. It is a dynamic brand, so any design or visual audio content that contradicts this can be counterproductive. The efforts taken for creating the brand image of such a company are going to be a lot different from those of companies belonging to other niches.

Everything contributes to this perception that slowly builds up in an individual’s mind about a particular brand. In fact right from the first interaction they have with it. Whether it is the first advertisement that they come across, or the first time they visit its commercial outlet. Everything leaves its own mark.

From the logos, trademarks, names, packaging and colours you use in  store, or your website, everything has a direct impact on your overall brand image.

Because Hey, Everybody Else Has It!

Everybody has a website these days, whether it’s an MNC, start-up or a freelancer. No matter which field a business belongs to, they are only taken seriously if they own a website.

But merely being there is not enough. You need to have a presence that grabs their attention, that is trustworthy. Only when you are able to establish this can you set yourself apart from your competition.

When people are told that websites are important, they instantly design a template-based website or get a low-cost, poorly designed website that only does more harm than good.

Because Business Cards Are Extinct

Years ago, you could meet up with someone, exchange business cards and get yourself a new client. But times have changed. The address and phone number on a business card may not be the same after a few years but a website is here to stay for a long time. Business cards are out of fashion now, and has been replaced by websites.

You likely have an Internet enabled Smartphone in your pocket. So does everybody else around you. If you want to explain to someone what your business does, you could save yourself the effort by simply opening your website. And this is why we believe that business cards, to an extent, have been made redundant by company websites.

First Impression Counts

The first impression is definitely the last impression. With tougher competition in the market today, your prospective customers have too many options when it comes to a particular product or service.  It makes perfect sense for them to go to your competitor if they are dissatisfied with your service.

This makes it even more important for you to make the right first impression by developing a top-notch website.

The world is moving towards the trend of consuming more  visual content than written. It is consistent with the fact that people prefer to consume bite-sized information than a long, detailed explanation on the same topic. Therefore your website is required to have the right visual appeal in order to retain visitors.

Looks definitely matter. A user decides whether they want to interact with your business or not based on how good your website looks. One wrong selection of a design element and you may lose your visitor.

Here’s an interesting statistic. It comes from a study wherein participants were shown a website for about 0.5 seconds and were asked questions about its visual appeal. It was found that users take only about that much time to decide whether they should stay on a website or leave it.

This indicates that website designers have just 0.5 seconds to create an impression about their brand.

Later, the user’s exposure to websites was restricted to just 0.05 seconds and the results were still found to be consistent. So  you have 0.05 seconds to create an impression that is good enough to convert your leads into clients.

FORMATTING RELATED MISTAKES

Going out there in such a competitive market without an official website is like going on a fishing trip and leaving the stick and bait behind.

But worse than not having a website is having a poorly designed website. When a business doesn’t have a website it is neither attracting  or repelling prospective customers online. It is a no gain, no loss situation.

In this section we discuss some of the biggest mistakes that web designers make when designing a website:

The Hard-To-Decipher Website

Attention is a rare commodity online. A visitor who is willing to pay attention to your site shouldn’t turn away because it took them an eternity to figure out what your website is about. Remember, a few seconds is all that you have to make a visitor excited about delving deeper into your website.

Your site should be capable of delivering a monologue, one that is interesting enough to keep the user engaged.

The Website That Is More Like a Novel

Many developers include large blocks of text with no multimedia in between. This is not really recommended because we often access the Internet while working on something. We do not have time to spend an hour on a website. We need to understand with just a glance whether the content is of any use to us or not. The content should be easy to scan with headers, bullet points, sub-headers and table of contents.

The Website With Illegible Fonts

Fonts should be perfectly understandable and a user shouldn’t have to strain his eyes to read the content. You can experiment with fancy fonts if you do not have any specific message to deliver to your audience.

Wikipedia is a website that makes use of fonts that are comfortable for the visitor’s eyes. This way a visitor doesn’t feel stressed even after reading several articles on it website.

Let’s take Wikipedia as an example. This is a website that needs to have a good font, otherwise why would a visitor feel like reading more? Therefore such websites need to make use of fonts that are legible enough to cause no strain to the visitor’s eyes, enabling them to read as many articles as they need to.

The Websites With Baby Font

Despite the fact that most browsers have a zooming feature the original font of the websites should always be clearly visible. This is a common mistake that most web developers make: creating websites with such small fonts that one cannot read.

The reason why web designers make this common mistake is that back when there was no such thing as website design, the majority of the websites had small fonts. Each website followed a certain standard which was set to be around 12 px. As the Internet became bigger and faster, people realised that this was quite hard to read. In a usual setting, computer screen is kept at least 12-24 inches away from the face and this makes it even more difficult to read small fonts clearly.

This could mean that either our patience is running out or our attention spans on websites are shrinking. A study suggests that we can only pay proper attention to a website for the first 8 seconds.

In the same study it was also stated that people are only able to read 28 percent of the words they encounter on a webpage. Take the example of the website below:

Web design / font visibility

Discounting the fact that the above website uses an unusual combination of text and background colours, there’s also a lot of text out there. To make things worse it is quite small in size too. How long would it be before the visitor gives up on reading and presses the back button?

Websites With Low Contrast Fonts

Whether it is a printed medium or a virtual one, using low contrast fonts make it difficult for the user to read the content.

Content is one of unique selling points of your website and when it is displayed so poorly you stand at risk of bidding farewell to your visitors and business. Not every visitor to your website will have excellent vision. There may be some who are visually impaired, or elderly.

Below is a screenshot of the Evernote website which makes use of high contrast for its webpages.

Website Design Mistakes- Contrasting Fonts

An Australian Motoring Publication recently conducted a study to observe which contrasts works best in the opinion of their users. Below were some of their findings:

Black Text on White Background

  • 70% – Good
  • 19% – Fair
  • 11% – Poor

White Text on Black Background

  • 0% – Good
  • 12% – Fair
  • 88% – Poor

White Text on Purple Background

  • 2% – Good
  • 16% -Fair
  • 82% – Poor

White Text on Royal Blue

  • 0% – Good
  • 4% – Fair
  • 96% – Poor

 

The above results may lead you to believe that it is only high contrast fonts that work well with the audience online. But it may not be entirely true. If a website is able to pull off the reverse type it can garner a lot of praise from designers worldwide. For instance take a look at the screenshot of Hubspot website below:

website design - hubspot font contrast

The fonts are not high in contrast and if that wasn’t rebellious enough, the developer has also placed White Text on a Black Background, which 88% people thought would look poor.

But the results are right in front of us. What we see is a beautiful blend of colours that doesn’t fail to impress.

The Cluttered Websites

Cluttered websites make it difficult for us to focus on a particular object. As a result, in those crucial first few seconds when we are developing an impression about the business, your users are completely lost. If you are looking for a particular thing it becomes even more difficult to find it if it’s in a pile of mess.

Suppose you are thinking of buying a product from an ecommerce website. Will you buy a product from a website that looks like this? Or will you be able to find it, should be a more appropriate question.

Website design mistakes - cluttered page

When faced with such a mess our first instinct would be to exit the website. There is, in actual fact, a search field at the top. But locating it is like looking for a needle in a haystack.

Generally users have a specific search query. Placing a million things on the welcome screen of an ecommerce website doesn’t guarantee that the user will find what they are looking for.

The Website With Blinking Text

The technique of making text blink has worked well in the past. It draws our attention to important things and it makes sense if you wish to use blinking text for special offers.

But it has become an outdated technique and we think of it as a technique that lazy marketers come up with when they cannot think of anything better.  There are various other ways of grabbing the visitor’s attention such as by making use of different colours and design to highlight a section or even better, using innovative call-to-action tabs.

Underlining Other Text

Special formatting is required only when there’s a link on the page. By making the anchor text look different you make it clear to the visitor that there’s a link, and clicking on it may disrupt your flow of reading.

It is quite basic but web designers shouldn’t make the mistake of formatting anything other than anchor text as this may lead to some major confusion about which is a link and which isn’t.

Links That Do Not Change Colour

You may have noticed this practice on Google’s results pages. A link that you have visited anytime in the past looks different from a link that you have never been to. This helps the visitor understand that he has already been to the website and he will not unknowingly click on it.

Websites With Long Webpages

The moment we arrive on a particular website the first thing we tend to notice is the right hand corner of the browser window. It is here that we understand how much we will have to scroll down to get to the bottom of the webpage. The second we realise that it will take an eternity to skim through the entire content we may skip the website altogether.

A person may not come to your website with an infinite amount of time, so it doesn’t make much sense to scare them off with a really long webpage. There can be exceptions but in those cases the webpage will need to have excellent content and a good navigation structure.

Websites With Horizontal Scrolling

If we encounter a website that has no vertical scrolling we wonder whether the website has anything to offer to us. But one cannot say the same about horizontal scrolling. Horizontal scrolling is an odd thing to have on your website. Not only is it uncommon but it also breaks the flow of design.

What is worse than having horizontal scrolling is to have a combination of both horizontal and vertical scrolling. This way visitors end up spending more time on a website than they intend to because they are constantly required to toggle between two navigation bars.

MISTAKES THAT ANNOY USERS

The Information Hungry Websites

It is common knowledge that websites make us fill forms only when they are looking to generate leads. The personal information entered in such forms is later used by the website to contact us. But what most web developers forget is that there is a time and way to ask for this information. As a visitor my purpose for being online is to gain information, not to give it away.

The best chance you may have as a website to extract information from me is to provide me with valuable content and then ask for my details. You may also have to give some strong reason for me to give up on my name and email address. So, unless it is absolutely necessary a website shouldn’t require registration.

The Stalker Website

We have all been to those websites that made us fill a form and since then have spammed our inbox with their newsletters. Sending unsolicited emails on a regular basis to visitors is a surefire way to ensure that they never return again.

The Musical Websites

The attempt to create a good user experience by integrating content with music has always failed miserably. There’s no reason why it should be tried anymore especially at the cost of losing a potential customer.

However, if audio is relevant to the remaining content on the page and you are insistent upon using it then you can ask for the permission of the visitor by letting him push the Play button. This way the visitor doesn’t feel smothered and is more likely to listen to the audio content.

The Websites With Two Homepages

The page on which a visitor lands after clicking on your link or typing in your URL should be the homepage of your website. By unnecessarily increasing the number of steps a visitor has to take to reach your homepage, you are simply annoying them.

The Websites With Hidden PDFs

Usually, built-in PDF viewers are terribly slow and can cause the browser to momentarily freeze.

Maybe your webpage visitor simply wanted a black and white answer for his query, and instead of delivering that information to him quickly you made him go through the unnecessary delay of downloading and scanning a PDF file.

However, if you believe that you cannot convey the necessary information without including a PDF, you should clearly state that clicking on the following link would open a PDF file.

The Multi-Faceted Website

Several over-courteous websites used to ask visitors which version of the website they’d prefer to view. Whether their connection is slow or fast? What’s their bandwidth? 56Kbps? 256Kbps? The HTML or Flash version?

Keep it straightforward and cut down on the number of questions — and give your visitor the content!

The Over-Advertising Websites

How do we trust the credibility of a website that allows advertisements to ruin their customer’s online experience? Including advertisements in your content may be a good strategy to increase your click-through rate in the short term, but over the long run it can affect the trust factor of your website. On the Internet, advertising too much equals to being spammy and when a website earns such a reputation their readership base can be severely hit.

The Over-Talkative Websites

As we mentioned earlier, you only have a few seconds to create an impression about your website and if your visitor is entangled in a never ending mesh of content this impression has already been ruined.

Every visitor has this understanding that things like multimedia or excess text are mere distractions. Most of the time they are not even relevant to the remaining content on the website and they are only there to make a visitor stay longer on the webpage.

Such over-expressive websites do not go down well with their audience, and it is only a matter of time before they leave your website never to return again.

Websites With Invisible Links

You may have come across websites that do not make it clear you will be redirected to another page. They employ several tricks such as using the same formatting for the anchor text. This makes it difficult for us to understand that there is a hyperlink.

Hiding your link raises suspicion in the minds of the visitor over your credibility. But this isn’t the worst thing. They may not even know that there is a link on the page and read past it without clicking on it.

Websites With Typos

This may not be a mistake from the web designer’s end but the individual or team that is responsible for the content that’s displayed on the page. Having typos or grammatical mistakes on a webpage is a basic error, and can easily be avoided.

Websites With Unreadable CAPTCHA

Most websites these days make use of CAPTCHA to ensure that their visitor is not a robot. The CAPTCHA should be legible because without entering it correctly, a visitor will not be able to gain access to what they wanted in the first place. It is therefore important to make sure that the CAPTCHA is readable.

Websites With Animated GIFs

If there is an advertisement on your page that requires animation then using GIFs is completely understandable even though not advisable. Besides the many other differences between a GIF and a video file (lower file size, usability etc.), the biggest difference is that it doesn’t need the user’s permission to start playing.

But this is also its biggest drawback as it is considered to be the type of content that is forced upon you. Using animated GIFs can make your website look unprofessional and hurt the trust that a user places in your website.

Websites That Give Us a Headache

The quickest way to give your visitor a headache is to use harsh colours on the web pages. Using colours such as red as the background of your website can be hurtful to the eyes. The colours that you use on the website should be similar to the type of action that you want your visitor to take.

For instance you may have noticed that a certain famous restaurant chain makes use of yellow and red colours that are known to arouse hunger in the consumers. You should make use of a colour scheme that influences the user to take the action that you want the user to take.

Websites With Windows That Pop Out Of Nowhere

Pop-ups have become synonymous with nuisance. It’s the easiest way to reduce the overall appeal of your website. There’s hardly a better way to put off your visitor than to use pop-ups that emerge out of thin air.

Using pop-ups doesn’t make a lot of sense given the number of pop-up blockers that are out there in the market today. These pop-up blockers do their job well as they even block the pop-ups that visitors have requested such as the separate windows that sometimes open when we make electronic transactions.

The Websites With Magical Powers

Many websites believe that opening links in new windows is a great way to keep the user on the page.

However, this strategy may not go down well with your visitors. They have no problem with pressing the back button to navigate back and forth between pages. But they may have a problem with having to move the pointer and close windows, because it is not something they asked for. These windows sometimes resize themselves and hide in remote corners of the screen only adding to our annoyance.

All developers need to be secure regarding this aspect. No trick in the book can keep users glued to a website if they do not want to be there. Even websites with a high level of user engagement (tech forums, free tools, websites-that-cannot-be-named etc.) have realised that this technique simply doesn’t work.

MISTAKES THAT CAN AFFECT SEO

The Websites That Resize Browser Windows

As we mentioned earlier visitors are not particularly welcoming towards websites that try to snatch control from them over the browser. You may have come across several websites that automatically make our browser go full screen. Websites that include such tricks are bound to lose their credibility.

Excessive Use Of Flash

Speed is everything on the internet. While there are several factors that contribute to high load time, Flash is known to be a prominent reason. Flash is huge, and its load time severely weighs down the website.

Especially in a world that is becoming more mobile optimised with each passing day, it makes no sense to use too much Flash. With Flash being incompatible with Smartphone browsers, a large chunk of your audience will not even be able to see the Flash content.

Websites Without Contact Information

Even if you have designed a great website all your efforts will be laid to waste if you make this small mistake. As a visitor if I like your website and decide to trust you enough to give business, I may need your contact details.

In the earlier section we have drawn parallels between websites and business cards. The purpose of making this comparison was that in certain situations a website gives us exactly the information that we seek in a business card. It should serve as a means to contact you or your business. Without this information on your website you are not just losing out on prospective customers but also on important feedback that could help you improve your website.

Breaking The Back Button

We sometimes click on links only with this assurance that by clicking the back button we will get back to our earlier page.

Certain websites employ techniques such as opening the link in a new browser window and redirecting the old URL to a completely different site. Each time this happens, we shut the redirected window and let only that tab stay open as that has the information we need.

In this process, we lose track of all the websites we had accessed before closing the tab, and this can prove to be a major inconvenience. There is no serious loss of information here, as we can retrieve the lost links from our device history, but  your website should focus on reducing the efforts of your visitors and not increasing it.

Websites With Complicated URLs

A URL is not just a medium to reach your website. It contains important words that can summarise the content on your webpage and make it easier for the visitor to figure out if the webpage has what they are looking for. If a user finds those keywords in the URL they will be convinced that your page has what they needs and will be more inclined to visit it. Besides confusing the visitors, using complicated words shuts the door on crawlers that first search your URL for relevant keywords and only then move onto your content.

Websites With No Search Engine

Search engines have become popular due to a reason. They give us what we want. With the help of search engines, the entire content of a website can be searched within a matter of few seconds. This way we do not have to physically search every page of the website to find relevant content. Search engines are especially useful for sites that have a complicated structure that makes a physical search harder.

Websites With Many Drop Down Menus

The problem with drop down menus is that they conceal important information from the visitor. A user should be able to see all options related to navigation and they shouldn’t have to make multiple clicks to gain access to it. Using drop down menus in the navigation bar can confuse your visitors.

For example, if your company offers many services, listing all of them under a ‘Services’ tab on the navigation bar can cause the website to take longer to load and also spoil the look of it. If there are many things to list under a particular tab, it is better if you do not use a drop down menu for it but instead direct to a page that has all the items listed on it.

The Websites With No Text Navigation

There was a time when we tried to save every megabyte on the Internet that we could. Even though the days of low speed connectivity and data consciousness are far behind us, there are still those who prefer to browse the internet with images disabled. Text navigation is a lot faster and a site that doesn’t employ this technique is definitely making a mistake.

Websites With Complicated Structures

Sometimes less is more. Designs that are simple tend to be more eye-catching than those that are complicated. What use is a website with a complicated structure, if a user cannot find what they are looking for?

Websites Created Using Microsoft FrontPage

This point also extends to those websites created using a cheap HTML editor. While tools like these may make it seem easier to create websites, the output is often a combination of poorly crafted code, multiple bugs and incompatibility with different browsers.

Incompatibility Across Browsers

Two web browsers can never be created equally. The programming of each browser is different and as a result they tend to behave differently in different situations. Each browser responds differently to different languages and therefore a browser that loads a PHP website may not have the same performance when it comes to a html website.

But speed is not necessarily a good thing because certain browsers compromise on security and performance while attempting to load the site faster. Many users have noticed that Microsoft’s Internet Explorer is a safer option when dealing with sensitive information. This could be the reason why certain important institutions such as companies or government websites create their company software in a way that it’s better to access them using IE.

Because the browsers are all different, programmers need to create a website that is compatible and performs well on each platform. There are many browsers that are in common use: Google Chrome, Apple Safari, Mozilla Firefox, Opera, UC.

You may be wondering how a website being incompatible with certain browsers can affect its SEO strategy. Suppose you have designed a website that works best on Google Chrome but there is a region that predominantly uses another browser such as Mozilla Firefox, IE or Opera. In such cases any efforts that you take to rank the website higher for local optimisation will be futile.

Websites With Bad Anchor Text

A link takes your visitor where you wish to take them. But on this link is some written text. Clicking on it redirects you to another page. The smarter websites make the links open in new tab because that is more convenient in case you need to come back to the site.

It may take them to a point of purchase or it may take them to your blog. No matter where the user is directed to, they need to be told where they are being taken. Think of it as a user: you come across a link on the page that has the anchor text ‘click here’. Not only is it unimaginative but also quite lazy. It simply shows that you did not take any extra effort to disguise the link in a better way.

Besides making things convenient for the user also has a direct positive impact on SEO.

Websites With Hidden Intentions

The practice of link cloaking is quite common on the Internet. Below is an example of link cloaking. Suppose there are two links as follows:

“http://affiliatename.hop.affiliateprogram.com”
“http://affiliateprogram.com/?clickid=abc1234567”

Simply by looking at these links, it’s hard to tell where the link may take you. To make it simpler for your visitor to understand where they are being taken , a link cloaker may do the following:

“http://affiliate.com/merchant.php”

Now this link clearly specifies the merchant, and the visitor should not have any problem with visiting such a link. However, not every link cloaker does it this way. Several malicious link cloakers may come up with something like this:

“http://tinyurl.com/n1abc”

This is  a common way to shorten URLs, but there is a major flaw with this approach. It says nothing about the affiliate or the page you are being redirected to. Using this approach can hide unsavoury keywords and search-marketing tactics from the visitor and sometimes, this is exactly the intention behind using it.

Websites Without ALT and Title Tags

For so long we have thought of these tags as something beneficial for SEO that we have almost forgotten what their primary purpose is. The primary purpose of using ALT and TITLE tags is to make it easier for those who are blind to browse through your website.

Websites With No Links On Footer

Users tend to scroll to the bottom of a webpage when they are unable to find the information that they are looking for. The footer of the website is the perfect place to position a link back to the homepage, or the contact us page, of the website. 

PHP MISTAKES

Many websites that have been developed using the programming language PHP nowadays. The most popular of these is Facebook. But not every website  can turn out to be like Facebook, with a seamless interface and next-to-perfect functionality.

There are several mistakes that PHP developers can make while building a website, and we have discussed them  in this section.

Not Securing the Code

Most of the cyber-attacks that take place are a result of failure to secure the SQL code. If this happens, the code is at a risk of being corrupted by SQL injections. SQL injections are unauthorised insertions of a type of code that executes commands such as altering, leaking or deleting data.

Failure To Suppress Errors

It is also possible to manually suppress  errors in a PHP code by using the ‘@’ symbol. By making use of this technique, a developer can prevent an unnecessary error that has no consequence to the overall performance of the code. However, care must be taken to ensure that no major error is suppressed using this function as this can cause some serious issues with the code.

Using Wrong Operators

For those who are new to the complicated world of programming languages, words like ‘assignment operators’ and ‘condition statements’ can be confusing . However, they do not need to be impossible to understand.

Just like in any spoken language, messing words up can hinder your communication. Writing a code using the wrong condition statements and operators can make it vulnerable to bugs. Such a code stands at a high risk of being attacked, so it makes sense to put in some extra time and ensure that the code is free of human error.

Not Running Backups

No matter how technology advances, the fear of losing our work on any digital platform always remains the same. It is possible to a lot of work by making just one simple mistake.

HTML MISTAKES

HTML has always been one of the most commonly used programming languages. It is a lot different, and better, today than  it used to be. Therefore, it has also become more complex. The HTML that is being used by developers today makes it highly confusing for them to decide what they should choose when it comes to:

  • Tools used to write JavaScript, HTML and CSS
  • Data storage facilities and Web hosting platforms
  • Frameworks
  • Potential JavaScript frameworks/libraries

The next step is to do things that provide a better web experience. While there are tools and how-to guides available to help developers with this, many developers fail to deliver results at this point due to certain common mistakes.

Making Use of Old School HTML

For developers, options for markup were severely restricted in the early days of the Internet. But the situation is quite different now. There are many markup options that a developer has at his disposal today.

However, some HTML developers still hold onto those old markup techniques. The end result of using these outdated HTML techniques is a complex markup structure that causes inconsistency of code across different browsers. The latest versions of Chrome, Safari and Internet Explorer do not support these old markup techniques and a developer needs to take this into consideration when designing the code.

Instead of using old HTML markup options, a developer should focus on making use of HTML for the description of website’s content, and utilising CSS for the tools to provide the required formatting of content.

The Websites That Still Use HTML Tables

Page layouts were once created using HTML tables. However, website development has progressed and there’s no reason why you should still stick to it. CSS is the latest alternative to HTML tables, which offers many other useful features.

JavaScript Links

Certain links on a webpage execute a small JavaScript each time a visitor clicks on them. These JavaScript links are known to create many problems for the user and it could turn out to be the difference between a good and bad user experience.

Inadequate Browser Testing

Many developers are guilty of having committed this mistake. They may have had a favourite browser in mind that they believed to be everybody’s favourite too. But this is not always the case. Users tend to have their own set of reasons to like or dislike a browser. A developer cannot say with certainty whether a user will be using the same browser for which they had the website tested.

So, the ideal thing to do in this situation is to test your website for all browsers and debug the code accordingly, if any browser is unable to deliver the results required.

There’s also a practice these days to source their website code from the Internet. Some developers seek the easy way out and simply copy paste the code that they find online, unaware that the developer whose code they are copying may have made the same mistake.

This mistake can be costly in the long term because if your website doesn’t load, your visitors may think that your website is of poor quality. Thus, they will not check whether it works on other browsers. It makes no difference to them that it is actually the developer who is at fault for not having conducted extensive browser testing. A user is always pressed for time. And if they find that the website doesn’t load in a few seconds they could assume there’s something wrong with the Internet connection, or the website is faulty.

But browser testing is not that difficult to carry out. There are several tools that are available online which test the website for you. By using these tools you can get the code checked extensively for any possible issues with other browsers and fix the problem accordingly. You should only go ahead with the launch of your website once you have got the required quality assurance from the tool you are using. It may be a good idea to put your website on hold if you are not convinced that it will perform equally well on all browsers.

Making the Wrong Assumptions

Let’s take for example the contact form of a website. These require users to submit their personal information, which could include name, date of birth, email address and physical address.

If users come across a field which simply asks them to enter their ‘address’ they could get confused about whether it is their email, home or office address. Now these three types of information are quite different from each other. And it will be unclear to the user which one the developer is expecting unless it is stated specifically. If wrong entries are made on a repetitive basis it could lead to page failures.

Solution: A developer needs to convey to users exactly what the website expects them to enter. The latest version of HTML contains many data validation techniques that can be widely employed. Developers should also ensure that data validation is carried out not just on the browser side but also on the server side.

Bloated Pages

By using the <img> element in HTML, it is possible to change the height and width attributes of page elements. Using this HTML element, many developers make the mistake of creating pages that are too complex. They try to create high definition versions of web pages filled with high quality images and graphics.

The outcome of creating such pages is quite predictable. Higher load time. When faced with such a webpage a user has only two options, to either abandon the request altogether or reload the page. In most modern browsers, the browser reverts back with a message that says ‘The website took too long to respond’. Therefore a developer should never try to complicate the source HTML markup. This is because the site may appear more attractive if kept less extensive and simple.

Solution: One of the major reasons for page bloating is the unnecessary stacking of images. If you find that your website is being weighed down by the elements you place on the webpage then you should:

  • Ask yourself whether these elements are necessary or not? If it is not, you can have them removed.
  • Make use of the many tools that are available online and offline to minimise the size of images.
  • Preload images using JavaScript. This technique can effectively lower the load time and ensure that the website does not behave unexpectedly. If this is included in the code, all images in a website are loaded in the browser’s cache including the ones that are not required right away.
  • Minimise the usage of linked JavaScript and CSS files.

Inadequate Code Testing

Most developers tend to believe that if the code or JavaScript is functional on the server it is definitely going to work once the code is deployed. However, making this assumption without extensively testing the code can make your users suffer unexpected errors that should not have been overlooked during the testing of code.

Solution: The first part of the solution is quite simple. Pay more attention to code testing. Take the error checks and error handling process seriously, as they may also serve as a gateway to hackers. Put in place a system that enables you to catch an error and resolve it without divulging too much technical information about the error,  as this information could be misused by hackers to gain control over your system.

Creating a Big Stack of Code

In order to make the code responsive across all platforms, developers sometimes get carried away and end up creating a bulky code that does them more harm than good. Such codes look like a big tree with ‘if’ statements growing out like branches.

Therefore, it is highly recommended that developers do not create codes that can be difficult to manage. A code like most other business practices is continuous in nature and needs constant development and debugging.

Creating Meaningless Pages

Many times developers tend to make the mistake of creating pages that may be important from the user’s perspective, but are totally meaningless from the SEO stand point. Such pages may contain useful information but because they have not been aligned according to SEO guidelines, these pages do not get indexed by search engines.

A page that cannot be identified by search engines stays undiscovered, and as a result, is of zero value to the company.

In order to avoid this, developers should implement all their SEO knowledge, and find support so that they can ensure their strategies work. There are many strategies that a company can follow to optimise their websites for search engines and these can be easily found on the Internet.

However, SEO is a business function that should be handled by those who have good knowledge of it. It is also important that the agency which handles this job for you has good industry experience.

dapa is a marketing agency that has worked with companies from various sectors, and as a result has accumulated a wealth of knowledge. When it comes to digital marketing and its various disciplines we are confident that we will take the right steps and deliver the results that are expected of us.

Websites That Need Constant Refreshing

This generally happens with websites that have a bulky code. In general, websites to refresh themselves with every interaction that a user has with it.

Many websites these days do exactly that. Each time you switch tabs and land back on a site after visiting another, the page refreshes itself automatically without any action from your end.

This generally happens when a website depends on the server a lot. A developer should identify whether it is absolutely necessary to post back to the server. If it is not, then client side scripting can be utilised to deliver spontaneous results. Another effective way to avoid this problem is to make use of AJAX techniques or the latest single page design approach.

Developers That Won’t Work Smart

Certain web developers take up the responsibility to post content on the website they have created. While this is fine if the developer belongs to the same niche and has good knowledge of the sector, it can go wrong if the developer does it for the wrong reasons such as to save money.

Like we discussed earlier, any task that falls out of our expertise should be outsourced to experts in that field. Creating content is one of those tasks. The content you place on the website will be read by your visitors and based on how much they like the content, they will come to a conclusion about whether or not you are worth doing business with.

At dapa we are not just capable of handling your SEO strategy but also have a dedicated content team. We have a repository of web design services to offer that can be customised to fit in the requirements of our clients. Our digital marketing solutions adhere to the principles of inbound marketing and this helps our clients achieve results that exceed their expectations.

Failure to Implement Responsiveness

Recent trends show that laptops and desktops are slowly moving out of the picture when it comes to devices used for accessing the Internet. There has been a huge rise in the number of mobile searches and this makes it necessary for every developer to take responsiveness seriously.

Failure to implement responsiveness can result in an ugly user experience. Each time a visitor turns away from your website because of a bad user experience you do not just lose out on a visitor, but a lot of potential business.

Responsive Design Mistakes

As the usage of mobile devices and cellular network continues to increase, developers realised that they can no longer design websites only for computers. Now a large portion of their audience is on a whole new platform.

Creating a desktop-only website meant losing out on this huge potential customer base.

Thus, a new type of website design was born: Responsive Design. True to its name it has the ability to adapt itself to the device from which the website is being accessed.

Implementing this wasn’t going to be an easy task because there’s a huge difference between these two platforms. The desktop screen on one hand is so huge that we run short of ideas to fill the space. The mobile screen on the other hand is so small that we run out of space to fill with ideas.

The second concern was the speed of internet on these two platforms. This was a time where broadband-like speed was not available on our mobile devices. We are talking about a 50Kbps internet speed here. You could click on an image, enjoy a cup of tea, and still return to see the last bit of the image load.

But things became better, technology improved and internet speed increased. However, like they say, old habits die hard. Developers continued making the same old mistakes. Here are some of them:

Focus On The Device and Not The Screen

According to a study, there are close to 25,000 distinct devices in the market and these are just the Android ones. If we factor in the iOS and other devices, the number is going to rise.

In such a scenario how can a developer design a website to suit each kind of device? Instead of targeting individual devices, the developers should focus on screens. They should let go of the conventional classification such as:

  • Desktops
  • Phones
  • Wearables
  • Tablets

They should ideally design their website based on the screen size which can be classified as

  • Extra-Large
  • Large
  • Mid-range
  • Small screens
  • Micro-screens

The present devices’ market gives us the impression of a tree where different variations of mobile devices are branching out in all directions. They can no longer afford to make a device-based category. And how can they? There are phones in the market that are larger than the smallest tablet, and desktops that stand neck-to-neck with televisions in terms of screen size.

This makes any individual device type an extremely vague category.

Solution: It is advisable to begin with a Mobile First Approach and build the website for the smallest screen that is relevant to your users.

If as a developer you believe that your website will be accessed on wearables then you should design the website for the smallest smart watch in the market, the Apple Watch which is 272 pixels wide.

If you believe that your website will be accessed majorly through phones then you should design your website for the smallest phone which is again an Apple device, the Apple iPhone having a width of 320 pixels in portrait mode.

Once you’ve determined the lower threshold of screen size for which you will be designing the website, you can gradually move on to bigger screen sizes. Now determine the largest screen size for which you wish to design the website.

According to recent research, almost 99 percent of visitors have resolutions lower than the width of 2000 pixels. With the upper and lower limit of the screen size fixed, you can continue developing and testing your website for all sizes that lie in-between.

Restricted to Small Screens

There are some developers who restrict their design to the smallest screen size. When they are asked to design one for a desktop screen they merely scale up their design so that it fits on the larger screen. As the screen size increases you also get a lot of space to toy with.

Here are some things that a developer can do when faced with this situation:

  • Pay the same level of attention to the larger screen as was given to the smaller one.
  • Take advantage of the extra space you get by placing things that you believe will benefit the brand image.
  • Prioritise the content you have on your mobile website and ensure that they get the spotlight on the larger screen.
  • If low-resolution pictures have been used for the mobile version then ensure that they do not lose quality.
  • As the website scales up for larger screens the line height changes too. Developers should make sure that they are using the optimal line length, which is between 45 and 75 characters.
  • Developers should also be careful about using large fonts on their websites. Larger fonts cause many disruptions to the flow of a website by taking up an unusual amount of horizontal space. As a result the website may skip ahead in the content or the readers could be forced to slow down. It is advisable to run usability tests before making desktop versions of the website live.

Hiding Content

When the concept of mobile websites was still unknown to many, it was a popular belief that only those who were in a rush would access a website from their mobile device.

As a result, developers were forced to display only a portion of their website’s content on the mobile version. Bits of content that were deemed important, such as contact information, were prioritised over the remaining content. The other content remained hidden on the mobile website, giving mobile users the impression that there was nothing more to the website.

The flipside of this practice is that a user could be forced to visit the competitor’s websites. Here they can access all the same features and content that is found on the desktop site.

But this notion was proven wrong over time. In fact, a recent study by InMobi observed that close to 62% of all mobile users access the internet on their devices while watching television.

Now these website visitors are also among those who are exposed to various screen sizes per day. They may be office professionals accessing a particular website on their laptops or desktops in-between work. Later, they could access the same website on their Smartphone. And once they are finally home watching their favourite program on television, they may access the website again from a tablet.

Users expect a certain level of consistency when it comes to website content. If you give them different bits of information on every platform they may not trust you. Or they might assume that you are underpaying your developer. Both of these are not good for your brand value.

Consistent Navigation

Certain elements on a website need different navigation on different platforms. For instance a website’s contact form that is usually horizontally placed on a desktop site should be aligned vertically on a mobile website.

Take for example the website of Mashable. Here are the screenshots of its desktop and mobile sites:

website design tip - having consistent navigation

In the desktop version, the screen space has been properly utilised with links to other articles placed on the right-hand side. Also, there is a large title for the central image on the left-hand side.

Now look at the mobile website. The title is downsized and taken to the centre of the screen. The links to other articles have been neatly placed below the centre image. In the lower section of the screen you can see that the number of items have been reduced so that they fit appropriately within the layout.

Similarly, there are some elements that should not remain consistent across different screen sizes such as:

  • Visual Layout
  • Button Size
  • Basic Navigation

For example, on a desktop site you can keep the header static at the top and it’s always there as you are navigating further down. But when adjusting the layout for a mobile screen you can make it disappear. Or you could replace it with a ‘Menu’ button on the top left or right, making it consistent across the layout.

However, there are certain items that should remain consistent and they are:

  • Typefaces
  • Button Labels
  • Colour Treatments

Not Designing for Touch

There is a certain type of design which is more suitable for the mobile version of a website. This type of design includes some of the following functions:

Proper utilisation of corners

Take for instance a really small screen. The easiest place for our fingers to access, especially the thumb, is the lower left corner.

Now tablets are held in a different manner. The top corner is the most easily accessible spot on the screen. Then a Call-to-Action button or an important link is to be placed on a small screen layout, the lower left corner should be given preference. But when designing for a tablet screen, the CTA button or important links should be placed in upper corners to ensure maximum Click-through-Rate (CTR).

Size and Layout

The tap targets on a screen such as the CTA button should be of adequate size so users do not have to dive right into the screen to tap on the button. Ideally the minimum size of these buttons should be 44 points.

Also, the buttons and important links should be placed appropriately in the layout with sufficient gap between them. This ensures that they do not look too cluttered on the screen. If such important things are placed in close proximity to each other, your visitor may click on the wrong item. To avoid this,and any resulting interface error, it is advised that the minimum spacing between design elements should be 23 points.

Another mistake that developers make is that they forget that there is ‘no hover’ on touch screens. The information that is usually revealed on a desktop site when the cursor is hovering over a button should also be made available on the mobile version. Once again it is possible to make use of the ‘Menu’ button and make it available from the start.

The size of elements and screen layout should be such that it is favourable for the common hand gestures like tapping and swiping.

Linking to Wrong Sites

One of the things that make the Web so powerful and a ‘Web’ in every sense of the word is the ability to interlink. It is the power to link your site with others or place internal website links in different corners of your website that makes the Web so special.

As we all know, ‘with great power comes great responsibility’. So developers should make sure that they use this power in a sensible way. Linking  to websites that are spammy or not mobile friendly should be avoided as these issues can ruin the user experience.

Ignoring Performance

Time passes slowly when we are staring at our digital screen waiting for a website to load. A delay of a few seconds can mean the difference between a visitor who ‘is’ on your website and a visitor who ‘was’ on your website.

Here are some things that you can do to optimise the performance of your website:

  • Only use images that are absolutely necessary.
  • Optimise existing images on the website.
  • Remove any unnecessary dependence such as JavaScript library or any third party tool.
  • Utilise browser caching as it can help your websites load faster by storing files in local memory.
  • It will also help to reduce the total number of HTTP requests. A browser needs to fetch every resource or file that a webpage needs, and the higher the number of trips to the server the slower the website will load.

Parallax Design Mistakes

Parallax Design is one of the latest trends in the world of website design. It is visually engaging and so attractive that developers sometimes forget to take the negative implications into consideration.

SEO and Parallax

Parallax is basically a really long page. Imagine holding a scroll in your hand that doesn’t seem to end. The design is fancy, but fancy doesn’t always work well with SEO.

When talking about a single long page it is difficult to maximise for search terms. Also search engine ranking is greatly influenced by heading tags. Headings are necessary in order to define the page hierarchy and divide the text into readable sections. This makes things easier for the readers as well as SEO experts.

When search engine spiders are crawling through your webpage, they assign a lot of priority to the structure of your website. They take into consideration the consistency of the header with respect to the on-site content. Search engines are majorly concerned with the user experience and their ranking parameters make it quite clear.

According to Google recommendations, each webpage should have a single heading, 1 or H1. H1s are prime areas to incorporate keywords as it can really influence your search engine rankings.

If you do the maths, on a website that does not use Parallax design, there are as many number of H1s as there are pages. So if a website has 10 pages there can be a total of 10 H1s. This is a lot higher than the one H1 that is present in the website employing Parallax design.

Now metadata appears only this one time on the header of a document. It is limited in length so you cannot accommodate more than you’re supposed to. For a website that has multiple pages there can be unique metadata for each page which is relevant to the content on that page.

When it comes to a Parallax Design website, those handling its search engine optimisation try to fit an entire site description into a single tag. Talking strictly from the SEO perspective such practices can do more harm than good.

Parallax sites are usually heavy in size due to high graphics and this makes the website load slowly.

User Concerns

To begin with, the higher load time of Parallax websites can put off mobile users. If implemented incorrectly there can also be several problems with its functionality.

A parallax website has a single URL. Now under this single URL there are several sections of content. This makes sharing the website extremely difficult on social media as the content that is of interest could be placed anywhere on the website. The longer the website the greater the patience you will need to find what you’re looking for.

The performance of parallax websites cannot be easily tracked with the help of analytics. Site administrators may not be able to track where they are losing traffic and which section is particularly interesting to the user.

Template Based Websites

Many businesses in their early stages do not wish to invest a lot into developing a company website. For them it makes perfect sense to make use of a template-based, free website. These are available through websites like WordPress, Square, WiX etc.

But there are certain disadvantages of using such websites for business purposes.

Your Website is ‘Just One of Them’

The template you have used to design your website could be in use simultaneously by hundreds of thousands of people across the globe. So there is no scope to give your website a distinct and unique feeling. The only way your website can be differentiated from the rest using the same template is the content you decide to place on the website. And this can take a while to figure out.

Limits to Customisation

It is not possible to tweak a template based website beyond a certain point. So it rules out customising it entirely according to our requirements. Imagine if you have a lot of text to place on the website but the template only allows you to place a limited quantity of it. Accommodating it anyway can severely impact the functionality of such websites. In certain cases developers realise after making payments for their template that this web design doesn’t suit their requirements.

SEO and Template Based Websites

A template only provides an exoskeleton to the website. They have not been optimised to improve your search engine rankings. In this situation a user has no option but to try to do this with the help of content.

SEO is more influenced by words and not so much by pictures. Template-based websites make use of fancy animation and high-resolution graphics, each of which weighs down the website. Now these features may be appealing to a user but it can prove to be a difficult task to bring such a website to the top of the search engine rankings page.

The Website Case Study

Let’s take Apple as an example.

website design - the apple website

The above screenshot is of the website back in 2008 when they had launched the 2nd generation of iPod Touch. Any person who has visited their website will tell you how the website has never failed to impress.

The Apple website has always had a sophisticated look…

It definitely helps to have state-of-the-art innovations. But if you were to analyse the Apple website from the perspective of web design you will realise why it has such a reputation.

The Primary Focus

The homepage is a great blend of modernism, simplicity, elegance and cleanliness. The icons you see on the navigation bar are all equally spaced. The text and icons are white in colour against a black backdrop, making them easy to notice and read.

the website design of Apple - display of product

The picture of their latest product, the iPhone X is right at the centre of the homepage. The website’s white background accentuates each pixel of the image and makes colour stand out in the image. All these factors ensure that the focus of the visitor lies on their product and they are not distracted by other elements.

Difference Between Clean and Minimal Design

Clean and minimal designs are the two most popular styles of web design.

Minimal design is about using minimum elements. The lesser they are, the better it is.

A clean design on the other hand is all about precise and careful positioning of design elements. The focus here is not to use minimum elements in a given space but about putting the right element in the right place. There’s a place for everything.

Some companies wanting to have a clean design often end up with a minimal design. Or some companies’ choice of design doesn’t fit with the nature of the organisation.

However, when it comes to conveying elegance, a minimal design can be as effective as a clean design. Here’s a snapshot of a minimalist design.

The website design of Huge - minimalist design

This is the homepage of Huge, a marketing agency that handles every aspect of user experience for Fortune 100 companies like Nike, Google, Gucci, etc.

As you can see, the welcome screen has just 8 characters and 2 colours. It may not convey a lot of information about what the company does. But it is attractive, making you want to see what lies beyond the homepage.

Domain-Specific Design

The homepage of Huge may look fancy but it is not a pattern that any company can adopt. Going back to the previous example, a technology company such as Apple cannot have such a minimalist design for its website. They are bound by an obligation to develop a high-end, modern, professional website. At the same time they need to convey some information and cannot just get away with being pretty. They do it well, and here’s how:

Website design - Apple (again) - minimalism

The sensible use of white space makes sure that your attention is automatically drawn towards the product. And this is the ultimate objective of any marketing effort: to place the spotlight on the product.

Paying close attention to these common mistakes and learning how to avoid them will improve your website’s appeal. As a result, your website will stand out from the competition and resonate with your audience as a reputable, authoritative source of valuable content.

2 thoughts on “Website Design – Common Mistakes and How to Avoid Them”

  1. Your website has provided us with the techniques to be able to create our website with minimal mistakes on the design side. You might have jut shown us developers that maybe we should take some time to read up on how to improve the work we do.

  2. incorporating css+ and HTML is a big factor to your web design, thanks for the tips. Web design will have a big impact on your search engine results and where you rank (SEO). Does the colour of the background have to match the colours of the logo, what’s your advice?

Leave a Reply

Your email address will not be published.