Welcome to WebmasterWorld Guest from

Forum Moderators: brotherhood of lan & mack

Message Too Old, No Replies

Turning your ideas into a website



8:48 pm on Mar 21, 2010 (gmt 0)

WebmasterWorld Administrator mack is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

From an idea to a website

A great idea can lead to a great website, but only if its properly developed and deployed. Development doesn't just involve building a site, it involves every stage in the process from having the idea to uploading the finished product. Every stage is important and in theory could be “make or break” for your site/project.

All to often people will have an idea and immediately open their page creation software and throw the site together. Some people are lucky and it works for them, but in the majority of cases the process would have been a lot smoother if they had spent time properly planning not only the site as a whole, but the finer details for each component of the site.

Imagine you are building a site. You need to know the site structure, now the navigation will work, what each page will look like and a lot more. If you take time at the start to actually work this out it means you will be working to a specification, as opposed to making it up as you go along. Having a detailed specification or brief will mean you aren't working blind. Things will be built as planned as opposed to trial and error. This is especial important when doing client work. Having a very detailed specification will remove the flexibility that can lead to disagreements further down the road between what you proposed and what the client thought you proposed.

I am not saying the specification has to be set in stone, as you develop the site you may find that your preplanned method doesn't quite work as planned. You can then go back, alter your plan and take into account the factors you previously overlooked. There are things that you won't foresee until you are in the “thick” of it.

The initial plan
You have the “idea”. You now need to work out exactly how it will work. What components will your project need, how will they all work together and what technology will be needed. For example if you are building a site selling widgets you will need a site equipped with a shopping cart. Are you going to build your own e-commerce solution, use one thats available or use a third party service. How will the shopping cart be “slotted” into your site. Will users need to register, what payment methods will be accepted. Will the cart be the site, or part of the site?

There are a lot of things you need to know before you even start. For example if you just went ahead and started building then later decided you don't want to host your own cart you want to use a third party hosted solution this will involve a lot of redevelopment to integrate the new solution.

Failing to plan is planning to fail

The initial plan is almost like a business plan for your website. By going into as much detail as possible, you will in effect cover as many potential choices as possible. Typing out a plan not only gives you a latter point of reference, it also lets you get your thoughts together. In your plan don't just say “the site will do this” say why it will do this and explain your reasoning.

The finer details
Once you have a finalized draft of the plan you can then work on what I would call a “technical plan”. The technical plan takes each point from your main plan and explains just how they will actually be implemented. This takes a lot of factors into account including any software/scripts that will be used and how they will be implemented within the site. It will also cover things like navigation. Here is a short example...

Because the site has a membership facility all page content must be accessible to users regardless of their logged in status. There will however be differences. Logged in users will see additional features such as a comments form. If the user is not logged in they will see a notification to register or sign in. The logged in status will be checked using a session and the session will be checked on every page using a piece of php code within header.php. If a user is found to be logged in we will assign a string value. We can then use if(string==”answer”){do} to determine what components to show the user.

The above example is going into technical details about how a member system would check if a user is logged in or not. Because we have already determined how this will work we are not forced to hack around and make it up as we go along. We know the session will be checked per page and different users will see different features based on the result of the session check.

You should go into a lot of detail so that things are as clear as possible for later on when you come to putting it all together. This is especially true when there are a number of ways to do the same thing. Just imagine in my above example if the session wasn't always checked in header.php I then try and do the same thing within a page that had header.php as an include. You can only set the session once, so it is important that you only try it once or you will get errors.

Your sites structure
You should also have a good plan in place for the sites structure. I am not referring to the actual design, and how pages will be structured, but how the site will be structures on the file system. What will your pages be called, how will they be structured in relation to each other, what will your folders be called and so on.

The site structure can easily be planned using nothing more than post-it-notes. You can get these notes in several colors. Use one color to be a page and another color to be a folder. Place your homepage on a sheet of paper(or better still a white board if you have one). What pages will your homepage link to, draw lines to represent links. If you use yellow and pink post-it-notes use the pink to represent folders, then have your yellow notes overlap the folders they reside in. This lets you visually see the entire structure. You can see all your directories/folders and you can see what pages are contained within each. If there are a lot of pages in a folder simply make the folder longer using extra post-it-notes.

We now know about our site structure and we can visually see all the proposed links but how is the navigation actually going to work? As we know there are many different types of navigation available, but I think you need to decide what works best for the given situation. Will we have a main menu that doesn't change and is part of every page? Will the menu be dynamic and change based on what page is being viewed? You need to base these answers on the current problem being faced. There is no one one size fits all solution for site navigation.

