Redswish - carefully crafted banter

Choosing a Career Path – Work or Learn?

It’s almost a social expectation in modern society that after high school (or the American equivalent…) you must go to college or University. In England, to go to University (for world-wide readers this is generally 3-4 years from the age of 18/19) costs money, generally a lot money. But of course you come out at the end with a degree, woohoo!

But is studying necessary? Don’t get me wrong – life is all about learning, but is it essential to take a 4 year chunk out of your life for the benefit of a qualification? The other option is to go straight into work; you will start lower in the food chain but will be earning money instead of spending it, whilst still gaining experience.

Me first

At the time of writing this article I’m 19. I pretty much wasted 2 years at college studying subjects that haven’t seriously contributed to my current career path. Whilst at college I started studying web design in my spare time and balanced a part-time job at a local media company. Shortly after leaving college I left the media company and went traveling for a while, returning home at the end of 2007 to try my hand at freelancing and build up a portfolio.

University was seeming a less enticing proposition now I was earning off my own back. When, after a few months freelancing Manchester based digital agency Flame Digital got in touch looking for a new designer. To cut a long story short – I got the job, am loving it and no longer have any intentions of going to University. I’m think I’m learning far more by working in an environment among other professionals, working on big projects, expanding my skill set every day. I’ve chosen my path, but this isn’t the path for everyone.

Benefits of Studying

Despite my bias, I know that University is great. Most of my friends there are loving it, making plenty of new friends, learning and having fun. From what I can gather, some of the benefits of getting an education:

• Come out with a degree, diploma or some form of universally recognised qualification. Proof of your education, knowledge and probably guaranteed to land you a better role than those without one.
• Meet like-minded people, make new friends and obtain contacts for the future.
• Get away from home – learn some independence and life experience. University is a great excuse to get away from the parents and to start living your own life.
• Provides you with the opportunity to build a portfolio easily.
• More direct support and education. Some people need or desire direction, a helping hand provided by tutors. Reading books and blogs isn’t everyone’s cup of tea!

There’s undoubted benefits to a good education. But how does the other side of the coin fare?

Benefits of going straight to work

Looking at the new media & design industry, straight-to-work generally means getting your foot in the door at an agency at a very low level position, as either an intern, runner or junior and working your way up. It can seem like a more scary and demanding choice originally, but you may reap the rewards in the long term.

• Earning money from day 1.
• Working and interacting with experienced people in your industry.
• Learning by ‘osmosis’. When working in a creative environment you tend to naturally absorb knowledge from the people you work with.
• Get to work on real-life projects, real clients and build up a portfolio of real work.
• 3/4 years ahead of the game. If you work hard, the time you may have spent in University will instead be used to climb your way up the promotional ladder. Chances are you’ll be earning more, have a bigger portfolio and far more ‘real-world’ experience than those fresh out of education.
• Easier to keep up with current trends.
• You get a shiny business card!

All fun stuff.

The downsides?

I wouldn’t claim that either studying or working really demonstrate any major negatives. University costs money – but it’s money you’ll earn back with that handsome degree! It’s an investment. An investment that pays off with good education and a great experience. A downside of going straight to work is that most of your mates disappear to Uni, but everyone has to move on at some point.

What’s right for you

There isn’t really a debate. The choice is down to each individual. Both require a level of independence and a strong head. Both display great rewards and ensure a productive start in life, depending on how much your willing to put in – that is the essential point.

Regardless of which path you choose – you will only benefit from how much you put in. And it’s never too late to try something else, neither option is definite.

A few opinions

It’s the first time I’ve done this, but I decided to turn to Twitter to gather some other opinions from those far more experienced than myself, here’s a taste:

matthewknight:
“Go to Uni, but I’d say it’s as much for the life/social experience as it is for the knowledge. I did theoretical physics.”

supersy:
“self-taught FTW. I did a placement last yr at an agency & found that to be more valuable than my course.”

will_j:
“I guess Uni is useful for learning how to think and work, any practical skills you learn (in tech) will be old when you leave.”

