My latest project at work is a bit confidential, but I can say that it has me designing a webpage. I grew up on this stuff and I’ve almost entirely self-taught myself it. This time, I was given the design prototype, and didn’t have to worry about the actual design of the document.
But it was still a huge bitch. I began by reading up on some extra CSS articles. Maybe this time I’ll try absolute positioning instead of floating divs. It has its own issues. Creating web pages is fun for me … up until I run into the issues. I seems the W3C specs aren’t designed to make things easy for web designers. Some of the most common practices in web design are using CSS specs that aren’t designed specifically for layouts. Absolute positioning is generic – it’s useful for positioning arbitrary elements, which has a lot of use in layout design, but it has limitations and problems. Using floating divs and wrappers and margins to create a particular layout is using these tools for something other than what they are design for.
Take float – it’s a property to make text flow around an object. It wasn’t designed to create columns on a webpage. And there’s no CSS property that creates columns, or a header. In simple cases and the beginnings of large projects, working with a web layout seems simpler than a desktop application layout. All you need are some elements and style rules – no worry about creating objects and adding them and listening for events.
But I’m beginning to wish we had a better approach to creating webpage layouts. Something that’s actually designed to create web forms and two-column pages. The SWING library for Java is a good example. It was designed to create layouts for people to use an application. CSS is designed to style documents. It does have its uses, and that is styling documents. But there are a lot of cases where that doesn’t apply. I would guess that the majority of uses of CSS are either web applications or websites (with columns, headings, footers, and the whole bit) I have no clue what the actual distribution is, or if even the majority of cases are that way, actually, but you can’t argue that there’s a lot of cases like that. And CSS simply doesn’t lend itself well to that.
I’m not saying to abolish CSS. It needs to be improved though, perhaps split into separate specifications. Give me something where I can layout a page as easily and reliably as I could with a table, without the actual horrible atrocities of table design. I’d like something where I can say “this element is going to be a left column that spans from below the header to the bottom of the document” and “the element is going to be a horizontal menu whose items are centered and spaced evenly”. I’m sure some would say that was too specific. Rules that would be used to do that simply would be very narrow-focused. But there are so many cases where this could be used.
CSS is about separating the content from the design. But we should be able to separate parts of a CSS document: style and layout. Fonts, colours, paragraph spacing, etc, are all design properties. Floating divs and absolutely positioned footers are all things that make up a layout. I haven’t looked into to HTML5 much, so maybe there’s a step in the right direction, but what about something like this?
<html>
<head>
<title>FGC Sample</title>
<style>
page {
width: 800px;
horizontal-position: center;
}
header {
width: page-width;
height: 100px;
color: white;
background-color: black;
}
navigation {
nav-style: horizontal;
item-spacing: equal;
item-position: center;
background-color: blue;
}
item {
color: white;
}
item:hover {
font-weight: bold;
background-color: green;
}
content#aside {
type: column;
top: auto;
bottom: document-bottom;
width: 300px;
position: left;
}
content#aside h1 {
text-transform: uppercase;
}
content#main {
type: column;
width: auto;
position: center;
height: auto;
color: black;
background-color: blue;
}
content#main #execphoto {
float: left;
margin: 5px;
}
footer {
width: page-width;
font-size: 0.8em;
font-style: italic;
color: grey;
background-colour: black;
}
</style>
</head>
<body>
<page>
<header><img src="header.png" /></header>
<navigation>
<item href="#">Home</item>
<item href="#">Products</item>
<item href="#">About</item>
<item href="#">Contact</item>
</navigation>
<content id="aside">
<h1>New product launched!</h1>
<p>We have launched a new product XXBBYY</p>
<p>Herp derp derp</p>
<p>FARBLE GARBLE FBRARFGARFGB</p>
</content>
<content id="main">
<h1>Welcome to FarbleGarb CO</h1>
<img id="execphoto" src="mrfarble.png" />
<p>At FGC we have pride and garbs to make you garble in pride.</p>
<p>These paragraphs will float around that image like in regular CSS</p>
</content>
<footer>Copyright © FarbleGarb 2009</footer>
</page>
</body>
</html>
I don’t even have to tell you what it would look like, really, because the CSS explains it. Not perfectly, perhaps, but that’s why I’m not working with the W3C to design the next specs. I’m not even that great of a web designer. But I do know what problems I run into when I’m working on a website, and all the articles across the web that take a genius to get a properly flowing 3-column layout with variable length columns and a footer.
I doubt there’s going to be anything like this soon, or even not soon. CSS3 is barely implemented, and IE still has troubles with most of CSS2 and some of CSS1. But I can dream (and rant), right? One day I’m going back to party like its ‘99 and make a table-based layout. Yes, <font> tags and all.
(I’m extremely interested in other folk’s opinions. I know there are a lot better web designers out there, and I know they don’t read this blog. But if there’s any post that I think deserves commentary and discussion, it’s this one.)
Perhaps you are looking to use a CSS Framework, rather than having to write all of CSS on your own. There are a few listed on http://en.wikipedia.org/wiki/CSS_framework
Tony, he pops out of nowhere! That addresses one part of my post, getting me something that actually helps solve my problem. I didn’t even know these existed, that’s awesome! I’ll take a look into that. Have you worked with any that you’d recommend?
I still think that CSS as it is right now isn’t as well suited to website design as it should be for today’s webpages. Sure, you could do some amazing things with it, but those are “clever” things, and getting simple concepts to work shouldn’t require “clever” work.
fuckin’ signed.
CSS takes magic of the deepest kind to implement what should be simple. i will be looking into these css frameworks.
Look at these pages, too:
http://www.positioniseverything.net/guests/3colcomplex.html
http://www.positioniseverything.net/piefecta-rigid.html
Hrm, The whole XHTML/CSS nightmare is one of the reasons I don’t enjoy doing web dev. There needs to be a better way, but then you’ll just run into non-compliant browsers and other crap anyways :/
I used a combination of this method and floating divs (to nest a header/two column page in the right column).
http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
Oh come on dude! The fruit which you have to reach furthest for always tastes the sweetest
Andy Walpole´s last blog ..The internet 10 years ago this month – January 2000
Ha! Your logic fails in many cases? The fruits at the top of the tree are usually pecked at by birds, and I’m QUITE a skilled climber, thus I can GET IT THERE and have a fruit quite within reach of my grasping devices. To correct your, the fruit which you have IN YOUR MOUTH always tastes the sweetest.
In seriousness, I eventually found a method that worked, as I said. I’m using a combination of wrapper divs according to above post, and floating blocks for content.
I’ve given up on going for 100% semantic HTML. It’s not semantic if you have
Thanks for commenting. I look forward to hearing your thoughts again!
Alternatively, seeing as how you are computer science, why don’t you write a backend layout-templating system? Allow it to autogenerate the layout based upon a simple layout design language of your choice, and it will automatically generate the layout CSS for you.
Also, remember that your HTML can still be semantically correct and your CSS can be messed up by including your layout definitions in it, provided you use your tags in a semantic fashion (such as using a div where a page division should go, a span pair for inline sections, strong and emphasis tags, etc.).
As far as a layout specification, between HTML5 and CSS3, I do believe they are doing some work in trying to make semantic markup easier (especially with the canvas tag).
Just some food for thought.
That is a good idea, to try and make a backend like that. But my boss wouldn’t approve, and I have so little time for hobby programming. And if I did, a website layout generator would NOT be my first choice. It’s really a love-hate thing, me and web design. And a throttle-it-against-the-wall thing, too.
(but thanks for commenting, bro!)
This does exist, it’s called the flexbox model
http://blog.isotoma.com/tag/flexbox/
( wanna guess who doesn’t support it though? )
Found my way here from HN, just wanted to add that I mostly use the 960 grid system and find that it tends to make layout really easy when you get the hang of it. http://960.gs/
CSS3 and HTML5 address many of your concerns. When they began they CSS3 spec they realized the web had moved beyond the hyperlinked document model it had originally been. There is now CSS rules for column layouts, including making them flexible by giving a min and max number of columns. Then the user can size their browser however they like and the site will magically fit. Using Modernizer or Paul Irish’s HTML5 Boilerplate plus CSS3PIE you can make these newer technologies work on older browsers, even IE5.5 if you felt inclined.
The real issue I think is that you sound like you are a back end developer that isn’t working with a front end developer/UI person. Too often I run into situations that the brightest minds working on the algorithms, ai, or business rules of a site are forced to do the front end. And while giving that person a comp in Photoshop or another image creator is helpful that still doesn’t mean the back end person can properly recreate that in HTML/CSS in a usable, accessible manner. The short of what I am saying is that if you are not a front end developer or UI person, get one. Focus on what you are strong at and let them do what they do well.
I recommend the CSS Framework “Blueprint”[1] for general layout and styling. And on top of that use Sass[2] (improved css syntax).
These tools certainly makes my life easier :)
[1] http://www.blueprintcss.org/
[2] http://sass-lang.com/
Employ a front-end developer next time ;P
Thanks for all the comments, guys. I will have to look in to some of these solutions for my next project.
@Greg, that is indeed the case, but I’m more of a “jack-of-all-trades” guy at work. We have a small development staff, and since I was the one with the most experience, I got to do the website :P
I am intrigued about your solution. One large reason for staying away from CSS3 and HTML5 for me is the browser compatibility issue.
Once the need arises again to get in to some web design (it may in the future), I will be looking in to all of these solutions.
Sorry but this article just reads = “I do not know how to use CSS”
You just need to learn it better and look, as already mentioned at one of many good CSS frameworks but it is NOT just about the css.
The way you create your HTML is just as important. The right ID’s, classes and structure and with just a change in class getting different layouts etc is what can be achieved.
Every issue you have can be avoided with experience and every “solution” you put down is just a matter of implementing css properly and many doing things fine already.
Aziz, CSS frameworks are great tools and help keeping your sanity. I used the 960 grid system before, but nowadays I just use the 1140 grid system. I think it’s more modern and easy to use: http://cssgrid.net/
I didn’t make it, I’m just a happy user. It works well with 1 to 12 columns, looks great in 1280-wide resolution and adjusts perfectly to lower resolutions even on iPads and iPhones.
Wow, it seems this got picked up by HackerNews – http://hackerne.ws/item?id=2271690 and there’s quite a few comments there. Glad to have sparked a decent discussion (though, it’s really a novel debate :P)
@Liam – yes, you’re right. “I’m not even that great of a web designer.” I know that there are ways to do things, and people make amazing pieces of work with these tools that I am complaining about.
But I hold to my points still. Some things that are so simple and common need ridiculous hacks or workarounds to work with, and it seems that while a powerful and capable tool in the right hands, CSS has gone of the path as the best method for web design.
What about something like centering dynamic text vertically? Why is that so difficult to do in CSS? Sometimes I fear people put too much stock in purity and resist change simply for the sake of it.
And don’t get me wrong, I appreciate your comment.
Here is the funny thing, on windows I have tried WPF and WinForms, on linux I have tried GTK+ and Qt, and by FAR my favorite way of creating a UI is with html and css. To go further, I downright hate UI programming on those other platforms, even though I love it on the web. It does take a certain degree of expertise to get passed the quirks of css, but once you have that, the code you are writing is FAR more elegant then any other platform I have seen.
http://www.w3.org/TR/css3-layout/
What about the table-cell CSS property? That’s a dirt simple way to do two columns. http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
[...] ? ???????? CSS. http://blog.aaziz.org/i-hate-css [...]