The layout is what your end user will see, but you shouldest even start until you have worked out exactly how each of the required components will work. We have already done the homework regarding navigation, you should also do your research for any other aspects of the page that you intend to use. Also we aren't going to go anywhere near a computer to do our design, its time to do some sketches. Draw what you want the design to look like, include your on page items such as navigation and content.

Do what you can to make it work well. If you're not happy with things, or there are things you now feel should be changed go back and make changes. The great thing about planning is when you find things things that need to be altered you can easily make the change now. Had you just went ahead and started creating a site then found potential problems the time spend making corrections would be a lot more extensive.

Work flow
When you have your plan finalized create a “todo list” and check each item off as you do them. The todo list keeps you to the plan, and also gets things done in a preplanned order. If you stick to your plan and your scheduled todo list its almost like working to a script.

Taking time to plan, and plan well will take time. But it will save you time when you come to putting it all together.


[edited by: mack at 8:11 pm (utc) on Mar 25, 2010]


8:08 pm on Mar 25, 2010 (gmt 0)

5+ Year Member

Awesome post! This is the kind of stuff what makes this site really the best...


12:40 am on Mar 28, 2010 (gmt 0)

10+ Year Member

Good stuff Mack,

I'd like to add that mapping or flowcharting software like MindManager or OmniGraffle can be great for brainstorming and writing down your file/site structure.

For the designing, my best friend is a huge whiteboard on my wall next to my desk. Lets me keep everything in view and easily modifiable.

And one of the most important things in my process, is determining what things the site absolutely has to have right away, and what can wait. If you try and put it all together at once it will be much more expensive, time-consuming, and complicated. Start with only the absolute must-haves and get it up and running, then build a timeline for the rest to be gradually added. Chances are you're going to modify that list of extras before you get them all done anyway.


1:01 am on Mar 28, 2010 (gmt 0)

WebmasterWorld Senior Member themadscientist is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Great post Mack...

Personally, I'm more visual, so I often sit down with my favorite design program and layout a home page so I can 'see the idea' and this process usually defines some of the things you have outlined and 'highlights' some of the other items you have which will need to be dealt with before converting the idea to a working website, so I guess I sort of do the same thing, only different...

Again, great post on how it could (should) be done though.


1:19 am on Mar 28, 2010 (gmt 0)

WebmasterWorld Administrator mack is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Another thing I would like to add is plan any url rewrites and take this into account as you build any scripts. Right now I'm in a bit of a mess that could have been avoided. an hours planning could have saved me half a days coding.

we life and learn.



2:17 am on Mar 28, 2010 (gmt 0)

WebmasterWorld Senior Member themadscientist is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Yeah, been there, done that myself...

Now URLs and long-term directory structure are high on my priority list. Awhile ago I actually built one directory and got the two main sections (indexes & detail pages) ready to go only to realize I could only paginate one of the two using the URL structure I had decided on because the 'index pages', in certain cases I didn't think of when making the decision, needed pagination and they were the same URLs as the 'detail pages' without a number in them.

It seemed like a really good idea to have the 'index' URL be the same as the 'detail pages' without the 'page number' until I tried to make both of them work together... LOL. Gotta love rethinking and recoding a 'great thought' right?


5:51 am on Mar 28, 2010 (gmt 0)

5+ Year Member

the main consideration for me is which cms i'll use, and probably it'll be wordpress and then why not slap something up as soon as you begin brainstorming,and let it evolve as a living organism from the very conception.


6:52 am on Mar 28, 2010 (gmt 0)

10+ Year Member

