Archive for the ‘The Web and Design’ Category

A Design Lesson From A Cute Women’s Magazine

Tuesday, May 26th, 2009

At lunch me and my coworkers often entertain ourselves by reading through various magazines. This week, Real Simple Magazine is sitting in the lunch room.

At the end of the magazine they had a perforated, detachable cheat sheet that summarized some of the content of the magazine. The sheet itself was perforated so you could separate it into even small, wallet sized sections. One section had a recipe, one had information about a bottle of wine spotlighted in the magazine, one had information about makeup, etc.

I was astounded at this.

This simple, detacheable card was the most useful part of the magazine. This card allows anyone to take the information with them, and easily try out or implement the information in the magazine.

Brilliant design.

This got me to think about how, with design, you make something more useable and useful. I have a few things I want to implement along these lines, such as popout articles, instructions, references and the like. There is a lot more, but I think the overall key to this is to think about how the end user of your product, site, or thingy will actually use what you are providing them.

Design To Your Site’s Purpose

Friday, May 15th, 2009

The best web sites accomplish just the right amount of stuff.

Bad web sites often try to do too much, or too little, and become hard to use.

What does your website attempt to do?

I thought about this while reading this article on design at User Interface Engineering. The summary of the article is that good design is invisible. We don’t notice when something works well, we only notice when something works poorly.

The example the article uses is Netflix as an example. The design is so good that you don’t even notice the design, things just work well, and it is easy to use.

Netflix is able to have such a good design because it does something simple, and specific. It allows the user to rent movies.

Netflix users know that Netflix actually does a whole lot more than just let you rent movies. You can watch movies on your computer, review movies, network with friends, get movie recommendations, etc. All of these features are hidden to the new user, and slowly get revealed. The design does not overwhelm the user with all of these features at once. If they did, the site probably would not be as successful.

The best, easiest to use websites are clear about their purpose, and are designed to promote that purpose. Extra features are revealed slowly.

Websites that display everything available on the site become hard to use and inaccessible. I have been to many websites that I know contain plenty of information I am interested in, but the design is so poor, that it is hard to navigate, and hard to find. I am not sure what feature of the site contains the information I want.

I give up on these types of sites pretty quickly now, because I don’t have time to figure out how the convoluted organization works.

When I design a website, I determine what the primary purpose of the site is, and design the site to promote that function. Other functions may be available, and I incorporate them into the design in a way so that they are slowly revealed to the user.

Knowing the primary purpose of your site, designing the site to promote that purpose, and making the site easy to use will result in better websites.

WordPress: How to scrape the Tags from Posts of a certain Category

Friday, May 8th, 2009

One of the features of WordPress is that it has a 2-D taxonomy built into it (taxonomy refers to the method of categorizing information).

The built in taxonomy consists of Categories and Tags.

For this site, which I am working on redesigning, I want to separate large portions of this site by category. For instance, I want a portion of the site to be information and articles focusing on Web Design and Development. I want another to be my personal blog. I may add others down the road, like a section displaying my art, and so on.

My plan was to distinguish these areas by assigning them different categories within WordPress.

This would only leave me to use Tags to further categorize content within these major areas.

In this way, I am really using Tags like Categories. Sure, this leaves me without the functionality of tags, but really, I don’t care.

So here’s the problem:

WordPress doesn’t really treat Tags and Categories as a true 2-Dimensional taxonomy system. The way WordPress functions, it is more like a 1-Dimensional system with two segments, and slightly different functions are built in to each.

I wanted to be able to pull a list of all the tags assigned to posts of a certain category, but this proved hard to do, or hard to find out how to do, with WordPress’s current functions and documentation.

I found a piece of code that did something similar as a starting point, and modified it to make it do what I needed it to do.

This code determines which posts are in a specified category or categories, determines the id numbers of the tags associated with each post, throws out duplicate tag ids, then lists all of the tags with those id numbers in an unordered list.

Here’s the code:


EDIT: I moved the unordered list html tags to within the IF statement, so that you don’t end up with an empty unordered list.

Shortcomings that I know of: The list is not ordered by anything except internal WordPress database IDs, so it appears to be in random order. Also, I don’t know how this works with child categories.

If you know of a better way to do this, let me know!

WordPress Structure

Friday, March 13th, 2009

In preparation for this weekend’s incubation, I created this outline of how WordPress is structured. WordPress is Stirfry’s CMS of choice because it is simple, flexible, and highly customizeable.

I, and many other Stirfryers, are firm believers that form and content are closely related. Understanding how WordPress works, and how a WordPress site can be structured will help to create the vision for your site. What content you provide, and how you provide it, is intrinsically related to the structure and organization of the site.

With that in mind, this may help you to develop your own website.

  • WordPress is functionally based on PHP and MySQL.  The presentation is based on HTML and CSS.
    • MySQL – This is a database that stores all of the information you enter into WordPress.  The title, content, and data (author, time, categories, etc) for each post or page are all stored in the database
    • PHP – PHP is a web programming language that can do stuff with the data in the database, and use variables, operators, control structures, and functions.  The output of PHP is HTML, which your browser then reads.
    • HTML – basic internet language.  The server throws a bunch of HTML at your browser, your browser displays a web page.
    • CSS – CSS organizes and designs the HTML.  Color, size, location, images, etc, are all determined by the CSS

Basic WordPress, or WordPress straight out of the box:

  • Two kinds of content: POSTS and PAGES
    • POSTS are blocks of content that are then displayed alone or as groups on webpages
    • PAGES are content that is always on a certain webpage.  They are “static” (though they are still dynamic in the web programming sense of the word)
  • Posts are shown in reverse chronological order on the homepage.  You can view a single post, or you can click on various archives of posts to see only posts of that type, such as by date, a certain category, or a certain tag.
  • WordPress often creates a list of the pages you create.
    The header, footer, and sidebar(s) remain the same on every webpage of your site.  Only the content area changes.
  • Themes change how your site looks.
  • Conceptually, this format creates a website where the most recent post is the most important, and the older a piece of content is, the less important it becomes.
    • This is similar to TV, radio, magazines, newspapers, and serialized content

Building Blocks of WordPress

  • There are four default regions on a WordPress page: Header, Footer, Sidebar(s), and content.  You can add regions other than these.
  • The Loop is a basic engine of WordPress.  It collects posts from the database and displays them.  The front page is a loop of all your posts.  An archive of a category, date, tag, etc, is a Loop of posts of just that type.
  • Templates:
    • A template is a PHP file that describes what information is contained in a certain page or element
    • Every webpage has a template. index.php is the template for the main page, page.php is the template for your pages, archive.php is the template for looking at a category or date archive, etc.
    • Many regions have a template.  header.php, sidebar.php, footer.php are templates for the content in those regions of the webpages, comments.php describes content of that region, etc. The individual posts do NOT have a template to decribe their content. This is done in the Loop.
    • A theme is just a collection of templates and a CSS file.
    • You can create custom templates to extend WordPress beyond it’s default content presentation
  • Metadata:
    • Content has metadata attached, such as author, time, and very importantly, category and tag.  You can use metadata to organize and display content.
    • Categories and Tags allow for a 2-D organization of content (which can be limiting)
    • Categories can have custom templates, not sure about tags.

Customizing WordPress

  • It is easy to customize the supplied building blocks
  • It is harder to add new building blocks to Worpress
  • Plugins can add new building blocks
  • Most (all?) changes are done by modifying the theme templates and CSS file.