How do YOU build your site??

[Crimson77]

Once you realize that every HTML block-level element IS a box, you won't need DIVs for everything

You just slapped me up side the head.

I've been doing my buttons that way, but my graphic titles and footer surrounds and an endless array of other things, that I've been wrapping.

I could probably half my code, which is not bad as it is (unless I've allowed a CMS to do some of the work).

[rahulsinghsaud]

If we have clear concept of website that is to be build. After that we can easily divide functionality and Structure. Then for Structure i use Xtemplate (Template Engine) and PHP to add Functionality.
Using ready made source code like Wordpress and Joomla is also efficient coz why to repeat the things that you alreay know. Isn't it?

[Waraas]

I use wordpress now for all my sites.

[Czaries]

I always start by doing the design in Photoshop, and coding one HTML page (with corresponding CSS file) in Dreamweaver, by hand in the code editor. I then take that one HTML file (usually something like 'layout.html') and split it up into a header/footer that I include on each page with PHP, or a template file for use with my framework.

For Smaller Websites (with no database needed)
I use a standard PHP header/footer setup, but with a little difference. I actually include 3 files instead of just 2. I first include a 'config.php' which sets up and defines all the variables I'm going to need (like the include path, HTTP path, timezone, etc.). I then give a little space to define custom page-specific variables that have been pre-defined in the config file (like page title, meta keywords, meta description, layout options, etc.), and include the header after that. I include the content in the middle, and then include the footer.

It winds up looking something like this:

<?php
include('../includes/config.inc.php');

$pageTitle = "Computer Services Contact";
$metaKeywords = "keyword1, keyword2";
$metaDescription = "We provide some super-duper awesome computer services!  Come check us out!";

include(SITE_INC . 'header.inc.php');
?>

    <h1>Contact Us</h1>

      <h2>By Mail or Phone</h2>
      <p>
        ABC Company<br />
        1 Special Way<br />
        Specialville, CA 99999
      </p>
         
      <p>
        <strong>Support Line:</strong><br />
        555-555-1111 (Mon-Fri 8:00am – 5pm)
      </p>
      
      <h2>Support Requests</h2>
      <p>Do you need to <a href="<?php echo SITE_URL; ?>support/">file a support request</a>?</p>
      
<?php
include(SITE_INC . 'footer.inc.php');
?>

For Larger Websites (with database connectivity)
I copy over the default 'skeleton' of my framework (I usually have to grab the updated core files from SVN because I constantly update it and make improvements), and then turn the 'layout.html' file into a template file that the main content will be placed into. I then go into setting up the database, and editing a bunch of controllers, models, etc. for all the database functionality.

[muaysteve]

"sometimes those CMS systems like Joomla --- are just a little too much for the websites that I build....MANY MANY times I run into people that want a website built...and they have little content..."

I am currently working on my forth site. All four sites are for small businesses, and this is what I have experienced each time. Not a lot of content.

I do use DreamWeaver for writing, as it does have both design/code view and of all the editors I have tried, it has the cleanest code out there. Why do I use an editor you may ask when I promote writing by hand:?: Because most of the time I am in code view, but the simple shortcuts save a ton of time (such as Ctrl-B to make bold)

This describes my situation as well. I love using dreamweaver. I do all my code by hand, but dreamweaver has great features that make managing the sites so much easier.

[nsathees]

The best way is to go with a content management system. There are many open source CMS. Try Joomla or Mambo. Do a search in Google for Joomla or Mambo and you will find tons of information. Also my site is build with CMS. So you can check it as well.

[c0mrade001]

well, i'm kinda new to web development. But I come from a programming (c/c++) background.

I tend to use a lot of php, then html and css.

I will design a template in html/css (or customize an existing one). Once I get the template looking like I want it, I save it away and include it with php. This way, each page is just the content.

I design all my pages by hand (cant stand the code those automated programs spit out)

It still takes me a while, but i think i will get faster once I have built up a collection of templates and php scripts.

[ptothej]

I tend to take a different approach to the ones mentioned above. For me, the important thing about a website is the information it makes available to the user. So I concentrate on the information first and work from there.

For example, say I am building a website that will compare vehicles and help users determine which one is for them. I don't start making logos and sketching out the how the site is going to look. When it comes down to it, users aren't going to care what the site looks like, they are going to care whether or not it will help them make good decisions. Sites like Plenty Of Fish aren't well designed for prettiness, they have good data and they make it accessible.

I call it "Data Driven Design." Think about the information to present, how can you navigate it. Is it geographical? Is it numeric? In the case of the cars, how can cars be compared? Longevity? Repair costs? Fuel Economy? How might users want to begin filtering out cars? The number of doors?

Put all these pieces of information in your data model. From there, I have automated tools and a website that builds all the web pages automatically by using "introspection" to figure out the relationships between data, one-to-many, many-to-many and then presents the information logically and consistently. All the input forms are ready, the search forms. Coding is really slow and tedious and it limits the usability of the site because usable features are often hard to code.

After the pages are all built out and the navigation is complete, I start tweaking the look and feel. I modify the CSS. Change background colors. Redesign the logo and menu backgrounds and such.

So it's kind of the opposite approach many take. Some clients say, "I have a designer and they designed this site for me, make it dynamic and put a database behind it for me please."

I think that approach is a bit antiquated and less productive. I think that is the typical approach, because it is more intuitive -- that is, it's the first thing we think of, "What are we going to see at the site?" But the real question is, "What decisions is the site going to help me make?"

"What information is it going to present?"

[abuzz]

one question that has been bothering me forever, and of course I might get mocked at asking the question. However, I feel like i'm blindly building websites and I have always wanted to know:

How should a website be built? The smart way of doing it.

I feel like it takes forever to build my pages because i'm building them one at a time....is that the stupid way of doing it? Do all professionals use PHP and databases for all their sites....should I always use SSI's for my site?

Or do most people do it the way I'm doing it.....? (when it's not a gigantic site like site point....most of my sites are small)

