Content Management Systems meant for wiki websites, too, like wiki sites themselves, need to strike the right balance between robustness on one hand and ease of use on the other. In this article, we take a look at some of the most popular wiki CMSs out there!

1. MediaWiki

Who doesn’t know Wikipedia? MediaWiki is used by Wikipedia as well as many other projects of Wikipedia’s parent organization Mediawiki Foundation. If you’re looking for a CMS for your wiki website, MediaWiki should be your safest bet! Not only is the CMS powerful, it is also very versatile and is ideal for any sort of wiki website.

MediaWiki

2. DokuWiki

DokuWiki is meant for developer workgroups, collaborating teams and small enterprises. As a CMS, it restricts itself mainly to documentation websites. The syntax is powerful and creation of structured texts is simple. Further more, DokuWiki does not need any database to run on as it stores all its data in plain files.

DokuWiki

3. PhpWiki

PhpWiki is another versatile wiki CMS. Unlike DokuWiki, it uses databases to store the information and is therefore, a slightly bulkier CMS. If you are looking for a nimble wiki CMS, PhpWiki might not suit your purpose. However, overall the CMS is a worthy competitor to all the others in the game.

PhpWiki

4. PmWiki

PmWiki attempts to bring the WYSIWYG approach to wiki websites. In general, you do not have to employ extensive knowledge of HTML in order to develop a website using PmWiki. Indeed, such features make PmWiki ideal for users who are not well-versed in HTML. On the downside, PmWiki’s update frequency has been erratic in the past.

PmWiki

5. TikiWiki

TikiWiki is known to offer many features ‘out-of-the-box’, such as setting permission levels for even the home page. It is loaded with numerous features, many of which might leave even the most experienced user overwhelmed. Currently standing at version 8.1 (stable), TikiWiki is a very popular CMS for wiki sites. It also features a bug/issue tracker mechanism as well as native support for RSS feeds and Calendar/Productivity addons.

TikiWiki

6. WikkaWiki

While WikkaWiki may not be known due to its modest feature set, it is one of the swiftest CMSs coded in PHP to date. Its speed and ease of use are remarkable, and if you plan to create a small wiki site that may not require heavy CMSs, you should consider WikkaWiki as an option. It uses MySQL databases to store information.

WikkaWiki

7. JAMWiki

JAMWiki is a JAVA clone of MediaWiki. Thus, it uses the same syntax as MediaWiki and is one of the leading wiki CMSs coded in JAVA.

JAMWiki

8. Enterprise Wiki

Confluence Enterprise Wiki is an enterprise CMS that targets teams, workgroups and other collaborative entities. It is a paid CMS – for a website with 11-25 users, you’ll have to shell out $800. You can also opt to host it on their servers, for a monthly hosting fee. In any case, Confluence is an option mainly for enterprises and is definitely not the CMS for your not-for-profit website.

Confluence Enterprise Wiki

9. Canvas ColdFusion Wik

Canvas ColdFusion Wiki is a CMS built using Model-Glue. It keeps track of all the editing and revisions performed on each page and is a decent CMS for teamwork.

Canvas ColdFusion Wiki

10. XWiki

XWiki offers a generic platform for developing wiki websites. It is built using JAVA and is licensed under the LGPL open source license.

XWiki

11. TiddlyWiki

TiddlyWiki is a unique concept in its own right. In fact, it is not even a full-fledged CMS. It is a single file, that brings to you all the characteristics and functionality of a wiki (including the style sheets, editing, saving, searching, tagging, etc.). Since it is nothing more than a single file, it comes with the added advantage of portability – you may upload it on your web server, copy it on to your USB drive or email it to your friends.

TiddlyWiki

12. DekiWiki

MindTouch DekiWiki is another enterprise solution. It aims to boost the productivity and efficiency of enterprises by offering a simple and non-interfering CMS.

MindTouch DekiWiki

13. ScrewTurn Wiki

Don’t let the name fool you! ScrewTurn Wiki is a fast, powerful and simple ASP.NET wiki engine. It is free and open source (commercial licenses are also available). The installation process is straight-forward and ScrewTurn Wiki has also been localized into multiple languages.

ScrewTurn Wiki

14. TWiki

TWiki is an enterprise collaboration platform and knowledge management solution. It is a structured wiki CMS that can act both as a groupware solution or a collaborative resource over the internet or intranet. TWiki’s niche lies in the fact that it is backed by a massive gallery of plugins/extensions.

TWiki

With that, we come to the end of this round-up. If you’ve used any/all of the above CMSs, do share your experiences with us!

1. Expression Engine

Expression Engine is one of those CMS that is easy to use. Within few minutes of testing it, you will already know the basic functions and will be able to play with them right away. This CMS is very flexible and creating content should be much more than easy. The templating system shows you immediately the changes you make and the last-generation caching system minimizes the database usage, which means faster loading times not only for you, but also for your visitors. Another advantage Expression Engine offers is the option to embed and run PHP directly in the templates, similar to the widgets from WordPress.

Expression Engine allows you to have multiple sites with just one installation. The caching system I was telling you about earlier keeps the site running fast because it stores database queries in the memory and reduces the database connections when web pages are generated. The license has to be paid only once and ranges from $99 for the “Freelancer” pack to $299 for the largest pack.

2. Business Catalyst

Business Catalyst is an Adobe product considered to be very powerful for developers. Basically it is also for content publishing, but has many other features such as e-mail marketing and site analytics. The analytics are maybe one of the most interesting features, thanks to the depth of the information the user gets, such as customer’s actions. The CMS lets you build and manage a customer database (which is feature most of the other CMS lack) and allows you to sell your products online. Unlike many other CMS, Business Catalyst can easily be integrated with PayPal, Google Checkout and other pre-integrated payment gateways.

The main difference between Adobe’s CMS and other ones is that Business Catalyst focuses much more on online businesses than on blogs. If you want to have a blog, then Business Catalyst is not the way to go. However, if you have products you want to sell, you can skip a lot of coding and stress by going with this option, because it is probably the best one out there. You can create a custom HTML/CSS layout, upload it and then integrate the available modules into it  - it can’t be easier. Adobe offers five types of monthly licenses for Business Catalyst, ranged between $9 and $79.

3. Cushy CMS

For Cushy CMS you don’t have to pay anything, because it comes free of charge. You can, however, go pro for $28 per month, but you have pretty much what you need if you are a beginner in the free version. Cushy is very similar to WordPress in this matter. If you go for the free version you have only very basic features available and will not be able to upload your own logo, change colors, use your domain name, customize the themes and others.

The main advantage of Cushy is that is simple and you do not require PHP, ASP.net or any other programming language to use it. Cushy produces as well standards compliant, search engine friendly content. Another advantage is that the server space is unlimited even with the free version.

4. Contao

Formerly known as TYPOlight, Contao changed its name in June 2010 and is an accessible open source CMS that enhances functionality. There is no CMS in the world that can compare itself with WordPress in terms of plugins and extensions, but Contao does its best efforts with a large database of useful plugins available for everybody. There are hundreds of additional modules which are easy to install and customize and there are also lots of templates available.

The downside of Contao are exactly the custom templates which have to be bought and for which you might need to know some CSS, because they definitely need to be customized to fit your needs. The templates are not great and if you look to create a visual impact but don’t have design and coding knowledge, Contao might not be the best choice.

5. Radiant CMS

Radiant CMS is based on Ruby on Rails and has a very active community for support and updates. Radiant focuses on making everything user-friendly for everybody and offers flexible templates which can be customized right after installation. Radiant features a very good and flexible site structure, custom text filters and page caching. It is not full of plugins and modules, but it gets the job done. Moreover, the CMS is free of charge.

6. SilverStripe

SilverStripe is another open-source application written with the use of PHP. It has many configurable options and targets websites with a lot of content, because it is very easy to manage it. Built on the Saphire framework, SilverStripe offers very good SEO support and allows users to customize the administration area too, which is quite rare nowadays.

