7 Best Freelance Websites

1. Upwork

With over 2 million clients, Upwork offers something for every type of freelancer.

2. Toptal

Topal is for seasoned, talented freelancers. Passing Toptal's screening process gives you unparalleled access to meaningful projects with great clients . You’ll also be able to join the Toptal community for frequent meetups and tech events.

3. Elance

You’ll be able to make a profile right away without jumping through any hoops, enjoy payment protection to ensure you’re always paid for the hours you work and more.

4. Freelancer

Freelancer allows you to compete with other freelancers in contests to prove your skills. If you’re competitive and confident in your expertise, it’s a great way to showcase your abilities and attract more clients.

5. Guru

This site lets you easily showcase your past work experience and offers a daily job-matching feature to make sure you don’t miss out on any good opportunities. The GURU Work Room lets you easily manage all your work.

6. 99designs

99designs lets you compete in design contests and get feedback as clients choose the best ones. It’s a great way for talented designers to prove their talents.

7. Peopleperhour

This is a great platform, focusing on freelancing for web projects. If you’re a designer, web developer, SEO specialist, etc.....

Responsive Fix! Clearing Floats with clearfix method

What actually is clearfix? Here is some examples of a layout with clearfix, compared to a layout without clearfix?

The scenario: span float:left; and span float:right; are floated side by side inside a div element, and there’s a main div element after div.

The desired outcome: We want div to expand to the height of its child elements and we want (main div) to be after div .

The actual outcome: div collapses and takes on no height at all, as if there is nothing inside it, putting main div in an undesired location and potentially causing any backgrounds or borders on div to be missing.

Method 1: A clearfix is performed as follows:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Or, if you don't require IE<8 support, the following is fine too:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Method 2:   You don't have to use clearfix in this case .
.shape1 {
display :inline ;
width: 200px;
  height: 100px;
  margin: 1em;
}

You have to do extra work for IE6 and IE7 support of inline-block. Sometimes people talk about inline-block triggering something called hasLayout, though you only need to know about that to support old browsers.

 If you want support for older browsers, it's best to use this clearfix :

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Method 3:The Overflow Way
Using the overflow property on our div element, we can actually force the div to expand to the height of the floated elements. Our CSS will look like this:

.clearfix {
  overflow: hidden; /* can also be "auto" */
}

Method 4: In rule in w3c specification 
Added a new value to the min-height property , in order to help solve this problem. It looks like this:

.clearfix {
  min-height: contain-floats;
}

Problems with Responsive Design and How to fix Bugs

 

 

1. A More Problematic Visual Stage

In the past, the client had to approve static images and screenshots before development could begin. Today, designing can be a more chaotic and fluid process of sketching and prototyping where the focus is on designing elements and how they will be rearranged, depending on different device dimensions and resolutions.

Fix: 
There are two approaches to responsive sketching. One approach is creating sketches for a desktop home page, as well as every other website page, and then adapting them for the most popular tablet and mobile screen sizes and dimensions. Another approach is using paper and communicating to the client to demonstrate design layouts and how they will reflow on different screen sizes. Designing in the browser and working with HTML and CSS prototypes starts early on; creating a system of components and seeing how they can be reassembled for different configurations replaces the creation of wireframes for every single page and state. The chosen method is usually dictated by the complexity of the website.

2. Navigation

Before responsive design, every user knew where navigation was. Even though today, the three bars at the top left corner of the page usually represent the navigation "button," many users still find it difficult to navigate beyond the menu, especially when it comes to websites with complicated structure. Today, the whole concept of navigation has to be reconsidered.

Fix: 

Designers should spend more time trying to make navigation intuitive and self-explanatory. Studying the website’s content and information architecture, and understanding users—how and why they browse the site—is the only way to make a unique navigation decision. In addition, testing navigation on as many products as possible can help developers get it right.

3. The Appearance of Background Images and Icons

