73 Comments
- alethien, on 10/12/2007, -0/+3As someone who knows nothing aboot CSS, it would have been nice if he actually explained what each tag did. Or why he named them the way he did. Giving someone a Stylesheet to use without explaining how to use it is just useless.
- inactive, on 10/12/2007, -0/+3"Argggg! Stop using fixed width pages!! We have more screen than that! If we have a 1600 width monitor, you are leaving 50% of the page blank!"
Some of us have 17" widescreen laptops (powerbook) where we like to multi-task. I prefer a fixed size so I'm assured the design is made for me to put this window beside other applications.
Also, readibility of a paragraph that extends over 400px is minimized EXTREMELY. It's hard to read a paragraph that extends over 1024px in width.
There's nothing wrong with fixed width. it's easier to maintain, compensate for, and browser-hack for.
If you have a 1600px width monitor, maybe you should be doing more than surfing a website with a liquid layout ;) - H_o_p_s, on 10/12/2007, -0/+2Cool, but ugly as hell...
- thecwin, on 10/12/2007, -0/+2+digg
Nice idea for a tutorial, though, I tend to design by creating a basic idea in a html editor, then just tuning it based on what it looks like and how I think it can be improved.
I gave up with paper and photoshop design since I'd always end up doing something that looked ugly when used in a website. Not only that, anything I did in photoshop or on paper ended up horrifically difficult to try and make into a design. - manfrin, on 10/12/2007, -0/+1I don't much like his design style, but that was an incredibly informative, well written, and well thought-out tutorial.
- inactive, on 10/12/2007, -0/+1Pretty good tutorial. Step by Step is always good. I agree with some of the other posts about wasting space. Unless you need the site to be an exact width, the content area should take up all the space that the side menu isn't using, not counting padding and margins of course. But some of the other points are good too, like the person who said a really wide paragraph is hard to read. Thats true too. I guess it depends on the situation, but more often than not I want to use up all the space, often because I don't know how long each item on the page is going to be. If the page is too thin, then the paragraph or item will be really long, that can be hard to read too. It could also mess up with images that are too big, but are well within reasonable size. You have to do a bit more planning with a fixed width I guess, but done right it will look good.
- justhinking, on 10/12/2007, -0/+1For 'old-HTML-clowns' like myself, CSS is an intriguing but sometimes overwhelming concept. This tutorial goes 'K-I-S-S' styles, and brings it down to my level. Cheers to that! dugg ;)
- gamekid, on 10/12/2007, -0/+1Old ("August 25, 2005" - I had seen it that day) but good.
"would be better if the end result looked nice"
It does look brownish and meh at the end, but it's not complete crap. Dugg since <font> must be stopped. - etruscan, on 10/12/2007, -0/+1"Argggg! Stop using fixed width pages!! We have more screen than that! If we have a 1600 width monitor, you are leaving 50% of the page blank!"
Argggg! Stop building pages with variable widths that break every component in differing ways under every conceivable browser and browsing configuration. Seriously... flexible pages are a useless gimmick thought up by someone who figured it was a good idea, but never gave thought to the fact that web page elements are not Transformers, and shouldn't be asked to chameleon themselves to every screen resolution.
A designer builds a page to look and act a certain way. It's your own fault if you're running at 640x480 and need to scroll to see it all, or 1600x1200 and get more background than you have webpage. - Dryth, on 10/12/2007, -0/+1etruscan: Thanks to the resolution on my work computer, the font is barely readable. Since they opt for pixels, zooming the the page doesn't expand the width in Firefox, so I end up with a few words per line and horrible readability. Fewer options if I were using IE 5/6. All the while being a thin strip down the side of your page.
If you want a thinner page, you can just decrease the size of the window. If I want a wider page, I need to go as far as using a custom stylesheet, switching to Opera, or changing my screen resolution just for their site. Seems my end involves more pain. And neither of us would need to compromise if the site designer had opted for alternate stylesheets. Or they could just have used max- and min-width set to widths that don't break the page, but still give me something a bit bigger to work with. Or they could have used EMs as width units.
Lotsa options. And if the site designer had exercised any of them we wouldn't even be having this discussion. Not good design. - jjafuller, on 10/12/2007, -0/+1I'm curious how many people actually design pages like this.
Before I write any code, I have a complete design in photoshop. Then, it is just the incremental process of apply structure, and CSS for degradability. - aquax, on 10/12/2007, -0/+1I like the concept of the Step By Step of a CSS site, very nice. I use a different workflow, but I love reading about other people's. Gets a digg from me simply for that.
However, I have to agree with a number of others in that defining fixed sizes is very poor manners when it comes to web design. Sure 85% of your audience will be fine, but what happens when someone shows up on your site who uses one of those 12" Toshibas with the 1600px wide screen? Or when the sight-impaired person using a 21" display at 640x480 attempts to view your site?
It's your job as the designer to make these things work; the average user is not going to understand how to increase or decrease font size, why the page won't fill their 23" display, or why they have to scroll left and right all the time to just read sentences. You, as the designer, have the skills to make it work, and you should have the ability to make the site adapt itself for the vast majority of users. Hell, one of the web designers I know tests his sites for even IE 3.x compatibility (I personally only check for major errors in 4.x browsers, and otherwise focus my testing for 5.x+ browsers). By creating a site that's not as flexible as it could be, you could be missing out on viewers, and on a professional site, that could cost you or your company money.
And honestly, it's not THAT hard to do. Use em, use degradable code, and test the crap out of it. - inactive, on 10/12/2007, -0/+1It'd be even better if it had a more attractive design. But cool nonetheless.
- 0x2a, on 10/12/2007, -0/+1One nice feature of the new comment system is that you do not have to quote someone else - you can put your comment right under theirs as a reply, where it will be relevent :)
- Mouche, on 10/12/2007, -0/+0awesome and helpful
- njfinn, on 10/12/2007, -0/+0I went through it and then Dugg great Demo.
- Techn0tic, on 10/12/2007, -0/+0Despite some of the problems highlighted in the comments here (I'm not keen on the final design myself) I thought it was a very good demonstration of how much could be acomplished with CSS in a practical setting rather than just snippets of 2 or 3 divs layed out in certain ways as seems to be common to most CSS examples.
- 21.0, on 10/12/2007, -0/+0badass digg
- dan1el, on 10/12/2007, -0/+0Incredible, awsome? This is just basic CSS1.
- Brutal, on 10/12/2007, -0/+0Very interesting, eventhough I didn't like the end result.
- PradaPete, on 10/12/2007, -0/+0yoo neginner
- inactive, on 10/12/2007, -0/+0would be better if the end result looked nice
- BxBoy, on 10/12/2007, -0/+0nice and effective. love the visual. digg++
- trnelson, on 10/12/2007, -0/+0px for font sizes?
NO DIGG!
Otherwise not too bad I guess, a good starter walkthrough. - Mexrocker, on 10/12/2007, -0/+0nice, very cool indeed
- underburn, on 10/12/2007, -0/+0Great tutorial Idea... Dugg and Dugg
- knightblade2oo4, on 10/12/2007, -0/+0this is what people need... good visual interaction along with in depth instructions.
+digg - boohiss, on 10/12/2007, -0/+0Nice.
- gamekid, on 10/12/2007, -1/+1"Argggg! Stop using fixed width pages!! We have more screen than that! If we have a 1600 width monitor, you are leaving 50% of the page blank!"
Oh yeah, that too. That's something I normally complain about. Still, any CSS > none. - jamesong, on 10/12/2007, -0/+0cool, but it needs a better design
+digg - aussieaubs, on 10/12/2007, -0/+0freakin awesome
- muzikandpics, on 10/12/2007, -0/+0Good demo duggg.....
- BrainiakZ, on 10/12/2007, -0/+0Very nice! Digg from me :)
- sole, on 10/12/2007, -0/+0That was a good overview. But, I think it started to go down hill after a certain point. Sorry to offend.
- shishira, on 10/12/2007, -0/+0Albino Black Sheep . . . my frnd had shown me that mushroom vedio guess its from here
I personally prefer doing a total layout in Fireworks and then bother about fiting it into the divs - mateo60, on 10/12/2007, -0/+0Thats a really good demo.
- PhrosTT, on 10/12/2007, -0/+0I'm sick of these CSS layout tutorials.
CSS tricks and hacks are cool, but 2 column layout tutorials?!
I think somebody should man up and do a tutorial for a complicated layout, using liquid/stretchy content boxes with background images, mixing fixed with dynamic widths, etc. - jjafuller, on 10/12/2007, -0/+0applying*
- igutekunst, on 10/12/2007, -0/+0I'm getting tired of every CSS related story being dugg to the front page.
- jorvis, on 10/12/2007, -0/+0I agree that this is a great way to learn and even took the same approach when writing my web design tutorial. I volunteer my time teaching the class, and would love anyone's feedback/corrections. The final version of the site is here:
http://www.sivro.net/web_class/blog/final.html
and I begin to lead them through the creation of it here:
http://www.sivro.net/web_class/content/page5.html
if anyone else is interested in the whole tutorial, it starts here:
http://www.sivro.net/web_class
J - inactive, on 10/12/2007, -0/+0If it looks nice or not is completely subjective. Incredible tutorial, awesome idea. +Digg no doubt.
- Korvaras, on 10/12/2007, -0/+0Digg. ++
- paularms, on 10/12/2007, -0/+0Definitely a different approach than what I take... clients are generally too slow to get content to designers, so a lot of guessing needs to be done first.
- Teh_Psyren, on 10/12/2007, -0/+0Well thought out.
- treehead, on 10/12/2007, -0/+0;while i think the actual design of the page that we're "watching come together" is aweful, the illustrative concept is excellent. makes you wonder why you don't see this kind of thing more often.
- sydesigner, on 10/12/2007, -0/+0Nice work! Dugg..
- mouthster, on 10/12/2007, -0/+0"Argggg! Stop using fixed width pages!! We have more screen than that! If we have a 1600 width monitor, you are leaving 50% of the page blank!"
Sure guy. I bought a wide screen monitor so I could have more windows open, not so I could look like the freakin' chick from the Exorcist spinnin' my head left to right reading one long line of text that used to be a paragraph.
Liquid layout.. sheesh. - inactive, on 10/12/2007, -0/+0http://www.design-sites.net/
- trnelson, on 10/12/2007, -0/+0Okay well I dugg it anyway because it is a good approach to teaching CSS, but it really should use em or % for font sizes. =P
-
Show 51 - 73 of 73 discussions



What is Digg?
Check out the new & improved