LucPestille:
“Personally uni was a waste – I think for media jobs, it’s about what you can do, not a piece of paper. 16 or 37, don’t care.”

MarkJWeston:
“Be very careful! I’m about to grad – my course has done NOTHING for my web/new media skills. Too techy. Easy to teach yourself but a good degree with good content is well worth it – especially with a high grade! My uni has redesigned their content to be more applicable to current times – uni’s can be a bit slow on changing curriculums etc.”

paulmsmith:
“Uni 4 me was about life lessons than technical ones. Pretty much self-taught, font tags, tables, etc still being taught at unis ”

wiggy5:
“I’m earning more now than anyone I know who went to Uni, also mostly debt free as a result. Experience beats qualifications.”

darrenturpin:
“What you demonstrably do is far more important than what you theoretically know. But I don’t regret my 3 years at Uni at all…”

Thanks to everyone for their comments.

The general opinion seems to be that, particularly for new media/design and development jobs, University can’t keep up and a self-taught approach is better. However, no-one seems to regret their time at University and a high value is placed on qualifications.

I will most likely be looking more into this topic in the future as it’s so widely debated and is growing ever more important in an age where there are so many resources online to teach yourself. Will the education system evolve quickly enough to adopt this? How different will media courses be in 5/10 years time? How will online and self-taught education evolve?

Questions for another day. Thanks for reading x

• See full article »

Read the flyer first

A little story.

I recently ordered a book from Amazon. Actually, it wasn’t recently, it was before Christmas but due to popular demand it sold out and I had to wait till late February. No problem. The book came, and with it a voucher for £40 off Virgin Wines online. I’m sure many other people have received this flyer as well. At first, it sounds nothing out of the ordinary.

Instead of simply throwing it in the bin I decided to visit the website.

Step 1 – I’ve visited the website. Fair enough. That doesn’t have to mean anything.

I decided to go through the instructions on the voucher, register, enter the code and voila! My account has been credited with £40.

Step 2 – I’ve signed up, I’m establishing a level of trust and beginning to lower my guard. I’ve been rewarded for this.

I don’t know the first thing about wine. I enjoy it but wouldn’t know a Shiraz from a Chardonnay. So after a swift perusal of the site, I leave and forget about it.

About a week later I received a polite email from ‘Jay’ at Virgin Wines’. It wasn’t pesonal, although it tried to be, but I didn’t mind, there was still some thought there. Jay kindly explained that because I hadn’t yet bought anything, they weren’t doing a good enough job. So he offered me a deal I couldn’t refuse. Plenty of wine, free glases and a fancy bottle opener for only £48. Considering I already have £40 credit to play with – that would mean spending £8 for a lot of wine. Bargain.

Step 3 – Sweetening the deal, offering me more for little in return. I decide this is something worth telling people.

I’ve yet to buy any wine, I may wait till someone’s birthday crops up. But at work today I told 7 people about this episode, and tonight, at the pub, I may decide to tell my mates.

The moral of the story:

The £40 credit is not £40 to Virgin, it’s perhaps £5-£10 at most, before their markup. That may seem like an awful amount of money to waste on one person. But if the people I told at work, and the people I’ve yet to tell, and you reading now decide to investigate a bit and end up buying some wine for yourselves or continue to tell other people… well – that £5 Virgin spent on me may become £50, £100 + profit through other people buying wine through their site thanks to the power of word of mouth marketing.

Now would that money have been better spent on a few clicks of a tacky banner ad, or a stack of throwaway flyers that will be read by practically no-one?

Through the flyer I recieved, Virgin can monitor (to some extent) the impact by how many people have registered on the site and entered the offer code, and how many people have spent that free credit. What about the option to recommend the offer to others? Or for every bottle of wine you buy you receive a free £5 off voucher to send to a friend of choice?

• See full article »

iTunes support

I don’t mean to sound like an Apple fanboy but once again they’ve managed to surpass my expectations and slap big fat smile on my face. A couple of nights ago, in the early hours of the morning whilst very tired and in desperate need of sleep for work the next day, I decided to download the iPhone app ‘Bloom’ by Brian Eno and Peter Chilvers. Which, by the way, is fantastic. But somewhere along the line I successfully managed to clear off all the apps on my iPhone, and I was not happy.