Images are crucial to a user’s experience on the web. In responsive design, images and icons have to be flexible to allow users to enjoy the graphics on high pixel density devices, which are becoming more widespread. Making sure the images don’t look blurry and poorly scaled up is the goal of every designer and developer.

Fix: 

 Lazy loading images can help optimize browser rendering and reduce the number of HTTP round trips by deferring the loading of images that are not in the client's view. Making icons scalable (using the SVG format, which keeps icons light yet high-quality) and retina-ready can also help users enjoy the website without loss of quality on any device.

4. Showing Data on Small Screens

Showing data tables (airline flight timetables, for instance) on small screens is a real problem when the tables are complex and convoluted. It doesn’t help that they are also often large with a great number of rows and columns.

Fix: 

Responsive tables are the best bet right now. There are also other methods: abandoning the grid layout and creating a smaller table that doesn’t call for horizontal scrolling; building more compact pie charts out of tables; replacing tables with smaller versions while offering a link to the full version; hiding unimportant elements on small screens with a dropdown menu with access to the full table; rainbow tables where colors are used instead of columns; and even flipping the table on its side to make it fit.

5. Creating Rich Experiences that Load Fast

One of the biggest challenges is finding the balance between a rich user experience and the fast-paced nature of the Internet. Responsive websites sometimes weigh a lot, and because they attract traffic from both desktops and mobile devices, the experience can suffer from slow loading times. This means losing business, as the majority of mobile users leave after five seconds of not getting what they expect.

Responsive websites sometimes weigh a lot and the experience can suffer from slow loading times
tweet this

Fix: 

 The solution is conditional loading, which allows for loading of only what users need, when they need it. The rule of thumb is this: first load content, then enhancements, then leftovers. With users so used to lots of images, galleries, documents, downloads, etc. on awebsite, with the mobile-first approach, designers should take care to keep only the elements that are absolutely necessary to convey the message of the website. Because the proliferation of mobile devices is outpacing desktops, conditional loading is the way to go. And since in conditional loading many automation tools for scaling and caching images are used, it makes future changes to the site easier and faster. Also, assuming that the user connection is not perfect is a must to provide high performance.

6. Longer Designing, Developing, and Testing Periods

Because responsive websites have to work amazingly well on multiple (very different) devices—all while boasting rich functionality and complicated design elements—they often take longer to design, develop, and test. Usually it takes about twice as long to design a responsive site compared to a regular site.

Fix:

The problem already contains a solution. Even though responsive sites may take longer to create, they are also better candidates for gradual change and natural evolution. Instead of having to implement major overhauls to a website, which are costly and lengthy, responsive sites can evolve step-by-step, saving owners a lot of time and effort in the long run.

7. Hiding and Removing Content

Websites with complicated UI elements, advanced search features, multi-step forms, data tables, calculators, dashboards with third-party scripts, and so on often pose a problem because they simply contain too much information. The approach so far has been to hide or remove content from users, but many people feel they deserve access to all information, even if they are browsing on a small device. In some cases, there is no way for a user to get the full version of the website they are browsing.

Fix: 

 Thorough planning from the onset that determines where content is arranged in a way that doesn’t force developers to hide anything is the solution. The goal should be to optimize as much as possible, remove unnecessary elements from early drafts and focus on the core structure of the website, without adding any bells and whistles. Now is not the time to embellish, but to prioritize and cut. It is always best to give the user the possibility to have access to the full version of the website, if they choose to do so.

8. Converting Fixed Sites Into Responsive Ones

This is a huge dilemma: is it necessary to change the less flexible code of fixed-layout websites or can they be left as they are and still provide acceptable performance?

Fix: 

The conversion process is a challenging, but for light and simple websites, it’s feasible and has been done successfully in the past. The choice is often to reverse style sheets and templates or start a greenfield rebuild, which is a process of rebuilding the site without the need to consider any prior work. When you have a bigger, complicated website, a greenfield rebuild is a better option than not doing a conversion at all.

