Two important rules to get a good design: semantic markup and css!
1. Semantic markup means you apply html in a way that makes sense. In the early days everything was marked up with tables, but was all data presented really tabular? No! Navigation items make more sense being unordered lists (<ul>) of list items (<li>), there are important headlines (<h1>) vs less important ones (<h2> .. <h6>), and a banner wrapped in a h1 tag has extra meaning by adding an id of "logo".
All this makes that elements are more specific and css styling easier. Application data gets more informative so that microformats (much like XML) allow for sharing vcards and calendars across applications. At last be a little more verbose when coding html, for example adding title, alt and rel attributes, may help impaired users to get a better web experience (text instead of images, screenreaders, etc.). The list goes on. Andy Clark has some good video trainings dedicated to this, and Transcendent CSS is one of the best books regarding this aspect, web design in general and CSS. I just read that Andy released a new title
2. CSS separates content from style. A device without CSS support can see the core content, and we then apply CSS to make a page more attractive and visually ordered. CSS is also a great designer's tool: instead of fixed mockups in Photoshop it is way more flexible: you want to swap two columns? Edit a stylesheet rule, in PS you would have to draw new rectangulars and save the file again for web.
CSS has strong support for liquid (%) and float designs, I can't imagine how Photoshop could ever give you that much flexibility to play with your mockup. CSS3 supports nice new features as text shadow, rounded corners, rgba colors and a lot more. The most important aspect is this: keep style and structure separated to warrant flexible design.
With these two important points in mind we can quickly expand upon a basic structure and how you would start with CSS. I am still defining my ideal framework but there are some parts in the below example I have become to adopt with most new projects.
Semantic markup and CSS in action
3. This will be a quick example of something I am working on. It merely serves as an example and should be enhanced ..
<!-- A.header file -->
<head>
.. css files, title, meta tags, etc.
</head>
<body>
<div id="content">
<div id="header">
<h1 id="logo">
<a href="index.php">Site's brand</a>
</h1>
<div id="loginWrapper">
..
</div><!--end loginWrapper-->
<ul id="navigation">
<li>..</li>
<li>..</li>
..
</ul><!-- end navigation -->
... another div with search box ...
<div><!--end header-->
<!-- B. main content -->
<div id="maincontent">
.. .. where all stuff of the page happens. you can make more divs here.
you can also use 960 grids, etc. Usually I tend to keep it simple and
use 2 or 3 columns: main / sidebar, or: leftCol/ innerCol/ rightCol
<div id="main">
..
</div> <!-- end main -->
$$ variable content $$ ** all before and after this line is included as part
of a templating system
<div id="sidebar">
..
</div><!-- end sidebar -->
</div><!-- end maincontent -->
<!-- C. footer content -->
<div id="footer">
..
</div><!-- end footer -->
</div><!-- end content -->
..javascript files (at the end of page to ease the pain of potential JS delays)
</body>
</html>
Layout
4. Basic layout. I always start with a css reset to eliminate any inconsistencies across browsers. It is a brilliant solution to make a clean start.
Then I set some basic rules, usually I decide if I go with fixed width and what type
/*general rules*/
body {font : 75%/1.5 "Lucida Grande", Helvetica, "Lucida Sans Unicode", Arial, Verdana, sans-serif;
/*width: 980px; */ margin: 0 auto; color:#333; ackground-color:#4b373a; }
li {list-style: none; float: left; padding: 5px 10px; }
a { text-decoration: none; color: #900; }
a:hover { text-decoration: none; color: #600; }
p{ line-height: 1.2em;}
etc. .. (/* width: 980px; */ would be uncommented if you go for a fixed width, I found 980px on Apple's site, it's a good size, although 960px is commonly used as well)
A logo respecting back-to-home link and SEO
The banner usually makes me feel there is some progress, so I like to add it soon, but as style on top of a h1 called #logo (<h1 id="logo">). This is a good SEO trick I learned from Aarron Walter in his Building Findable Websites. Keep in mind that <h1> together with <title> are the most important SEO elements on the page.
Markup
<h1 id="logo">
<a href="index.php">Brand of site</a>
</h1>
CSS
/*logo*/
h1#logo {position: absolute; top:0px; width: 980px; height: 109px; z-index:89;
background:url('../i/banner.jpg') no-repeat; }
h1#logo a {display: block; text-indent: -9999px; width: 980px; height: 109px;}
As you see we have a h1 with an anchor linking back to homepage. Then you bounce the text off the page placing it -9999 px to the left and on top (a higher z-index stacks content, how higher the value, how higher up in the stack).
Then some layout. You can get some random lipsum text to full in the divs to see how it lines out. I tend to use CSS' border: 1px solid red to see what I am working on:
#header, #footer, #mainContent, #content {border: 1px solid red;}
.. at the end you can just delete this rule.
Also I had to clear out some padding that slipped in probably due to the plugins I am using (with its included CSS)
.. other stylesheets, usually delivered by jquery plugins I tend to use ..
<link rel="stylesheet" href="css/base.css" type="text/css" />
3 tips
1. Make sure your css sheet comes last. I didn't do that and lost some precious time searching in my correct base.css to find out that a stylesheet that was included after base.css, introduced an undesired style. Include base.css as last stylesheet. It prevents headaches ;)
2. Use the firefox Web developer tool bar -> Information -> Display Element Information to inspect individual divs for children / parents, etc. It's a wonderful tool to keep track where you are and how the markup is organized.
3. Think about the layout before CSS-ing. You have a myriad of possibilities: floats, liquid layout, fixed pixel widths, all define a sites identity (like color). A framework like 960 grid system might help you (with fixed layouts), but it also introduces more code and might obscure certain aspects (inherent to frameworks, however you can save quite some time). I can dedicate many more posts to CSS ..
Conclusion
To make a long story short, today I really wanted to share the importance of becoming aware of proper markup and use of CSS for styling your page. Without CSS a page should be still readable and good markup should describe what the element means on the page. It also should improve accessibility to the underlying content, both for people with more difficulty to access your content as well as search engines and microformats that allow export of vcards and hcalendars to external apps.
Secondly the CSS: without proper markup it becomes difficult if not impossible to have an economic and flexible stylesheet. I think we all came to a point once we got lost in our own CSS' specificity. You set up so many rules drilling deeper in a wood of divs and classes, not seeing the trees anymore.
.. "huh? why is that link not changing color when styling that anchor" ..
Good semantic markup gives you the bare essential to start laying out your site with CSS. Use semantic markup and CSS to the advantage of your users, customers and (of course) for your own quality of work !
I actually started to grow into blogging later this year, around August. I try to share interesting web design/ programming topics at least once a week, sometimes it's hard, but looking at the frequency of the posts now vs. a year ago, I am quite satisfied.
