How do the veterans do it ?

[whatever_works]

A question to the "masters" and those "proficient (made more than one page)'.When you first perceive a WebPage you want to construct, you either conjure an idea or are given a mandate by an employer you might have something of a visual idea of what you want to accomplish, but where do you go from there ?Do you make a rough sketch on hard paper first ? Do you write the XHTML first and then move to the css? Do you use a split piece of paper with xhtml on one side and CSS on the other ? Or do you just jump on your PC and start hammering code?Possibly for the very proficient you can visualize a lot simultaneously , but as you evolved to that level what methods did you use ?

[Jonas]

While I wouldn't call myself a master, I believe (and hope) I fit the category proficient, so here goes:Generally it's a good idea to start by drawing on paper. Then of course the next thing to do is define (still on paper) which parts of the drawing/layout is what. Like you would probably have drawn a menu, which you would then try to get an idea of what technologies you will use (float, positioning, margins, etc). All this will in turn decide what elements it's logical to start off with when coding the xhtml. Typically I write XHTML and CSS at the same time, in the same document, and only when I have the general layout (widths, height, fonts, borders) do I move the CSS into a separate document where I can add colours and graphics.Sometimes though, I'll just sit down and play around with divs, css and images, like when I landed on this design:http://home.no.net/jonvel/

[whatever_works]

. Typically I write XHTML and CSS at the same time, in the same document, and only when I have the general layout (widths, height, fonts, borders) do I move the CSS into a separate document where I can add colours and graphics.http://home.no.net/jonvel/

That is honestly insightful for this noobie. It never occured to me. You can complete it and then just collect all the non-section specific CSS and move it to a seperate page ! Simple but it makes it a lot easier to undersatnd the flow.Thanx

[aquatsr]

