Forum Moderators: mack
From concept to upload
Very often to develop a site that works well, we need to take a step back and put our developer brains into reverse. When I say this I mean take a break from the norm. Don’t think "what am I doing right" think more along the lines of "what am I doing wrong"
A lot of people may think this is the wrong attitude and believe me to be a "the glass is half empty" type of person but I see it in a different way.
I believe that if you spend time trying to improve on bad points rather than making good things great then the overall end result will be a lot better.
Lets imagine the situation...
You have an idea for a new site, and you are at that moment where you are staring into a blank screen, what should you do next?
My idea would be to turn away, pull a piece of paper out the printer and grab a pen.
By drawing a few rough sketches of your page you will be much better prepared for trying to put it into place. Try and think about the overall design. Include areas where you would like to add your navigation. Think of it as a web page. How does it work, it is simple etc.
What you need to remember when you start to write the actual code is you are not setting out to clone what you drew. Use the drawing as a layout and guideline.
Very often what you have drawn either doesn’t look quite right, or is not practical for real use. But as I said before the drawing is only there to guide you. If you just set out blind to create right away then you will end up lacking in direction and starting over several times. At least on paper when you restart it doesn’t take so long.
What I try to do is create a template that will be used within most pages of the site from the paper drawing.
When you have a layout on screen you should now look at it and decide your honest opinion. Don’t just say "you like" or "don’t link" the whole page. Think in terms of the parts you don’t like and think about what you could do to improve them.
In reality there is no such thing as a bad page, it's just a with bad elements. That probably sounds strange but it is true. Lets face it any ugly page can be improved by spicing up the bad parts.
What we also need to remember is a web page is not all about looks. How it works is just as importaint. Is the navigation logically placed, does it work as a user would expect it to. Is the contrast between colors right. At this stage what I tend to do is play around with the design, no major changes just trying to improve on areas I don’t like.
Because we are using a page as a template it is very important to get it right from the start. For this reason you should spend time making sure it is right.
If you where to add content to your template then discover you wished to make a change it would involve a lot of page by page work. Technically speaking what we are doing is building one page that we then save as all other pages and add content. Before you go any further you need to be happy with the overall page quality.
Here are some ideas to throw into the mix when evaluating your page.
Visual
Does the page look good? Don’t just ask yourself. Ask friends and family. Don’t just ask them do you like it? Get tips on how to improve it.
Navigation and usability
Does the way the page works make sense. Web users get used to things working in a certain way. To an extent you can deviate from this but try and keep your ideas within reason.
The amount of deviation you can do depends largely on your target age group. Kids, for example seam to be natural experts when it comes to using computers, usability is pretty much non existent, they just seam to know how it works.
When we target a site for a more mature user we need to think about it a lot more carefully.
One example I can remember off hand is when I arrived on a site via Goggle. The page I arrived on had almost the info I wanted but I decided to go to the homepage and have a look around.
There was a logo at the top left and my "web head" though click it to go home. I did, but nothing happened. I looked around for a few seconds there was no obvious link to the home page. I ended up having to strip the URL back to the domain in the address bar to get to the homepage. I clicked on another link from the homepage and had to go back using the back button. I browsed about 4 pages on that site and it wasn’t until the fourth page when I discovered a red circle about half way down the page within the left side margin. Believe it or not that was the homepage link.
I honestly believe that if that site was to have a text link "home" and a logo link on each page their page views would go up by about 400% simply because people wouldn’t give up. KEEP IT SIMPLE.
Navigation
To an extent navigation falls under the title of usability but deserves attention it it's own right. Try and make it as easy as possible for people to get to your main pages. Always make it possible to reach the homepage within 2 moue clicks. Also use a navigation style that is easily recognizable.
Everyone likes to be different and explore new ideas but when it comes to users they like to see things happen they way they are used to.
Getting a template that works is one of the most important issues to conceder when launching a new site. Once you have built a template that you want to go ahead with the next task is to design the actual structure of the site.
Site structure and page structure are two different concepts. Page structure refers to the actual page or template. Site structure is referring to how you implement the files and directories into your website. We first of all have a starting point…
example.com
This is the location where your sites home page will be located. A very common solution to site structure is to use what is termed a “theme pyramid”
example.com/products/widges/redwidgets/
Here is an example of how a websites navigation may work…
-Red
-
-Widgets-
- -
- -Blue
-Products
-
- -
- -
- -Foos
Home
-
- -Installing
- -
-Services
-
-Servicing
What we see is a pyramid appearing as new directories for subject areas are placed within the website. Each folder becomes a container for a specific content area.
In the above example we see the base directory “home”. It then has 2 folders right above it “products” and "services". In this example their web locations would be…
example.com/services and example.com/products
Within the products directory we have another 2 directories or folders. “Red” and “Blue”
example.com/products/Red example.com/products/Blue
Using a well thought out site structure that uses a logical file/folder structure will greatly help you out when it comes to growing your website.
Technically speaking you can simple place every page and file of your website in the root folder. But it always makes good sense to spread your files into a well structured and considered layout. Not only does it help you maintain your site, but it also gives the users an easy to remember URL for each topic area.
Content
The content it’s self will greatly depend on the topic of your site. Generally I paste the content from notepad into the content area of my html document. In notepad the content will be stored as plain text, so will contain no markup at all. If you are using plain html for your web documents you will need to edit each HTML file manually to control the layout of the text.
You will need to carefully insert your html tags to control font, size and paragraphs etc. The alternative, and now the preferred method for doing this, is to use CSS to style your documents. By doing it this way all you need to do is insert your text as plain text and insert your div areas [div id=x] [/div] when doing this you will be able to specify all your div properties in your external, or inline CSS file. This has many benefits. It speeds up the development process. It also allows you make changes to multiple html pages simply by editing your CSS file.
We can now assume that you have a page design, a site layout design and your text in place within each page. What now?
Well you now need to pay particular attention to each and every page. Every page on your site serves a purpose. It is important to ensure that every page is related to its purpose and that it is targeted towards its purpose. There are certain elements on each page that we need to edit on a one by one basis.
Header tags are located within the header area of the html document. There are three main header tags that we will look into.
Page title
Description
Keywords
Title: The page title is the most important tag on your page. It should be located within the header of your document.
<title>this is my web page title</title>
It is very important to realize that your page title is related only to the page it is placed on. It is not a site title. Choose a title that is directly related to the page.
Description: The description does exactly what it says on the tin. Its is a description of the web page. Again this tag should be placed within the header of your html document.
<meta name=”description” content=” Buy foo here”>
Keywords: The keyword tag is yet another tag that must be placed within the html header area. It is s short concise list of words that relate to your sites content.
<meta name=”keywords” content=” foo widgets buy widgets foo for sale”>
When placed on a page together is should look something like this..
<head>
<title>this is my web page title</title>
<meta name=”description” content=” Buy foo here”>
<meta name=”keywords” content=” foo widgets buy widgets foo for sale”>
</head>
When you have each page totally finished it is then time to proof read. Do not do this by yourself. Get someone who was not involved in the development of the site to look through all pages looking for errors. Your content should have been proof read before it was inserted but this will be your final chance to know for sure before the site goes live. There is nothing worse that receiving an email to report a typo or grammar error on your page.
The header tags and title tag are very basic ways to gain placement in search engines. We will not go into web promotion in this thread because it is a topic in it’s own right.
In essence your site is now good to go.
The final step is to log into your site with FTP and upload the pages to your web space. If you reviewed your site correctly, your site should now function properly.
As soon as it is uploaded check all pages for functionality. It is as this time you will find any errors they where previously overlooked. It may be a broken image link or a fault with your navigation. Pay close attention to the functionality of your links. When you are developing a site on your pc it is very easy to accidentally leave a link like \c\my documents.. on the web this will not work. All URL’s MUST point to locations on the server.
Building a site can be as simple or as complicated as you wish. I just find it makes the entire development process a lot more productive if you plan ahead. If you set out with a clear plan in mind, then things tend to fall into place with a lot less stress
Mack.
[edited by: mack at 7:28 pm (utc) on Dec. 26, 2006]
My idea would be to turn away, pull a piece of paper out the printer and grab a pen.-mack
I like to take the development process offline even a step further.
While it's easy enought to open an existing page that you belive is simillar to what you are aiming for and modify that to start the rough-up, I have found a pad of Post-It type sticky notes and a white board to work even better.
I use one Post-It for each page and mark them each with one or two words.
Next I arrange them on a white board and draw lines (with erasbale markers) connecting the various pages.
Instead of having to cross out or rewrite the diagram over and over, I can move the "pages" around, visually see the hierarchy of the site, and add / remove pages from the design.
For more complex sites I use pads of different color Post-It notes and also use different color markers for the "links". All "PRODUCTS" pages might be red, "SERVICES" green, "INFO" blue, etc.. I use the different color lines to represent the ways they will link, (ie- all links back to home page or site map in one color --- progressive links which go from "step 1" to "step 2", "step 3" type pages might be orange, yet each page has a back-link in black...
[edited by: Brett_Tabke at 4:18 pm (utc) on April 21, 2005]
[edit reason] thanks.. yes. We avoid all avenues of url self promotion. [/edit]
You can not only map out the navigation of the site: If you're programming in a server-side language like PHP, you can also extract the areas "common" between your pages to make "inserts" (headers, footers, ad columns, etc) - saves a lot of work. To do this I draw my navigation map (rectangles) and highlight the "common" areas with their own colour. Working with this as a guide can really simplify a site set-up.
The computer is but a medium; all the creation starts in your head ; )
I'm new to web development but, believe it or not, my first computer language was Fortran, back in the mid-70's. I've found a good ol' Fortran-style flowchart can also be used to map website navigation. What directions do you want the visitor to be able to go from this page? Is the navigation set up so they can do that with the fewest possible number of choices? Is there a necessary/desirable path that hasn't been set up for navigation? I think I just started using the flowchart naturally, as I didn't even consciously think about it until some [younger ;-) ] person asked, "What is that?"
The Post-It note idea sounds like a good one for looking at different possibilities. I've just been using a pencil with a good eraser. I also like the idea of using different colors. I could see putting that to use showing various levels of navigation, as well as what page elements are unique to a page and what can be put into the style sheet.
[edited for clarity]
I bought a roll of brown paper and worked on the floor, sticking the Post-Its down as I worked. The brown made a good contrast with the Post-Its. My connecting lines were accomplished using "Post-It tape" - you can get reels of it in office supply shops. It's quite narrow, and makes lines that can be moved. Markers on brown paper would have been too permanent.
It's definitely a shoes-off number. You'll end up walking all through your site, an experience I can thoroughly recommend - it's a very tactile process that enables you to get totally involved with what you're doing.
When I'd finished, the very large sheet (it was about twenty feet long by three feet high) got stuck on the wall. Digital pictures were taken and stitched together on the computer, giving us a permanent record.