I’m not one for customer service emails or calls, I have no faith in that system. If something breaks, I throw it away and buy it again. But I decided to give iTunes the benefit of the doubt. I sent a rather rude, demanding email that was very unlike me and can only be put down to how tired and annoyed I was at the time.

Less than 4 hours later, which didn’t bother me as I was in bed, I received this response:

Dear Nathan,

This is Sasha with iTunes Customer Support. I would first like to thank you for inquiring about the App Store. I understand you are concerned that you lost your App Store purchases. I will be happy to help.

App Store purchases may be downloaded again at no charge, either from your device or using iTunes on your computer. Be sure that you are signed in to the same iTunes Store account that you used to shop from the App Store, and follow the steps to purchase any missing content again. You will be notified that you have already purchased the App and can download each missing item again for free.

For more information, please visit:

App Store FAQ
http://phobos.apple.com/WebObjects/MZStore.woa/wa/ApplicationsFAQPage

If you have difficulty downloading any applications, please reply to let me know or consult this article:

Troubleshooting applications purchased from the App Store
http://support.apple.com/kb/TS1702

Sincerely,

Sasha
iTunes Store Customer Support

Which is fair enough. A straightforward reply in a professional yet friendly and personal tone. I liked that. So I deided to email back and apologise for my initial arsey email, only to receive another response from Sasha only minutes later:

Dear Nathan,

You’re very welcome. No need to apologize. I know how frustrating these kinds of issues can be. I’m just so glad to hear that you were able to get your purchases back.

Nothing makes Apple happier than to hear that we have pleased our customers. I hope that you continue to enjoy the iTunes Store.

Remember, if you have any further questions or concerns please let me know and I will be more than happy to further assist you.

Have a wonderful day!

That really pleased me.

Why is this such a big deal? Because in this fast-paced world where huge companies spare no time for individual customers willing to dish out £1000’s on their products and services, the fact that someone in a service center on the other side of the world took the time out to craft a dedicated, friendly response goes a long way.

And personally, I feel it’s these touches that put Apple ahead of the rest of the game.

• See full article »

Dug up

A few of my posts from the Flame blog archives from last year. Possibly worth a gander:

Books or online tutorials

A discussion on the benefits of books or online learning, the clue’s in the title!

There has been mild debate in the office recently over whether we prefer online tutorials or the traditional printed word. This has been sparked by a recent subscription to Lynda.com, an online resource of video tutorials.

It seems that Lynda hasn’t been used as much as hoped or expected. But alas, this is not because we’re all too lazy to learn, on the contrary we’ve all been too busy to participate in 8 hour tutorials on designing fonts, modeling gorillas in 3DS Max or building a spaceship using only PHP and a dashing of AJAX (yeh I have no idea how you’d do that either)…

Read more…

Does anybody care what you have to say?

A muse about the value of blogging today and just how important is your voice?

Blogging has evolved, transformed and broadened massively over the years. I wouldn’t like to say ’since it was invented’ because, well it was never ‘invented’, it has just ‘become’, biologically… like a living entity. Anyway, enough semantics.

The origins of blogging have long since been lost in the mists of time, it is maintained that only scholars know the true reasoning behind the now extremely popular web activity and in some cases – business. I personally have only been blogging since January this year, and am constantly learning new tricks, styles and trends…

Read more…

Navigating large blogs

Some advice for designers on how to make large blogs more usable and easy-to-navigate.

With the exception of news-exclusive blogs, pretty much the entirety of blogs on the net feature topical or thematic content that can be useful and informative not only at the time it’s written, but for many months or even years down the line.

So when a blog grows and expands, it’s easy for older posts to get lost and unseen. Sure they’re still there, archived or categorized, but once your post count starts to rise above the lofty heights of 100 posts… chances are your old work, regardless of how well-written or useful, is going to attract less traffic from either external or internal sources.

