Website Design Blog » Web Design

Archive for the ‘Web Design’ Category

h1 Tags

October 5th, 2007

Matthew

So, is there the rule of one when it comes to using H1 in your content or doesn’t it matter how often you use it on a page?

I tend to use H1 for the main heading on the page, which typically equates to the page title. I wouldn’t use it for subsequent headings within the content of that page.

However, although the W3C is rather vague on this issue it does say that

Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.

Clearly this implies that you could use H1 more than once in an article. Unfortunately, I don’t really follow how you would implement this in a way that makes sense semantically — perhaps someone can advise me?

Interestingly, in the above quote the W3C seems to be impartial regarding the practice of skipping heading levels. I always thought it was a no-no. I guess it’s up to the individual.

Of Sidebars and H1s

When it comes to sidebars — for example, the lists of links in my right-hand sidebar — does it matter what level heading you start these with?

If you use an lower-level heading — say, an H2 — does it imply from a structural standpoint that this content is related to and subordinate to your main content?

Andy Budd seems to think so and I’m inclined to agree with him from a semantic standpoint. This is despite the fact that I haven’t followed this through in practice as my sidebar link lists start with H2s.

On the other hand, from an SEO perspective, do you want to use H1 for headings that are essentially unimportant.

Taking the SEO view, I should really be using H1 more in my content in order to apply more importance to certain headings (which I could then stuff with keywords optimize for search).

Of course, this raises the question of how many H1s you could have on a page before the Googlebot starts to think “hang on a minute…”?

H1 and Site Names

Many people (myself included for this site) use H1 for their site name. I’m not sure there’s anything wrong with that, but I would certainly disagree with the notion that this means you can’t use H1 in your content thereafter.

Using H1 solely for your site name seems like a waste of this important tag, both from a structural standpoint and an SEO one.

CSS Backgrounds

September 30th, 2007

Matthew

For many years, web sites all over the world generously offered free tiled background patterns to budding young web designers as a way of “enhancing” their web pages. Derided by many designers in the field as tacky, these backgrounds were generally used sparingly, if at all, by professional designers, especially where download speed was of major concern—and in those heady days of 14.4kbps modems, download speed was always of major concern.

How times have changed in the past ten or so years! With the advent of CSS and the increased proliferation of broadband, backgrounds have become an integral part of web design and development. Backgrounds are no longer simple repeated patterns or, in more abstract cases, extremely large photographs. Nowadays, they form the basis of many a well-designed site. From CSS rollovers and “Faux Column” layouts, to form styling and fluid layouts, backgrounds have become an integral part of the developer’s toolkit.

In this article, we’ll first of all deal with the theory behind the, um, background, in which we’ll break down the properties of backgrounds. Armed with this theory, we’ll proceed to walk through a case study together, in order to see some of the techniques that are utilized by developers faced with a challenging and daunting site design. Finally, we’ll predict the advent of CSS 3, speculating as to what may be in store for designers in the near future.

Background Basics

Before we begin our case study, we’ll need to be equipped with an understanding of the basics of creating backgrounds. For the sake of keeping this instruction brief and concise, let’s just look at the shorthand notation of the background property to start with. It looks like this:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

That’s your background, right there. But to the uninitiated, this code probably doesn’t make a whole lot of sense. Let’s break it down into its individual properties—backgroundcolor, background-image, background-repeat, background-attachment, and backgroundposition.

Setting background-color
Let’s take a look at the specification of the background-color property:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

This property can take as its value a hexadecimal number, an RGB color name value, for example, rgb(255,0,0) for red, a name value, or a transparent keyword.

Hexadecimal values use the fewest characters, and are the most common method of defining colors in CSS. So, for simplicity, we’ll use hexadecimal values.

Setting background-image
The background-image property is also very straightforward:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

This property gives us most of our design flexibility. The location of the image should be specified relative to your CSS file. For example, if you keep your images in a subdirectory of the folder containing your CSS files, and this subdirectory is called images, you’d need to edit the location of the image like so:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

Simple!

Setting background-repeat
Here’s the background-repeat property:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

The valid values for the background-repeat property are:

no-repeat
As its name suggests, the no-repeat value causes the background-image to be rendered once, at the point determined by the background-position property.
repeat-x
repeat-x forces the background image to repeat horizontally, left-to-right.
repeat-y
Setting background-repeat to repeat-y results in the image being repeated along the Y axis, starting at the top of the element.
repeat
The default value for background-repeat, repeat causes the background-image to be tiled across the entire area of the element, starting from the top left.

Setting background-attachment
Let’s investigate the background-attachment property:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

The only valid values for this property are:

fixed
scroll, the default value

The background-attachment property defines whether the background-position is calculated relative to the page content (scroll), or relative to the browser viewport (fixed). The most notable difference between these values is that background-attachment: fixed; will cause the background-image to remain stationary if the user scrolls the page.

For the purposes of this article, we’ll ignore the background-attachment property, and it’ll therefore assume the default value. We’ll gloss over the background-attachment property, due to the lack of support for the fixed value in Internet Explorer 6, which still holds a large share of the browser market despite the release of IE 7. IE 6 only supports backgroundattachment: fixed; on the body element.

Setting background-position
Here’s the background-position property:

body {
background: #1299AB url(images/myBackground.gif) no-repeat
fixed 10% 50px;
}

The background-position property defines the starting X and Y coordinates of the background image. Keywords (left/right/center/top/bottom), relative (percentage) values, or absolute values (px/em/pt/mm) are valid options for setting the background-position.

The horizontal keywords that determine the X position of the background image are:

left, the default
center
right

The vertical keywords which determine the Y position are:

top, the default
center
bottom

web design galleries

September 25th, 2007

Matthew

Web Design Galleries

2012 Olympic Games Logo

September 25th, 2007

Matthew

The controversial new logo for the 2012 London Olympic Games has been released costing a massive £450,000.

This logo proves what my wife has been saying for the past few months ” the 80’s” are back. But in 2012??

New Trick

September 25th, 2007

Matthew

Magazine style drop caps available in css. I am not sure of any clients I currently have that would benefit from this right now. But I am very excited about this.

Wordpress Plugins

September 18th, 2007

Matthew

One thing that I look for in any WordPress plugin is the ability to simply put the plugin in the plugins directory and enable it — without needing to fiddle with inserting code into my themes or any of the other WordPress files. I like the fact that I can switch themes easily whenever I feel like it, without mucking with any files on the server at all.

For the most part, the plugins I recommend don’t require much more than downloading the plugin, uncompressing it into wp-content/plugins in your WordPress directory, and enabling it in the Plugin Management console. I’ve already touched on the database backup and Akismet plugins in the WordPress 2.0 review, so I won’t go over those again.

Admin Drop Down Menu

The WordPress admin menu is a two-tiered affair that requires you to select the top-level menu, wait for the main page to load, and then select the desired function and wait for that page to load. For instance, say you want to manage users. If you start at the WordPress Dashboard, you need to navigate to the Users page and then to the Authors & Users page, instead of being able to go to the Authors & Users page directly from the Dashboard.

The Admin Drop Down Menu plugin makes the header menu much easier to use by providing a two-level drop-down menu bar. Instead of having to navigate to the top-level menu and then to the sub-menu, you can simply move your mouse over the top-level menu and then to the sub-menu function you wish to use.

I’ve installed this plugin on my blogs and found that it works very well with stock WordPress menus. It also generally works well with menus that are enabled by third-party plugins, although it doesn’t quite work fully with the WP-DBManager plugin. Overall, it’s proved to be pretty useful, and it saves me a few clicks each day when I manage my blogs.

Semiologic CMS

Semiologic CMS is a set of plugins and themes for WordPress that work together to turn a WordPress blog into more of a content management system. I run Semiologic CMS on Dissociated Press because I like the Semiologic three-column theme and several of the plugins that come with Semiologic. Each plugin is activated separately, so if you want to use a couple of the plugins, you can do so without running the plugins you don’t want.

Semiologic comes with more than 10 plugins, but I’m only going to highlight the ones that I’ve found most useful. I recommend grabbing the Semiologic bundle and taking it for a spin to see what it offers.

The opt-in, front-page plugin that comes with Semiologic allows you to restrict which posts are visible on the front page by category. Once you enable the plugin, you create a category called "Blog" so that only posts with that category are shown on the front page. Note that you can change the name of the category after creating it, so if "Blog" is too generic, you can change it to whatever you like.

