The Simple Rules Of Effective Websites

website effective rules

There are two simple aspects to web design that it’s important to understand before you set about building your first, or next, website. The organisation and design of your site should be based on the aims you have for your site and the goals of your audience. Planning ahead and focussing on these goals is the best way to ensure you create a successful site.

Plan Ahead and Set Your Goals

Establish early on in the planning process what the purpose of the site is. A simple one line sentence that sums up your aim should be the starting point here. The more clarity you have about your goal from the start it will be simpler for your visitors to understand. The user of your site is more important than anybody else in the process. Too often websites are designed for the people creating the site! Think about your audience carefully and consider not only their likely skill level but their interests carefully. A site designed for a typical or average user is likely to appeal to a far broader range of users than one designed for you.

Future Proofing

The future is an important aspect to consider when building the site initially. How often will the site need to be updated? If you need to update the content regularly, consider how easy this will be and find an effective content management system (CMS) that you can easily manage yourself. There will be costs in terms of both time and money in maintaining and updating a site, so ease of use is an essential factor. Similarly, to avoid the need for a complete re-design in the future, consider if the site is likely to grow in the coming years (or months). Will you want to add new pages and sections? If this is the case, again, the design of the site should be capable of being extended as and when necessary. A basic framework that you can add and make changes to yourself is preferable in this case, rather than having to get a designer in each time an overhaul is required.

Product Placement

In terms of the look of your site it is, again, crucial to consider the needs of your users and their habits. It’s a well-documented fact that web users scan read a site searching for information relevant to them quickly. In terms of behaviour most users scan from top to bottom and left to right with the main focus of their attention to the left and top of a page. Given this factor it’s important to place your most important information, and calls to action, in this section of the page. Think about what you want from your users and what they need from your site; this goal and requirement should feature heavily in the areas visitors are most likely to be viewing.

The Easily Distracted Mind

The human mind responds quickly to visual stimulus and this is important to remember when creating effective images. Moving images will distract your viewer’s attention. In general, unless they are likely to lead the viewer exactly where you want them, moving images should be minimised. Small sections of text broken up with relevant images are the best approach. Adverts that flash and pop up are common on the web and are commonly hated by users; remember this factor when designing your site.

Navigation for the Terminally Lazy (a.k.a. The User)

Simplicity in your site design is crucial. Users should quickly be able to navigate to the part of the site that they need (and you want them to visit). If it takes more than three clicks to do so you risk losing the notoriously fickle attention of most web users; they’ll click the back button very quickly and will probably not return to your site in a hurry. Links should be placed where it requires minimum effort to find them (users are lazy!), preferably close to the top and left. Simple, self-explanatory menus (home, about, etc.) should be clearly visible and accessible on each page.

Quality Content is still King

“Content is King”, so they say, and this mantra has been true for centuries in the marketing world. It’s a concept that is still alive and kicking in the 21st century and applies to websites as much as to any other form of marketing material. Poor quality content has a negative effect on users, losing their trust quickly. This can include poorly written content and badly thought out images (avoid stock images like the proverbial). Quality speaks volumes to web users and creates a bond of trust between you and your sites visitors. This trust is hard to gain, but once you have it, it’s a certain way to your use

See How Popular Sites Looked When They Launched

How cool it could be, if you could actually see how Google, Yahoo! and other amazing websites used to look, when they just got started. All you would see is raw, web-page layouts, with no actual sense of CSS or JavaScript. Yes, that’s right. What we see today is a much advanced form of web-development, and this wasn’t the case about 15-20 years back when the Internet revolution picked up across the world. Wayback Time Machine is one such tool that takes you back in time, and lets you view exactly how a website used to look in its early days.

wayback-time-machine

This is not all. You can actually see how the website transformed over the years, since Wayback Time Machine is an archive of websites, cached over the years and included in their official database, accessible to anyone. Surprisingly, you would be able to access almost all websites though this tool, but you won’t be able to view archives for Facebook, may be due to their privacy issues which weren’t really that strong in their early days. So here we go, starting with none other than our beloved HBB!

HellBound Bloggers [ March 5 ‘2009]

hbb-march-2009

This is probably the first raw design, Pradeep started with in his early days. Well, I am not really sure if this was the first one or not, but this is the first impression of HBB on Wayback Time Machine.

Google [January 17 ‘1999]

google-1999

The search engine giant wasn’t really the one sporting powerful CSS, JavaScript and not to forget the amazing Doodles. Google was in its BETA stages, way back in 1999.

Yahoo! [July 3 ‘1997]

yahoo-1997

And here’s Yahoo! in its early years, with a raw design and layout. Seems like the early impressions are not really in good quality in the Wayback Time Machine database, and hence we can see broken images in the picture above.

You can access any website using Wayback Time Machine easily. Try it out yourself and let us know your experience via the comments section below.