The importance of internal blog navigation cannot be underestimated. It may seem obvious but a lack of categorization, clear navigation and tidy layout can have massive negative implications on a site’s usability, and therefore readership.

Read more…

The little things that matter

Considering how essential to the overall design even the smallest elements are, and how they should never be overlooked.

Sometimes it seems all too easy to simply throw up a contact form or a standard menu layout because at the end of the day – everyone knows how these things work, as long as they do their job, they don’t require much attention.

Oh how wrong that is. A recent string of articles from Smashing Magazine regarding Web Form Design Patterns emphasises the importance of the smallest design aspects, such as the placement of labels next to input boxes, wording, use of colour, shape, size and position and much more.

Read more…

• See full article »

A thought on the recession

Pfff… this crunchy credit’s getting a bit hard to swallow, I might have to cancel my numerous magazine subscriptions and cut back on my capitalist ritualistic Cafe Nero coffee drinking… sure.

You see, in the UK and pretty much around the whole world there’s this ‘recession’ thing. What, you didn’t know about that? I say the whole world, but you can only really have a recession if there was some previous economic growth, so third-world countries – I’m afriad you’re out of the game!

So in the UK there’s a recession, but there isn’t really a recession, but of course there is. Quite why we’re in this ‘current economic climate’ no-one knows, and to be honest absolutely no-one knows. Gordon Brown thinks he knows, he doesn’t know. Whoah I’m getting all political on a web design blog! I’m really sorry, but this is my blog so I retain artistic license.

Heavy pockets

Come on now, have the prices of banannas and that sweet French cheese you like really gone up? Petrol – going down, mortgage/interest rates have generally gone down, in fact the only things in my day-to-day routine that have become more expensive are train tickets; and that was going to happen anyway.

You could argue on the other hand that people have taken pay cuts or lost their jobs. But why? Because this whole god-darn recession bollocks is cycled by a fear culture. People are afraid to spend money because ‘there’s a recession’, when they don’t even know what the fuck a recession is! This cycles through the market and causes a chain reaction which ultimately results in businesses cutting away staff because their clients don’t want to spend as much money because their clients are scared to spend too much money… and so on.

I may be wrong. Please feel free to correct me if I am. I really don’t have the time to study economics and current politics while juggling my job and web designy stuff. But hey, if this recession has it’s way who’s to say I’ll even have a job soon – so that will give me all the time in the world to catch up on all that complex economics. It must be really complex because some of the best in business have still managed to fuck up royally!

But, the 2 things that annoy me about this situation are thus:

1. Naughty newspapers. The media has fuelled everything. By striking fear in to everyone the media has successfully managed to reduce consumer spending which has crippled the GDP and fuelled everything further. Is there a hidden agenda?
2. House of cards. In order to keep things afloat, business are having to reduce salaries, make redundancies and in some cases collapse like a house of cards with everyone loosing their jobs.

House of Cards

Business panic, or they get clever and consider that in a few months time cash is going to be tighter than it is now – so it’s time to cut away staff now to save a bit of pocket money (so top-level management can ensure they still get that chunky bonus and new company car at the end of the year).

Problem is, the majority of the time the staff that have to go are the people at the bottom of the food chain. The little people, the young people, the less-established or experienced, the production staff. Why this is bad:

• Young, inexperienced, little CV – it’s going to be so easy to get a new job now eh?
• You’re left with plenty of managers but no-one to manage – ace!
• You take away the people on the shop-floor, the production staff in a design agency, the assistants, interns, trainees in any company and things will start to fall apart. You remove the bottom cards from a house of cards and it’s going to fall. And the cards in the middle are going to get crushed.

I couldn’t decide which was a better analogy – house of cards or human pyramid… the pyramid might have been funnier!

My advice to the people at the bottom

Coming from someone else at the bottom – if the big-wigs are looking to chop out some company expenditures and you’re top of the list, work your ass off. If you’re really appreciated then hopefully you’re company will go out of their way to keep you on. If not, maybe it wasn’t the right place for you, try somewhere else and in 6 months time you might be looking back laughing, thinking “What the hell was I doing there?!”.