9. Older Versions of Internet Explorer Don’t Support CSS3 Media Queries

When working with mobile-first techniques, your website might not display properly on older versions of IE. In these cases, developers should find a way to support an older website on mobile devices.

Fix: 

It is best to take care of Internet Explorer users and to offer them a handy solution. An experienced designer can easily change page layouts, depending on the size of the browser window, using JavaScript. With a goal of maintaining the original layout, the solution is to use polyfill, which is a portion of code that provides the technology that developers expect the browser to provide natively. Another fix may be to use a conditional IE style sheet with elementary styling or do nothing at all if it looks passable. It all depends on the needs of the end user.

10. Not Everyone Understands Why They Should Go Responsive

The process of working with clients is not always structured and orderly, and the methodologies for responsive design are still being refined and tested. Solutions to challenges are rarely set in stone, which sometimes creates uncertainty and confusion for clients.

Fix: 

Showing the benefits of responsive design in action is the best way to get positive feedback and approval. Responsive design can prove itself a significant advantage in the market in terms of multi-device functionality, making future fixes easy, and appealing to a much widest audience of users.

Conclusion

Even though responsive design is becoming more popular, there are still many questions left unanswered and no official solutions to the challenges that this trend poses. The most important thing to remember is that responsive design should improve experiences, not reduce opportunities for users, and all designer and developer efforts should be aimed at making that goal a reality.

A divine rule of TYPOGRAPHY

Ten divine rule of Typography 

Choose you Favorite Color and comment it

5 Great Tips For Good Web Design

++ Focus Only On Essential Elements :

This first step probably seems forehead-slapping obvious: of course I should put the focus on the essential elements in my site, what am I, an idiot? But a surprising number of websites fail to achieve this and the result is a big mess of important and unimportant elements spewed onto a page. I’m as guilty of doing this in the past as anybody. It’s hard to be objective and prioritize what’s important or not, because everything seems essential. If you want your website design to be simpler, identify what needs to be focus, just like with any good visual design or piece of art. And that means putting the focus only on the essential elements.

                                                          

Use the 80-20 rule:

What 20% of what’s on a page gives 80% of the value and content that people go there for? It could be the copy, some social proof (review snippets, testimonials, media badges), and a signup form or call-to-action button, for example. That’s the 20% right there. On your website, as well as on each individual page, focus on displaying only the 20% of site elements that are delivering 80% of that usefulness.

This isn’t a technical step but a principle that you can use as your guide to good website design constantly. The 80-20 rule will help good website design by pushing you to trim your site elements down to the essentials. What’s really cool is that the 80-20 rule can also help increase your desired results that you hope to achieve on your website. For example, an increased conversion rate in visitors subscribing, signing up, or buying. How? You’re making it so there are less distractions and things for visitors to click on to leave the page.

As we all know, we’re always looking for an excuse not to purchase something at the final step, and any reason to navigate away is a good one. Reduce those reasons and click-away options with the 80-20 rule.

++Get Rid of All Unnecessary Elements :

We’re continuing with the 80-20 rule here.

Now that you’ve identified the 20% of website elements that will get you 80% of your desired results, it’s time to get rid of all unnecessary elements. In other words, the 80% of website elements that will get you only 20% of results. It could be social media sharing widgets, sidebar elements, blog post meta details (date, time, author, number of comments, etc), or links in the footer (this is especially a huge culprit a lot of the times, particularly when the visitor is looking for the aforementioned excuse to navigate away from the page).

++Reduce the Number of Pages :

A large part of simplifying your website design is to simply have fewer places to explore and click around. You can do that by trimming the page count. Either get rid of unnecessary pages that deep down inside you know aren’t needed, or at the very least, fuse multiple pages into one. I mean, you don’t really need to separate "about the site" and "about me" pages.