The downside of SilverStripe are the default layouts, which are pure basic templates, but as long as you know some design, customizing them should not be a problem. You might also find some custom templates on the internet and spare some time designing yourself.

7. Textpattern CMS

Textpattern is a relatively popular Content Management System due to its simplicity. It provides great tools and allows users to create content very easy, quick and according to web standards-compliant pages. There is not a WYSIWYG editor included, because the CMS uses textile markup for content generation, which means text is automatically generated into HTML (this option is available in WordPress as well, so you should be used to it). The administration panel is very easy to use and follow.

Textpattern comes free of charge as well and allows many things such as layout editing, file and image upload, plugin installation, SEO tools, subscribing features and a big support team which continuously improves the platform.

8. Alfresco

Alfresco is very easy to install and lets you convert files into documents. Alfresco might be a bit more difficult to get used to, but if you put some time into it, in the end it will pay off. Alfresco is not that much for beginner bloggers, but targets developers much more. Don’t get me wrong, this CMS is very flexible and usable and the administration panel is organized, maintained and easy to navigate through, it just takes a bit more time to get used to it. Alfresco is an open-source product as well.

Tips on choosing the perfect CMS for you

After reviewing these CMS, you probably have a difficult choice in choosing one of them, therefore I thought of sharing some tips with you very fast. First time you have to think what your needs are. If you are business oriented and want to sell something, Adobe Business Catalyst is probably the only choice, although it might be a bit pricey. The rest of the CMSs reviewed here are for bloggers, although Expression Engine might be a bit too expensive, so try to avoid it if you only do this for passion and don’t plan on getting serious with it.

You also have to think how intuitive and easy to use the system is and how good the GUI interface looks. If the administration panel is difficult to use, then why should you choose that one? In the end, the administration panel is the place where you will spend 95% of your time.

Think also if the CMS is flexible enough and allows you to use plugins or modules. And make a short research before choosing one of them and see if the available plugins and modules are enough for you. If the CMS is not extensible, I personally don’t consider it worthy to be chosen.

In case you are a developer, this tip might not be for you, but if you are a blogger only, or maybe a front-end designer, would you feel comfortable to have to edit ASP.net or PHP pages/modules? If not, then choose a CMS that doesn’t force you to do this. If it is too complex it might not be for you.

Other important thing you should consider is the security. I am aware of the fact that the largest CMS in the World, WordPress, has security issues all the time, but at least they try to work on them. There is no perfect CMS if we take a look at their security, but hey, this is the internet today, there is not that much you can do. However, it is a good to make a bit of research and see which CMS is the most secure.

Find out if the system is optimized for speed and performance, like Expression Engine is, and then look into the documentation and support. At some point in time you might need some help and it is important to have a place where you know you can find answers.

With this last tip I put an end to this article. I hope all the small, but very good and interesting CMS I’ve reviewed today look interesting to you and I hope this article helps you a bit in the process of choosing your next Content Management System.

BONUS

Earlier today Salman talked about Pligg, a Social Networking CMS for people who want to create a website like Digg and Reddit. Also included are 20 examples of how Pligg is used. Be sure to check it!

In this article we will focus on a user-centered approach of the mobile webdesign which became popular in the last couple of years. With smartphones having a narrow screen, limited space and less keys, the mobile webdesign is quite different compared to the classic one, for computer screens.

On-going cycle

There are many steps from the idea of a mobile website to actually having one. The user-centered mobile design cycle has five different phases, which we will take a look at soon. The phases are: Analyze the situation, Understand the users and their needs, Prioritize the features, Design the website, Review, testing and refining. This cycle is ongoing on a long-term basis and never ends. Several months after the official launch you might find yourself in the situation that you need to start the process again. As a matter of fact, this happens in web design as well, with companies redesigning their websites/portfolios very often due to analyzing the situation again and realizing things need to be improved.

Let’s take a more in-depth look at each phase and see why each one of them is important in its own way.

1. Analyze the situation

Analyzing the situation starts with the following question: “Do I really need a mobile website now?“. It sounds silly and for most of you might not be relevant, but companies have to ask themselves this question. Not only is a mobile website going to cost several hundreds of dollars, but it requires research and, as we mentioned earlier, a lot of ongoing work. If the company does not have a design department to maintain it, a mobile website might become useless or ineffective in a few months. What you have to do is to find out if your website is accessed from many mobile platforms. You can simply do this by checking your stats in Google Analytics or any other tracker.

Image Source: mobilewebsite.com.sg

It is not a bad idea to see how the competition is doing in the field. Don’t forget you are not alone in the market and these small details might make the difference at some point in time.

When you created a desktop website, you had some clear ideas in mind: you wanted to raise awareness, to increase the sales and get your company beyond the borders of your town, region or country. Think about whether the mobile website would do good for you and your company. Otherwise why bother to design one if you don’t get anything in return?

If you don’t see any reason for creating a separate mobile site, then just optimize your site for mobile devices (e.g. images size) or install a plugin if you run WordPress. Banks and online shops need a mobile website, there is no doubt about this, but I doubt you need a mobile website if you own a clothing manufacturing company. Big companies like IKEA, Burger King or Mercedes do not have mobile websites, because they consider there’s no need for one right now. So think twice about it, if these huge companies do not have a mobile website (and it’s not because they have money issues), would one bring you some advantages?

Now if you still think you want to go through with this, then let’s go to the second phase and get closer to the user and how should we please him.

2. Understand the users and their needs

The whole web design process is user-centered, because the user is the one whom we create a website for. Mobile web design is the same. To achieve the best results you have to understand the needs of your users. This is one of the difficult parts, because everything starts from here. If you get this wrong, the whole solution will fail. The research can be concluded through observation (how the user interacts with your page, what are the main things he is interested in), interviews (quizzes) and focus groups (form of research in which the interviewed is represented by a group).

Image source: BBC UK

Some of the main questions you need an answer to are:

• Why do they (want to) access your webpage from a mobile phone?
• What features are they mainly using?
• What is important for them when browsing on the go?
• What is it they do not like when browsing from mobile?
• What devices, browsers or applications they use to access the web from a mobile device?

After having the answer to these questions, what you still have to do is to research the market. Now you have a good understanding of your users, but you need to know how to design in order to maintain your solution within the popular trends. Opera’s State of the Mobile Web, comScore, Forrester, eMarketer and others are good places to do your research.

3. Prioritize the features

After you conclude the research, you’ll probably have found out what features your users are accessing the most. This and the other answers gave you an insight of what is it you have to feature in your mobile solution. The reason why you can’t just insert all the features from launch is because you might not be able to handle maintaining all of them. Don’t forget, it all requires effort, money and time. Try not to build everything from the beginning and stick to the most important features, then if everything works well there’s always more place on the web for the rest of your ideas.

Image Source: paperthin.com

While we have this figured it out, let’s move to the most interesting part.

4. Design the website

This next phase can be considered a short guide to mobile web design. When you design a site for the desktop, you use some basic rules you’ve learned when you first arrived in this business. Well, it is exactly the same with the mobile websites, only there are some other rules. There are lots of mobile design considerations you need to think of and we take a look at the most important right now.

One of the most important differences is the context the user is accessing a website from. When he uses the desktop version, a user most probably sits in his own chair at home, with maybe a cup of coffee, listening to music and chatting at the same time. This is comfort. When a user browses from a mobile phone, the context is different. He is probably on a bus or train, maybe even at work in a meeting or on their lunch break, probably trying to multitask while viewing your site on a small device that has a narrow screen with a small font. Now that’s a big difference.

After using different considerations, we can come up with three main reasons why people browse with smartphones: microtasking (Twitter, Facebook, LinkedIn), boredom (playing games, listening to radio) and activities related to the social, offline life (finding shops or restaurants nearby, checking reviews). Besides these, the basic things that need to be taken into consideration are the following:

Design for smaller screen

