Recent Articles
Your Internet Classroom
2 comments. 30 May 2008One person, some sort of authority, talks. Lots of people listen. Sometimes those people get to contribute something.
Sound familiar? It should, because I’m not just talking about a classroom, I’m talking about your blog.
Blogs and classrooms share the same basic social structure. And like classrooms, blogs and bloggers have a variety of moods or atmospheres.
Seth Godin’s blog is like a big lecture. You come, you listen, then you go play Ultimate Frisbee by the fieldhouse. If you want to talk about what Seth said, you’ll need to do it outside of class, please.
In some classrooms, when the teacher asks for comments, people respond to the teacher, not to the class. Chris Brogan’s blog is like this. His latest post about LinkedIn is a perfect example: lots of people talk to Chris, but they don’t talk much to each other.
(I’m not trying to judge here. I could listen to Seth lecture all day and I usually read all the comments to Chris, but the audience is definitely Chris, not me.)
Chris gets a lot of comments, and writes a lot, averaging more than a post a day, so it’s understandable that he doesn’t really join in his comment threads. But since people are talking to Chris, and Chris doesn’t often answer, his classroom doesn’t have a whole lot of discussion.
For a great example of someone who does get involved, check out Emil Stenström’s post about microformats. He’s the cool prof who likes to engage you in a discussion, will support his theories and honestly listen to yours, and may honestly change his opinion.
Can you do better?
Do you know of a blog that encourages discussion among the readers? Do you know of a classroom that encourages discussion among students?
On one of the more controversial posts on SpeEdChange, one commenter, Ettina, tries to respond directly to a previous comment. Not much came of it.
Should you do better?
What do you want from comments? Do you readers to pontificate to no one, just trying to drive traffic to their own site with some +5 insightful idea? Should they talk to you? Should they talk to each other?
Threaded comments do it can help, so why do so few blogs have them? Do you want your readers to talk to each other?
Work Pattern: Designing Web Sites
2 comments. 26 May 2008The premise of Design Patterns is that similar problems have similar solutions. In the same vein, I propose this Work Pattern a set of common steps I use when I create a web site, and maybe you can use, too.
Elements and Outline
My first step is usually to create an un-styled outline of a “typical” page. I fire up my editor, fill in the basic XHTML, and then go to work inside the <body> tag.
Most sites have this fairly common structure: header, content, footer. And just for fun, let’s throw in navigation between the header and the content. It’s pretty easy to represent this in XHTML:
<div id="header"> </div> <div id="navigation"> </div> <div id="content"> </div> <div id="footer"> </div>
This is my first skeleton for >90% of the sites I design. It’s a very standard document. Sometimes navigation will be inside the header, but most often it goes like this.
Now you have to start thinking about what elements will be on the page. On this site, a blog, I used “articles” instead of “content” for the main div. I also added two side bars, and I knew that inside the articles div I’d want, well, articles.
<div id="header">
<h1>Page Title</h1>
</div>
<div id="navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
<div id="articles">
<h2>Recent Articles</h2>
<div class="article">
<h3>Article Title</h3>
</div>
</div>
<div id="theblog">
<h2>Sidebar heading</h2>
<p>Sidebar paragraph</p>
</div>
<div id="theworld">
<h2>Sidebar heading</h2>
<ul>
<li>Sidebar</li>
<li>list</li>
</ul>
</div>
<div id="footer">
</div>
I won’t bore you with more code examples; I think you get the idea. I make an outline. I know at this point that my source is nice and valid, and that it will make sense when I turn off the stylesheet. I use semantic names for everything.
It’s not very pretty, but I now have a workable XHTML document, with a properly-nested outline, and most of the important elements. Good for me, because now I can start to style them.
Layout and Style
Now, I know what visual elements will need to go on the page. I know what page elements I need to style. Now I’ll start creating a style sheet.
My first style sheet will contain a few basic HTML tags and the elements of my document. I could probably write an XML-to-CSS generator with how strict I am with this step.
Ok, one more code example:
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
a:link {}
a:visited {}
a:hover {}
#header {}
#header h1 {}
#navigation {}
#navigation ul {}
#navigation ul li {}
#articles {}
#articles h2 {}
#articles div.article {}
#articles div.article h2 {}
#theblog {}
#theblog h2 {}
#theworld {}
#theworld h2 {}
#theworld ul {}
#theworld ul li {}
#footer {}
One of my favorite things about this is it’s almost impossible for a mistake in one section to mess up anything else.
But obviously there’s a lot in there I can combine, can shorten. Almost anything that’s true for #theblog will also be true for #theworld in this case, so DRY, and keep things together as much as you can. But, when you’re just starting the style sheet, this is a good place to start.
As I’m going, I add a lot to the style sheet. I also add a lot to the XHTML template. Pixels get tweaked left and right and I swear at IE6, of course.
Building Templates
Once I have a complete, or near-complete, mock up, it’s time to start building templates for your CMS of choice. This is mostly copy-and-paste work at this point. Your #header and #navigation go into the header template. #footer goes into footer. #content goes in the content template.
See how easy that is?
Then you get to go through and actually add the template mark up. Whether it’s Smarty or PHP or ASP doesn’t really matter, you just replace your dummy text with the right tags.
Starting Out
I love this process, but there is one thing you really need for it to go smoothly:
You need to know what kind of content you’ll have. When you’re redesigning your blog, or building an in-house site, it’s pretty easy to know. When you’re working for a client, you may need to twist some arms to get this information. (I love this A List Apart article for advice on communicating with clients.)
One final thought: use comments. Any time I create a div, I wrap it in comments like this:
<!--begin #articles --> <div id="articles"> </div> <!-- end #articles -->
I usually use the CSS selector because it’s specific, so #articles, .article, and so on. These comments—which I left out here to save space—have saved me so much time and effort compared to relying on indentation that I can’t imagine working without them.
I didn’t set out this process as a way to streamline my work, but rather, as I started noticing patterns that worked well, I started thinking about the process. Much like Rails, which was already running Basecamp before it was a framework, I’ve been using more-and-more-polished versions of this work flow for months.
Maybe you’ll find it helpful, maybe not. Maybe you already have a “system” in place. If you do, what is it?
The W3C Sucks
Comments Off comments. 22 May 2008“If you wish to be a success in the world, promise everything, deliver nothing.”
If you want to remain the standard-setting body for the web, promise new recommendations, never deliver. Read the rest of this article »
Better Living through Memcached
2 comments. 19 May 2008I wanted to put something specific in the title, like “Speed up your service” or “Reduce server load” or “Limit database calls” or… You see why I chose “Better Living.”
Memcached is a memory caching system with an obvious name. It allows you to store basically any data that can be serialized into a giant, memory-resident hash, then retrieve it with its unique key.
Imagine not querying your database on every request, and you only begin to get a sense of how useful this is.
Let’s go through a simple, single-server setup. Read the rest of this article »
The New Blog
5 comments. 18 May 2008I made myself sit down today and finish work on the blog design. I am very happy with how it came out. Read the rest of this article »
More Posts
Subscribe
Subscribe to This BlogTags
Accessibility authority Back-end blogging Browsers Code CSS Database Design discover Education exploring find Football Front-end Games How To html identity Life local Marketing microsoft Music My Site MySQL Nostalgia PHP Politics Projects Reading Material search security short social messaging Social Networking software Standards subquery Travel twitter version targeting Web 2.0 WordPress xhtmlPopular Posts
- Identity 2.0 - A Primer (6)
- The New Blog (5)
- Exploring the Web (4)
- Computer-Related Injury (4)
- Does the Web Hate School? (4)
Recent Comments
- Chris Lee on Stop Supporting IE6
- BIGGBYbob on Oh the Humanity (of Twitter)
- James on Oh the Humanity (of Twitter)
- Alec on Oh the Humanity (of Twitter)
- James on Does the Web Hate School?
Follow Me