Firstly, get in the mindset of the visitor – if you were to arrive on your website,what are the key things would you want to do? For instance find out what your stuff is about? Or contact you? Next, make sure that your pages facilitate what is necessary and nothing more. Don’t keep unnecessary pages on your website because you think you need to, or because other websites have them. When you reduce the number of pages on your website, not only it is easier for your visitors to focus on your content because there’s less places to click around, but your navigation menu is simpler too.

We’ve all been on websites with too many nav menu items. We don’t know where to start navigating because we get overwhelmed by the choices. And when we get overwhelmed by being presented with too many choices, we go with choosing nothing. By having as few nav menu items as possible, you make your website not only simpler but more inviting and friendlier to visitors.

++ Get More Content Above the Fold :

Studies have shown that a majority of people spend most of their time above the fold on web pages (what shows up on the screen without scrolling down). So if you want to increase the effectiveness of your website, have the main content and call-to-action elements above the fold. You can do something as simple as shortening the header height if you have a logo and a navigation menu at the top of your website.

This involves nothing more than changing the header’s "height" value in your stylesheet (typically style.css or stylesheet.css). Also, see if a sign-up form or button is below the fold. Move that element higher up in the page so it’s the first thing a visitor sees. After all, that is your desired call-to-action of the visitor, so decrease the work needed to get to it (ie. scrolling).

++Limit Your Color Scheme :

It’s easy to get carried away with colors. Why settle on 2 or 3 colors when you can have 12 or 13? But in order to simplify your website design visually, you need to limit your color scheme. When in doubt, use fewer colors. It’ll vary based on your design of course, but try sticking with no more than 2 or 3 colors to start off. If you need more subtlety and texture to your visual design, use shades of the same color – light blue for the background and darker blue for header and menu items.

I’m as guilty as anyone with getting wild with colors in the past. I’ll add this color, then another, and another – and before I know it, it looks like a rainbow diarrhea all over my website. You can have your website constructively simplified, but if the colors distract the eyes when you look at it rather than complimenting the content, then all that effort was for naught. So use fewer colors with your website design instead.

Colorizing Your Work Area or Office Space

Color psychologists maintain that certain colors affect our moods, and those moods, in turn, affect our ability to be productive. Regardless of the location or size of your office or work space, any adjustment that can contribute to a higher level of productivity is worth considering. Perhaps it's time to improve a color scheme that has become outdated and boring. Adding the right colors can bring new life into your work space and increase the creativity, communication, collaboration and energy flow.

Until recently, blue has been the all-time color of choice for offices and cubicles. Sky blue, royal blue and navy blue are popular variations. While the stronger, darker versions may be too overpowering for walls, adding a piece of Blue Jay office furniture allows you to introduce a pop of color without redoing the entire room. A blue area rug, lamp shade, file folders or desk accessories can accomplish the same purpose. Pale blue helps maintain focus and task completion. However, blues may not be the best choice for personalities that are already relaxed and have low-energy levels.

Although green is typically a cool color, some of the soft, warmer shades have become popular choices for today's modern offices. Green hints at outdoors and fresh air and nature at its finest. Bring in some living Bamboo, Money Plants, Snake Plants, or Mother-in-Law's Tongue for an even greener atmosphere. These varieties flourish in dark offices and naturally filter air pollutants. If you entertain clients at your desk or in your office, consider the positive feelings that chocolate brown walls can evoke. This color presents a reassuring atmosphere of security and credibility.

Work spaces that need to inspire creativity are energized by the color red. Ideas will flow as communication and collaboration are subliminally encouraged. If you meet clients at your desk, red is the color that tends to make the best first impression. However, if you are one of those people who are already highly stimulated, you might want to limit this powerful color to a few well-placed accents.

Orange is also an energizing color. It provokes a sense of enthusiasm and excitement. To moderate its influence, choose a terra-cotta or paler version for wall coverage. For a powerful pop of color, consider a bright orange task chair, desk accessories, file folders, 3-ring binders, wall posters or an orange upholstered bulletin board.