Remember that the mobile web design is designed on a big screen. It is definitely not easy to make everything perfect when working like this. There are so many screen sizes out there for computers, but there are even more for mobile phones. Almost every smartphone manufacturer has its own preferred screen sizes or resolutions. Even the iPhone 4, one of the smartphones with a big screen, is tiny in comparison with a default setting of 1024 x 768 for a desktop screen. Moreover, some phones are able to change orientation and the website has to change accordingly. No computer screen changes orientation, so this is actually something new for developers.

The best solution is to opt for flexible layouts that will adapt for smaller and larger screens. The easiest way of doing this is having a wrapper with sizes given in percents, not in pixels. Furthermore, every little detail in the HTML has to be given in percentages and not in pixels to make sure the layout is flexible. This way the website will look the same on screens of 150px width or 200px width. Also, depending on the mobile platform, there are different groups of users sorted by the browser they have. It can be Safari, Opera Mini, Nokia WebKit (only for Europe), Android WebKit or BlackBerry WebKit. All these browsers have their own problems and do not support different kind of languages, although all of them support CSS 2 and soon CSS 3 as well.

Simplify the navigation

There is no mouse on phones, therefore the developers have to focus on the navigation a bit more. Upon the small screen, users also rely on touch, trackballs and keypads to click and navigate, so the experience is very different compared to the one on a PC. Information and main features are usually presented on several lines (as you will be able to see at the end of this article), because most of the mobile screens have a larger height than width, therefore it is also more vertical space to work with. The most important features usually come first, because the user might have to scroll down to see the last ones. The numbers of categories, links and levels of navigation have to be reduced as much as possible.

Although not many websites do this, providing key shortcuts (0-9) to access different links might be very useful as well. CNN did this a while ago, although we do not know how well it worked out. Because people have to navigate by touching most of the time, make sure the height and width of the buttons are proper. If you have three buttons in row with a width and height of 15px it might be difficult to tap the one in the middle. Do not use pixels, but percentages! There is a big difference between a button with a width of 30px on a 250px wide screen and one with the same width on a 150px wide screen.

Your mobile website needs to make an immediate impact, therefore try to make the links as visible as possible (see CBS News’ website). Always offer a link to the full-sized webpage, because if a user is on a wireless connection he should be able to visit the main website if he wants. I usually use the footer for this link. Because navigation isn’t as deep and difficult, there is no need for breadcrumbs to use space.

Prioritize information

Because there is not much space, you have to be concise and only type in the important information. The reason behind you linking to the master webpage is for users who are interested in finding more information about you and your company. There is no reason for you to fill paragraphs with useless information, because the mobile webpage is for presentation only. You don’t sell from there and the main reason behind it is to bring in more clients. You gave them a “teaser”, a chance for finding more (the full-sized webpage), now it is their move.

Minimize user input

Because the user is not in front of his keyboard, it is also a good idea to help him a bit. Keep the URL as everybody else does (mobile.site.com or m.site.com). If the user requires registration, narrow the fields as much as possible. Instead of asking for city and state, ask for the ZIP and there you go, one field less to type in! Also, make use of the geolocation if you can feature it. Use smart features, such as remembering the latest data input. Applications related to transport usually remember the last stations the users typed in. It is a bit different with the websites, but try it. Moreover, offer the possibility to stay signed in.

Keep the usage low

Even if today we have 3G speeds and wireless connections, users in some countries still pay for each bit of data they use. Therefore don’t insert too many images (or at least not high-quality ones), keep the page small, cut unnecessary code, comments and optional tags.

Furthermore, you can use a script to detect if users visit your homepage from a mobile device. If this is the case, simply redirect them to the mobile website. Flash, JavaScript, cookies, HTML5, frames and pop-ups do not work on mobile phones yet, so do not rely on them. You will probably need to make your users scroll, but only do it one way. Most websites scroll vertically, do not make the users scroll in both ways.

5. Review, testing and refining

After you are done with these four phases, you still have a small step until the official launch: you need to test your solution. This does not take too much time, but it is another important step, because releasing a product with bugs might make you lose clients or visitors, in our case. Double check the code (it would be a good idea to do it by W3C’s standards) and try to use your mobile website on a smartphone, because mobile phone emulators are good, but not entirely precise. Ask your friends to offer you their smartphones for short 10 minutes tests and make sure everything is in place. Otherwise go back to phase 4 and refine the website until it works perfectly.

Improvements

As discussed earlier, this is an ongoing cycle, so you will have to make improvements all the time. They can be updates, new features or a whole, from scratch, redesign, but always try to offer something new to the users. Try to track your mobile website visitors and observe their behavior. If they spend way too much time on your site, it is probably because it is too heavy and it loads slow. If they spend next to no time, it is because you can’t catch their attention immediately. Track your users and determine your website’s strong and weak points and refine them.

Conclusion and examples

There are so many things to talk about on this topic, but we will stop here. I think we’ve covered enough for one day and, as all the basic information has been given out, I am sure now you know more about how to approach the design process of a mobile website. Here you can see a showcase of several mobile websites designed very intelligently and featured the way they should be.

1. Yellow Pages

Yellow Pages

2. Walmart

Walmart

3. Vimeo

Vimeo

4. Trip Advisor

Trip Advisor

5. Flickr

Flickr

6. Digg

Digg

7. DeviantART

DeviantART

8. CW TV

CW TV

9. Amazon

Amazon

Further sources on this topic

Tips to design iPhone apps and webpages

Mobile webdesign trends of year 2009 (this may be a bit old, but many elements still apply today)

Tips and best practices for mobile webdesign

Is there something else you would like to add? Do you have other opinions about this process or is it maybe something you do not agree with?

To all website owners out there who are wondering what’s wrong with their website, I suggest you read this (and part one) and learn from the grave mistakes of others. This is also good for people who are thinking of creating their own website. Be sure to read the comments because, very often, the gems are hidden there!

Too Much Pagination

Have you visited Cracked.com lately? Their articles are paginated, but that’s a good type of pagination since you’ll rarely see it exceed two. The problem with other websites is that they’re too concerned with page views that they tend to chop a 1000–word article into five or ten parts (seriously, I saw one news website do this)! Needless to say, I never visited the website again. This might not be the designer or developer’s fault, but internet entrepreneurs should be educated on how to deliver content well.

Hidden Text and Links

You have text in your navigation and content partly because of SEO, right? As mentioned in Part 1 by our readers, using images for navigation is okay, but how will search engines crawl them? Answer: “text-indent: -9999px” (it’s over 9000!), or hiding the text using CSS.

Now, this is something very controversial. In my search for free, and good, WordPress themes I stumbled upon this article by Siobhan which talks about hidden “spam” links on many free WordPress themes. These free themes are bad for SEO, Google has a policy about hidden text and links which states that intentionally hiding the text/link behind an object or out of the screen’s view may be cause for the removal of the site on Google’s search results page.

Click to read more about Google’s take on Hidden text and links.

In-line Styling

To demonstrate the evils of in-line styles and what damage they can do, here is James’ comment:

Again, this was pointed out in the previous part. Instead of using an external CSS, some insist on styling on the spot –  which I am very guilty of! While the appearance will clearly be the same, this is still a bad practice because as the website grows, so does the styling for everything. While using an external master sheet may seem to be a daunting task for some, the ease of access to it is far superior than navigating through a series of HTML tags looking for the thing you need to change.

Again, stop in-line styling and create an external CSS. It’s also a good way to recycle codes, right?

Too many Social Media buttons

(website’s name is intentionally withheld for my safety; some are highlighted look below)

Competition is high, we understand, but having 10 social media buttons at the end of each article? Seriously? Today, people are content with Facebook, Twitter, Google+, and sharing via e-mail (share via e-mail?) so let’s keep it at that. No need to add seven or ten buttons because 1) it doesn’t look good because it seems like you’re hogging, and 2) it’s not pleasing to the eyes.

Splash Pages and Pop-ups

Well, it actually depends. If it’s an 800 x 600 advertisement I probably won’t visit again. 1stwebdesigner is also guilty of this, and I’m pointing this out because I’ve seen comments  and e-mails jeering the pop-up. The good news is, we will be limiting its appearance and probably remove it totally. For that, we’re sorry for any inconvenience it might have caused you. But, again, blocking the view is never a good practice, save for a limited-time campaign.