I know that alot of people might say, "well lots of people build them different ways"

But i'm more so looking for some directing in what I need to be learning....if I am to excel in building websites the "Smart" way and the way that most professionals would build it.....what should I be learning?

I build my websites with joomla. Its easy and you don't have to deal with the coding part.

[jvr]

I build my websites with joomla. Its easy and you don't have to deal with the coding part.

Maybe you're right, however you can also edit the codes, if you know how? and it is very complicated hehehe...

[Abhitech IT Sol]

HTML/CSS for me

[chrisranjana]

How should a website be built? The smart way of doing it.

There must be a sitepoint book on that somewhere.

[sg707]

An analogy question to this is "Do you write the lyric or the music first?"

So basically, the steps to create web site will vary depending on each person.

Still basically, you fall into 2 categories
1) Start from GUI design: Create templates and nailed down the navigation and such. After that, you would do the server side coding. I think this is for the people who wants to visualize the project.
2) Start from server side coding: You implement all server side business logic first. Then, you begin to integrate with the GUI. I think this is for the people who don't like writing html/css and just hire a person to do this for him.

[mihd]

An analogy question to this is "Do you write the lyric or the music first?"

So basically, the steps to create web site will vary depending on each person.

Still basically, you fall into 2 categories
1) Start from GUI design: Create templates and nailed down the navigation and such. After that, you would do the server side coding. I think this is for the people who wants to visualize the project.
2) Start from server side coding: You implement all server side business logic first. Then, you begin to integrate with the GUI. I think this is for the people who don't like writing html/css and just hire a person to do this for him.

i.e. top down or bottom up

[NateL]

I like this thread. I've always wondered how others do their work.

Unfortunately, "use Joomla" is usually an option I will do last. Cookie cutter if you ask me...but then again, i'm still a noob trying to learn. Maybe I will find a great use for it. Maybe I won't. I know it's rich in features, but the Admin backend will scare a lot of customers away. I still haven't put the time in to really figure out how to use it myself... To each their own.

now "my way"...

If the site is going to have a look that can only be created with images, I create mock ups in Photoshop and upon client approval, I tweek the document until I can slice the images out as jpegs. I really like to make sites in pure CSS...but sometimes you can't.

Based on a few aspects of the images, I program the site in an HTML document and most of it is controlled with CSS. I do all this in Dreamweaver. Screw the people who say "OMG you use Dreamweaver ROF LOLZ!!1!"

As previously stated, Dreamweaver has great keyboard shortcuts in code view (where I am most of the time) that make programming a lot faster. It is great for reminders...sometimes I forget what options I have and Dreamweaver pops up a list of things you can use...you just click it and it puts it right in there.

The color coding makes it 10 times easier to read. I can't stand starring at a black and white notepad document with hundreds of lines of code.

Once my HTML and CSS documents are finished and my layout is ready to be put into action, I save it as a .php page and then remove elements, such as the header, footer, menu, etc. I put those in their own php document, and then use php includes to bring in the file to all of my pages. Once that's done, I create all of the sub pages from that one "template".

to me, this is a lot easier than using Dreamweavers templates. If i want to make one minor change on one page, but keep the rest the same, I have to jump through hoops to do it. All of the code that is outside of an editable region is completely blocked from any sort of editing, unless you modify the main template..which will then update ALL of the pages, which may or may not be what you want. I know you can choose which pages to update, but then your template page is different and you quickly get lost in which pages are different...and if you accidentally run an update on all pages, oops...

Just my 2 cents. We all have our way of doing things and I've learned some great tips from this thread. I'm always open to new ideas and easier ways of doing things...because after all, time is money

[Skyblaze]

I like this thread. I've always wondered how others do their work.

Unfortunately, "use Joomla" is usually an option I will do last. Cookie cutter if you ask me...but then again, i'm still a noob trying to learn. Maybe I will find a great use for it. Maybe I won't. I know it's rich in features, but the Admin backend will scare a lot of customers away. I still haven't put the time in to really figure out how to use it myself... To each their own.

now "my way"...