Many office complexes have already been painted standard neutral colors such as beige, gray, sand or tea, and personalizing with paint is not an option. Neutral colors are the perfect background for adding touches of your favorite color. Make you work space truly yours by adding accessories and desk tools in the color that lifts your mood and energizes you. Perhaps the colors of a favorite vacation place come to mind. Choose one of those shades and scatter it around your office area.

Finally, avoid yellow. Not only is it greatly affected by the lighting, but it is has the potential to be the most anxiety-producing and frustrating of all the shades in the color world. Purple is too closely associated with romance, and as such, it is definitely not suitable for most workplaces. Bright greens, reds, pinks or turquoises tend to be distracting and overwhelming. Studies show that employees feel overwhelmed in such intensely colored work areas.

When decorating your own work space or office area, take time to think about which colors will most complement your personality. Look for ways to incorporate your favorite color into your private space without offending the boss or the person in the cubicle next to you. Clean out the clutter, organize your space, add a touch of color and watch your productivity soar.

Spacing and Padding and Margins, oh my!

When talking about digital text it may seem a bit backwards to start with spacing, however this is a key element in content readability. The amount of space you place between your website’s elements dictates how quickly your reader’s eyes can dart from section to section.

10 years ago you’d be hard pressed to push beliefs that extra spacing can help. Most websites were running 10px Arial font squished together paragraph after paragraph streaming down the page. Setting a strong value for your line-height will give your paragraphs (and your visitors) room to actually breathe.

You’ll also want to ensure there is enough margin spacing set after each paragraph. Distinctive spacing within text blocks can help align your reader’s eyes with the content flow on the page. Anywhere from 15px-25px is perfect for a bottom margin set on all your paragraphs and even a few headings.

Digital Typography

You may question why we even need to consider digital type. What makes web copy so different from newspapers or books? The main consideration is the media from which you’re reading – a computer.

Staring at a dimly-lit computer screen and reading letters off a page gives a completely different feeling than picking up letters off pages in a book or magazine. It is also much easier to access content through the Internet where books are physical objects. This is a huge constraint when comparing the two areas considering you have access to hundreds of millions of articles just through Google alone.

Digital type also isn’t just for desktops anymore. Netbooks have become very popular for reading blogs online and mobile devices are seeing rampant growth. This new technologically powered era is a testament to what humans can build with a bit of hard work and determination, especially considering how quickly we’re advancing.

43 Web Design Mistakes You Should Avoid

The next step was to write a short description for each one, and the result is the collection of mistakes that you will find below. Some of the points are common sense, others are quite polemic. Most of them apply to any website though, whether we talk about a business entity or a blog. Enjoy!

1. The user must know what the site is about in seconds: attention is one the most valuable currencies on the Internet. If a visitor can not figure what your site is about in a couple of seconds, he will probably just go somewhere else. Your site must communicate why I should spend my time there, and FAST!

2. Make the content scannable: this is the Internet, not a book, so forget large blocks of text. Probably I will be visiting your site while I work on other stuff so make sure that I can scan through the entire content. Bullet points, headers, subheaders, lists. Anything that will help the reader filter what he is looking for.

3. Do not use fancy fonts that are unreadable: sure there are some fonts that will give a sophisticated look to your website. But are they readable? If your main objective is to deliver a message and get the visitors reading your stuff, then you should make the process comfortable for them.

4. Do not use tiny fonts: the previous point applies here, you want to make sure that readers are comfortable reading your content. My Firefox does have a zooming feature, but if I need to use on your website it will probably be the last time I visit it.

5. Do not open new browser windows: I used to do that on my first websites. The logic was simple, if I open new browser windows for external links the user will never leave my site. WRONG! Let the user control where he wants the links to open. There is a reason why browsers have a huge “Back” button. Do not worry about sending the visitor to another website, he will get back if he wants to (even porn sites are starting to get conscious regarding this point lately…).

6. Do not resize the user’s browser windows: the user should be in control of his browser. If you resize it you will risk to mess things up on his side, and what is worse you might lose your credibility in front of him.