While I was looking for a cheap hosting company for my website there was this hosting company that won’t let me get out of their website. The first click on exit button there was a JavaScript pop-up telling me that they’ll offer me a 50% discount. What?

Also, I’m sure you’ve seen this “Share” button somewhere. I really hate this, and I’m sure many of you will feel the same. It pops out whenever the cursor is hovered over it and stays for a few seconds.

This will be my second time calling names. GooglePlusAnswers.com is a whole new level of splash/pop-up/irritating.

Why must I share or like or tweet or +1 your website or wait 30 seconds before you grant me access? Sadly, it does not stop there. If you don’t want to share, you’ll keep on seeing the same thing all over the website.

This lame stunt also happened during Facebook’s debut. “Like this to unlock content” my a–-!

Dark Background and Light Font Color

To demonstrate, click the image to open the website and read a line or two. After reading, open Google. It buuuurns!

Perhaps the greatest affront a designer can do to the world is…

…not striving to learn new techniques when the whole world is changing rapidly. As a designer, it is your duty to go with the flow, to commit necessary changes when the world demands it. Part of it is to educate those who are below you so that the spread of good practice will propagate. If there is enough reason to believe that your design is not doing any good, instead of waiting for it to work, why not find a different method to make things work?

So, what say you? I’m pretty sure I’ve missed quite a lot of bad practices, so fire them all below!

Up Next

Next time we will talk about the small things that web designers do which make people love them. Small things mean a lot, right? For instance, a simple horizontal rule to separate content smoothly, usability options for challenged individuals, and many more. Stay tuned!

For professionals and experts in the field, we need your knowledge and opinion here!

When designing you should always think several steps ahead because the initial design can make or break everything. Always ask yourself the following:

• Will it be easy to maintain when it grows?
• Will it be easy to access?
• How about SEO?
• Will it be easy to update/make revision?
• What will it cost?
• How will the users react to it?

iFrame and Tables

For employers/clients out there, there will be designers/developers who will sacrifice future convenience for a little comfort at the present moment. Like doing things the wrong way (because you won’t notice the difference anyway) because it’s easier and faster to do. For goodness sake designers and developers, do the right thing from the start even if it’s harder to do and harder to learn.

Wait, what did I just talk about?

First, with tables. <table> was designed for tabular data, not for structuring websites. It’s for showing figures like in Microsoft Excel. Obligatory, it was once a fad to use tables to structure websites, but that was pre-CSS. If you made the reckless mistake of structuring a website using tables, I’m afraid if you do not correct it soon, it will be a snowball of problems in the future.

Problems how, exactly?

1. SEO –  according to a friend of mine who’s into web development, although content inside a table is crawled by search engines it is still better to use <div> because it is crawled first. When it comes to crawlers, the first thing they see is the most important.

2. Code and Maintainability –  wait, code is for coders, not for designers! Wrong. Even if you consider yourself a pure designer, you should still learn how to code. Especially learn the workings of HTML and CSS. Now, tables are very hard to maintain, especially when the website is a large one. Aside from the labyrinth-like nested code of tables, there is the issue of maintaining it properly. In cases where a large website, using tables, needs to be updated..it will be hard to pull data and restructure the website. That I promise you.

How about iFrames? iFrames are cool. You can load a single frame without affecting the other frames. It can also be used to..wait, what? iFrames are more ancient than tables (lol). Users will have trouble bookmarking an iFramed website because there are literally many pages in one page.

So, what should a budding designer and developer use?

For the love of Batman, use CSS and learn AJAX. <div> is much better, and was designed for this very purpose: easy to maintain. You want to load data easily without refreshing the whole page? Learn AJAX!

Animation

Even Nathan Fillion is disappointed.

Even the slightest movement can be detected by your peripheral vision. Humans have evolved with very sensitive peripheral vision to avoid a predator’s attack. Over thousands of years, once we’ve all become conveniently secured from vicious animals, the almost-instant reflex is still with us, making slight movements outside our focus irritating.

This is also the reason why advertisements with animations should die, especially on blogs and news websites where people spend a great deal of time reading, with eyes focused on each line. A slight blink to the right will instantly remove a reader’s attention, although in due time people will learn to filter them out, it still bugs many people including me.

This brings us to marquee. They were once hot, at least for noobs, I even used to add one on every webpage during my freshman year in college. To beginners out there, NEVER! Sadly, I know a couple of high schools and colleges that teach their students to use marquee.

Images

No, please, don’t use images for your navigation. Aside from sacrificing the website’s loading speed, you are also telling the whole world that you’re greatly outdated.

Let’s take bad practice to another level: different image on hover. Never. Even if your client says so, fight to the death for your right to practice what is proper.

If the website’s purpose does not require it to display images, it’s better to design using CSS. I’ve seen websites use background images that load like a turtle, what’s worse is that they’re full 1024×800 images.

Instead of using images for navigation, use text and CSS for effects.

Then there’s the question of what image format to use. I’m no expert when it comes to this so I’ll refer you to a post by Rachel Arandilla (one of 1stwebdesigner’s regular contributors) about Different Image Formats. It should give you a good idea of what image format to use for the web. Mostly, it’s PNG and GIF, with an exception of JPEG for high-quality photos. Still, visit and read the article for an in-depth explanation.

Music and Video

Specifically background music. A startled visitor will ask, “where is the boombox?!” and will just close the site, a 100% bounce.

I’m not a fan of name calling, but just this once I will name one website that auto-plays its video: Sidereel.com. Follow these easy steps: 1. select one TV show and click it, 2. wait for it…, 3. wait for it…, 4. did you hear it? It’s auto-play!

In any case, never auto-play anything. If you need to auto-play it, at least have the decency to start it on mute.

Your Turn to Share

These are very basic, and very old, practices that were once hot. A lot of has changed since these outdated methods were considered cool or good, but there are still people who are go down the wrong path. So, how do we prevent this from happening? By telling the world the correct practices. Now it’s your turn to share!

Ancient practice is ancient. Watch out for part 2!

If you’re a small business owner, your website is a pivotal part of your marketing and branding, and shouldn’t be taken lightly. It’s integral to not just focus on appearance – but usability – as this will play a major role in how long your customers stay around.

In this article I will address the areas that factor into whether a small business website is ultimately successful or not.  Pay careful attention to these areas in your next design for a small business, as they will reap benefits for your clients in the long run.

Articulate Your Mission

In today’s society buzz words are a thing of the past. Freely express your vision for your business with the world on your website. You can start by asking yourself (or your client) these three questions:

1. Who are you?
2. Who are your potential customers?
3. How can you tell your potential customers who you are?

After answering these three questions your can begin to develop a creative strategy for your website that will ultimately make it more effective. These questions hold the key to making marketing decisions, branding your business, building fierce loyalty within your customer base, and a lot more.

You’ll find mission statements for some well-known companies here.

Keep these tips in mind in creating copy for your site:

• Employing overly sophisticated language or industry-specific jargon could confuse, isolate, and frustrate clients. Use words you would use when speaking to someone in person.
• Read your marketing material to a child in late elementary or middle school. Do they understand your product? If not, what did you need to tell them before they did?

A Call to Action

You’ve spent hours upon hours designing a beautiful website for your clients, complete with custom illustrations and a flashy new slideshow, but your client isn’t getting any new business. A fundamental error of many small business websites is they fail to include a clear Call to Action. If you aren’t leading users to commit to an action (buy a product, contact you or subscribe, for example), then you are losing them.

You may have spent a lot of time driving traffic to your client’s website, ultimately to only have these customers not convert into new business. If a call to action is a small link buried in a sea of text, it’s easy to see how these customers got away. To achieve a business’ goals, creating a successful call to action to guide users where they need to be should be at the forefront of your web design check list.