And if that doesn’t work out, run away to Australia. Everyone else is!

• See full article »

1 year down!

I noticed it was a year today that I first posted on Redswish. The site’s come a way since then but hasn’t been anything ground-breaking, not that I intended it to. I’ve tried to put a decent amount of time into the site but it’s not always that easy. Plus over time I discovered the value of quality of quantity (I think)!

Through constantly trying to better myself and the quality of my writing I’ve learnt a lot and hopefully crafted some articles that have helped and inspired people. If not, well I’ve wasted a lot of time then! But I do feel that if you were to read through all the articles mentioned below you’d see how my writing and understanding has matured over the past 12 months…

Anyway, just a quick thank-you to the regular visitors and commenters and even those that have popped in and never returned again. The odd bits of support and kind comments keep me going. Here’s to another year!

A quick summary of some of the more popular articles from the past 12 months:

• How to sell a website
• Why I hate Flash sites
• CSS Horizontal Menu
• Creating a Wordpress Theme Parts 1, 2 & 3
• Death to IE6!
• A selection of top CSS Showcase websites
• What to do when you get Bloggers cramp
• Accessible Web Design – The Whats and Whys
• The power of Wordpress Custom Fields
• Increasing and maintaining blog traffic
• Different blog post styles
• Improving yourself as a designer
• Accessible Web Design – The How
• Managing brand consistency
• 10 SEO elements all websites should have
• Designing with data
• Designing from the inside out – Part 1 & 2
• Design constraints
• Designing with empathy

That’s just a selection. I’ve also write and have guest written for other blogs including the Flame blog and iFoh designs.

Shout Outs

There are a lot of people, designers and companies that have inspired and influenced me over the past year. I’m really sorry if I forget anyone but off the top of my head I’d like to thank David Airey, Jacob Cass, Matt@ifohdesigns, Andy Clarke,  Ian James Cox, Jeffrey Zeldman, Vandelay Design, Smashing Magazine, Adelle Charles, Chris Spooner, Carsonified, Elliot Jay Stocks, Nick La and so many more people…

Working at Flame since last June has been great fun, the people here are great and learning so much. So, here’s to another year!

• See full article »

Wordpress Magazine Themes

This selection of 10 fantastic free Wordpress Magazine themes was compiled by Tom Walker, a self confessed gadget addict who writes for Manchester-based ink cartridge supplier, Cartridge SAVE.

10 Awesome Free Wordpress Magazine Themes

Wordpress has risen to become the online publishing tool of choice that enables anyone to create a blog or multi-page content website with relative ease. Fully customisable, this open source platform is now powering some huge online properties, including many online magazines. Of course, there are thousands of free-to-use Wordpress themes which you can use to create your own magazine with minimal programming knowledge. Here are 10 of the best free Wordpress magazine themes to try out.

1. Branford Magazine

A simple but stylish layout, this theme enables you to display content in a format similar to that of an online newspaper. With a lead article dominating the top of the home page, glimpses of further articles within the subsequent categories are displayed below to entice the reader to click the links to read further. This easy to navigate theme is customisable and even has dedicated advertising spaces within the layout.

2. Mimbo

The Mimbo theme is very similar to Branford and in fact the author of the Branford Magazine theme attributes his inspiration to Mimbo. It provides a grid layout with a great white space balance which ensures that each section is clearly demarcated so that the page does not appear too busy. Mimbo is highly customisable and it is possible to upload thumbnails, both large and small, against posts.

3. The Morning After

This unique Wordpress magazine theme will ensure that your blog stands out from the rest. This widget-ready theme is fully customisable as even the header image can be changed. As it is a true magazine format, readers are also able to print a printer friendly version of posts. With an abundance of features, The Morning After is the ultimate professional magazine theme.

4. Guzel Magazine

For publications consisting of many different categories which extensive content, the Guzel Magazine Wordpress theme offers the perfect solution. The feature article is prominent, occupying the top of the home page and there is even space provided for sponsor adverts. It also possible to upload thumbnails against stories and has space for video content.

