Order of building a website?

[liamloveslearning]

Hi everyone,

 

Just a random question, but what order do you build your websites in?

Initial sketches/layouts etc > Front end development > Functions/php?

Or do you just build the functions and develop the front end later?

 

 

[liamloveslearning]

I also forgot, do you design your database tables before any coding starts? I tend to start coding and realise ive missed a field and have to go back, very unorganized.

[foobarbaz]

I always put concept before conception, What I usually do is after completing the controllers/backend I start to debug. Functions/classes/concept and how you're going to work with them is most important, It's a pragmatic approch to the structure of everything.

 

As for your table troubles, it would be solved by my method of planning it out, I've learned it's not fun having to recompile tables after discovering a slight flaw.

[ignace]

Wireframe > Photoshop design > HTML Templates > PHP

[NeverPool]

Wireframe > Photoshop design > HTML Templates > PHP

[ignace]

Wireframe > Photoshop design > HTML Templates > PHP

 

It was late yesterday, so I'll expand on this. During the first (or second) meeting with the client you would draw some very rough sketches (referred to as wire-frames). You discuss these sketches and improve any problems in it design. You do this for all pages (except when the page is used as a template, like a product details page) in the website. It's best to start out with the unfamiliar parts of the website as little will be discussed (but discussed nevertheless) about a guestbook page.

 

After you have discussed these pages you would write the name of the page down (title) and a general summary of what it contains and sort it (hierarchical), how you think they are related, write it down and ask your client to do the same (this procedure is called Card Sorting). Chances are your client will sort them differently based on his/her background and domain knowledge, ask them why they put x under y. This procedure is used to make the design more intuitive. It's best you try this procedure with several end-users with different backgrounds (you, client, .., 3-5 persons). At the end you will have to decide which advice you follow and which you will ignore, your decisions should be influenced by usability.

 

At this stage you move on to mock-ups (a Photoshop design). You design one page with several color variations (based on the company color scheme) and show them to your client, once he selected a color scheme you would design the rest of the pages. During this fase you would (hopefully) receive the content from your client and decide on the keywords you want to use (lookup the value of a keyword before you decide to use it). Send the content to your copywriter so that he can rewrite it and boost the selected keywords. Slice up the design and create the HTML templates. Show the result to your client on a staging server.

 

Once you launch, it's best to start a SEA campaign (~$300) so that end-users know your client exists on the net. If you chose the correct keywords (based on relevancy to value ratio) your client should start gaining leads-prospects(-clients). Don't expect clients right away but you should start to get a good amount of leads and in a lesser extend prospects, gaining clients during the first weeks of startup is a job well done

 

Add your client's website to popular search engines and start the SE maintenance loop (analyze > record > adjust keywords). The provided SE web master tools are recommended. During this loop, you could (6+ months) try to move/adjust some stuff (around) to see it's effect (Google Website Optimizer is great for just that). It's possible clients can't find something (logical error in your design) and leave your website, these little adjustments are to change that.

 

And that's (give or take) the entire process involved.

[Tazerenix]

I used to code the Front end before the back end but i've kind of changed now. I find it easier to pump out the PHP without having to worry about design, i can do that later.

As for database tables, i also now make them as i go, with PHPMyAdmin though its easy to alter them.

[xylex]

I work in an enterprise environment, so the typical flow for us is

 

[*]Business gives us requirements

[*]We start building

[*]Marketing hears that we're working on something and stops us so they can meet with the business

[*]We get new requirements out of that series of meetings with instructions to just develop wireframes to present back

[*]We build wireframes in Photoshop, present it back to business & marketing

[*]Business and marketing ask why it's not in a browser and why clicking things and typing in forms don't work

[*]We explain what a wireframe is for the upteenth time

[*]We're told to go back and build it

[*]We start coding from the wireframes

[*]Business has a new addition they decide is really important, and ask us to add it in

[*]Goto step 2

 

[ignace]

We build wireframes in Photoshop, present it back to business & marketing

 

Completely misses the point of wire-frames, as they are meant to be quick, rough, and to give you and your client an idea of where should be what? Not, how should it look? During a meeting you would refine these wire-frames to match your client's view. A mock-up (Photoshop wire-frame) just doesn't give you that flexibility, your client can easily take your pen and draw a few boxes, it's much harder for him to draw those same boxes in your Photoshop program, and drawing on a Photoshop print-out is possible but hard to spot.

 

Not to mention that a mock-up easily takes about an half-hour to an hour to create, putting the focus on detail where it should have been on layout.

 

Business and marketing ask why it's not in a browser and why clicking things and typing in forms don't work

 

Prototyping indeed has quite some advantages

 

1) client can see results quickly, leading to an increased trust

2) clients can "feel" their website

3) prototypes can be transformed to HTML templates

4) many WYSIWYG tools available to create the prototype (http://www.axure.com/)

 

And some disadvantages:

 

1) The more reliable, feature-rich products are quite costly

2) Most tools miss widget's that are considered common (eg YouTube player, Twitter, ..)

3) Focus may shift towards detail instead of layout

4) time-consuming if more complex tasks needs to be wire-framed (eg form with ajax dropdown)

5) difficult for the client to add changes

 

All-in-all I like wire-frames they are quick, rough, but get the point across.

 

Business has a new addition they decide is really important, and ask us to add it in

 

One constant in software engineering: CHANGE

[JonnoTheDev]

It all depends on the size of the application. With a very simple small website you can literally jump in and start programming after you have the templates ready. With a much larger application then paper design always comes prior (by the way i'm not talking about graphical layout here, purely programming). Firstly database design. If you are using OOP then you must design your objects. UML. Then you can start creating and testing objects. Then you can start piecing the application together. Finally you test and debug.

[ignace]

With a very simple small website you can literally jump in and start programming after you have the templates ready.

 

I've never known any project, even the very smallest, that didn't require a form of planning (wire-frames, a Photoshop design, and SE strategy). I don't see how you could skip those? You can't go think about what strategy you will use to generate leads as these should be incorporated in to the design or where should come what or how it should look after you published the website.

[Daniel0]

With a very simple small website you can literally jump in and start programming after you have the templates ready.

 

I've never known any project, even the very smallest, that didn't require a form of planning (wire-frames, a Photoshop design, and SE strategy). I don't see how you could skip those? You can't go think about what strategy you will use to generate leads as these should be incorporated in to the design or where should come what or how it should look after you published the website.

 

Let me highlight part of the sentence you quoted yourself:

 

With a very simple small website you can literally jump in and start programming after you have the templates ready.

[ignace]

I didn't understand what he was trying to say as he said:

 

It all depends on the size of the application. With a very simple small website you can literally jump in and start programming after you have the templates ready. With a much larger application then paper design always comes prior

 

Which somewhat contradicts.

[Philip]

Perhaps you missed:

(by the way i'm not talking about graphical layout here, purely programming)

 

In this case...:

template -> html/css

paper design -> database/program design

[ignace]

Perhaps you missed:

(by the way i'm not talking about graphical layout here, purely programming)

 

Quite possibly, I should have been sleeping already. Even the matchsticks that I use to keep my eyes open are getting tired

[JonnoTheDev]

Get some rest