Instead of limiting the front page to a specific category, you may want to display a static page instead. The static front page plugin displays a WordPress page with the slug of "home" on your front page, rather than the most recent posts.

Semiologic also comes with several "tile" plugins to display archives, categories, links, and so forth. These are not displayed by default — Semiologic gives a lot of control over what content is displayed on your blog.

One tile plugin that I particularly like is the subscribe me plugin, which displays a list of feed subscription services, such as My Yahoo!, Bloglines, and the Google homepage or Google Reader, and lets readers click on any of the links to read your blog using that RSS service. You can customize the plugin to display only the services you want, so if you want to disable the Yahoo! link, for example, it’s easy to do.

Admin menu for WordPress

The admin menu plugin is part of the Semiologic bundle, but I want to mention it separately because it’s so useful and because you don’t have to use it in conjunction with the rest of the Semiologic CMS stuff. It provides a small menu at the top of each page of your blog. The menu is a small strip, about 20 pixels high, that lets you navigate directly to various admin pages — such as the Dashboard, Options, or Write Post pages.

The admin menu is a simple plugin, but extremely useful. The only downside is that it doesn’t play well with all WordPress themes. It works really well with the themes included in the Semiologic bundle, but not so well with the Green Marinée theme that I use on Zonkerama.

Adhesive

One thing that continually surprises me about WordPress is that it doesn’t include a way to make a post "sticky" by default. Luckily, the Adhesive plugin makes it possible to create sticky posts. Once you put the plugin in your plugins directory and activate it, each post displays a checkbox for "sticky" in the Post Status box.

By default, a post that’s made sticky shows "Important Message!" in the date field, rather than the date of the post. However, you can configure Adhesive to display a different message or the actual date of the post.

This plugin is particularly useful if you’re using WordPress for a professional blog or business and you want to make sure that readers see a specific post. Want to let your readers know that your blog will be down a few hours next week? Just create a regular post and make it sticky.

Though not essential, the only thing missing from this plugin is the ability to change the sticky status on a specific date.

WP-Cron

The WP-Cron plugin allows you to schedule certain functions in the WordPress admin panel. It comes with several helper plugins that depend on the main plugin. For example, the WP-Cron Moderation plugin sends an email every hour about comments that are awaiting moderation.

The function that I’m most interested in, however, is the ability to schedule backups. Once you enable the WP-Cron plugin, you can schedule daily backups of your WordPress database to be sent to an email address. It’s possible to set up a cron job to do a MySQL dump of your WordPress database, but this is far, far easier.

Assuming your database isn’t too large when compressed, this can be a very handy way to ensure that you have daily backups. Simply set it and forget about it — the backups will execute on a daily basis without any effort on your part.

WP-DBManager

Speaking of the WordPress database, the useful WP-DBManager plugin allows you to create backups, restore from a backup, optimize the database, run SQL queries against the WP database, and manage saved backups.

Yes, WordPress comes with a plugin that allows you to make backups, but WP-DBManager also allows you to restore directly from the backup and delete old backups. It basically provides a one-stop shop for fiddling with your database from the WP2 admin menu.

It also provides information on the tables in your WP database, so you can see exactly how many records are in each table and how large each table is. I did a few test restores with the plugin, and it worked just fine. If you’re using the Admin Drop Down Menu, you’ll need to disable it to get to all of WP-DBManager’s menu options. That’s a bit of an inconvenience, but not too bad.

Jerome’s Keywords Plugin

By default, WordPress posts are associated with one or more categories. However, a lot of folks want to be able to associate tags with their posts as well. For example, I have a Linux category on Dissociated Press, but I might want to tag a post with Ubuntu or Debian to further specify what it’s about. If categories alone just don’t do it for you, several WordPress plugins give you the ability to add tags (in one form or another) to your blog.

After testing several of the tag-enabling plugins, I settled on Jerome’s Keywords Plugin because it offers several useful tag-related features. In its simplest usage, it adds a field to the post-editing page for tags that relate to each post. To show the tags related to each post, you need to add some code to your templates to actually display the tags and links, but that’s a relatively simple operation. Once you’ve added them, readers click on a link for any tag that interests them and see all posts that are tagged with a specific keyword.