5. Arthemia

This contemporary theme offers a professional magazine layout unlike most themes as the category listing and description is inserted beneath the main feature article, providing the reader with insight as to what they can expect within each category. The home page is clearly divided into separate sections, making the content easy read and user friendly.

6. Jello-Wala-Mello

If you are looking for a completely different magazine theme, then the Jello-Wala-Mello Wordpress theme may be just the one for you. Its bold colour usage is consistent throughout and its grid layout on the home page ensures that the content is easy to view and navigate. There is a standard advertisement space on the home page and it even includes a sub page design for viewing single posts.

7. Zinmag Remedy

A sleek Wordpress theme, Zinmag gives the impression of a glossy magazine. A brilliant feature not seen on many other free Wordpress themes is the sliding carousel of feature post images, which is great for capturing the reader’s attention. A highlighted feature section is standard on the home page and thumbnails can be posted against subsequent stories.

8. Linoluna

This theme gives the look and feel of a glossy magazine, while still being easy to navigate. The multiple sections on the home page are clearly defined and even though a substantial amount of content can be displayed, the well-balance white spacing ensures that the reader isn’t bombarded with information on a relatively busy page.

9. Ikarus

One of the most versatile magazine themes, Ikarus comes with over 2,000 user variations and options which is rare amongst free Wordpress themes. There are many features included with the Ikarus theme including video support, slideshow support, social bookmark tools and much more. All user settings are easily maintained in the admin area.

10. Revolution Lifestyle

Marketed as suitable for a women’s interest magazine, the Revolution Lifestyle Wordpress magazine theme has a softer, more feminine look and feel while still presenting the content in a highly professional manner. As expected from a magazine site, it enables multiple categories and subsections to be maintained. The homepage even has space for sponsor advertisements and a well placed subscription invite where the reader can sign up for email alerts for site content changes.

• See full article »

Designing with empathy

Being a web designer is a tough job. “Oh give over!” I hear you cry, and you wouldn’t be the only one. This misconceived view is justified by the general lack of understanding as to exactly what a web designer does.

Okay, being a good web designer is a tough job – but so is being a good barrister, doctor, teacher or engineer etc. The difference is that in the latter instances this is widely acknowledged based on the fact that professions of this nature have been around for a while. But due to the short lifespan of the Internet and it’s architects, coupled with the all too common ‘anyone-can-do-it’ mentality that is attached to the term ‘web design’; true web designers are rarely afforded the respect we deserve (yes, I’m considering myself a good web designer. A little bit of ego won’t hurt, will it?).

I’m not soliciting sympathy, I simply wish to raise awareness that designing for the web requires so much more than a knowledge of HTML and a copy of Photoshop. Depending on which side of the playing field you’ve approached from, development and functionality may hold precedence whereas those from a more traditional print design background rather fancy a more aesthetic approach. Then there’s fussy usability and accessibility wizards in the middle.

Standing out from the pack

The fact today is that with so many so-called designers and developers cramming into the industry, actually getting ahead of the pack and standing out as a skilled professional requires generalisation as well as specialisation. It’s not enough just to be able to code “bad-ass” HTML quickly or whip up sexy designs in Photoshop.  A good web designer has to understand how websites are built, how they are used, on which devices and platforms, how they affect and interact with the end user.

Aside from a wider knowledge of the different areas of web and interactive design and development, a core, fundamental and essential ability of a great designer is the ability to empathise with the end users, the people you are designing for. Because they are what matters.

The trouble is that websites are supposed to deliver an experience, normally whilst promoting a brand or product. Therefore to do this successfully a website must be 3 things – attractive, usable and functional, thus it must look good, be easy to use and provide a service or end result. To handle all that by yourself is quite a task, hence the reason why the full website creation process is normally handled by a team of people. However, to rise to the top of the pack it helps to have a broad understanding of all the many criteria that make a ‘good’ website.

How to empathise

Simple, I couldn’t give an easier piece of advice:

Stop. Listen. Learn. Watch. Open your mind. Read. Research. Ask questions. Ask for critcism and don’t ignore it when it’s given to you. Try to look at every challenge from a different perspective.

