Forum Moderators: mack

Message Too Old, No Replies

The development process

The process of website development

         

mack

2:20 am on Nov 21, 2006 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Getting started in web development was never easy, but I believe the bar has been raised considerably over the past couple of years. When I first started building websites back in the late nineties it was a lot easier than it is today.

Back then you simply built a plan HTML site crammed the keyword and description tags and got a good on-page keyword density and you where good to go. All you then had to do was submit it to the top search engines and directories and you had good rankings and good traffic.
Now a lot has changed and it is a lot more complicated to achieve good results.

Your site

Web design has changed a lot over the past few years. Back in the "good old days" it was perfectly acceptable to have a page that looked like a word pad document. Now users want eye candy. This is not essential for all niches, but in general users are expecting to see well designed and laid out web pages on your site. A lot of the design process is art. It is not something you can simply pick up and use right away you need to learn. Look at web pages, find out what would work for your intended end user.

A couple of good scenarios I can think of are a site for programming information and a site about gardening.
The programming site is aimed at techy people, in general these people would be looking for raw info. Design is not the top priority, the main item in this sort of situation is the content. You are providing content to a group of people who know what they are talking about. They want to find the right information. If you can provide this in a simple and usable manner they you have done right by this user.

The gardening site is different. You are aiming a site at a person who appreciates aesthetics. Things need to look good. The site should be an extension of the topic. Attractive with the right colours in the right places. Again the information provided within the page is important but the first impression your user will have of your page is it's appearance.

The two examples I have gave are very generalised and perhaps exaggerated. There will always be a balance between looks and function. The balance will be different from niche to niche and from industry to industry. If you are building a site to target a topic you know well, the you will almost certainly know a lot about your intended user. You should take this into account before you even think about your sites design.

If we look back to the late nineties again what we see is a very young internet. No one really knew what a good site was and everyone was reaching out in different direction as far as design was concerned. The problem now is most users know how to appreciate a well designed and laid out website. It is almost as if all industries have settled on a standard way an industry specific website should look. A few examples of this are education sites, they all look very similar. News sites, almost all follow the same rough outline. Technology sites, again each has similar features.
This presents us with a very real problem. Providing something that is unique, yet falls within the zone of what a user expects. On the web user expectations are very high. Just think how many websites are out there, then think how many are in direct competition to you. You need to be doing the same thing better than the other guy or you are going to loose out. This is where you need to make the mot important decision. Do you build the site your self or leave this part to a design/development company.

The design

If you are not 100% competent then you really should leave this part of the process to a company or individual who knows what they are dong. In days gone by it was common place for a company website to be built by the kid next door for 20 bucks. It's wake up time! the kid next door now charges $50 :)
Seriously it is vital that the person who builds your site is competent, the site needs to be built in a way that both looks and feels professional. Users are not going to forgive you in the online world. The internet is a faceless place where being polite simple isn't given any consideration. If your page takes to long to load or if the user finds a broken link that's all he reason they need to walk out your cyber door and go to the competition.

There are two main design stages you need to go through.
The first part does not involve the page at all, we will first look into our websites structure. The structure is like a view of our site showing all links and pages. A very simple way to do this is using a pen and paper, or even better post-it-notes. Of you want to feel like a true pro you can even use the "white board".
When designing our site structure what we want to do is have an almost tangible feel for our site. We will be able to view the entire site at a glance and be able to see all the possible paths a user will be able to take by using the sites navigation. A big mistake that a lot of people made back in the good old days was having every page link to every other page. The simple truth is this was not only not needed, it was also very annoying and made a site appear cluttered. As a result usability suffered. When you are designing a structure you are trying to make your site not only easy to navigate, but making is as easy as possible for users to locate your sites core function.

Core function is a term I use rather loosely to refer to the goal of a site. The goal may be to make a sale by getting a user to purchase an item online, or it may be something simpler like getting a user to register for something. Either way the core function should be easily accessible within the site.
For this example lets combine all my suggestions for designing the sites structure, lets use the white board and place a post-it-note at the top. On the note write "homepage". Below the homepage lets place some more notes, "products", "company information", "contact us". Draw a line from the homepage to each of these notes, this will be out second level pages. On our board you will see that each of the pages is fairly equal in terms of importance. Now below products lets add some more pages.
We will now add "product type 1", "product type 2" and "product type 3". I am using these page names to keep the focus general. Now draw a line from the product page to each of our new specific product pages.
Now under company information lets add the following pages. "Company history", "Faqs" and "mission statement".
Under contact us add "email us" and "driving directions"
What we are doing is creating a pyramid of pages, the more important a page the higher up the pyramid it goes. In theory our most important page is the homepage. By designing a site in this way you are not only making it easy for your users to explore your site and get the information or products they want but you are also managing internal linkage.

Internal links

