Web Development Progress Report (Calcon Construction) – Part 1.5
A new segment that is being added to my blog is the Web Development Progress Report, which is a blog about my progresses with certain website contracts I am given. I will show you the test site, describe how and why things are done in certain ways. Hopefully this gives newer desginers/coders, as well as more seasoned veterans some ideas. Input is welcomed, but due to the fact that my projects have a time-budget (how many hours can I put into this project for the money I’m getting) as well as a deadline so not all inputs will be taken. After all this is my project.
The contract that I am working on right now is for Calcon Construction, located in Calgary, Alberta. You may be asking “I thought your web design business was in Vancouer, Jeff?” but I got this one thorugh a referral from Rhonda Sherwood, and her sister works for Calcon in Alberta.
Their current website is here – and now you know why they wanted a new one. So we started work about a month ago.. the development process has been going on for a while, which is why this post’s chapter is 1.5, not 1.
Their draft, right now, is located at http://calcon.jeffkee.com/.
Open the draft in a separate window (when I tried to insert an Iframe earlier, it fried my entire post so I’m re-writing it… I hate it when Wordpress fixes my code sometimes), and follow along. The items in the brackets indicate the purpose of the specific item in discussion.
- The fading background (Visual)
I like fading backgrounds. It looks cool. It uses this CSS.background: url(images/body_background.jpg) repeat-x top fixed #c6c6c6;
This CSS code allows you to place a background image at the top, and repeat it only horizontally, and then set the rest of the background to #c6c6c6 so that it doesn’t just break at the end of the image length. Also, it prevents it from scrolling, which means that the background fade will be anchored to the top of the window at all times.
- The CSS Dropdown Menu Bar (Visual, Load-time, Bandwidth, and SEO)
I already talked about my favorite CSS Dropdown Menu system, that does not use Javascript or anything like that, and is compatible with both IE and FF. And I deployed it here for the first time. By having CSS menus, you get a visually rich layout, fancy dropdowns, faster download times, reduce the amount of bandwidth spent, AND it’s great for SEO. Keep in mind that for this CSS dropdown menu to work, you must set the document mode to the strict mode by using the following DOCTYPE tag :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> - The Contact Information at the top-left (SEO)
When Google robots index your page, the value or significance of certain words are higher when they appear near the top of the source code, and reduces as it goes down. That means, visually, the importance of keywords go from top-left to bottom-right. Calcon is a common name for many different companies, so to increase the significance for anybody searching “Calcon Alberta” or something of the sort, I put it up there, all in text. The top banner image is set in as a background using CSS, once again. - The TV Screen Effect at the top banner (Visual)
I talked about my LED/TV Screen Effects on Photoshop earlier, and I used it here. It dims down the background image so that the logo stands out more, and it makes it look so modern and cool. - Simpleviewer Gallery (Visual)
Simpleviewer is perhaps the best photo gallery system I know of that uses Flash. Flash is universally accepted (over 98% of computers have the plugin) and hence used more and more for videos and what not. Airtight Interactive is the company that sells this. You can get a free one that has the Simpleviewer download link at the bottom-right, or pay $45 USD and get one that doesn’t have it, with the full FLA files and actionscripts and everything!
These are the 5 items I will list for now.
On chapter 2, which will come up within this week, I will give you a detailed tutorial on how I managed to create the automatically-extending section title bar WITHOUT using any images, but ONLY CSS positioning and z-indexing!
(No Ratings Yet)
Loading ...
(4.67 out of 5)
Excellent idea! I could see this segment really blowing up. Everyone loves how-to, and when you share skilled quality knowledge like this, we eat it up. I’m liken it.
Yes, this should be a very good niche for me..
Kinda like a reality show.
“Pimp My Site”… have you called MTV yet?
HAHA good call. Nice one paul.
good post. I’d like to see some more of the SEO you are planning on doing to the site in the next update if possible. Would be nice to see what you are going to do as far as ranking in the SE’s (Calcon construction, alberta construction, or other keywords, ect)
Yes they’re coming.. but as you can imagine those posts take a lot longer to write but I’m doing one this evening I think.. my workload has lightened a very tad bit.