I have seen and worked with several approaches to creative processes in my life. The processes I was taught at art academy were very different from what I learned at IT courses and schools. During the period when I developed electronic stuff as a hobby (radio's, transmitters, musical intruments) I worked differently again.

I've come to not believe in extensive planning, such as Mack describes. I believe in a creative process of organic growth, making things up as you go, experimentation and testing. Above all: examine what you have in the moment, build or write what is needed, and examine again.

Planning only works with routine things. When you develop a site that has some pretty obvious goals, that don't require inventivity, you can plan. Something like a straightforward webshop, for instance, or a brochure type site. It can also help avoid conflicts with clients, by making things predictable. But I don't see how developing really inventive stuff can be planned.

You're planning while you're in a stage where you can't see what you're doing. You're driving blind. You may believe that something you have thought up is user friendly, while in actuallity people don't understand that user interface at all. And you may notice the problem while you're building that UI, because that is when you actually see it.

You may think beforehand of a structure of texts, with separate pages, headings and subheadings, and such. But, then you may find that you don't really feel like filling in that structure, and you can't muster the effort to finish your work. That's because that planned structure doesn't really reflect what is in you, waiting to come out.

What I do, is I just start writing what I want to say, and put that in a structure while I'm writing. Pieces of text get moved around and get rewritten. I constantly look what I've made. And eventually, I have a very clear and readable text, with a sort of obvious structure, while only having had a vague idea at the start, never planning anything.


12:21 pm on Mar 28, 2010 (gmt 0)

10+ Year Member

Great Post and all true.

One important consideration is the relative path for images/media and other sections/categories.

Starting with a home page url as baseurl and then linking everything and every component from there has worked best for me.

@ TheMadScientist, I too got entangled once in such scenario, but luckily could resolve this pagination issue very quickly by just identifying and catching the ‘/number/’ at the end of url for any paginated listing url.


1:28 pm on Mar 28, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I think a healthy mix of good planning and inventive unplanned creativity is the optimal process. Plan, but don't be afraid to steer off the road if you see an interesting path. ;-)


1:53 pm on Mar 28, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Also it is very important to note.

"Web is not only website" ... ideas can go beyond websites ... I am running this series in many of our local Engg and Business Schools ....


3:41 pm on Mar 28, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Good point, maximillianos. People find they really don't want to sell a product, but a service or the other way around. Or, they don't want to work with consumers, but retailers. Or the other way around. Or, they really don't have a good idea of what they want to do.

I work as a business consultant to professionals (Lawyers, doctors, engineers, accountants). I've done it for 11 years now. Typically, people call me on recommendations from others. That <cough> has it issues in getting new biz. Three years ago, I fell into "doing web sites." I have two people I can call in for the geekier stuff (db work is beyond me) and use templates or call in a graphic designer, otherwise I'm doing what I was before. It's ok to get "off track" if the track is not running where you need to go.

Building a web site is an excellent way to work your way though many of the issues that a good business plan requires, and it's a lot more fun than doing a business plan.

If you want a good guide to building a web site, look for a good guide to building a basic business plan.


9:47 pm on Mar 28, 2010 (gmt 0)

10+ Year Member

I think there are some good tips in the OP. However, what works for one person doesn't work for another. And what works for one project maybe different for another For me the organic approach often works best. Many of my sites (which are admitttedly pretty small) at present have developed into something that I would not necessarily have originally planned.


10:08 am on Mar 29, 2010 (gmt 0)

WebmasterWorld Senior Member themadscientist is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

What I do, is I just start writing what I want to say, and put that in a structure while I'm writing. Pieces of text get moved around and get rewritten. I constantly look what I've made. And eventually, I have a very clear and readable text, with a sort of obvious structure, while only having had a vague idea at the start, never planning anything.

Every time I use that approach and make a point that clearly in the Google forum I see 'if #*$! #*$! #*$! the #*$! #*$!' and tedster snips my posts, so I've learned planning is much better in some case... LOL :)


5:11 pm on Mar 29, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

I plan the folder structure, and when I come to make an actual page I'll plan out how everything goes there (all the relative if statements, with comments saying what happens for each true/false).

Other than that, I find my projects end up better if I make it as I go along.


1:58 am on Mar 30, 2010 (gmt 0)

10+ Year Member

Some time ago, I was advised to read Tedster's articles on information architecture; Part 1 at:

- much food for thought. [A collection of links to classic articles on getting started with a website might be useful. I rather suspect this one would make the cut:
[webmasterworld.com...] ]

Indeed seems useful to plan website categories, as Tedster recommends, so can know where to place articles etc. Might not need to spread index cards around rooms, but surely helpful.
A bit like you're starting a library, without infinite topics. Handy to anticipate books, and set up shelves accordingly. As and when you start to get visitors, keeping the setup at least similar as content added should be helpful.

I use a cms (Drupal), which maybe over the top for anyone completely new to starting website.
- arguably over the top for me, too...
Hence, websites lack real directory structure; but still best to have a structure via categories etc.
Plus, keywords can be important, including for navigating around site, and helping interlink related articles. Here, too, surely useful if can anticipate the types of keywords that should be useful.


6:59 am on Apr 1, 2010 (gmt 0)

5+ Year Member

Superb post especially for begginer's. Effective planning and implementation is the key to success.

Featured Threads

Hot Threads This Week

Hot Threads This Month