The call to action button above is placed in a prominent location; it’s large and has a distinctive color with respect to surrounding elements. To provide additional context on what it means to “Purchase the book”, the call to action button is followed by text explaining cost and available format (traditional book or PDF).

Keep the following in mind when creating the right call to action:

• The design of a call to action can be broken down into 4 simple elements —size, shape, color, and position. Each plays a vital part in determining how effective the call to action is in directing the user.
• Don’t overdo it with multiple call to actions on each page.
• Provide access to the call to action quickly. Your visitor is most interested in accessing this information as quickly as possible so don’t create any unnecessary hurdles!

Content

We all love a beautiful website, but when that website loads slowly or gets in the way of accessing pertinent information, it’s time for some restructuring. It’s important to address what is the ultimate goal you wish your visitor to achieve in visiting your site. Your site should ultimately draw focus to the content, and all those bells and whistles are just icing on the cake.

Most people won’t read everything on your page, so it’s critical to decide the most important content that needs to be there. This can be achieved through a visual hierarchy that guides the user through the page and creates a more enjoyable user experience.

Here’s an article on Eye Tracking to give you a better idea of how to structure content.

Here are some tips to keep in mind when structuring your content:

• White space is necessary. Giving your content room to breathe allows the user to focus on the most important aspects on any given page.
• Break up lengthy blocks of text into digestible blocks. Heading, sub-headings, bullets, blockquotes, and paragraphs are all necessary components of a well-structured website.
• For every flash animation or widget on your web site, your site’s loading time will increase while your screen real estate decreases.
• Challenge every item on each page and ask, “Does it really need to be there? Does it serve a specific purpose? Can I live without it?”
• Crisp layouts, cohesive colors, and well thought-out design elements give off a sense of know-how and experience.
  

SEO

Search Engine Optimization (SEO) should also be addressed in your overall website strategy. Quality content with legitimate mentions of key words and topics related to your business will help to bring more business your way. What’s best is results are now consisted of all kinds of content, including videos, images, maps, business listings, tweets and even Facebook Page posts.

• Add a Blog. Search engines love fresh content and if your client updates it regularly, they will experience a distinct SEO advantage. The interactivity also increases the likelihood that potential customers will social bookmark it and share it with their network.
• Consider creating a YouTube channel. Every video you post to your channel can be tagged and indexed, increasing the odds your brand name will appear in natural searches for keywords associated with your business.
• Remember to add footer links to every page, use meta description tags, and make each page unique.

Examples

Mailchimp
MailChimp helps you design email newsletters, share them on social networks, integrate with services you already use, and track your results. In addition to a user-friendly navigation, a prominent call to action button is displayed, encouraging users to get started.

Craft Coffee
Craft Coffee is a coffee discovery service that explains the value it brings to customers as soon as they enter the website. After highlighting their services, they direct users to “Buy a Tasting Box” with one of their highly visible call to action buttons.

Your Web Job
Your Web Job is a hub for job-seeking web professionals — project managers, copywriters, SEO experts, usability folk, social media gurus, and designers and developers — and for those who want to hire them. A call to action button is placed right at the top of the page, encouraging visitors to submit jobs right away.

These simple procedures in web design are just stepping stones on your way to creating a memorable website for your business. These are just a few rules, have you found any others in creating small business websites for your clients?

Like the previous article, we’re focusing on another 10 mistakes that can transform your website design into an unpleasant place to be. However, this time I won’t show you extremely bad layouts that make you laugh, we are now on the next level and will focus on bigger mistakes that good designers make.

11) Distracting Animations

A boring design does not bring light to your visitor’s eyes, however, having too much animation on your website brings plenty of downsides to your business. Distracting the user from the purpose of their visit ensures he doesn’t get the message and doesn’t return. If you plan to use animations on your website, make sure they are appropriate for the product you are selling or displaying. After that, make sure it is correctly balanced with your content, so in order to do that, you need to ask yourself three questions:

1. What is the first thing you look at when you visit that specific page (animation or content)?
2. How long it takes to view the entire animation?
3. Can you read text easily while the animation is playing?

The answer to the first question will probably be the animation, if it’s not you have passed the test and your animation is not disturbing your visits. If the animation is the first thing you see, it means it has a bigger visual impact than your content, and you need to answer the second question. If the answer to the second question is “looping” or “too much”, you have a problem and the answer to the third question will be “no”.

So the rule is simple – the user can’t be distracted while he’s reading, so make sure your animation ends quickly or has a small visual impact.

12) Cross-Browsing

In a perfect world, there would be no IE, people would use the same web browser everyday, and web developers wouldn’t have headaches while coding their websites. However, in the real world, there are hundreds of web browsers and each one renders a website differently.

“Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers.”

When you start building your website, you simply can’t forget that it will render differently in Firefox than in Chrome or Internet Explorer. So in order to get consistent results on most popular browsers, you need to write clean code and follow the W3C standards.

13) Confusing navigation

Navigation should help the user to navigate your website. If it fails in that purpose, there is no point in calling it navigation. One thing I really hate about it is the need to search for a website’s navigation or the need to figure out how a navigation system works. If you don’t tell the user how to proceed to the next page, he leaves. Your navigation should be consistent, easy to find, and intuitive.

Another thing you should always try to do is to use text instead of symbols. Remember, never ask the user to think.

I actually like localwanderer.com’s design, however, there’s a problem with the navigation. The blue text on the right are buttons which can be tricky to identify as such. I had to move my cursor over those elements to figure out they had a little animation while the cursor is over them, telling me that those elements are indeed buttons. If you need to move your cursor over a button to confirm it’s in fact a button, it means your navigation is somehow confusing.

14) Bad use of themes

With the increasing popularity of market places, it’s possible to see more and more amazing themes with great design and functionality, and companies and individuals who buy them as soon as they see one they like. The problem appears when those themes are not suitable to the image of the company, or when they are incorrectly used. I have seen many companies turning great themes into ordinary designs. That amazing design doesn’t always fit that amazing brand, so be careful buying the best-seller theme on Theme Forest.

15) Labyrinth of information

Although this topic title may sound weird to you, it’s a really common mistake which I usually call the labyrinth effect, and in part, it’s also a problem related to usability. There are great websites out there with dramatic content problems. If the user has problems finding information, he will leave and won’t return.

Make sure your information is easily reachable. It is also extremely important to always provide your contact information on every page of your website, and to make sure the user can easily find it.

I really like bitbytebit’s design, but it clearly suffers from the labyrinth effect. Contact information is situated in the middle of the page, hidden among other information squares.

16) Image versus text

Typography is one of the most important elements in web design, and almost the only element that can be used both for aesthetics and text. However, its misuse can make your website bad for both the end-user and also for programmers and web designers. Make sure you choose a font that’s readable and suitable to your target audience, but you can’t also forget about the person who is in charge of the website maintenance. Using images to replace typography can be a huge mistake, especially in big projects or projects that won’t be updated by yourself.

17) Image Optimization

If your website takes too much time to load, you lose visits and probably profit. You already know that you simply can’t resize your image in Dreamweaver or Notepad, right? The image resolution will be smaller (or bigger) but the file size will be the same, so there is no point in resizing that way. You need to resize your image with image editing software like Photoshop or Fireworks. Resizing, however, is not enough – you also need to compress the image. Depending on the image, you should compress it as much as possible, until you start seeing image quality loss. You can compress it using JPEG, PNG or GIF format.

18) Clear Message

The crucial element of a website is the message that’s transmitted to the user which illustrates its purpose, telling the user what the website is all about. The message should be clear and immediately recognized by the user, as soon as he sees the site. One thing you should always have in mind is that the user simply doesn’t care about you or your website, they do care about fulfilling their desires and ambitions which is why they visit your site in the first place – to help the user with his mission.

The example above fails to transmit a clear message, or any message at all. I need to click on another button to figure out what the website is about. Remember, the user doesn’t care about you, so if they find another brand with a clear message they won’t think twice to exit your website.

19) No Updates