5 Simple Steps To An Original Blog Design

People visit your blog, and when they arrive – “I’ve seen that design before.” It commonly happens. You don’t master an impressive design that stands out from the rest. In truth though, it can be the design that defines the very thing you are fighting for in the blogosphere; so don’t just throw it away. Here are 5 steps that you can use to create something that does stand out from the rest. Lets create that original blog design.

Other Popular Design Related Posts :

  • 5 Common Mistakes That Can Spoil Your Whole Website Design Work
  • What You Should Do When Other Bloggers Steal Your Website’s Design
  • Why Use A WordPress Theme Framework For Your Blog?

Web Design#1 – Remove the color blue : Blue is the most commonly used color on the whole internet. When you start using the color blue, you’ve already created something that is similar to everything else. To create a design that is original and unique, make sure to find color combination that are irregular, but go well with each other; such as, don’t simply make your whole design black, combine it with other colors.

#2 – Combine elements of fixed and fluid layouts : The key to create an original design is in the layout itself. This is really a choice of preference – some people like to have fixed widths, others like to have them fluid. If you want to create something original though, why not try combining both fixed and fluid layouts together, you’ll pull something impressive and original if you do this.

As an example, you could try having the header of your design fluid and then making the rest of the design fluid. You could make a featured part that is fluid and the rest that is fixed. There is so much that you can do to create a unique design; just come up with a kick-ass layout.

#3 – Use gradients over flat colors : Sidebar title background; the perfect example of where people like to put just flat colors. This is just damn boring; if you want to go for something original and impressive, spice it up a bit.

Use images or gradients behind navigation bars, sidebars or headers, this will add a lot more excitement to your pages over just using flat colors – which look dull and boring.

#4 – Add a personal touch : The professional way to show that something is truly yours. Rub your face right into it and make sure that every single element of it has got your own personal touch.

Litter your face all over your blogs banner. This will show that it’s truly unique – everything is about you! Something that people cannot copy.

#5 – Originality is in the redesigns: Yes, you heard right. In certain elements, redesigning in itself is a sign of originality. People will always be impressed if every single time you update your design, it is something new, that in itself is original.

Conclusion : Go for a design that is original. People will be able to recognize that it’s your website that their visiting and not someone else’s when they arrive. Your design is what basically defines who you are and who you are trying to be, don’t let it be just like everyone else’s that’s been made; be prepared to stand out and create something amazing!

This guest article is written by Peter, a 15 year old blogger from Australia and the owner behind ideas bubble. If you wish to write for HBB, kindly check this.

5 Common Mistakes That Can Spoil Your Whole Website Design Work

When you have a website and when it feels like there is something wrong with your website or you see that things don’t look good or proper, if there is a high bounce rate then it maybe a simple problem that can be fixed.

Well, here are some tips that will help you fix these 5 common design flows.

1. Choosing The Right Font

Safe Web Fonts

Get the right test for your website can sometimes be a difficult job. The key is to find the text best suiting the mood and look of your website. The text is also an important part of the website as it contributes a great deal to the look and feel of the website. If you are facing such a problem, then you have a simple solution at hand Dafont.com. It is a free resource which users can use to get unique fonts for their respective websites.

Resource : 100+ Resources To Download Excellent Free Fonts


2. Compatible On All The Browsers

Firefox

Your website should be compatible on all the browsers. As a website owner you might have heard users complaining about your site not working on a particular browser. In such cases you can always use Browsershot.org, this is again a free resource which will check the compatibility of your website in all the browsers. It is very necessary for a website to run on all major browsers. So it is advisable to use this resource to check the compatibility of your website.

Related : BrowserShots – Test Your Site In Popular Browsers


3. Look And Feel Of Your Website

Color Schemes

Color schemes is anothor factor that determines the look and feel of your website. So it is necessary to choose your color scheme carefully. If you are not able choose the best suited color scheme then you can use another free resource that will come handy in such situations. Try Colorschemedesigner.com , all you need to do is select the base color and it will give around 20 color schemes to choose from. This will help you to get the best color scheme for your website.


4. Proper Navigation

Site Navigation

Next thing you need to see is that your navigation is set up properly. If it’s not properly set up it will create a negative effect on the whole experience the user surfing your website. Well there is no tool to fix it but there are certain guidelines. Set it up in such a way that what is important comes 1st, like your services pages do not put the About us page 2nd in the list after the “Home” tab. Remember a user visiting your website will always be first interested in what services you offer and at what price. So arrange your navigation bar accordingly.


5. Call To Action

Call to action

Every website has it’s “Call to Action”, make sure that the your call to action is in the front and center of the website and it is also advisable that you have the call to action on almost all the pages of your website. If you have an e-commerce website you can have to the option of putting the call to action after the description of the product. If you want your visitors to call you on phone put your phone number in large font preferably on the header of the website so that it becomes easy for a user to locate your details.