If the site is going to have a look that can only be created with images, I create mock ups in Photoshop and upon client approval, I tweek the document until I can slice the images out as jpegs. I really like to make sites in pure CSS...but sometimes you can't.

Based on a few aspects of the images, I program the site in an HTML document and most of it is controlled with CSS. I do all this in Dreamweaver. Screw the people who say "OMG you use Dreamweaver ROF LOLZ!!1!"

As previously stated, Dreamweaver has great keyboard shortcuts in code view (where I am most of the time) that make programming a lot faster. It is great for reminders...sometimes I forget what options I have and Dreamweaver pops up a list of things you can use...you just click it and it puts it right in there.

The color coding makes it 10 times easier to read. I can't stand starring at a black and white notepad document with hundreds of lines of code.

Once my HTML and CSS documents are finished and my layout is ready to be put into action, I save it as a .php page and then remove elements, such as the header, footer, menu, etc. I put those in their own php document, and then use php includes to bring in the file to all of my pages. Once that's done, I create all of the sub pages from that one "template".

to me, this is a lot easier than using Dreamweavers templates. If i want to make one minor change on one page, but keep the rest the same, I have to jump through hoops to do it. All of the code that is outside of an editable region is completely blocked from any sort of editing, unless you modify the main template..which will then update ALL of the pages, which may or may not be what you want. I know you can choose which pages to update, but then your template page is different and you quickly get lost in which pages are different...and if you accidentally run an update on all pages, oops...

Just my 2 cents. We all have our way of doing things and I've learned some great tips from this thread. I'm always open to new ideas and easier ways of doing things...because after all, time is money

I use mac and i'm trying eclipse with php tools as the html/php editor. But i wonder how is it good dreamweaver to code xhtml/css/javascript and most of all PHP. Is it good to buil a php app for example? Does it have code completion, debugger etc?

[mihd]

no it doesnt, zend studio and phpdeveloper 2008 are the best php IDEs right now, eclipse PDT looks promising too

[NateL]

I use mac and i'm trying eclipse with php tools as the html/php editor. But i wonder how is it good dreamweaver to code xhtml/css/javascript and most of all PHP. Is it good to buil a php app for example? Does it have code completion, debugger etc?

no it doesnt, zend studio and phpdeveloper 2008 are the best php IDEs right now, eclipse PDT looks promising too

mihd is right. For basic php, it does the job...You need to know a lot of the codes before coding with php. If you do open a php document, it is very well colored for finding things easy. functions are one color, strings are another color, etc. etc.

It does have SOME code completion, for instance, if I type in $_P, it will pull up $_POST[ and all I have to do is click it and it puts in the rest of the code for me.

I actually installed Eclipse today on my iMac. I'm learning it too

[NathanielB]

It does have SOME code completion, for instance, if I type in $_P, it will pull up $_POST[ and all I have to do is click it and it puts in the rest of the code for me.

Also, if you hit Ctrl + Space (I guess its Option + Space on a mac) it gives a drop-down of all pre-defined php functions and what not you can use.
Btw good stuff on your name haha'

[mkmcgrath23]

I always start with research and looking at the competition in the market. You can't go into creating a website blindly and have it be successful. Do as much research beforehand and find out if your niche is profitable. Upon research, start to lay out how you'd like the site to function and look. Test it A LOT...have your friends give you opinions. Do user surveys. Get all the feedback you can before you actually start developing the website.

Prepare beforehand and you will be much better off down the road. Also, plan for future growth of your site. Many people ignore this and have no idea what to do when the site starts growing. Good luck.

[and5rey]

I usually just install Wordpress and put on a theme that fits for the site. Or I just create a simple HTML page and I improve the web design later, when the site starts getting some traffic.

But I think Wordpress is a great easy and quick way to build a new website quickly - and that also looks fine if you use a nice WP theme.

[zfy9180]

i use worldpress....

[sniperz53]

Because I deal with a lot of public web teams that require ease of use on a website, I have been developping with Joomla for a long time now and I am very comfortable dealing with it.

I would suggest getting yourself acquainted with one of these cms's that way you can expand your administration and writing team to everyone!

I typically begin with a mock design in photoshop, followed up by a conceptualization on how it will fit into the cms.

After that I implement the design and install the addons, hacking and changing things as I go.

Open source cms's are very powerful, sometimes they can be very standard out of the box, but if you take the time to learn some php, css and xhtml you will be on your way to success!

Cheers

Sniperz

[Romuba]

I use wordpress now for all my sites.

I have read many forum references to using Wordpress to create sites. Can you by any chance refer me to where I can simply learn how to do this?

[denitu]

Does anyone start with the content? I tried a completely different approach on a recent site - back to basics with pen and paper starting with gathering the content and mapping out a rough page hierarchy. After this I moved on to the design mockups (Photoshop) and only later considered how to go about the code.

I found starting with the 'design before content' and then moving into tweaking WordPress early in the design process could lead to getting bogged down in the code and forgetting about the real reasons for creating the site in the first place: to communicate the content that was going on it to a particular target audience.