This doesn’t really make your website suck, but it definitely helps. No one cares about a website that is extremely outdated and whose posts are from 2008. Remember that content is more important than aesthetics, so it is very important to keep your website updated as much as possible. If you have a beautiful website with no useful content, the user will leave and won’t return.

20) Full Dedication

Having a website with 20% of inactive functionalities transmits lack of confidence to the end-user. Building a website requires full dedication and attention from your end. Most of us have an “update list” for each website, where we write that during the next week, the 404 Error Page, or the widget discussed during the first meeting needs to be online. After two weeks, you realize you didn’t have the time to do it,  because you are now with three more projects in hand, and you also noticed that you have yet to finish some minor details in your online portfolio.

Organization is important, but without dedication it loses its value. When you finish a website, try to also finish every item on your “update list”.

Through the following design practices you can improve a website’s SEO and ultimately their visibility. With these foundations in place, you’ll have the peace of mind of knowing the website you spent hours designing (and developing) is now a top contender for search engine visibility. You may also find some of these tactics also go far in improving user experience as well.

Keywords

Keywords are an important part of any search engine optimization campaign. If you’re using the wrong keywords, search engines and your target market may never find you. It’s important when starting a website to first establish what the business objectives are. Do you want to target a local area, national or global? With this plan in place you can then build pages that target these specific keywords, or decide where these pages may go down the line once the foundation is built.

The process of creating
1. Create a list of potential keywords (i.e. words that are relevant but not overly used)
2. Input your proposed keywords into a keyword research tool (i.e. Google Adwords Keyword Tool, Wordtracker, Wordstream, etc)
3. Finalize your keyword list based on research (Create a list of both broad and targeted keywords)
4. Prepare them for launch (typically go after 3-4 related keywords per page)

Keyword Placement

For a website to successfully integrate into Google you first must tell us what a particular page is about. It’s important to get keywords on the right position on the page, but don’t overdo it. Here are the best places:

• Title tag
• Meta description and keywords
• Website slogans
• Navigation
• Breadcrumb trails
• H1, H2 and H3 tags
• Bullet points
• Alt text
• Title attribute on links
• The main website copy
• Internal links
• Footer links
• URL’s
• File / folder names

Search Engine Friendly Navigation

Having Search Engine Friendly Navigation basically means creating a structure that search engines can follow. A major culprit in search engines not being able to find a website is due to the links being images instead of text. So make sure you address this and all links and buttons are text-based. CSS3 can achieve the same effects that Photoshop can, which has contributed a lot in terms of modernizing the web and speeding up load times. Wherever possible, try to avoid the use of JavaScript, as search engines find it difficult to understand and may result in crawling issues. With the push towards mobile devices supporting the web, using advanced scripting languages on your website won’t fly so well, either.

URL’s and Filenames

Having an SEO-friendly URL means search engines can quickly identify what a page is about. It’s also a good tactic to include keywords in the URL as this increases Search Engine visibility.

An example of a not too friendly URL:

http://www.websitestore.com/products/item1?=20193

A better, more descriptive URL would be:

http://www.websitestore.com/home/furniture/ottomans

As you can see, the second option has a better selection of rich keywords, which will help the search engine in their efforts to index you.

It’s also a good habit to name your images using descriptive keywords. An appropriate file name can be the difference between your image appearing in Google images searches or not. For instance the name “1234.jpg” isn’t going to be as successful as “midcentury-furniture.jpg” when someone is looking for design inspiration.

Website Images

• Images are often an overlooked aspect of SEO, but play just as an important role in the process.

• You need to optimize your images to achieve faster loading times and subsequent search engine visibility.

• Try to keep your images’ file size as small as possible so mobile visitors in addition to those with slow internet connections can get the same intended, fast experience.

• An optimal image size is anywhere from 30-100kb and the best resolution is 72dpi.

• You can also set the image size as part of the corresponding tag for the image.

• It’s best to place your images on context in the page. The more relevant the text around your image, the better results you’ll get for rankings.

• Place your images inside a folder named “images” or something similar so the final URL of the image looks something like this: /images/image.jpg.

Perfect Website Optimization explains how to incorporate keywords into your alt tag.

Social Media

Social Media should be part of your SEO strategy as building relationships and interacting with connections can help build your brand enormously. Not only that but it gives you exposure and helps build a trusted community and gain credibility.
Link building is perhaps the number one reason to jump on board the Social Media bandwagon: the process of visitors sharing links within their own network can result in a large number of inbound links. In summary, social media can provide an organization with an affordable channel that accomplishes results.

Get started by joining:

• Facebook
• Twitter
• LinkedIn
• Digg

Additional Resources

This guide by Google is a very helpful guide in learning about SEO.

55 Quick Seo Tips Even Your Mother Would Love.

Monitor where you stand with Google Toolbar and Alexa.

Conclusion

These are a few important ways to ensure your website reaches visibility in search engines. Although there are methods in place claiming you can reach the top spot in Google overnight, nothing is as effective as first having a solid foundation for a website in place first – the rest will fall into place. Of course, nothing can help you sell yourself as much as having a trusted, reliable product or service to begin with but with these measures ensure your online presence is seen. Take inventory of your web marketing goals and use the tools that are most appropriate to achieve the results you’re looking for.

Unfortunately, many people believe that web design is all about personal style and smart IDE’s with pre-built buttons. Let me tell you something – they are wrong. I love to play football, but that doesn’t make me a professional player, and Dreamweaver does not make you a professional web developer. Web Design and development demands knowledge, practice, daily effort to learn and study, and passion, like professional football players.

(Design conventions: Necessary guidelines in order to improve a specific design.)

No matter how good or bad personal style is, the truth is that everyone has one. However, when design conventions are left out of a project, the result will be a bad or uninteresting design. That is exactly what happens with those terrible clients, when they try to implement their personal style without knowing anything about design conventions.

1) Balance

Balance is a basic principle in design. It is directly connected to every element, and helps you control the design flow of your page. There are two important concepts in balance – symmetrical and asymmetrical balance. With Symmetrical Balance, elements have equal weight on both sides, leading to a formal and traditional web site, however, with asymmetrical balance, elements have a different weight which leads to a different and unique layout.

I decided to include this topic because its importance is major in layout design. If incorrectly used, it can lead to the total ruin of your layout.

Above is a good example of asymmetrical balance. Did you notice the “DECO Windshield Repair” text on the right, and the background map image on the left? Although those elements do not have the same weight, it feels perfectly balanced. However, if you hide the text on the right, the page will lose its balance very quickly. Now take a look at the white bottom section, those three columns don’t have the same weight, but it’s perfectly balanced because the left text (“You can’t be everywhere…”) has equal weight as the top right text on the red background.

The result is a “cross balance”, meaning that the weaker and strong elements create a balance between them. I consider this to be of huge importance in asymmetric balance.

The website above fails in so many ways that I could use it as example in the remaining nine topics below, but let’s stay focused on this one. Do you feel the balance? Yes, you are correct, there is no balance. The left side has plenty of images plus a video of the person standing, which results in the left side having more weight than the image on the right.

2) Bevel and Emboss

I had to include this one. It’s really annoying to see the misuse of this layer style. For those who are starting, I understand that you think bevel and emboss is a nice effect and it should be everywhere on your page, but it’s not. Bevel effects should be used sparingly. There are plenty of tutorials on how to transform bevel and emboss into a powerful technique, but if you don’t know how to use it, don’t use it at all.

3) Distracting Backgrounds

Implementing a busy background distracts the user’s attention, hides important information, and disrespects visual hierarchy. If your background image has a higher visual impact than everything else, users won’t catch the message of your website and will leave quickly.

John Kavanagh’s website makes good use of background images, respecting visual hierarchy and also content information. Reading is left to right, and in this case, the user’s attention follows the buildings on the left towards the Eiffel Tower and London Bridge on the right, consequently leading to navigation (which is not visible in the image). This is a perfect example of how background can be used as a “tool” for design flow.

Above is a perfect example of what not to do with your background.

4) Lack of Detail

