Archive for web design

Project Overview

My project ‘WordPress Theme’ is well underway, so I thought it was time for an overview of were I’m at and what’s to come.

My theme was meant solely for this blog at the beginning of the project. But as I started to look into other collaborative blogs I found that other collaborative blogs share the same problems as our blog. – No real overview of the latest posts and long columns of categories.

Often the volume of postings on these blogs makes it difficult to quickly get an overview of the latest entries, – and even harder to find the latest from your favourite author.

My proposal is now to create a theme aimed at collaborative blogs. The front page will be very different from the independent blog posts as it will serve as an overview page. It will show extracts from the latest posts in two columns making it easier to see without having to scroll as much. The categories are placed horizontally at the top providing quick access to the navigation.

Every author will have the possibility to upload a photo that will be shown next to their posts. This will give visitors a quick visual reference when scanning the page for posts from a specific author. Underneath the posts on the front page will be a horizontal sidebar. The widgets that normally go in the sidebar have been moved underneath the main content; I have changed the layout to be horizontal instead of the normal vertical sidebar.

The single pages are more like normal blog post pages. They will have a two column layout and the comments beneath the main content. I have done this mainly because people are familiar with this style which will make usability easier. Secondly there won’t be as much content to deal with on individual pages. Its main purpose is to isolate the single post and let people comment on it.

Colour Scheme

The colour scheme of the website is a chapter on its own. I really struggled to come up with a decent colour scheme. I even at one point thought of providing different colour schemes and let the user select which one to use. I knew from the beginning that I wanted black text on white background no matter what. As this is theme it has to fit many different web sites and a lot of different content. A white background ensures that most images and content will stand out on a bright background that gives good contrast.

The colour scheme went from brownish to green before I finally settled for a variation in blue. I will spare you all of my hair tearing thoughts of the process and just show the different mocks I came up with.

1mockup 2green-mockup1 3green-mockup-single 4blue-mockup 5blue-mockup-single

/Kasper – on Twitter and Delicious

Proposal: Portfolio for Local Artist, Jonathan Kelham

I plan to work towards a portfolio site for a local artist named Jonathan Kelham who is a third year Fine Art student in Birmingham. The client needs a website to display a selection of his work including images, videos, a biography, contact page and blog. The blog will be the main part of the project as I will be building it from scratch using Ruby on Rails.

The blog will act like a sketchbook as Jonathan will be able to upload and write about his work in progress which will add more of a dynamic feel to the website. In general, when a website changes frequently, users will return to it more often which of course can only be a good thing. As an artist, he needs exposure in order to make a name for himself within the local art community. For him to have a digital presence would be of great benefit to him as he would be able to refer people to his website while networking amongst Birmingham’s creatives.

The blog will also have an administration feature where he will be able to upload his own material and manage the content of his blog in a simple but functional manner.

The gallery section of the website will be a fairly simple setup, perhaps with some enhanced viewing techniques that give the section more of a tangible feel. Specifically I am speaking about gallery effects; smooth transitions and pleasing enlargements. The gallery will most likely be built again using Ruby on Rails. Works will be organised by medium.

The look and feel of the website will be quite minimal, but reflective of Jonathan’s work which features a fair amount of white space and natural colour. We have discussed giving the website the feel of paper media without being excessive in use of texture and shadow. Subtlety and understatement is key.

 I have chosen to use Ruby on Rails mainly because I have been won over by the testimonials from designers and developers who have migrated from the use of PHP in favour of this relatively new framework. Emphasis has been on speed, consistency, manageability and intelligible coding methods.

Use CSS to Style Columns

So why would you want to style your list items as columns? Well, good question! Let me just give you a few examples: If you like me are designing a layout for a WordPress blog that has a LOT of categories, you might not want that list to go way off your page. Other blogs might have the same problem with their blogroll, your blogroll grow over time and at some point it will get longer than you might like and split it up in two columns.

But the same technique that is used in this example can also be applied to navigation. You can use this method to create a horizontal navigation bar, and if you have many links, you can have the links align nicely underneath each other.

OK, you probably want to get going, it’s very simple and easy. Actually we are only really using a few basic CSS properties and I will go over them in detail in this article.

Just an aside here before you start coding your CSS; a good practice before you start coding is to reset all the known default browser style. These differ a lot from IE6/7 to Firefox to Opera, Safari etc. Eric Meyer has taken the time to develop a stylesheet that will do just that for you, just grab a copy of the file, and use the ‘@import’ command at the begging of your CSS stylesheet to import the file.