When I work on large projects I first sit down with a piece of computer paper and do the following things:1. I draw the site layout I think I want. I usually have a ruler, pencil, and a good eraser. This way I can easily make the design evolve when I feel like changing it.2. I write down things my site may need. For example I may need a user-authentication system. I may need an area to input, manage, and delete news. I'll want an easy way to update content, and I also want my site secure.3. Once I figure out the design and what I want, I'll start writing some basic code and specifying rudimentary page names (i.e. user-authentication code would be in auth_user.php or something)4. After I've done something along the lines of steps 1-3, I go to my computer and start with the site design. I first code the CSS, and then the corresponding XHTML. I only make one page, and tweak it as needed for the others. Since I use PHP, my code can be placed into separate files and called as needed - very efficient.5. Next I try to integrate whatever I wrote in steps 2 and 3 into the design of the site. This usually takes up the majority of my time.I've found that some people can just sit down and punch out code, but nobody can make a good site without at least some basic planning.Good luck! (My site: http://www.dedicatedlyrics.com took the better part of two months to code and build. Now I'm furiously adding content to it)

[Jonas]

aquatsr, I had a quick look at your code, and I notice you have a lot of unnecessary class-assignments, where you could instead take use of descendant-selectors.If you have an <ul> element with a unique ID, you don't need classnames on each <li> element. Instead, you can write this:ul#id_name li {css info}That also goes for your divs, such as this:

<div id="sidenav"><center><br /><br /><a class="side" href="index.php?nav=browse">Browse All</a><br /><br /><a class="side" href="index.php?page=num&sort=title">#</a><br /><a class="side" href="index.php?page=A&sort=title">A</a><br /><a class="side" href="index.php?page=B&sort=title">B</a><br /><a class="side" href="index.php?page=C&sort=title">C</a><br /><a class="side" href="index.php?page=D&sort=title">D</a><br /><a class="side" href="index.php?page=E&sort=title">E</a><br /><a class="side" href="index.php?page=F&sort=title">F</a><br /><a class="side" href="index.php?page=G&sort=title">G</a><br /><a class="side" href="index.php?page=H&sort=title">H</a><br /><a class="side" href="index.php?page=I&sort=title">I</a><br /><a class="side" href="index.php?page=J&sort=title">J</a><br /><a class="side" href="index.php?page=K&sort=title">K</a><br /><a class="side" href="index.php?page=L&sort=title">L</a><br /><a class="side" href="index.php?page=M&sort=title">M</a><br /><a class="side" href="index.php?page=N&sort=title">N</a><br /><a class="side" href="index.php?page=O&sort=title">O</a><br /><a class="side" href="index.php?page=P&sort=title">P</a><br /><a class="side" href="index.php?page=Q&sort=title">Q</a><br /><a class="side" href="index.php?page=R&sort=title">R</a><br /><a class="side" href="index.php?page=S&sort=title">S</a><br /><a class="side" href="index.php?page=T&sort=title">T</a><br /><a class="side" href="index.php?page=U&sort=title">U</a><br /><a class="side" href="index.php?page=V&sort=title">V</a><br /><a class="side" href="index.php?page=W&sort=title">W</a><br /><a class="side" href="index.php?page=X&sort=title">X</a><br /><a class="side" href="index.php?page=Y&sort=title">Y</a><br /><a class="side" href="index.php?page=Z&sort=title">Z</a><br /><br /><a class="side" href="index.php">Home</a></center></div>

<a class="side" ... > is pretty much useless, as you can get the same result throughdiv#sidenav a {}Lots of code to be saved there, which gives you quicker load-time.

[real_illusions]

While I wouldn't call myself a master, I believe (and hope) I fit the category proficient, so here goes:Typically I write XHTML and CSS at the same time, in the same document, and only when I have the general layout (widths, height, fonts, borders) do I move the CSS into a separate document where I can add colours and graphics.Sometimes though, I'll just sit down and play around with divs, css and images, like when I landed on this design:http://home.no.net/jonvel/

thats what i do..although i usually do colours at the same time of writing the css and xhtml to some extent, and then work on them a bit later.images sometimes start off an idea or i build them with a design in mind and design around one image, but that usually doesn't work.

[boen_robot]

What I usually do is to first think of what the website is and what it will need.Then I outline the basic XHTML code for it. You know, like navigation and the such.Only after the XHTML seems clear and semantical enough I start doing the CSS. This is also the time for the first basic images such as the main background.After the basic design is estabilished, I split the content from structure with the XML&XSLT duo and figure out exactly what content is common, what for this section, etc. and place each one in it's own XML file for the sake of performance (why load a single XML when you use only a fraction of it?) and flexibility (edit one XML or XSLT, have it in every XHTML).After that is over with, I estabilish some of the section based XHTML if any and complete the CSS and graphics of the site based on those adjustments. That is also the place to figure out what CSS is common and what is for a secion.Subsection and per-page designs go through the same procedure. Where does server side scripting come in you ask? Only a single file to process the XSLT(s) with the different XMLs. And if server side scripting functionality is requred for something (say a login) then the results from the different actions are passes as parameters to the XSLT, so they can then influence the output.

[aspnetguy]

First off I deside what I anned the website to do and what "sections" it needs to be broken into. That is always the first step. Then I consider what the client has for branding (colors, logos, etc) then I deside on the best layout of the information that makes it easy to access and so on.

[Skemcin]

First off I deside what I anned the website to do and what "sections" it needs to be broken into. That is always the first step. Then I consider what the client has for branding (colors, logos, etc) then I deside on the best layout of the information that makes it easy to access and so on.

I think this a point far too often overlooked. You have to have your site design complete before you can even think about graphics. Now many noobs are say "what? your design is your graphics" and that is not true. Your site design is the structure of your content and applications - similar to your house. The design of your house starts with the size and dimensions of the rooms you want to build. Only after that are you able to erect the exterior walls and then choose your wall covers, siding, and paint. The web works the same way, make sure you have a good structure, it will help build your graphic design - it dictates what kind of navigation systems you will be able to use (for instance).Once all that is in place, my graphic design starts from two places - one the client's brand and its history and second from a quick look at its competitor sites to see how they are presenting information and picking good ideas from that. Then, its right to Photoshop.After a graphic design is settled on (typically at least a top level or homepage design, then a second and third tier template design ar made. Again, once those are done, then code my templates all on one page. When they are signed off on, then I move them into my development area. Here I begin to extract all my CSS and javascript into external files. I also begin to pull my SSI files out as well so that I am left with barely any code and two comments on the page, it looks like this:

<!--- template = template_interior.cfmauthor = DTVdate created = 11/24/2004date last modified = 03/29/2005use/purpose =   ---><title>CompanyName - PageTitle</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="author" content="xxxxx x. xxxxxxxxxx" /><meta name="keywords" content="" /><meta name="description" content="" /><meta name="robots" content="follow" /><meta http-equiv="expires" content="0" /><meta http-equiv="Pragma" content="no-cache" /><!--- set page specfic defaults ---><cfset sectiontitle=""><cfset pagetitle=""><cfinclude template="/_includes/header_interior.cfm"><!--- begin page applications below this comment ---><!--- end page applications above this comment ---><cfinclude template="/_includes/footer_interior.cfm">

Then I have any help I have or myself code all my applications in white space (stand alone) files. Once they are tested and running fine, then are copied and pasted into the template as instructed (begin/end page application below/above this comment). Once in the template, final touches are made to make the application work with the flow of the site (variables added or used, etc.) and then its saved as its own file.Then I have beer and some dark chocolate M&Ms before I start the next page.

[aspnetguy]

no, no, no Skemcin you have it all wrong....peanut M&Ms are much better :)

[justsomeguy]

I'm a programmer, I don't specialize in graphic design, so I work with designers who are much better then myself, and who specialize in doing that. We meet with the client to develop mockups and sketches of what they want to see, in addition to what they want the site to do. Once the client approves a particular interface, then I take that interface and decide how I can best turn it into a usable web page. Hopefully the layout is clear and simple enough to create using div tags, but a lot of the time (with interfaces such as this one), I choose to split it up using a table. It comes down to either spending a lot of time and effort and using browser-specific hacks (something I've been trying to get away from doing for years) to get it to work with divs, or just use tables and have it work everywhere quickly. So, I take the image or Photoshop document I get from the designer, and chop it up into the pieces I need to create the site. I like to use templates, and put everything I can in common files like a header or footer or menu file that will get included by everything else, so that the actual code in each individual page is kept to a minimum. As for the structure, it helps to have a good idea in your head about what you want the page to be in terms of the HTML structure, you need to be able to look at the mockup image and see the HTML layout in your head. Then, it's on to the code, which typically requires a fair bit of tweaking to get it to look as close to the mockup as possible. See, for instance, the mockup vs. the markup.