If your website sucks, it’s probably because you didn’t care about the minor things. When you think your design is complete, you need to start from the beginning and try to apply detail on every single element. As soon as you finish with detail, you need to start again and consider where it can be improved. A single stroke, light effect, or shadow makes the difference between a good and a great design.

Blackberry’s website is a good example of what you can achieve by spending time with details.

Detail, detail, detail.

For a company with the size and impact of Microsoft, their website is far from great. It’s definitely a good example of lack of attention and detail.

5) White Space

White space refers to the space between elements, and it does have nothing to do with the color. If you don’t know what I am talking about, stop your design projects and read about this subject – How to Actually Use Negative Space As Design Element. White space defines the space/distance between your site elements, providing good readability, focus, and design flow. It also gives your website a clean and professional look. Clean layout is not the same as minimalist, think about clean as the opposite of cluttered where content is all over the place.

One other thing you should consider is to use the same height between elements, so if you have three divs vertically aligned, and the middle div is 50px from the top div, it should also be 50px from the bottom div. This is not mandatory, but helps you achieve a good balance between elements.

Uberspace’s website makes good use of white-space.

Just looking at the image above, gives me a headache. The quantity of information is overwhelming, but the way it is displayed is even worse. Cluttered information makes the user feel lost and unhappy. Avoid it!

6) Flash Intros

Once upon a time, having a flash intro in your website would make you a web design ninja. There are plenty of great intros out there, and plenty more of really bad attempts. Nowadays, most visitors want quick access to information and when you demand them to wait, they leave. If you want an intro in your website, make sure it has a point, it adds value and that it is well made.

7) Music

So I have my headphones on, I open several tabs, and suddenly I jump from the chair because irritating music starts playing. I then search for the correct tab and when I find it, I search for the mute button and guess what, there isn’t one. I don’t want to mute my speakers so I close the page and I won’t return to that loud place. Loud and boring music coming from your website is really annoying, but not having a way to shut it down, is an exit ticket from your website.

8) Tables

This is a controversial topic, some people defend the use of tables and others not so much.  This topic is not meant to convince you not to use tables, but to use tables when and where you should. Personally, I do not remember the last time I’ve used tables, I simply don’t like it. However, for tabular data, tables are the best choice, since it increases readability and organization.

Shopify’s pricing page is a good example of how great the use of tables can be for tabular data.

Never use tables to style your layout!

9) Colors

The wrong choice of colors can ruin an entire website. Contrast, saturation, types of colors, target audience, style, etc. There are many factors you need to consider when choosing the right colors for your website. If you don’t know where to start, Tina wrote a great article about this subject – Colors in Web Design: Choosing a right combination for your Website. Using too many bright colors, or a similar contrast for your background and foreground elements, or even warm colors along with cool colors, you are basically forcing your visitors to leave.

Color needs to fit perfectly, according to your target audience, style and personality.

If you enter the website above, please be sure to use sunglasses.

10) Overflow

Unless you’re building a website with horizontal layout, showing a horizontal scroll bar is a mistake and looks bad. Make sure your layout is optimized for a resolution of 1024 x 768 pixels, this way 98% of your visitors will be able to visit your website without problems. If you really want to use a bigger background image, be sure you hide the horizontal scroll bar, using the CSS property overflow-x: hidden.

Notes

I hope you have found this article useful. I’m preparing part two, so if you have any suggestions, feel free to make them.

If you can relate with anything I’ve written above, then this article will be a great time and life saver for you! I’ll explain several ways to launch a new website for free or extremely cheap! Quality doesn’t need to suffer because you don’t have a few thousand dollars to spend on unique website design coding or extremely cool features. If you’re going to launch a new start-up – it’s always smart to start small, start with just core functions to see how people respond to your creation! Once you see they enjoy it and there is a market, then you can consider seriously investing  some money on improving your site. It doesn’t make sense to spend a lot of money when just you’re just starting out.

With my advice you will be able to create a new website really fast! If you have a great idea you don’t want to have to spend hours working on it before you get to test it in action! Website creation doesn’t need to be a confusing and time consuming process! The main thing is to get your idea out there! Let’s get started!

In this article we’ll focus on:

1. Basic solutions to launch small projects online for free or really cheap.
2. Slightly more advanced solutions for entrepreneurs who want to test their new idea fully while spending only a little money on it.

Free Solutions Versus Paid Ones

There’s always certain advantages and disadvantages in everything we do or use, this principle applies to website creation as well. Free options aren’t always bad and paid options aren’t always better. You just have to know what strings to pull to find the best deals on the internet. Well, you won’t need to pull any strings here, because I will share with you the most effective solutions.

Advantages of Free Solutions

Image via CrunchBase

Well, if you are on a tight budget (or even better – no budget, just a dream)  you can always count on resources that are offered for free by their creators. There are resources out there that are premium-like in quality but are free. Why free? Don’t they want to see dollars on their bank accounts? Of course they do, but the thing about giving away free softwares, logos, themes and other deliverables is pure marketing to grab attention and gain exposure.  We can seriously benefit from such freebies too regularly searching for premium free resources.

For example, I rarely buy any icons, because there are so many free ones – take FindIcons, IconFinder websites for example.

Disadvantages

There are many free resources available but with most of them you’re either going to sacrifice quality, aesthetics and with themes/templates you cannot be sure if  code is well written. If you’re getting something for free, you often cannot expect to receive good support and you cannot expect to receive the highest quality. There’s a quote that goes “if you are good at something, don’t do it for free,” and you guessed it! Beginners and intermediate designers/developers quite often provide free resources because they’re not at the level yet where they can sell everything they design or develop. The good thing about this system is that though they may not make money they build their reputation and potential customer base by providing quality resources for free.

To summarize – yes, there are a lot of amazing free solutions available and some are high quality. While free is good – you can run into problems such as overuse(everyone using the same trendy free pack of social media icons), no brand recognition, looking cheap because without the necessary knowledge you may not use resources as they are intended to be used. My opinion here is that you can surely use free graphic design resources because what you see is what you get! However you should be careful picking up free themes and templates because often they aren’t very well documented or supported and you may encounter unexpected problems as bugs, compatibility issues with different plugins or modifications you will want to do.

I still consider free solutions to be a pretty good starting point if you don’t want (or can’t) spend any money on it. To explore more about free resources and their pros and cons, read this excellent article by Jared – Can Free Design Resources Be Exemplary?

Zilch Experience in Web Dev?

For people who are not into development but want to have a website for a business or for personal use there are many options to choose from, both free and paid. Free themes, free hosting, and free anything has its downsides and would not work for a blog like 1WD or for e-commerce. Good thing the citizens of the information age, and of the internet, are good enough to offer a free taste which can work for both people who have the skill to develop a website and for people with zero experience with such.

Now, there are tons of free services out there which offer good things, but here I will focus on things that I have used firsthand.

The first thing to ask yourself is…what is this site going to be for? What’s your goal? – personal diary, portfolio site, just a fun project, serious blogging project, startup, website to support your application or software you have, forum, e-commerce site? You need to set clear goals at first!

Basic free solutions for beginners : Hosted Websites

This solution is very good if your goal is just to have some internet presence, have a personal diary or you want to build a small community for friends, work colleagues or maybe just a fan club. However I will list the advantages and disadvantages of this solution, because I really do not recommend it if you have any plans to expand. You’ll understand what I mean once you’ve read pros and cons:

Advantages

• Well, it’s free or super cheap!
• Updated automatically – no maintenance issues at all! You don’t have to worry about updates and any compatibility issues
• Free hosting – you don’t have to worry about your site being online, you don’t have to solve any technical issues
• Easy to setup and launch – it will take just a few minutes for you to launch such website, no previous experience needed!
• Search engine friendly – many marketers use those free website solutions to promote their main site! Why? Because usually those big blog platforms have excellent rankings in search engines, you can get ranked extremely fast because of that.

Disadvantages