Let’s start out with our markup then, a simple list you can get here. It’s just a simple list of the categories on this site.

  1. First thing we want to do is set a width of our container and centre it. You don’t have to if you are doing this in your sidebar, just set the width.
  2. #categories {
    width: 980px;
    margin: 10px auto 0;
    }

  3. Next thing is to set the list-item elements to actually make the colums. We float each single list item that will make every category ‘jump’ up to the right of its preceder. We will also give it a width of 136px (this is essentially the width of the coloumn), and push the columns a bit apart by giving them a right matgin of 3px.
  4. #categories li {
    float: left;
    width: 136px;
    margin-right: 3px;
    }

Well that’s basically it, we now have a set of columns, but to make them visually appear better we will do some extra styling.

  1. Give the line a height of 1.7em
  2. #categories ul {
    line-height: 1.7em;
    padding:0 0 0 5px;
    }

  3. Make the font a bit smaller, capitalize the words and make it bold.
  4. #categories li {
    font-size:11px;
    text-transform: capitalize;
    font-weight: bold;
    }

  5. Finally style the links and give them a hover style.
  6. #categories li a {
    color: #000;
    text-decoration: none;
    }
    #categories li a:hover {
    color: #999;
    text-decoration: none;
    }

You can suit the final styling to your individual needs; you can also make the columns wider or narrower if that’s what you want. If you are making it in a sidebar you will probably only want to have 2 columns, if you are styling a navigation bar, you might want to have more.

If you are interested you can download the full stylesheet and compare it to your own.

/Kasper – on Twitter and Delicious

Wireframe to Mockup to XHTML

Up until now I have spent a lot of time getting to grips with the basic in and outs of WordPress themes. I understand how important it is that your theme is widget ready and that it is flexible and easy to customize.

Having finished my wireframe and being pretty satisfied with my initial mockups, I can start moving on to the actual theme creation. I have had some difficulties coming up with a colour scheme that I liked, it’s gone from brown to green and now it’s blue. I have come up with two complete mocks; one for the front page and one for the individual post/archive/search pages.

The single pages are different because I need to make room for the comments section. People are used to comments at the bottom of every article, so I will keep them there.

I will have to shrink the main content area to make room for a sidebar on the right. This will hold the sidebar information related to the post being viewed. I intend to ship the theme with sidebar items such as related posts, most recent post and comments etc. These can of course be changed or swapped by using widgets.

Preparing the Markup

Now it’s time to get into the actual coding of the theme. The main challenge at the moment is getting the bottom section of the front page and the single pages styled. The hard part is that the XHTMl needs to be uniform for all the items. I have to style every item the same no matter the content. In other words, the styling needs to be strong enough to hold most of the generic content you find in a WordPress sidebar.

Automattic, owner of WordPress, recommends using a simple <ul><li>link</li></ul>

markup to make it compatible with widgets. I won’t be able to comply with that due to the horizontal layout of the theme. I will make use of one of their alternative versions which will include the use of the <div> tag and some additional php coding in the optional functions.php template file.

/Kasper – on Twitter and Delicious

update

After a frustrating week of configuring my macbook with parallels, I can now begin production, using the software needed for design of my draft mock-up. I have spent recent time since last weeks class understanding PHP, however in need of further secondary resources. Therefore, I shall shall visit the university library after todays class, in search for some relevant and appropriate literature.

In preparation for next weeks class, I shall begin development on my pitch, completing a rough mock-up to co-inside with my proposal, thus meeting the requirements of the directed study. I shall look into the software of XAMPP, downloading a package from the following recommended website; http://www.keitr.com

As quoted:

“Officially, XAMPP’s designers intended it for use only as a development tool, to allow website designers and programmers to test their work on their own computers without any access to the Internet. To make this as easy as possible, many important security features are disabled by default. In practice, however, XAMPP is sometimes used to actually serve web pages on the world wide web.  A special tool is provided to password-protect the most important parts of the package. XAMPP also provides support for creating and manipulating databases in MYSQL and SQLite among others”

This program is released under a public license and acts as a free, easy-to-use web server. Fortunately, XAMPP is available for Mac OS X and is ideal for the development of work I shall be starting. I will post a blog update on my progress during next week!

Peace

http://www.jamesarctic.blogspot.com

http://www.myspace.com/arcticuk

Talking to WP Theme Developer Justin Tadlock

As I said in one of my first posts, I really wanted to get in touch with Justin before getting too much into WP Themes. I have used some of Justin’s articles and tutorials before, especially his series on using custom fields are very useful for learning about the power of this feature. He kindly answered some of my questions and provided some really helpful links for further exploration.

