The Complete Web Site Development Process In a Nutshell (Part 1/3)

It’s not a rare occasion that I hear or witness people involved in the web development business going about development processes the wrong way. Granted, we are all entitled to our own opinions regarding how to take a project from point A to Z, but more times than not, I notice some vital parts of web site development processes being rushed or skipped entirely.

Because of the number of steps involved, I’ll be splitting this article into three separate blog posts.

1. Clarifying the Scope & Overall Purpose/Goal of Your Project

Understanding the scope and goal of your web site development project sounds simple enough, doesn’t it? However, this is where I see the most obvious difference between a complete web development process and a rushed one.

Every project is different and has different goals, requirements, audiences, budgets and the like,but there are a couple issues you MUST consider during this part of the web development process for ANY website you develop:

• What is (my/my client’s) main goal for the project?
• Who will be the target audience for this website/application?
• What is in the scope of work and outside the scope of work (Client Projects Only)

For client work this is especially important–they are paying you as a web professional to guide their ideas/needs through the web development process. They AREN’T paying you to develop a platform centered on your ideas/needs.

That isn’t to say you should never make use of your artistic freedom. The point is that it is critically important that you initially clarify what the client’s vision is to avoid misunderstandings later on in the process.

2. Determining Technology Requirements & Understanding Client Functionality Requests

Once the big picture is understood by both parties, you should begin some preliminary brainstorming on how and what will be used to implement the site/application’s functionality.

Here are some important questions you should be considering:

• How much of the site’s content will be dynamic?
• What CMS (if applicable) does my client prefer and is it capable of delivering what is expected by the client?
• What type of server environment will we need? What technologies will be needed to accomplish the site functionality?
• What browsers are going to be checked for compatibility? Does my client use a corporate browser in his/her company?
• Will this project include any mobile web development?

Dynamic Content & Technology Requirements

Determining whether a site will be heavily dependent on dynamic content is a major step in the web development process. More often than not, clients are requesting some type of CMS (Content Management System).

If they request a CMS, then questions concerning what web technologies you need will be answered. If not, determining these technologies now is important for both the designer (if you aren’t tackling that task) and the hands-on development stages of the process.

Some things to predetermine:

• What type of Database Software/Accompanying Server Side language will you be using to make this project come to life?
• Does your/their current server support these technologies? (if applicable)
• What front end development languages will be needed to add certain bells and whistles? (i.e: JavaScript, jQuery,AJAX, XML, etc…)

Predetermining the technologies and CMS needed during the web development process can save a large headache further down the line.

Browser Compatibility

Browser compatibility is a large part of front-end development. Just because we as webbys don’t actively use Internet Explorer 6 / 7 does not mean that large corporate environments don’t.

In most cases, corporate business changes technology slowly so it is best to know what browsers will be compatible with the site. It is ALWAYS best practice to support as many browser versions as possible, however, depending on client budget and project timeframe, this may not always be possible.

A good way to determine what browsers should be supported is by looking in Google Analytics. It can provide invaluable information about individuals visiting the site—including their browser type and its version as well as their screen resolution. It’s a great tool and it’ll make your life a whole lot easier when planning a project.

Keeping Mobile Web Development In Mind

In the same realm, you should know if this project should be compatible with mobile devices–most notably iOS, Android, and tablet devices. The answer to this should 99% of the time be a resounding YES, but some people still overlook it.

3. Taking the Website to the Drawing Board (Literally)

For those of us whose job is to tackle site design and information architecture, this step is very helpful.

Often I see designers jump straight into Adobe Photoshop and or Illustrator and begin to mockup the site’s look and feel.

While this may work for some people, I prefer to wireframe a few page templates the good old fashioned way—by hand and on a piece of paper.

Doing it this way helps for a couple of reasons:

• It demands more of focus on information architecture and layout instead of design aspects like color, font faces and graphics clouding your vision.
• It allows for a faster layout design. Working with Photoshop tools has its benefits, but nothing is faster than pen and paper.
• It creates blueprint guidelines for each page template which will speed up the graphic design process.
• *Bonus* – It’s also nice to stop looking at a computer screen for a few minutes during the day. Let’s give our eyes a rest!

Ready to move onto The Complete Web Site Development Process In a Nutshell (Part 2/3)?