Web and Graphic Design created especially for the small to medium sized business. Quick turnaround and designs that will allow you to update your web site as easily as sending an email.
Over on Woork, Antonio writes about a technique that helps him write CSS. Basically: Write CSS so that it matches a generalized page layout. Start with the stuff on the top of the page (header and title bar) and work your way down.
This is a pretty good method of laying out a CSS page and one that I use myself. I love antonio’s techniques, and I would recommend anyone beginning in CSS work should take a look at what he’s teaching.
In addition to this, he touches on using the CSS selectors to make them as specific as possible. This is something that can be further explained in detail. If you look at the CSS for the UVic web site you may notice, after the reset and build up, that all of the CSS selectors are on a single line and that each one builds upon the one above it.
What I mean is, I use the CSS selectors to help organize the CSS itself both for improved readability and for fool-proofing the system.
Here’s a short example.
/*----BANNER----*/
#banner {overflow:hidden;}
#banner .center {height:4.5em;}
#banner .center .left { float: left;}
#banner .center .left img{ float: left; }
#banner .center .left img .red{ background:red }
#banner .center .right {float: right;}
#banner .center .right img{ float: right; }
You’ll notice that you can easily see that you are working in the banner section just by scanning the page. This example method also prevents the user from putting the class “red” on an image outside of the banner’s left division.
This exapmle shows that the class of red is only intended to go on images in the left hand side of the banner, putting it anywhere else would be totally harmless. If the designer intended this class to be used anywhere inside the banner section then it would be moved up an couple lines and the specific selectors would be removed. If this is a global class, it would get out into the global class section.
Doing this makes the CSS easier to read, as well saving the user from accidentally using classes that are only designed for image layouts on something other than an image, or using classes that are designed for some sort of layout on a block of text.
Congratulations go out to the small web team here at UVic on the launch of UVic.ca!
For the last 7 months or so I have been heavily involved in the creation of the University of Victoria’s website Redesign. This site is the culmination of months or research and many months of development.
Our small team did a fantastic job tying it all together and creating something dynamic and energizing for external audiences, and something that’s fresh and organized for internal staff, faculty and students.
Working on the site was a small agile team of one information architect, one graphic designer, several content writers, a couple back end developers, one front end developer (me), one guy trying to organize it and an entire university of 25,000 staff students and faculty suggesting how it could be improved.
Working on the project allowed me to focus on polishing the “save the president” style of site structure (modular and recursive horizontal pancake divs and one center div inside each of those) and I was able to better develop a cohesive CSS system that allows for a more plug-and-play style of recursive site structure - this was inspired the the modular system that was created for uni-form and adapted, scaled up and expanded upon to include everything a web developer could need, including uni-form. I’ll get into this one later when my head isn’t filled with sleep.
Anyhow. Big congratulations on a successful launch!
The SMPTE test pattern was reworked last night. It’s lost a couple lines of code and works in every browser known to man!
Previously, I had each row sliced into bars equally, I had to shave off a tiny bit so IE could render the page, if i had them all equal 100% IE would try to make the last one wrap. This left a tiny white line at the right side of the screen. That always annoyed me.
Last night I realized that I didn’t need the last slice, and I could just colour the row behind the bars, and float the bars left. So simple! It even removes a couple lines of code.
The white bar is gone, and the page renders perfectly in the 44 browsers I tested it in. Take a look! If only i could find a way to reproduce the 1000khx tone…
Feel free to steal the test pattern and use it on your own site, Just credit me in the code.
I’ve launched a new site, All You Could Eat!
This is the best place to go to for reviews on all you can eat restaurants in Vancouver. My friends and I have always LOVED all you can eat, and we all hope to share this joy with everyone. We’ve got a highly scientific algorithm that will allow us to find the best all you can eat places for your money. A big map so you can find the ones closest to your house and a rating system.
I’ve done some neat stuff with the typical wordpress installation and added a great Google maps plugin that will allow you to see all the posts at once on a single screen.
If you love all-you-can-eat restaurants and have any suggestions on hoe the site can be improved, send me an email.
Just a little something for April fools this year. I created a website that you can send to your friends. It will allow you to add in anyone’s name into a news article, stating that they will doom the planet. I call it This web site will kill us all!
Change it to anyone’s name by putting it before the website name, separated by the dots. Here are a few to get you going.
