Redswish - carefully crafted banter

Designing from the inside out: Part 2 – Semantic Markup

In the first article in this series, Content before Design, I discussed the approach to take when building sites structured in accordance to their raw content as opposed to their presentation. In part 2, I’ll be looking at how to use semantic markup and which XHTML elements are best used for different types of content.

What is semantics?

I used to naively believe that semantic markup was just clean, well-formed HTML with divs and uls instead of tables. I thought it was a term I could throw at clients and such to look clever. But although semantic markup is so much more, it is in essence very simple. Semantic markup is that which conveys meaning and the purpose of the content it contains. So, headings should be correctly wrapped in <h*> tags, unordered lists in <ul> tags and so on.

Semantics is meaning.

Well, ‘that’s just plain common sense’ you may be thinking. And of course you’re right! But regardless, the majority of websites are built so solidly around their design as opposed to content – you’d be amazed how many times obvious lists are created in paragraphs with line-breaks instead of in individual <li> tags. Or take this very site for example – the header logo is simply an image, no <h1> tag – although it’s obviously the top level heading.

“I will be fixing this elementary issues on the next redesign, I feel it’s good for the purpose of writing such articles to be able to point out my own mistakes.”

• Read more...

Designing from the inside out: Part 1 – Content Before Design

This is the first article in a 3-part series that looks at how we design and build websites from the base up, focusing on the raw data and content that needs to be accessible to everyone before considering design and progressive enhancements. In part 1 I’ll be discussing the content-out approach, why it’s important to order content sensibly with markup and how to do it so. Part 2 and 3 will look at semantic markup, microformats and how to write future-proof XHTML before finally discussing progressive enhancement and how it can be utilised to help ensure an enjoyable, appropriate user experience for all.

Content before design?

When I say ‘content before design’ I’m not saying start playing in TextMate or Dreamweaver before picking up a pencil and paper and building ideas and visuals with Photoshop. There are plenty of different methods people use and recommend to approach project development. Some designers find it easier or faster to use XHTML Prototyping or Agile development, however I would never consider writing a character of HTML before I had a solid design and a confident vision of the final product.

Content before design means that the structure of your markup is written in a way that logically makes sense if reading it without styles or any form of dynamic behaviour.

This may seem an obvious thing to do, but the fact is that most websites built today, regardless of whether they are valid, built with divs and have nice alt attributes on every image, are still structured in accordance to their design. A lot of the time this may not make a huge difference if the website design features elements in a sensible order, but often is the case that in the markup – headers will all over the place, menu lists and blockquotes may be thrown in the weirdest places, because that’s where they appear in the styled layout.

• Read more...

Improving yourself as a designer

I’m never happy with my current skill level, I never quite feel like I’ve reached a particular stage that I’m aiming for. Maybe it’s just me; maybe I’ll never quite be happy with myself. Maybe that’s a good thing… maybe not.

But one things for sure – I’m constantly improving and bettering myself as a designer and much more, which is a good feeling. To be able to look back over the past 6 months and observe what new skills I’ve learnt, bad habits I’ve dropped, speed, accuracy and imagination I’ve gained and generally concede that I have improved in more ways than one is pleasing.

So, I’d like to offer some tips and ideas that may help others help themselves more, hopefully provide some inspiration and educate. And I’d sure like to hear what you think, if you’ve got anything to add please comment.

• Read more...

Accessible web design – The How

In the predecessor to this article, ‘Accessible web design – the whats and whys‘, I discussed the advantages of building accessible websites, what accessibility is and why we should be taking it seriously. In this article I’ll be running through some of the primary tasks to consider when building accessible sites.

• Read more...

Guest Post – Creating Usable Website Navigation

Throwing a shout out to my latest post, however not on Redswish. My first (I think) guest post has been featured on ifoh designs blog.

The article covers, or at least attempts to cover all the bases to consider when designing usable website navigation. It looks at page quantity, hierarchy, design aspects, accessibility, consistency and navigation design on different types of websites.

Quick teaser quote:

Consistency is essential. Nothing is more confusing than traveling to another page on a website, only to loose the navigation, or find that it’s changed format or location. Ensure that your navigation, whatever layout and positioning it may take, remains in the same place on every page of your site – even if the color scheme or rest of the page layout changes.

A simple ‘Return to the main site’ style link will not suffice.

But hey, don’t take my word for it, it’s my article! Check out the full article here:

http://ifohdesigns.com/blog/web-design/creating-usable-website-navigation

Thanks to Matt Rossi for the opportunity. Leave feedback wherever you want!

• Read more...

The power of Wordpress Custom Fields

I can’t believe I’ve been playing with Wordpress for so long and never explored the Custom Fields feature. A website I’ve been working recently has required me to push the boundaries of Wordpress, or more appropriately my understanding and knowledge of it. In doing so I’ve bravely slipped deeper into the Advanced Options and lived to tell the tale – the tale of the Custom Fields…

The fundamental functionality of Custom Fields provides you with the ability to expand your posts and their content. They allow you to include extra information and features in your posts that the WYSIWYG editor doesn’t provide itself.

How it works.

When in your Write/Manage posts page, mooch down past Tags and Categories to the Advanced Options – ooh! Down here in these murky depths you’ll encounter the Custom Fields box. In here you’ll see 2 empty textareas labelled key and value.

The key is the name for your custom variable, and the value is, well, it’s value! When you create a custom field, you are creating new meta-data. You then insert a simple line of php into your Wordpress template where you want this extra data to appear in the theme and voila! You’re done.

• Read more...

Which do you prefer – online or offline learning?

My latest post on the Flame blog covers the topic of offline learning (ie books and magazines) vs online tutorials, blogs and sites.

I personally probably prefer offline. Having debated with co-workers, print media seems to take the glory. This is down to a number of factors including a lack of distracting menus, images and adverts, the easier readability, the option to have a book open in front of you while keeping your monitor free, and because your are almost always guaranteed more high quality content from a book.

Check the post out here. And comment where you like!

• Read more...

Sitepoint books for web designers

I would like to make a toast to the fantastic selection of web design/development oriented books delivered from Sitepoint. I own only a couple myself, the best of which is ‘The Principles of Beautiful Web Design‘, which I must say is a awesome book and reference.

Whether you’re a designer, client-side or server-side developer, project manager, freelancer, hacker, CSS Guru or jack-of-all-trades – you can be assured there’s something for you (how cheesy does that sound.)

• Read more...

Designing for Modern Monitors

How do you like yours?
A recent post discovered through Smashing Magazine got me thinking about a topic that effects me every day within my line of work. When I started designing websites 2 years ago I was led to believe at the time that sites couldn’t be made any wider than 750px, (780px max) to [...]

• Read more...

Firefox 100% Height Bug Fix

Hello
I have to post this because I want to spread the word. I haven’t had this problem for a very long time because of the designs of my sites. But today I’ve been working on rebuilding someone’s site with valid mark-up, and while converting the table-based layout to semantic divs – I encountered the dreaded [...]

• Read more...