CSS Based Design

[Brandon Martus]

I was looking for some info for CSS/XHTML design, and found this pretty good article. It's pretty basic, but it does a good job of explaining how to effectively design a webpage using CSS. Thought I'd pass it along:

http://adactio.com/articles/display.php/CSS_based_design

[Jon Anderson]

I was looking for some info for CSS/XHTML design, and found this pretty good article. It's pretty basic, but it does a good job of explaining how to effectively design a webpage using CSS. Thought I'd pass it along:

http://adactio.com/articles/display.php/CSS_based_design

thank you so much.

As a webmaster in training stuff such as this helps a huge amount.

[jonathan lall]

A pretty good primer, but it doesn't really go in depth to a few of the subjects or the theory behind them. A lot of really good supplementary stuff to this article is scattered about, especially on weblogs, but very Googlable. I found a really good implementation of just about everything mentioned in this article here (http://www.team188.com/)!

*snicker*

[Brandon Martus]

While I'm at it .. here are 16 sites I (try to) read daily.
For the most part pertain to web design and/or design standards.


1976design.com (http://www.1976design.com/blog/)

**A List Apart (http://www.alistapart.com)

asterisk* | D. Keith Robinson's Web Design Blog. (http://www.7nights.com/asterisk/index.php)

dive into mark (http://diveintomark.org/)

Helliferocious (http://www.helliferocious.com/)

hicksdesign (http://www.hicksdesign.co.uk/journal/)

Kaliber10000 { The Designers' Lunchbox (http://www.k10k.net/)

**meyerweb.com (http://www.meyerweb.com/)

mezzoblue .. design, typography, and the web: live from vancouver, b.c., canada (http://www.mezzoblue.com/)

modulo 26 / daily (http://modulo26.net/daily/)

Overcaffeinated (http://overcaffeinated.net/)

saila.com: New Media Matters (http://www.saila.com/)

**SimpleBits (http://www.simplebits.com/)

Stopdesign (http://www.stopdesign.com/)

SuperfluousBanter: Daily Musings and Commentary (http://www.superfluousbanter.org/)

The Web Standards Project (http://webstandards.org/)

**Zeldman (http://zeldman.com/)


** = highly recommended

[deltacoder1020]

I found a really good implementation of just about everything mentioned in this article here (http://www.team188.com/)!

such a shameless plug... I like it. ;) can't say our website is very good, but then again I'm not the one doing it.

a little sidenote... if you're gonna put a link to the w3c validator on your site... maybe you should have your site validate as correct. ;)

[jonathan lall]

I just wrote in the offending feature (the CD47 Spotlight feed) about five minutes ago, that's why it's not validating... thanks though, I see the problem.

[deltacoder1020]

yeah, that's the only thing I don't like about external content - most of the time it's not standards compliant (although in this case you can probably just reinterpret it to have it match the standard)

[jhnphm]

I just read the W3C docs, and google for anything I don't understand. For Javascript I look at www.quirksmode.org and devedge.netscape.com.

Our website is done in PHP and XHTML, with some perl to generate the static gallery thumbnails, and a pure CSS layout. The server sends the content xhtml+xml for everything other than IE to remain standards compliant (also, if there's a syntax error anywhere, the entire website breaks, which helps keep standards compliance). I plan to add a style switcher soon, but feeling lazy now. We are also using mod_rewrites to hide the ugly PHP URLs for aesthetic purposes (also makes it slightly more difficult to pass potentially malicious parameters, though we also check for those in the scripts).


www.broken-llama.com/robotics

[jonathan lall]

Good call serving proper MIMEs only to proper browsers; I did the same with an ultra-simple script. Glad to see other people are too. I also have a style-switcher, which I also wrote myself but derived "inspiration" from the aformentioned A List Apart. As for mod_rewrites, I never did take the time to learn them. I started reading about mod_rewrite a while back and there was so much that I was overwhelmed and just forgot about it--simple stuff is easy, but what I want to do isn't. Anybody know of anywhere with a concise paper on mod_rewrite?

[jhnphm]

This guide assumes knowledge of regular expressions.
IThe mod_rewrites on my local copy of the site (out of date by two months, and I stripped out redundant statements that weren't needed because of the usage of the <base> element) and commented are:



#Syntax is "RewriteRule [Replacement with optional back references [[Flags]]"

RewriteRule ^/$ /robotics/ [R,L]
#Redirects [url]http://localhost/ to http://localhost/robotics
#R flag redirects, L prevents fall through to statements below

RewriteRule ^/robotics/pages/(.+)$ /robotics/index.php?file=pages/$1.inc [L]
#Using W3 recommended URIs, which makes it more difficult to rewrite URIs, since there is the problem of what to rewrite to. This has been solved by dumping all pages under the /robotics/pages directory, and use the <base> element to shift the initial path for relative URIs to just /robotics/ . All the "pages" are files with the .inc extension which are included into PHP. The scripts filter for the .inc extension for security purposes.

[HFWang]

My rewrite file looks like the following...
RewriteEngine On
RewriteRule ^images(.*)$ images$1 [S=1]
RewriteRule ^(.*)/$ ?path=$1 [L,NS,QSA]
Just so you know, this rewrites EVERYTHING. The rewrite rule for images marks the image folder as being directed to that folder (and then skipping the following rule, so it doesn't run into the other rewrite). This way everything is passed into your CMS and it can handle everything for you.

I then wrote a custom CMS solution for the site that could then parse $_GET['path'] and return the appropriate page...

[jhnphm]

Just added a style switcher at the bottom of our page. 188 has a nice website. In retrospect our website's navigation is rather bad.

[RyanIdium]

try http://www.w3schools.com/css/default.asp .

[JohnBoucher]

Brandon,
That's a great list. Lots of good info there. If I may, I have two to add...

#1 The Zen Garden (http://www.csszengarden.com/). This really awakened me to to POWER of CSS. Click on the designs on the right side of the page, They will load up different CSS files using the same html file. Really cool.

#2 Webmaster World (http://www.webmasterworld.com). This is a News and Discussion for the Independent Web Professional site. It is a great community forum like Chiefdelphi dedicated to web issues. It's free to register for the public side. There are forums dedicated to all web subjects including a terrific CSS forum. Post a question and someone will toss out an answer. There is a non-public side, that deals with the business side of the web that makes really interesting reading. It's good community, very much like we have here.

jb