In this post I will talk about how your blog design — including the strategies you use to search for relevant blogs; how you describe, analyze, and evaluate them; your choice of blog theme, and the way you title and display categories and recent posts in your sidebar, and headers, sub-heads, bullet lists, quotations, and links — involves not only care in word choice, arrangement, style, but also sets up, influences, and basically controls the kind of writing that you do, the presentation that you make, as well as the use your users might make of it.
It is important that you choose a WordPress theme, a graphic design, that might please your readers. By blog design we mean first structure and then style, but most importantly, we mean the user’s experience: how they are led to understand your web site’s content, navigation, and how they might best take advantage of it.
That is, by design I am inviting you to think about your writing is more than ideas all dressed up, but how, in very practical terms, your visitor is led to consider the application, site, content, graphics, links, etc., etc., that bring bring your visitor to you, your work, and out beyond you into the professional world.
This user-oriented view is illustrated (as above) in the contrast between blogs that say “me-me-me” with those that say “you-you-you”: while presenting a professional yourself is important, we professionals are primarily concerned with contributing to our professions, disciplines, and society: our job is to help others do whatever they are trying to do.
Moreover, your building this real-world orientation into your design will create a constant reminder of who you are writing for and why.
Structure and the user’s path
If you drew up a list of the dozen websites that you find most useful, you’ll likely find Google at the top of it. How do we approach Google? We want simply to get beyond it. How is Google designed? Simply. Google is among the easiest-to-understand and easiest-to-use because it presents its business right up front: we type in what we are looking for and it delivers. Your websites, ideally, should be so simple.
Your favorite websites most likely offer a very clear path as your eye travels from the upper-left on down, across the title and most current post, to such significant navigational markers as lists of categories, tags, and previous posts: each with its own special way of helping us sort the pile of posts added one on top of the other into meaningful, browsable groups.
That is, you will want to wrap your head around the idea that your individual and group blogs are, for all practical purposes, hardly about you at all: they are about what good uses your visitors might make of them.
You might also think of this as a story, a narrative, a path through a village or house, where your visitors may see at a glance what your blog is about, how much is there, how it is organized, and what they might be able to do there.
So, for example, it is all very nice that you have created detailed mind maps of your topic, but your visitors are likely not interested in the details of your thought processes, but in what value you have added to what is already known.
Consider the top of Sophie’s site, above, where the title image indicates right away what her blog is about and where it is going: she is interested in current and forward-looking marketing research.
In the two tabs, we see right away that while we might click on her “About Me”, we will always be able to click “Home” and get back to where we started.
In this way, our blogs are best understood in somewhat theatrical terms: as an experience for viewers who are looking for meaning and may be guided to it in organized ways.
Drilling down
When we visit a site we want to get down to business and that means finding the posts that will matter to us. Websites are best designed when they bring you to those posts as quickly and efficiently as possible.
Where the reading of books is a problem of turning pages, the reading of blogs involved drilling down through stacks. Sophie’s site tells us right away that we are starting off at the top of a big pile of things. Our indications of depth are set up with the sign and signpost heading down, the silver “Y” at the top of the pole points like an arrow down. We are also invited so “search” through the pile, to scroll down posts dated from the present on down, and through “Categories”, the groups of posts.
Consider a professional design blog
A List Apart has designed its blog in a similar fashion. In this screenshot of the “Design” category, what they’ve named as a “topic”, we also start on the top left with a logo designed, in the letter “A” and the rest of the site title stacked underneath it, to convey the blog’s vertical, stacked design. On this category or “topic” page we see a brief explanation of the topic in a shaded box and then short summaries of each sub-section one on top of the other. The list of “topics” on the right also reinforces the stack design, with each topic arranged in alphabetical order.
Although your blogs will likely not have the hundreds of articles as here, you will likely soon have a dozen or more articles on the first page and a handful in each category, and the way to insure that they are first presented to offer an overview is the break each post up by hiding all but the first, introductory paragraph by using the “more” feature — which when editing is simple to implement by putting your cursor after the first paragraph and clicking the icon above showing the text broken in two and producing the “More …” mark on the lower right (which will insert the following code, visible in the HTML view: <!—more—>)
Navigation is about purposes: tell me “why” before you go off telling me “how”
We expect novels to present us with all sorts of mysteries and obscure metaphors, because when we read novels we want to be entertained at our leisure, but for us blogging means business, and that means stating our business directly right from the start.
In the illustrations above you see that the titles are short and to the point and that the first sentences are equally to the point. They provide the reader with an opportunity to decide right away if he or she wants to continue. Within seconds we know right away what these posts are about and our “costs” for this knowing are kept low.
But what about all the important details? Put them below. Web developer Mark Bernstein explains:
People are fascinated by detail and enthralled by passion; explain to us why it matters to you, and no detail is too small, no technical question too arcane. Bad personal sites bore us by telling us about trivial events and casual encounters about which we have no reason to care. Don’t tell us what happened: tell us why it matters. Don’t tell us your opinion: tell us why the question is important.
By understanding the uniquely important role of titles and opening paragraphs, you will likely pay more attention to identifying the high-level generalizations and organizing principles governing your blog post concept and design.
Choose a theme that supports this drilling down
Overall blog designs are called “themes”: a set of styles for type and image size, placement, and their relationships that are applied to the underlying structure of posts, headers, text, etc. Choose a theme that supports this business of efficient drilling down through the stack.
Consider how the “Simpla” theme in the center of the three themes illustrated above appears comparatively light, airy, and legible in contrast to the bold columns and bright color blocks of the designs to either side. Even at a reduced size I am sure you can see that the designs on either side obscure your blog’s fundamental structure of posts, each with a title and body, stacked on top of each other underneath a header.
The best way to learn this is to make your own comparison by switching from one theme to another, make screenshots, and setting them out on a table beside each other so you may consider them at a distance.
To do this, log on to your WordPress blog’s administrative panel, go to the Appearance/Themes section, and “activate” a number of styles. Themes you might try include the “Simpla” and “Solipsus” themes you see here as well as the those with fat headers that take up a lot of space, thin columns that don’t let you see too much, graphics which scream at you reader, and colors that burn the eyes like red pepper.
By choosing among the possibilities you will develop a “feel” for various themes and a sense of the “tone” or “mood” they add to your site’s basic structure. When writing, a clear feeling for your blog’s tone will help you find your voice.
Cleaning up the right-hand column
By default, WordPress populates the right-hand column with “widgets”, little pieces of code and functionality, that fill it up with lists of recent posts, links, etc. You get rid of them by opening up Appearance/Widgets, dragging everything out, and dragging in the “Categories” widget to start: start off with this simple, clean structure.
What should your categories be? Think of your blog’s categories as the main branches of your mindmaps: the most general terms for the major collections of ideas or topics. And probably the best way to determine those categories is to make a mindmap.
Changing the subtitle, url, etc.
Blog title and sub-title
By clicking Settings/General you will be served a page with fields for your Blog Title and Tagline: change these and click “save changes”.
A more readable URL
By clicking Settings/Permalinks you will be served a page that allows you to choose the url for each blog post: change it from “Default” to “Day and Name” by clicking the appropriate radio button, or even simpler, as I do it, click “Custom” and paste: “/%postname%/”
Links and RSS
If you’d like to include a list of links in your right-hand column, click Links/Edit, unclick the default links WordPress has offered you to start and then “Add New” to begin inputting your own links.An even more flexible way to add links is to create a del.icio.us bookmarking site, copying its url and pasting the url into a Links widget in the right-hand column. If you’d like to add a feed to your Twitter or other blogs, drag the RSS widget into that column and paste your RSS url into it.
Additionally (this section is presently an outline) Muliple Authors. Create accounts for each author so that we know who speaking and users may sort by author. Schedule Posts. Blogs are alive with frequent, best daily posts. In your teams, create a posting schedule so that at least one of you is posting something each day and that at least one of the others is offering comments.
Blog Design
In this post I will talk about how your blog design — including the strategies you use to search for relevant blogs; how you describe, analyze, and evaluate them; your choice of blog theme, and the way you title and display categories and recent posts in your sidebar, and headers, sub-heads, bullet lists, quotations, and links — involves not only care in word choice, arrangement, style, but also sets up, influences, and basically controls the kind of writing that you do, the presentation that you make, as well as the use your users might make of it.
(See also Kathy Sierra, designer of the Head First series at O’Reilly, Creating Passionate Users. This post currently overlaps with my Multidimensional WordPress)
By Design We First Mean Structure
It is important that you choose a WordPress theme, a graphic design, that might please your readers. By blog design we mean first structure and then style, but most importantly, we mean the user’s experience: how they are led to understand your web site’s content, navigation, and how they might best take advantage of it.
That is, by design I am inviting you to think about your writing is more than ideas all dressed up, but how, in very practical terms, your visitor is led to consider the application, site, content, graphics, links, etc., etc., that bring bring your visitor to you, your work, and out beyond you into the professional world.
This user-oriented view is illustrated (as above) in the contrast between blogs that say “me-me-me” with those that say “you-you-you”: while presenting a professional yourself is important, we professionals are primarily concerned with contributing to our professions, disciplines, and society: our job is to help others do whatever they are trying to do.
Moreover, your building this real-world orientation into your design will create a constant reminder of who you are writing for and why.
Structure and the user’s path
If you drew up a list of the dozen websites that you find most useful, you’ll likely find Google at the top of it. How do we approach Google? We want simply to get beyond it. How is Google designed? Simply. Google is among the easiest-to-understand and easiest-to-use because it presents its business right up front: we type in what we are looking for and it delivers. Your websites, ideally, should be so simple.
Your favorite websites most likely offer a very clear path as your eye travels from the upper-left on down, across the title and most current post, to such significant navigational markers as lists of categories, tags, and previous posts: each with its own special way of helping us sort the pile of posts added one on top of the other into meaningful, browsable groups.
That is, you will want to wrap your head around the idea that your individual and group blogs are, for all practical purposes, hardly about you at all: they are about what good uses your visitors might make of them.
You might also think of this as a story, a narrative, a path through a village or house, where your visitors may see at a glance what your blog is about, how much is there, how it is organized, and what they might be able to do there.
So, for example, it is all very nice that you have created detailed mind maps of your topic, but your visitors are likely not interested in the details of your thought processes, but in what value you have added to what is already known.
Consider the top of Sophie’s site, above, where the title image indicates right away what her blog is about and where it is going: she is interested in current and forward-looking marketing research.
In the two tabs, we see right away that while we might click on her “About Me”, we will always be able to click “Home” and get back to where we started.
In this way, our blogs are best understood in somewhat theatrical terms: as an experience for viewers who are looking for meaning and may be guided to it in organized ways.
Drilling down
When we visit a site we want to get down to business and that means finding the posts that will matter to us. Websites are best designed when they bring you to those posts as quickly and efficiently as possible.
Where the reading of books is a problem of turning pages, the reading of blogs involved drilling down through stacks. Sophie’s site tells us right away that we are starting off at the top of a big pile of things. Our indications of depth are set up with the sign and signpost heading down, the silver “Y” at the top of the pole points like an arrow down. We are also invited so “search” through the pile, to scroll down posts dated from the present on down, and through “Categories”, the groups of posts.
Consider a professional design blog
A List Apart has designed its blog in a similar fashion. In this screenshot of the “Design” category, what they’ve named as a “topic”, we also start on the top left with a logo designed, in the letter “A” and the rest of the site title stacked underneath it, to convey the blog’s vertical, stacked design. On this category or “topic” page we see a brief explanation of the topic in a shaded box and then short summaries of each sub-section one on top of the other. The list of “topics” on the right also reinforces the stack design, with each topic arranged in alphabetical order.
Although your blogs will likely not have the hundreds of articles as here, you will likely soon have a dozen or more articles on the first page and a handful in each category, and the way to insure that they are first presented to offer an overview is the break each post up by hiding all but the first, introductory paragraph by using the “more” feature — which when editing is simple to implement by putting your cursor after the first paragraph and clicking the icon above showing the text broken in two and producing the “More …” mark on the lower right (which will insert the following code, visible in the HTML view: <!—more—>)
Navigation is about purposes: tell me “why” before you go off telling me “how”
We expect novels to present us with all sorts of mysteries and obscure metaphors, because when we read novels we want to be entertained at our leisure, but for us blogging means business, and that means stating our business directly right from the start.
In the illustrations above you see that the titles are short and to the point and that the first sentences are equally to the point. They provide the reader with an opportunity to decide right away if he or she wants to continue. Within seconds we know right away what these posts are about and our “costs” for this knowing are kept low.
But what about all the important details? Put them below. Web developer Mark Bernstein explains:
By understanding the uniquely important role of titles and opening paragraphs, you will likely pay more attention to identifying the high-level generalizations and organizing principles governing your blog post concept and design.
Choose a theme that supports this drilling down
Overall blog designs are called “themes”: a set of styles for type and image size, placement, and their relationships that are applied to the underlying structure of posts, headers, text, etc. Choose a theme that supports this business of efficient drilling down through the stack.
Consider how the “Simpla” theme in the center of the three themes illustrated above appears comparatively light, airy, and legible in contrast to the bold columns and bright color blocks of the designs to either side. Even at a reduced size I am sure you can see that the designs on either side obscure your blog’s fundamental structure of posts, each with a title and body, stacked on top of each other underneath a header.
The best way to learn this is to make your own comparison by switching from one theme to another, make screenshots, and setting them out on a table beside each other so you may consider them at a distance.
To do this, log on to your WordPress blog’s administrative panel, go to the Appearance/Themes section, and “activate” a number of styles. Themes you might try include the “Simpla” and “Solipsus” themes you see here as well as the those with fat headers that take up a lot of space, thin columns that don’t let you see too much, graphics which scream at you reader, and colors that burn the eyes like red pepper.
By choosing among the possibilities you will develop a “feel” for various themes and a sense of the “tone” or “mood” they add to your site’s basic structure. When writing, a clear feeling for your blog’s tone will help you find your voice.
Cleaning up the right-hand column
By default, WordPress populates the right-hand column with “widgets”, little pieces of code and functionality, that fill it up with lists of recent posts, links, etc. You get rid of them by opening up Appearance/Widgets, dragging everything out, and dragging in the “Categories” widget to start: start off with this simple, clean structure.
What should your categories be? Think of your blog’s categories as the main branches of your mindmaps: the most general terms for the major collections of ideas or topics. And probably the best way to determine those categories is to make a mindmap.
Changing the subtitle, url, etc.
Blog title and sub-title
By clicking Settings/General you will be served a page with fields for your Blog Title and Tagline: change these and click “save changes”.
A more readable URL
By clicking Settings/Permalinks you will be served a page that allows you to choose the url for each blog post: change it from “Default” to “Day and Name” by clicking the appropriate radio button, or even simpler, as I do it, click “Custom” and paste: “/%postname%/”
Links and RSS
If you’d like to include a list of links in your right-hand column, click Links/Edit, unclick the default links WordPress has offered you to start and then “Add New” to begin inputting your own links.An even more flexible way to add links is to create a del.icio.us bookmarking site, copying its url and pasting the url into a Links widget in the right-hand column. If you’d like to add a feed to your Twitter or other blogs, drag the RSS widget into that column and paste your RSS url into it.
Additionally (this section is presently an outline)
Muliple Authors. Create accounts for each author so that we know who speaking and users may sort by author.
Schedule Posts. Blogs are alive with frequent, best daily posts. In your teams, create a posting schedule so that at least one of you is posting something each day and that at least one of the others is offering comments.