What is the main advice you would give to someone who is creating their first Theme?

My main advice about creating your first theme is to just get the basics down. Learn from the Default WP theme. It’s a good example of a very basic theme. Don’t try to get too fancy with all kinds of neat features.
Know the Codex. That’s the single best thing you could do:
If nothing else, you should know how to find things quickly there.

If you’re looking to do this more long term and would like to build up a presence within the community, then you need to have a support system set up. Also, make sure you put your theme on WeblogToolsCollection.com.

Are there any “Rules” you have to follow?

The only rules you should try to strictly follow are these (especially the Plugin API stuff)

How do you publish your themes? Purely on your own site or do you make them available on WordPress.org as well.

I’ve never put any themes on WP.org because some of mine are too complex for the basic demo they have set up. Magazine-type themes definitely won’t look good there because, most of the time, options must be set before using the theme. I do plan on adding my next theme there though.

What are your thoughts on Premium Themes vs. Free Themes?

Premium vs Free? Mostly, I think you should do whatever you want, but I don’t like to see users getting ripped off because they bought a crappy theme. More thoughts on this:

http://justintadlock.com/archives/2008/05/29/screw-the-premium-theme-market

http://themeshaper.com/blog/the-ethics-of-premium-wordpress-themes/#comment-5101

Anything you want to add?

I also had a forum member ask about learning to develop with WP. I have a pretty lengthy answer with lots of links that you should bookmark.

If anyone is more interested in the stuff Justin does, then follow his tweets and his bookmarks and make sure you add his blog’s RSS feed to your reader.

/Kasper – on Twitter and Delicious

Understanding Widgets – My Next Step

I have never really thought of what widgets where, even though I have used them on many occasions. I have used WordPress to create many websites, and customized themes in all kinds of areas. Normally though, I just create my own template files within the WordPress theme folder and just hard code all the “widgets” like categories and blogroll into the template files. Unfortunately it’s not that easy when you are dealing with a complete WordPress Theme.

If you want to make a theme popular there are a few things you have to keep in mind. WPDesigner has a nice list of stuff that can help make a theme more popular. Number three on the list is:

Is it generic? Your free theme will not be used by one client. It’ll be used by thousands of clients. It’s very important to keep all features generic. Stay away from hard-coding anything and stay away from too many non-customizable graphics.

Generic is probably the single most restraining word when designing themes, they have to be fluid and able to accept the most ridiculous content. You never know if someone wants to call their blog: http://llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk (Yes that is actually a working URL, and a village in North Wales). Returning to Widgets, you have no control over what widgets are going to be used with your theme, there a many widgets available to choose from, but the most common are: categories, archives, blogrolls etc. To quote one more of the important popular theme steps:

Is it widget-ready? The widget plugin now comes with WordPress so this is an obvious one. There’s no more reasons to not widgetize your theme.

Automattic has some great info about making your theme widget ready which will come in useful. Making a theme ready for widgets is all about wrapping code in CSS classes and id’s and then have some kind of uniform styling for them. What I’m most concerned about is that widgets can contain so many elements from text to images, and that might make the horizontal division hard. It will at least be hard to make it look good.

/Kasper – on Twitter and Delicious

Where am I now?

During todays class, I presented my recent findings on PHP, discussing what it’s all about and why it may be useful for my website. I discussed what attracted me to its purpose and the possibilities of embedment into HTML, thus providing the initial framework for my website. After my discussion, I was given recommended feedback by the group, one idea being to perhaps try and develop the RSS feeds I intend to use around PHP scripting. This is something I shall definitely consider when beginning the next stages of production.

Previous skills of mine consit of basic HTML, CSS, tables and some minor flash work. Considering these skills, I intend to further my knowledge on new areas such as PHP, in-order to benefit any future design I carry out. My plans now, are to practise PHP after a coherent understanding of how and why it will benefit my website. I shall do this at home through the use of draft templates designed through Dreamweaver, Adobe Photoshop and Fireworks. By testing the PHP in conjunction with the RSS feeds I wish to incorporate, I gain an advantage as to any problems that may occur during later production stages.

I have also been recommended a book by my tutor, useful in explaining everything I need to know on PHP. I am to begin my drafts throughout the run-up to next class, after conducting further background research on websites such as:

http://www.php.net

http://www.softwareprojects.org/php-what-is-01.htm

http://www.utexas.edu/learn/php/index.shtml

An Introduction to…

PHP!

PHP, (originally standing for Personal Home Page Tools), stands for PHP: Hypertext Pre-processor.