7. Do not require a registration unless it is necessary: lets put this straight, when I browse around the Internet I want to get information, not the other way around. Do not force me to register up and leave my email address and other details unless it is absolutely necessary (i.e. unless what you offer is so good that I will bear with the registration).

8. Never subscribe the visitor for something without his consent: do not automatically subscribe a visitor to newsletters when he registers up on your site. Sending unsolicited emails around is not the best way to make friends.

9. Do not overuse Flash: apart from increasing the load time of your website, excessive usage of Flash might also annoy the visitors. Use it only if you must offer features that are not supported by static pages.

10. Do not play music: on the early years of the Internet web developers always tried to successfully integrate music into websites. Guess what, they failed miserably. Do not use music, period.

11. If you MUST play an audio file let the user start it: some situations might require an audio file. You might need to deliver a speech to the user or your guided tour might have an audio component. That is fine. Just make sure that the user is in control, let him push the “Play” button as opposed to jamming the music on his face right after he enters the website.

12. Do not clutter your website with badges: first of all, badges of networks and communities make a site look very unprofessional. Even if we are talking about awards and recognition badges you should place them on the “About Us” page.

13. Do not use a homepage that just launches the “real” website: the smaller the number of steps required for the user to access your content, the better.

14. Make sure to include contact details: there is nothing worse than a website that has no contact details. This is not bad only for the visitors, but also for yourself. You might lose important feedback along the way.

15. Do not break the “Back” button: this is a very basic principle of usability. Do not break the “Back” button under any circumstance. Opening new browser windows will break it, for instance, and some Javascript links might also break them.

16. Do not use blinking text: unless your visitors are coming straight from 1996, that is.

17. Avoid complex URL structures: a simple, keyword-based URL structure will not only improve your search engine rankings, but it will also make it easier for the reader to identify the content of your pages before visiting them.

18. Use CSS over HTML tables: HTML tables were used to create page layouts. With the advent of CSS, however, there is no reason to stick to them. CSS is faster, more reliable and it offers many more features.

19. Make sure users can search the whole website: there is a reason why search engines revolutionized the Internet. You probably guessed it, because they make it very easy to find the information we are looking for. Do not neglect this on your site.

20. Avoid “drop down” menus: the user should be able to see all the navigation options straight way. Using “drop down” menus might confuse things and hide the information the reader was actually looking for.

21. Use text navigation: text navigation is not only faster but it is also more reliable. Some users, for instance, browse the Internet with images turned off.

22. If you are linking to PDF files disclose it: ever clicked on a link only to see your browser freezing while Acrobat Reader launches to open that (unrequested) PDF file? That is pretty annoying so make sure to explicit links pointing to PDF files so that users can handle them properly.

23. Do not confuse the visitor with many versions: avoid confusing the visitor with too many versions of your website. What bandwidth do I prefer? 56Kbps? 128Kbps? Flash or HTML? Man, just give me the content!

24. Do not blend advertising inside the content: blending advertising like Adsense units inside your content might increase your click-through rate on the short term. Over the long run, however, this will reduce your readership base. An annoyed visitor is a lost visitor.

25. Use a simple navigation structure: sometimes less is more. This rule usually applies to people and choices. Make sure that your website has a single, clear navigation structure. The last thing you want is to confuse the reader regarding where he should go to find the information he is looking for.

26. Avoid “intros”: do not force the user to watch or read something before he can access to the real content. This is plain annoying, and he will stay only if what you have to offer is really unique.

27. Do not use FrontPage: this point extends to other cheap HTML editors. While they appear to make web design easier, the output will be a poorly crafted code, incompatible with different browsers and with several bugs.

28. Make sure your website is cross-browser compatible: not all browsers are created equal, and not all of them interpret CSS and other languages on the same way. Like it or not, you will need to make your website compatible with the most used browsers on the market, else you will lose readers over the long term.