Related : 30+ Tips To Improve Your Website Conversion Rate

Being a web designer, I pointed out these mistakes that will help you to eliminate the commonly found flaws of your website and will help your website in becoming a user friendly and easy to navigate and it will also help your website and you to become successful.

2 Common Web Design Mistakes That Violates Google Adsense Rules

Today I was randomly visiting other blogs and saw that most of bloggers made the same two design mistakes that violates Adsense rules. Majority of the bloggers making the same mistake forced me to write this article.

So, if you Adsense user, you must read this article. Lets start:

First mistake

According to Google policy, we cannot place Google Ads under drop down menus. These drop down menus are generally in navigation menu bar. This generates the risk of accidental clicks. I’ll explain this with the help of a screenshot:

DropDown

When drop down menu overlaps Google Ads, it may generate the risk of accidental clicks thus taking user to a new site that he/she does not want to visit. You can read more about it on official Adsense Blog. This is the first mistake that most of the bloggers make. Lets move to the other one.

Second Mistake

According to Google, all webmasters must write “ADVERTISEMENT” text below post title. Below is what Google Adsense official blog says:

Ads shouldn’t be placed under a title or section heading in a way that implies that the ads are not ads.

Most of bloggers has ignored this rule also and does not follow this instruction. According to me, you must play safe with Adsense. Good luck!

Top Challenges For Website Designers In Coming Years

Being a Website Designer in 2010 is quite different than being a website designer of later years. Competent website designers own a great deal more skill sets other than being a whiz at graphics. Graphics are becoming secondary in relationship to other skill sets that enable a designer to be at the top of their industry.

Business website owners are becoming increasingly more aware of internet marketing and how it can influence their bottom line. In years past a business website was used mainly as an online business card. Today a business owner’s company website is a viable marketing tool.

Furthermore business owners are searching out designers with search engine optimization skills and background. A design firm without a SEO expert is playing second fiddle to design firms with an internet marketing team working in unison with the designers and business owner.

Top Challenges

Business websites need to be engineered from square one with SEO in mind. Content organizing and navigation needs to be SEO friendly. The content needs to be written with keyword and keyword phrases targeting the search engines for the market that the website is targeting.

The day of using H-tags for styling are over! Effective business websites need to be designed by a developer that is well versed in correctly semantically coding in content. Designers need to take advantage of the tags and other elements of webpage code.

Effective page titles need to be written. Using the company name is no longer accepted! Engaging titles that utilize keywords and phrases are paramount.
Meta descriptions need to well written as well utilizing keywords and phrases. Meta tags are very important as it describes the web page to the organic search engines.

Being a competent Website Designer today is a great deal more than displaying pop and fizz. A website designer that engages SEO and Internet Marketing will not only make them a more viable designer but will be doing their clients justice. It costs a great deal more to design a website and then hire a SEO professional to redesign the business website to be a effective marketing tool and rank well in the organic search engines.

HOW TO: Create Blockquote Using HTML Code

I hope you are familiar with block quotes. They are nothing but some sections of texts used for highlighting quotes from other sources. They are mostly indented from the blog post and they have different background color or text size and color.

Blockquotes
Blockquotes

Why Should I Use Blockquote In My Blog Articles?

If you are quoting about some matter from another blog, then it should be different. Your readers should feel the different.

  • Quotations can be easily recognized from the main section of your posts.
  • They can enrich and complement your theme.
  • Your readers will get to know that those are special lines.

How To Design My Own Block quotes?

Most of the wordpress themes have cool block quotes, but for some it just indents the quote and changes the font size and color.

In this tutorial we are going to create blockquote using HTML code alone, without messing the stylesheet.

Actually this tutorial is quite simple and of course, the blockquotes are also simple but effective, because Simplicity is Essential.

1. Changing the Background color with some text formatting

Coding For Yellow :

<p style=”padding: 5px; background-color: #FFFF99; border: dotted 2px #FF9900;”> Text Here</p>

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

Coding For Blue :

<p style=”padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;”>Text Here</p>

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

2. Without Changing The Background Color With Text Formatting

This is a cool alternative for above mentioned block quote. This creates indent from the main blog post. This one uses no image but satisfies the look of an image.

I love and believe in this quote ‘Impossible is Nothing’. Every new idea is a joke until one man achieves it. Concentrate and work hard for reaching your goal. Always be constant and make your mind repeat this phrase ‘Don’t give up’. Happy Blogging.

Coding :

<b style=”float: left; font-weight: normal; font: 14px/22px arial; margin-top 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #666666;”>Text Here</b>

Note : This Tutorial is compatible with Blogger and WordPress blogs. If you are familiar with HTML you can use your own codings to edit and customize.