• Little control over configuration, design and customization – your chances to pick appropriate templates are limited, you can use only a few supported plugins. It’s hard to build/design something that stands out from the crowd there.
• Very hard to monetize – Well, these sites will be monetized, but not by you! It will be monetized by those big companies who own the site, because they need to cover their own expenses. Basically you’re paying them in both cases – you pay them cash or they earn some cash with ads.
  

  Image via CrunchBase

• No branding- many hosted websites will look the same. Your  website will also look cheap because of the ads the hosted website platform will implement automatically.
• Limited resources – while hosting may be free, many platforms have limitations for bandwidth and space usage. You won’t encounter these problems early on
• You don’t own the content – this is the most serious one – if one day the site decides to stop working and they change their policies, you could lose your content and it’s usually difficult to transfer to your own website later on.

Ok, now you know some of the things you may deal with if you choose this option!

For hosted blogging platforms I recommend you choose from Posterious, WordPress, Tumblr.

There is also a very interesting Flash website creation solution I encountered some time ago so I am going to talk about it a bit too, because it’s great for beginner users:

Flash or Not?

To help you decide, first you need to know the purpose of your website. Is the purpose to have an online portfolio so that employers and potential clients will see you and be impressed? If  that’s the case, I believe that a flash website is a good choice because it provides flexibility when it comes to creativity. If the goal is to start an online store or a blog it would be best to go for a more dynamic solution, one of my recommendations above may be better suited to your needs.

Flash Website (Wix)

The good thing about having a flash website is the creative freedom. Colors, effects, and animation is not a problem. A Flash-based website will save you the trouble of learning jQuery and other languages/scripts for added effects. Here’s the rub, if you have a slow internet connection like mine you won’t fully enjoy the website. Opening a light-weight flash website on my end takes up to 30 to 50 seconds. Not fun at all.

There is a free flash website builder, which allows people without any knowledge of programming and designing to come up with a new website via drag and drop. Wait, drag and drop? Yes, that easy. Wix allows its users to create a flash-based website using a very simple process. Trust me when I say that the registration process only took me 5 seconds and I’m good to go with my website. Alright, I’m dropping it now, it’s free. But if you are the meticulous type and serious about it you can always upgrade and have your own domain name.

With Wix you get to choose from a wide selection of free layouts and edit them at your whim. Literally drag and drop, you can manage information with just a few clicks.

See their gallery for a full list of what you can do with Wix.

Quality

The quality of the design is amazing, with its wide selection of layouts you can’t help but notice the high quality while most are free to use. Many of the design elements are drag and drop, no programming or designing skills needed.

Drag and Drop

This eliminates the need to code and design, all you have to do is choose, drag, and drop. Very user friendly. Menus are easy to understand, you won’t get confused trying to figure out what things do. Anything that you can see is clickable and editable, no worries if you don’t like the color, it only takes a few seconds and clicks to change it to suit your taste!

Below is a screenshot of how layouts are edited.

Wix is best for people who are on a budget but need to be online. Best for portfolios and personal websites. As mentioned, there’s an option to upgrade your plan from free to premium where you will get your own domain and other features that you will love. I like this approach because you can easily switch and see benefits immediately  (no ads, own domain, hosting, support, analytics and so on).

Wix Sample Websites

Remember, you can build your website via drag and drop using Wix, no programming required!

I don’t want a flash website! What else?

Up to now I really do not know what to call it: standard website, traditional website, HTML website, etc.. Whatever, what’s important is that you know what I mean: not flash.

During my free time I am developing a website, although I’m not that good at coding. My real problem? My design skills are terrible. Free solution? Minimalist design. I’m not saying that minimalism is easy, I’m pretty sure I’d still be troubled by it. If only I had the money I’d buy something from ThemeForest or hire a designer friend.

“I have a design but I can’t code”

Relax! There is a great solution for that. If you have a design (in generally accepted image format) and you want it coded in 48 hours one thing comes to mind: Code My Concept. Although it does not come cheap, at least you are assured that your design will be hand coded in valid HTML and CSS within 48 hours. Saves you the time and effort, and it’s professionally done too.

An alternative is Code Canyon where you can literally purchase scripts. Just like Theme Forest, rest assured that the codes and scripts delivered there are properly moderated and are of high quality. All for a fair price.

Some of the things you can buy:

Many people have trust issues when it comes to these type of things, 1stwebdesigner is willing to help you find a designer or a coder among our 24,000 plus followers on Twitter. We can tweet your needs if you need it, how does that sound?

Shopping for code and plugins is very easy, very helpful too if you are on a tight budget, or time won’t allow you to hire a developer in time or it’s not within budget. Think of it like building your own computer, buying parts that will complete the whole. That’s how it works.

“I know how to code but I can’t design well”

Aside from Theme Forest where you can purchase web templates, there is Graphic River where you can choose from a wide selection of stock graphics ranging from simple icons to a sophisticated prints.

A free solution would be free stock photo sites like sxc.hu or a site like Deviant Art but you can’t expect to find specific web elements to add on your website.

Here are some free things that you can use to build your design:

• 45 Free Design Templates and PSD Files
• 57+ Free Image Gallery, Slideshow And Lightbox Solutions
• 38 jQuery And CSS Drop Down Multi Level Menu Solutions

Create Your Own Domain Name

Choosing the right domain name is crucial task, because you’ll build your whole branding around it. There is a problem though, it’s very hard to get a good .com domain which is still free. Actually there is a serious problem in getting any good domain names at all! To help you through this process I suggest you try this nifty website – Domainr. It’s a site to bookmark, that’s for sure!

Well, I also suggest you use the site GoDaddy to register your domain. You can get domains really cheap from as low as  7.49$ per year! They also have a pretty good suggestion system to find related domains if the name you really wanted is taken already. Their backend system may seem confusing at first, but I’ve had positive experiences with this site, so I can really recommend it.

Choosing a Web Host

Catchy “Unlimited” bandwidth and disk space, several hosting services offer monthly payments from $4 to $10 for shared hosting. What does it mean?

In truth there is no such thing as Unlimited disk space and Unlimited bandwidth, the service provider assumes that you won’t use too much (which is true most of the time) so they use the word to their leverage. Is it any good? It depends on how you will use it, of course. For a personal website or an online portfolio it is more than okay if you want your own domain. I use GoDaddy and so far I have not experienced any problems, except for the fact that their control panel is a huge mess. Hostgator is one of the cheapest and good hosting services too. Both start from $4 (as of writing this) for shared hosting and both offer VPS. Dreamhost’s record is near flawless, you can google up “Dreamhost reviews” and use your instincts to see if the review is a sham or not. I know three people who use Dreamhost and they say it’s flawless, of ourse it does not come cheap.

1stwebdesigner is hosted by Eleven2. Is it any good? It speaks for itself. 1WD receives hundreds of thousands of visitors a month and it’s still doing fine. If your website will have great traffic in the future you may want to start with a good host to avoid the hassle of transferring to a new host when everything is in motion. You don’t want to lose even 30 minutes of uptime.

If your goal, on the other hand, entails great traffic and thousands of users every day you might want to opt for a Full-featured hosting. For a couple of months now I have seen many people cuss about their hosting services because of hours of downtime on their blogs. Probing deeper I learned that most use shared hosting. In my opinion you can’t trust shared hosting when it comes to big businesses online. A solution would be to shift from shared hosting to full-featured hosting.

Quick Review:

Hosted Website Solutions

• For hosted blogging platforms I recommend you to choose from Posterious, WordPress, Tumblr;
• Easy site builder for a flash website you can use Wix;

Website Design

• Theme Forest offers high quality,unique and very affordable themes.

Code Shopping

• You can shop for codes at Code Canyon
• You can go to Code My Concept for PSD to HTML conversion

Hosting And domains

• GoDaddy -register domains with ease.
• Eleven2 Hosting – great hosting 1WD uses for a year already!

Related articles

• 45 Top and Most Popular Articles of 2010 in Design Community (1stwebdesigner.com)
• 8 Easy Solutions to Create Question & Answer Websites (1stwebdesigner.com)
• Options to Consider When Looking for Stock Photos: Free vs Paid Solutions (1stwebdesigner.com)