29. Make sure to include anchor text on links: I confess I used to do that mistake until some time ago. It is easier to tell people to “click here”. But this is not efficient. Make sure to include a relevant anchor text on your links. It will ensure that the reader knows where he is going to if he clicks the link, and it will also create SEO benefits for the external site where the link is pointing.

30. Do not cloak links: apart from having a clear anchor text, the user must also be able to see where the link is pointing on the status bar of his browser. If you cloak your links (either because they are affiliate ones or due to other reasons) your site will lose credibility.

31. Make links visible: the visitor should be able to recognize what is clickable and what is not, easily. Make sure that your links have a contrasting color (the standard blue color is the optimal most of the times). Possibly also make them underlined.

32. Do not underline or color normal text: do not underline normal text unless absolutely necessary. Just as users need to recognize links easily, they should not get the idea that something is clickable when in reality it is not.

33. Make clicked links change color: this point is very important for the usability of your website. Clicked links that change color help the user to locate himself more easily around your site, making sure that he will not end up visiting the same pages unintentionally.

34. Do not use animated GIFs: unless you have advertising banners that require animation, avoid animated GIFs. They make a site look unprofessional and detract the attention from the content.

35. Make sure to use the ALT and TITLE attributes for images: apart from having SEO benefits the ALT and TITLE attributes for images will play an important role for blind users.

36. Do not use harsh colors: if the user is getting a headache after visiting your site for 10 consecutive minutes, you probably should pick a better color scheme. Design the color palette around your objectives (i.e. deliver a mood, let the user focus on the content, etc.).

37. Do not use pop ups: this point refers to pop ups of any kind. Even user requested pop ups are a bad idea given the increasing amount of pop blockers out there.

38. Avoid Javascript links: those links execute a small Javascript when the user clicks on them. Stay away from them since they often create problems for the user.

39. Include functional links on your footer: people are used to scrolling down to the footer of a website if they are not finding a specific information. At the very least you want to include a link to the Homepage and possibly a link to the “Contact Us” page.

40. Avoid long pages: guess what, if the user needs to scroll down forever in order to read your content he will probably just skip it altogether. If that is the case with your website make it shorter and improve the navigation structure.

41. No horizontal scrolling: while some vertical scrolling is tolerable, the same can not be said about horizontal scrolling. The most used screen resolution nowadays is 1024 x 768 pixels, so make sure that your website fits inside it.

42. No spelling or grammatical mistakes: this is not a web design mistake, but it is one of the most important factors affecting the overall quality of a website. Make sure that your links and texts do not contain spelling or grammatical mistakes.

43. If you use CAPTCHA make sure the letters are readable: several sites use CAPTCHA filters as a method of reducing spam on comments or on registration forms. There is just one problem with it, most of the times the user needs to call his whole family to decipher the letters.

Tips to brand your website

Include your logo in all pages. Position it at the top left or each page. Complement your logo with a tagline or catchy sentence that summarizes your business purpose. For example "Always low prices" is the tagline for Wal-Mart.

Create a favicon. A favicon is that small graphic that appears next to the URL in the address bar.

Have a consistent look and feel in all your pages. Use a color scheme and layout that are clearly recognized across your site.

Have an About Us section, that includes all relevant information about you and your business.
Include a copyright statement at the bottom of each page.

Tips on website navigation

Design your pages to load in less than 10 seconds (50Kb maximum size, including pictures).
Group your navigational options in relevant categories.

Use common names for your menu options: Home, About Us, Contact Us, Help, Products. Avoid "clever" or "trendy" alternatives.

If your site uses Flash, provide also an HTML version for users who prefer a less fancy, faster site.

Provide simple text navigation links at the bottom of long pages, so users don’t need to scroll back up.

Link your logo to your homepage, except in the homepage itself. Put a link to your homepage on all your internal pages.

Display a "breadcrumb trail"; it is basically the path from the homepage to the page where you are. A breadcrumb trail looks like this: Home > Section > Sub-Section > Page, and it greatly facilitates navigation.