It is a computer scripting language, originally designed for producing web pages. Having evolved to include a command line interface capability, it can be used in standalone graphic applications (a type of user interface). Created by Rasmus Lerdof in 1995, it was released under the PHP License, where the Free Software Foundation considered it as a free and acceptable piece of software. The Free Software Foundation is a non-profit corporation, supporting the free software movement in prompting the universal freedom to distribute and modify computer software without restriction.

PHP is a widely used general purpose scripting language, especially suited for web development and can also be embedded into HTML, (the predominant language I have constructed my previous WebPages with in the past).

It generally runs on a server, using a PHP input code with an output consisting of viable web pages that may be viewable worldwide. It can be deployed on most web servers and on almost every operating system and platform, free of charge.

Being fairly new to the concept of PHP, I was interested in understanding how it may well be beneficial for use with the design of my website on music news and culture. As I have a fairly precise knowledge on the use of HTML, I wondered if it may be possible to embed PHP into a regular HTML document.

After some reading around on the Internet, I discovered a very helpful source that explains how to do so:

http://www.onlamp.com/pub/a/php/2001/05/03/php_foundations.html

Considering my website will be constructed through the use of HTML and the incorporation of RSS feeds, it may well be ideal in using PHP to help enhance the final outcome and design of my site.

Below is an example of PHP embedment in HTML:

An introductory example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example</title>
</head>
<body>

<?php
echo "Hi, I'm a PHP script!";
?>

</body>
</html>

(Taken from: http://php.net/manual/en/introduction.php)

I discovered how PHP is mainly focused on server-side scripting, enabling the possibility to collect form data, generate dynamic page content, or send and receive cookies. But PHP can do much more.

There are three main areas where PHP scripts are used.

  • Server-side scripting. This is the most traditional and main target field for PHP. The PHP parser (CGI or server module), a web server and a web browser allow this to work.
  • Command line scripting. It is possible to make a PHP script to run it without any server or browser. You only need the PHP parser to use it this way.
  • Writing desktop applications, (although not recommended as I am not too familiar with PHP as yet.

Hope this brief introduction to PHP has been informative! I shall complete further research at home, thus ensuring I gain a more coherent understanding on PHP, deciding whether it will be useful in using in conjuction with HTML and the design of my website.

An Introduction to Wireframes

Initially this post should have been titled: “An Introduction to WordPress Themes”, but I felt like I had covered the basics of WP themes in my earlier post. So this is going to be an introduction to Wireframes.

Wireframes are basically the blue print of a website; it doesn’t contain any colour or design features. It is very handy to give yourself and a client an idea of how the final website is going to be. By agreeing on a layout early on in the process, you won’t have to deal with unhappy clients and unlimited revisions later on. Wireframes also allows you to give priority to the actual content, and where to place things like logo and navigation on the page without being distracted by colours.

Wireframes can be as simple as you want them, some people draw them up on paper and leave it there. Other people like me, do them in Photoshop or Fireworks. There are a few examples on flickr that can give you an idea of what it is. The way I do it is to make a list on paper where I write down every important item that should be on the website. Then I Take a mental note of what is the most important, this is mostly the main content, navigation etc. I make some notes about how I would like the layout to be, I usually take a tour around the web to find inspiration. I like to sketch it up on paper before making the final wireframe in Photoshop. I usually just draw very simple shapes and write the dimensions down. (Click to see large version.)

What I specifically did, was to look at the Web and New Media Blog and take a note of the main points. I counted the categories which had the most posts, I did this to figure out what the overall theme for the site was, although I did know this already… Always good to be sure 😉 – I then wanted to find some inspiration, which is why I started looking for other “collaborative blogs” about the web and technology in general. Some of which I liked were Lifehacker, TechCrunch and ReadWriteWeb.

The main challenge was to find a way to make the categories easy to navigate without having to scroll down to the bottom of the page. The nature of collaborative blogs is that they cover a wide range of topics and visitors should be able to find what they are looking for as easy as possible. Which is why I have cut the posts short and provided a ‘read more’ link, to quickly navigate the latest entries?

The other thing with WP Themes is that your creativity is somewhat limited. Because it is a theme it has to be generic in any sense. This means that you can’t just have an image instead of the masthead, it has to contain text as it has to fit nearly every possible blog title.The same is true for the widgets at the bottom, you have to make it as generic as possible, because you have no idea of what kind of content is going to be used.

The final Wireframe:
I’m not entirely happy with it yet, and might make some changes as I go along. I’m especially not happy with the bottom part, but I don’t know what to do about it yet. (Click to see the large version.)

/Kasper – on Twitter and Delicious

« Previous entries