Another nifty use of Jerome’s Keyword Plugin is that you can create a keyword cosmos, which displays some or all of your tags and visually indicates which ones are used more often. For example, if you have 50 tags, and you’ve used tags like Debian or Ubuntu more often than GPL or FreeBSD, the Debian and Ubuntu tags will be displayed in a larger font to indicate they are associated with more posts than other tags.

Search and replace

The search and replace plugin can come in handy if you need to make changes throughout multiple posts on your blog. This plugin searches through posts, titles, excerpts, and comments to find a text string and replace it with whatever you like. You can limit it as well — for example, say you want to replace a string only in post titles but not in comments. It is case-sensitive, by the way, so searching for foo won’t turn up Foo or FOO.

This plugin is easy to use, but use it with caution — it doesn’t include the ability to undo a change, and it doesn’t give you the opportunity to preview its work before it makes the changes.

Post levels

Maintaining a blog can be a good way of keeping your friends and family apprised of things going on in your life. Unfortunately, it’s also a good way of sharing too much information with other parties who might find your blog.

WordPress allows you to password-protect posts, but this is a bit clunky. The post still shows up on your blog, but just has a message indicating that it’s password-protected. I’ve never liked this system — it’s like taunting readers, waving a password-protected post in their face. Even LiveJournal users have the ability to restrict posts to only their friends — unless you’re logged in and on the friends list, the posts are invisible.

The Post Levels plugin prevents the post from showing up unless a user is already authenticated. The post also doesn’t show up in the default RSS feed, so it’s virtually invisible to any users that aren’t logged in to your blog. The plugin also allows you to define the default level for posts and users, and to modify the title for protected posts.

The plugin is easy to use. Once you place it in the plugins directory and enable it, you can simply set a post’s level from public to 10, with 10 being the highest level of restriction. This way, it’s possible to have some posts that are public, some that are visible to all registered users (say, family), and some that are visible only to a select handful of users — like your best buddies from college who already know all your deepest and darkest secrets and have photos to prove it.

This plugin could also be useful in a work environment, where some posts could be visible to everyone, while other posts could be visible only to staff or management.

This plugin might not be very useful if you’re using WordPress to power a multiauthor blog. However, I strongly recommend it for personal blogs. It’s not unusual these days for employers to go searching Google for information on potential or current employees. It might be a good idea to limit what you share with the world at large.

CG-Samecat

The CG-Samecat plugin is part of the CG-PowerPack set of plugins. This plugin lists posts from similar categories, or the same category, as the post being read. This is useful if you want to let readers check out similar posts.

After enabling this plugin, you need to add a code snippet to your index.php, my-hacks.php, or another file in your WordPress theme. The PowerPack set comes with a readme on customizing the list of posts that are returned. It might take a little fiddling to get exactly the result you want, but it’s pretty easy to use.

AdSense-Deluxe

A lot of bloggers use Google’s AdSense or Yahoo!’s Publisher Network to try to defray the costs of hosting, or even to make a profit. If you’re using WordPress with AdSense, the AdSense-Deluxe plugin might be worth a look.

This plugin lets you embed AdSense or Publisher Network ads in WordPress posts, and it gives you a "sandbox" to preview ads and see what might be displayed for a given post using a test account. You can click on ads to see where they lead without counting as an impression or going against the terms of service. Note that this preview is not always accurate as to what actually appears on your blog, but it does seem to have a pretty good hit/miss ratio.

You can configure everything through the AdSense-Deluxe option menu. Just copy the AdSense code from Google into the AdSense Code box and create an AdSense block. You can display it in any post by adding the code in the text of the post. For example, if you create a block with the name "banner," you’ll add <!–adsense#banner–> into the body of the post.

Of Sidebars and H1s

H1 and Site Names

CSS Backgrounds

September 30th, 2007

web design galleries

September 25th, 2007

2012 Olympic Games Logo

September 25th, 2007

New Trick

September 25th, 2007

Wordpress Plugins

September 18th, 2007

No clicking flash design

September 18th, 2007

100 truly free fonts

September 18th, 2007

Using tables in your design

September 18th, 2007

Why frames are slow

September 18th, 2007

Categories

More links

Archives