If your site is too big, provide Search capabilities. Include a search box in the upper right corner of your homepage, and a link to a Search page from your interior pages. Freefind ( ) offers you a free and powerful search engine for your site.

Set your search box to search your site, not to search the web.

Create a custom error page that displays a simple site map with links to the main sections of your site. That way, you will not lose visitors that have followed a bad link to your site or who have misspelled your URL.

Tips on Layout and Content Presentation

Save the top of your page for your most important content. Remember: good content must flow to the top.

Lay out your page with tables, and set the width in percentage terms instead of a fixed number of pixels. That way, your page will always fit the screen, without the need to scroll horizontally.

Optimize your page to be viewed best at 800x600 (the most popular resolution at the time of this writing).

Use high contrast for the body of your page: black text on white background, or white text on black background work best.

Don’t use too many different fonts in one page. Also, avoid using small serif fonts (like Times Roman): they are difficult to read from a computer screen. Verdana is the most web-friendly font, since it is wide, clean and easy to read.

Avoid long blocks of text. Use tools that facilitate scanability, like bullets, subtitles, highlighted keywords, hyperlinks, etc.

Avoid amateurish features like: numeric page counters, wholesale use of exclamation points, all caps, center justified blocks of text, excessive animated gifs, busy backgrounds, etc.

Don’t use pop-up windows. They distract your visitors and are immediately dismissed as ads.
Test your site so that it looks good in different browsers and resolutions.

Tips on Writing for the Web

Write in layman’s terms so that everybody can understand your content, unless you’re running a technical site for technical people.

Reading from a screen is painful: use 50% less words than you would use on print.
If a page is too long, break it into several pages and link to them.

Don’t use font sizes smaller than 10pt. for the body of your page. Specify your fonts in percentage terms instead of pixels, to let users set their own size preferences using their browser’s text view options.

Use a spell checker. Spelling mistakes are embarrassing and hurt credibility.

Tips to Know Your Customers

Ask for feedback: include a feedback form in your Contact Us page.
Publish an ezine and include a subscription form in your homepage. Give your customers valuable information and encourage them to contact you.
Include polls and other tools to gather market intelligence.

Tips on Linking

Make your links descriptive. They should indicate what the user will be linking to, as opposed to just saying "click here".

Don’t underline anything that is not a link.

Underline your links and use a consistent color for them across your site (preferably blue).

Use a different color for visited links, so that your visitors know where they’ve been (preferably purple or a more subdued tone of the unvisited links color).

When linking to a non-HTML file, such as Excel, Word or Acrobat, make it evident, by including a small icon next to the link.

Don’t link to "under construction" pages.

Make sure that your links work and that you don’t have broken links. There are free online tools that can help you with this.

If you use graphic links, don’t forget to use the ALT attribute. The ALT attribute should describe what are you linking to.

Tips on how to use graphics

Optimize your graphics. Use only .gif and .jpg formats. Make your image files as small as possible while maintaining acceptable quality. Use a free online graphics optimization tool.
Use thumbnails (miniature versions of a picture) and make them clickable to the actual size picture.

Avoid graphics that look like ads. People ignore them.

Use the ALT attribute on pictures, even the image is not a link. It helps users with disabilities and people who have turned off graphics.

Tips to optimize your site for the search engines

Create short, descriptive page titles, to entice search engine users to click on your links.

Create a site map containing all your pages, and link to it directly from your homepage. Search engine robots will follow the link to your site map and will most likely add all your pages to the index.

Decide what the two or three main keywords are for each page (the words you believe search engine users will type to find your page) and repeat them often in your page title, description meta tag and page body.

Create a Links page and call it Resources. In it, place links to those sites that have agreed to place a reciprocal link to your page. The more inbound links you have from quality sites with a topic related to your site, the better your site will rank with the search engines.
Use more text than graphics, and minimize the use of Flash and JavaScript. Search engines heavily favor text and will crawl and index your site faster.