On the internet we see links all the time. Links can go from page to page and from site to site. On the web a link from page A to page B is considered a vote for page B by page A. The Google search engine for example uses a system called Page Rank so score pages. The score is based on votes, not just the number of votes but the quality of the votes. The same continues within your site. You have the ability to control what pages get higher votes by designing a well through out link plan and site structure.
This is one of the reasons we don't just link to all pages from all pages. why would you want your companies mission statement to be just as important as your products page. The mission statement, great as it may be does not sell widgets. you need to know what pages are important to your business and then act to promote these pages within your sites link flow.
Once you have a plan designed for your sites structure and linkage you can then start to design your actual pages. You also need to give a lot of though to how you will implement your sites navigation.
Navigation

There are a number of ways to incorporate navigation within your pages.
Side menus: Side menus can be placed left or right of your main content. Generally these menus are constant across your site but they don't have to be. The main purpose of a side menu is to provide quick and simple access to all the major parts of your site.

Top Menu: The top menu is located at the top of your main content. Generally you will have a few link pointing to key areas.
Breadcrumb: Bread crump navigation is very useful

Home [webmasterworld.com] > The Webmaster World [webmasterworld.com] > New To Web Development [webmasterworld.com] > The development process

Bread crumps allow you to visually show your user where they are and what is directly behind them. For example lets assume you found this page but it was not exactly what you where looking for you can click "New To Web Development" and look for more appropriate information.
Footer navigation: This is very similar to top navigation but is is generally used when a user has read a page and wants to go to another. There is a usability flaw if you let a user read a large page and don't provide any information blow the content. Even a link to "Home" is often enough.

Actual page design

The actual layout and design of your page will vary greatly depending on who you are targeting the page at. As I mentioned before different industries expect a certain standard. You need to try and at least match the best in your industry if you want to win users on the visual appeal alone.
I believe that pen and paper is the best way to start the design process, it's quicker than writing code and allows you to make changes simply. I wouldn't waste any time writing code until you have a firm idea of the design.

A major flaw a lot of designer have is thinking they know when a page looks right. At the very least get opinions from friends and family. Another thing a lot of us are guilty of is being deaf to critics. If someone doesn't like something ask then for suggestions. You should try and make your design pleasing to as many people as possible, just remember you cant please everyone. Is would also be beneficial to get advise from people who have an interest in your niche.
The development process is a mixture of art and programming. You need to be sure you are the person for the job before you do it. If you aren't sure or if you don't feel totally confident them perhaps someone else could do the job better.

A good comparison would be...
Would you let a bad painter paint your shop? then why let a bad web developer build your site. In many cases companies are using websites to promote their presence. In this case it is an extension of the business, not simply a website.

It's amazing how the whole concept of web development has changed in the last 10 years, who knows what the next 10 have in store for us. We just need to go with the flow and keep up with the times.

Mack.

BeeDeeDubbleU

7:59 am on Nov 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Great post Mack!

Following up on a similar topic, this is some information about website credibility that I often offer to my clients. I appreciate that you have already covered some of this but I have left it in as it will serve to reinforce its importance.

I liken poor business web site design to having a dirty entrance to a shop on the high street. Customers won’t enter what looks like a shoddy, dirty shop just as they won’t waste much time on a badly designed web site.

There are other factors that you must also consider if you want your web site visitors to do business with you. The list below discusses some of the things you must not do if your web site is a business tool. These are in no particular order.

Flash (Animation) and Slow Load Time
Flash can be attractive in some situations but business web sites are not one of these. People will not wait any more than about five or ten seconds for your website to load and they are probably not too interested in the talents of your web site designer. Get your informatiopn to them as quickly as possible.

Un-requested Pop-ups and Adverts
“Click here, you’ve won a prize”! “You are our one millionth visitor”! Need I say more?

Moving Content and Blinking Text
Like Flash this should be avoided on business websites. Moving content, scrolling lines, flashing banners are all very “1998”. There is no place for them in today’s websites. All they do is distract your site visitors,

Wide Pages creating the need to Scroll Horizontally to see them.
This is an absolute no no! People just hate having to scroll horizontally to see content that is otherwise hidden. Scrolling windows within windows also make navigation difficult.

Music and Sound
You are doing some serious Internet research in a quiet room. You visit a website and suddenly your speakers start to blare out some heavy metal guitar riff. Just the job, eh? Where’s my back button? (Sound is OK on web sites when it is optional and requested).

Registration Required to View Content
There is seldom any justification for requiring registration to see the content of a business website. Ask yourself how often you sign up to see something on a site as opposed to leaving and looking elsewhere. If you offer a service shout it from the rooftops, don't lock the front door.

Missing Content, Images and Bad Links
You visit a web site that offers a technical service and find defects on the site? Think about it!

Bad Navigation
If your site visitors can’t find their way around they won’t stick around.

Missing Contact Details
I think this is important. Would you want to do business with a company that does not seem to have an address or telephone number?

Illegibility
If a website is hard to read and strains my eyes I hit the back button. The vast majority of people do the same. Ensure that your text is clearly legible and good contrasting foreground/background colours are used. I tend to favour black on white for this but other combinations can work.

Hope this reinforces your post! :)

[edited by: BeeDeeDubbleU at 8:01 am (utc) on Nov. 21, 2006]

pixeltierra

7:14 am on Nov 25, 2006 (gmt 0)

10+ Year Member



Great posts guys (or gals). I salute your community spirit!