OK, I can throw out plenty of verbs. Great, how does that really help?

Sometimes, empathising and putting yourself in the place of the people you’re designing for is just a state of mind, somtimes it’s born out of experience and sometimes it requires some additional learning to get comfortable with.

When designing for any project, for any purpose or userbase, but especially for an end user group you’re not familiar with (for example, in my case – model boat sailors) – conducting design research is the best method of gathering and consoldiating information to help you empathise with different people. Because don’t forget – you’re designing for people.

Overcoming your ego

I design pretty much everyday. Perhaps not always in Photoshop or with a pencil and paper but in some way or another I’m usually in front of a computer working on website design work. I’ve been doing this for not far off 3 years now (eesh I can’t believe it’s been that long!), so I like to think I have an idea of what I’m doing! Does this mean I should dictate all my designwork and not listen to the people who will ultimately be interacting with it?

It seems a stupid question, I know. But it’s true that a lot of the time, we designers think we know best. Ignoring or failing to even consider what our end users feel and think makes us bad designers.

Get over your ego, you’re not right all the time (unless the client requests an obscene scrolling, flashing ad banner across the width of their header to obtain a bit of extra revenue… then it’s time to put your foot down!).

Care a little more…

This post was just a musing. A quick run through some ideas in my head, but as usual a lot of the inspiration and ideas come from the minds of others as well. For more information on ‘Designing with Empathy’, user testing and design research, check out some of the following:

• Jeffrey Zeldman’s 2008 speech at AIGA
• Don’t Make Me Think!
• Designing for interaction

• See full article »

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.”

Making meaning

HTML provides us with around 40 tags to markup different types of content. This may have been dandy 15 years ago, but in light of the web’s immense expansion and the superfluity of different forms of media and content websites present – 40 tags looks rather slim. The result of this is 2-fold, either:

• designers look to alternative methods, such as microformats, to help expand the capabilities of their markup.
• designers are forced to use irrelevant HTML tags to contain and present content they weren’t originally intended for.

So, in some cases it’s 1 step forward, but in others it’s practically 2 steps back.

The easiest way to write semantic markup is to build sites with a content-out approach, as discussed in part 1 of this series. By writing your XHTML in a logical content order – you will automatically create the correct elements to represent the content of your site instead of the design.

Why is this important?

Well, not to bore you with the old accessibility argument but let’s not forget that websites are, in their rawest forms, conveyors of content to the user. Sure, we use CSS to make them look darn pretty and then we pop in a bit of client-side scripting or Flash to make them sparkle – but there’s a large portion of your visitors that won’t reap the benefits of all that time spent in Photoshop and writing lines of funny symbols.

Writing meaningful markup helps to group different content types correctly. When styles are disabled, or when your site is being parsed by non-visual devices, this will help to keep everything together and in order. However, it also aids styling to no end, and can also make it easier to associate elements and content types with scripting to easily control the dynamic and visual effects of entire blocks of content without having to assign various classes and ids to every item.

In the following example I have changed my current footer navigation markup into semantic, meaningful HTML that can now be styled more easily than when each footer link was independent of every other:

What’s better about it?

• Firstly, I’ve removed the useless <div> and marked up the internal contents (the list of links) in an unordered list.
• I’ve then replaced the <div> id with a more meaningful <ul> id. This will mean some CSS amends to transpose the styles.
• Doing this gives me more stylistic control over the elements with less code, but also means that without styles, the content will still make sense.

Simple eh? That’s the point! Creating semantic markup shouldn’t be an exceptional skill, it really is just a combination of a good knowledge of HTML and common sense. The new footer markup above is actually easy to control with CSS and will now appear far more coherently when viewed without styles.

Using the correct elements

It’s important to consider carefully which elements to use when marking up content. This can reduce bloated code in files, make CSS styling easier, aid dynamic control, make it easier to aggregate data to different sites and apps, and most importantly ensure that the content makes sense when all styles and scripts are off.

A few examples of incorrect uses of HTML:

BAD:

<p>This is a paragraph of information.<br /><br />This is the second paragraph of even more information…</p>

GOOD:

<p>This is a pararaph of information.</p> <p>This is the second paragraph of even more information…</p>

Ok that’s fairly obvious. What about when incorrect elements are used for styling before the true nature of the content has been considered:

BAD:

<span>”Knowledge speaks, wisdom listens.”</span>
<br />
<strong>Jimi Hendrix</strong>

GOOD:

<blockquote>
<p>Knowledge speaks, wisdom listens.</p>
<p><cite>Jimi Hendrix</cite></p>
</blockquote>

And one more chunky example for good measure:

BAD:

<strong>PHOTOSHOP FOR BEGINNERS</strong>
<p>Photoshop is a design package by Adobe that allows you to create and manipulate images and photography. Some of things you can do with Photoshop include:
<br /><br />
<strong>Cropping, rotating and resizing images.</strong><br />
<strong>Changing the lighting, brightness, contrast, hue and saturation of images.</strong>
<strong>Create shapes and objects and apply gradients and shadows.</strong>

GOOD:

<h1>Photoshop for beginners</h1>
<p>Photoshop is a design package by Adobe that allows you to create and manipulate images and photography. Some of things you can do with Photoshop include:</p>
<ul>
<li>Cropping, rotating and resizing images.</li>
<li>Changing the lighting, brightness, contrast, hue and saturation of images.</li>
<li>Create shapes and objects and apply gradients and shadows.</li>
</ul>

Marking up with Microformats

Microformats are a set of open data format standards to help create and ease web content publishing and transferring. They are designed to more appropriately label groups of data, such as an address or business card information. They are an extension of XHTML that open up a lot of opportunities with only the slightest bit of code. No new languages to learn, no complex scripting.

Microformats extend the potential of the traditional 40 (or so) HTML elements such as blockquotes, paragraphs and lists and enable us to describe and markup our content in even greater detail. They also allow us to markup content so it can easily be aggregated by other sources through XML, RSS and other technologies.

Now unfortunately I’m going to stop there before I embark upon another tangent on Microformats. They are most certainly a subject for another day, considering I’ve recently got the bible on Microformats for Christmas and it’s going to take a while to get through. So for now, please pop over to the Microformats website for lots and lots of more information!

Take a step back

Well, that about covers that for now. In the past 2 articles we’ve looked at designing from the ground up. Considering content first before fancy graphics and snazzy AJAX and Flash and looking at how to markup our XHTML correctly and semantically. In the 3rd part in this series I’ll be entering the deep realms of progressive enhancement, but until then I’d like to hear your opinions and views, so feel free to comment away!

• See full article »

Design constraints

Constraint leads to bad design, and good design

Books can teach you how to write HTML, online tutorials can help you craft your Photoshop and Fireworks skills, thousands of hours of hard work and engagement will provide you with a better understanding of the ins and outs of the Internet and the ways in which people interact with it.

Your job title is meaningless.

I am a designer. I work mainly on the web. I use Photoshop and Textmate daily. I build websites.

Does that stop me picking up a paint brush, spray can or scissors, or camera and camcorder and going out onto the street to obtain different forms of media that I feel may be useful in moulding my final output, the end creation?

No?

If it serves as a valuable asset in creating the final experience, there is no need to be restricted by my job title or the equipment on my desk alone. But constraints also allow us to expand creatively. By creating barriers, we know how far we can go – the lengths to which we can stretch and bend the rules to create something new, something that works within it’s medium whilst evolving beyond the competition, beyond the confines of the original brief or spec.

Make clients happy, make users happy. Everyone’s happy, everyone wins!

If there are no rules in the first place, how can we break them?

However, never forget the difference between art and advertising. Art is personal expression. Advertising serves the needs and purposes of the client. It is to promote a brand, a product, a service or opinions. Advertising makes money. Web design is a form of advertising, an increasingly essential and multifunctional branch of advertising and branding that absolutely cannot be overlooked or underestimated.

But advertising is dead, isn’t it?

• See full article »