In my last writeup I mentioned that the content Owen DeLong was covering was a little dry but incredibly necessary.

Eoghan McCabe's and Des Traynor's (both from Contrast.ie) talk entitled Five Lessons We've Learned Sexy or Meaningful builds a lot upon the theme of necessity as they talk about why it is important to not always be chasing the sexy things in life.

They basically go through five areas of business and explain why in most cases the sexy option is the option you want to avoid like the plague.  This was an excellent talk delivered by two fantastic speakers.

With regards to business strategies they discussed things that didn't work;

• Filling a hole in another product very rarely works.
• Being a middle man doesn't work.
• Generally relying on third parties for your business model to work isn't going to work.
• Being first to market has no real advantage.
• Creating copy cat apps isn't going to work (in personally, find that really boring)
• Trendy businesses never seem to work (SEO companies for example)

And they concluded that we should be looking long term and to focus on the things that aren't going to change.

With regards to the people you are involved with they mentioned a couple of things;

• Talent without discipline is bad.
• Having a friend become a colleague can ruin the friendship.
• You should always choose people for the right reasons.

Their third topic for discussion was about investments, basically they highlighted the fact that investment is sexy and reminded us that our business doesn't really need that much start up so why would you really need to chase money in the beginning?

Fourth on their list was the section on design, they warned us to watch out for trends and don't immediately follow them.  I couldn't agree more with this, it is so tempting to make all your corners rounded now and have a nice shadow effect around divs, but just because it is the flavour of the moment doesn't mean you are giving any real value to your users.

They gave an example of a good meaningful website - Craigslist.  They point out that the design hasn't changed and whilst it isn't sexy, it is very functional.   I would argue that sites like Amazon and Ebay would be in the same boat, not great to look at but usually easy to use.

Their talk ended with a section on marketing, here they listed some more key points;

• Build your product first, then look at the marketing.
• Let the product do the talking.
• Don't chase overnight success.
• Ignore tabloids.

Related Posts

1. Looking Critically at Your Design
2. About Pages – Are they totally necessary?
3. Refresh Belfast – The State of Typography on the Web

Here is a really nice and quick way of creating rollover states for image links using jQuery.

As you can see if it is a fairly old post, and obviously this is hardly tackling a new or complicated issue, but I like how the author has put some thought into the amount of jQuery being used and also how it has been made to be just a little bit more generic than some solutions.

Related Posts

1. InFrame – Dynamic iFrame creation with jQuery
2. Adding jQuery to Wordpress
3. Exploring Built In Functions

I was emailed about this event a couple of days ago and I have decided to sign up for it.

Very basically Christopher Murphy and Nicklas Persson are going to spend an evening (an evening on the 21st September in the Black Box in Belfast) talking about and showing us a few of the new typography-centred services that are floating about these days.

I have mentioned in a previous post that I just don't get typography, so hopefully it won't be too over my head but even more hopefully I hope to learn a lot from it.

For those of you who don't know about Refresh Belfast I have cleverly hidden a link to their site somewhere in this post.  In case you can't find it here is some blurb from their site.

Refresh is a monthly event for designers, developers, coders, geeks & nerds to get together to talk design, debate the web, share ideas and meet new & interesting people. Every third Monday of the month, we organise a couple of presentations from local industry experts to be enjoyed over a few beers in the The Black Box.

If anyone is free on that Monday and wants to come along they need to sign up in advance, it is completely free and the registration was insanely quick.  If you are coming along be sure to say hey!  I will be the one with the beard looking confused and angry!

Related Posts

1. Typography
2. Out of the box design
3. Online resources for web development

I think these are two of the most under used tags in HTML, which is a shame because really quickly you can provide some excellent functionality and really help your users out with very little effort on your part.

So, what are they?

The Acronym tag or <acronym> to it's friends is a tag that should encapsulate all acronyms used on your website.  If you don't know what an acronym is I would have to lol at you and pass you across to this website.

The Abbreviation tag, which has been nicely shortened (I see what they did there!) to <abbr> is a tag which should be used around any text that is an abbreviated form of a longer word.  I can't think of anything even slightly funny, so if you don't know what an abbreviation is then go here.

w3.org have the following to say on the subject of acronyms and abbreviations.

The ABBR and ACRONYM elements allow authors to clearly indicate occurrences of abbreviations and acronyms. Western languages make extensive use of acronyms such as "GmbH", "NATO", and "F.B.I.", as well as abbreviations like "M.", "Inc.", "et al.", "etc.". Both Chinese and Japanese use analogous abbreviation mechanisms, wherein a long name is referred to subsequently with a subset of the Han characters from the original occurrence. Marking up these constructs provides useful information to user agents and tools such as spell checkers, speech synthesizers, translation systems and search-engine indexers.

The content of the ABBR and ACRONYM elements specifies the abbreviated expression itself, as it would normally appear in running text. The title attribute of these elements may be used to provide the full or expanded form of the expression.

So now you know what they are and when they should be used, I guess I should write about why you should use them.

First off you would be scoring a really quick win as far as WCAG is concerned, checkpoint 4.2 to be exact.

Specify the expansion of each abbreviation or acronym in a document where it first occurs. [Priority 3]

Secondly, it is semantic - You could argue that this is getting really pedantic in your markup, but it makes sense because the words we encapsulate with these tags are different from normal text.

My third and final point on why I think you should be using it is because it is useful to the end user, accessibility aside it is just nice to get a really quick definition of what an acronym on your site is.

In the past I have found a lot of websites that would use a fairly specific acronym to their area of interest and they would wrap an <a> around it and link off to wikipedia, when I think <acronym> along with the context the actual acronym is mentioned in would be more than enough for most users, and those that still don't know - there is always google!

I guess it is time I actually mentioned how you use them, it is really straight forward.

<acronym title="This is my Acronym">TIMA</acronym>

<abbr title="Personal Identification Number">Pin</abbr>

That is it, easy eh?

I would like to know people's opinions on this, but my thoughts are that you shouldn't do too much extra styling to these elements other than what you would normally do to the text on your site.  Let the browser handle it the way it wants to, which is normally with a dashed line underneath which I think is fairly universal and looks pretty nice.

Related Posts

1. Wordpress Cheat Sheet
2. Raffi Krikorian – How to use Geolocation in your web app
3. jQuery Rollover

Wireframing is something that both designers and developers should really learn how to do well, a good wireframe could potentially save you a lot of time when it comes to immediately chucking out bad ideas and it also helps to bring the client in early on in the process. Knocking up a wireframe (as you are about to see) can be an incredibly quick task and it gives you something you can take to the client for early feedback and opinion.

There are plenty of tools out there for wireframing, my personal choice is Balsamiq; whilst it has been dismissed by a lot of designers due to the childish nature of the sketches I love it because as a complete novice at design I can quickly and easily put my thoughts onto paper.

Anyway, watch this video and be impressed at the speed at which Clay Parker Jones has knocked out this design (and enjoy the music too, nothing wrong with a bit of MJ!)

How to Wireframe from Clay Parker Jones on Vimeo.

Thanks to Designbit for posting this video originally.

Related Posts

1. CSS Techniques Run Down
2. Looking Critically at Your Design
3. Out of the box design

Typography is something I have never got.  I think it is just a bit too artsy fartsy for my brain to take any notice of, which is a shame because I would really like to 'get' typography.

I mean I can appreciate that Comic Sans is a horrible font, and I think I know that Sans Serif means there are no little flicky bits on the lettering.  But that is about the height of it.

Which is why I was pleased to be recently introduced to this blog post that contains different font and typeface cheat sheets.  I must confess I haven't followed all the links yet, but from the ones I have there has been a wealth of information.

Related Posts

1. Microformat Cheat Sheets
2. Refresh Belfast – The State of Typography on the Web
3. HTML5 – Anyone Played With It Yet?

I read a post today that really opened my eyes to how you need to critically look at your design, or better still have a qualified yet unbiased third party do it for you.

Janko wrote about how he feels twitter needs another redesign and goes on to highlight the different sections he thinks just don't work.  Now you may not agree with him (indeed a quick read of his comments tells you that a fair amount of people didn't) but it was the fact he was able to pick up on these issues and to ask questions about them.

Personally speaking I saw the new layout and the only thing that annoyed me was the login on the main page is different from the login when you are on a profile page, I wasn't looking at it critically enough to notice the things that he noticed.  And if I can't look critically at an interface I use all the time yet have no real vested interest in, how I am supposed to look critically at the design of pages I do have an interest in?

Can you ever really look at a design with complete objectivity and highlight shortfalls? I don't think you can, and what is the next option? You could get friends or co-workers to look at the design, they will be more objective than you could be but they still won't be completely critical, human nature dictates that they just can't be.  So do you pay for someone's design services and let them cast an eye over your work?  If you do that then do you not stand a chance of getting back a list of changes that are only there to justify someone's fee?

It is all a bit complicated if you ask me.

Related Posts

1. Out of the box design
2. Eoghan McCabe and Des Traynor – Sexy or Meaningful
3. About Pages – Are they totally necessary?

Janko - At Warp Speed is an excellent blog, and if you haven't subscribed to the feed for it then I really suggest you do.

One post that really grabbed me recently was named 'Reinventing a Dropdown with CSS and jQuery', not the most imaginative of titles I grant you, but the results of the supplied tutorial are just fantastic.

I must admit that my first thought was that reinventing stuff is usually a bad idea, I mean the dropdown element works fine, it is functional and most web users would know how to use one without needing to think about it so why go to the hassle of prettying it up a bit?

Well the thing is, they have prettied it up a lot and I think the inclusion of graphics makes it more accessible.  Actually whilst I think about it, you may look at the first part of the code and dismiss it out of hand because it isn't very accessible (it uses <li> tags), however if you read on down they have included a way to achieve the same results with the normal <select> tag, so I don't know any reasons why this couldn't be incorporated into some web projects.

Related Posts

1. Out of the box design
2. Robin Christopherson – Accessibility in Web Design
3. Acronym and Abbreviation Tags

Now I am not going to be one of these people who only posts up apologies for never posting, but you may have noticed that a lot of my posts recently have just been linking to other peoples work and saying how much I agree with it.  The reason I have been doing this is simply because there is a lot of quality articles out there, and whilst I do have every plan to create some of my own very soon I want to keep the site ticking over whilst I get my creative arse in gear!

So today I want to chat about the SM post entitled '50 New CSS Techniques For Your Next Web Design' it is a quality article (what else would you expect from Smashing Magazine) that basically runs down a list of blog posts and tutorials on how to achieve the very latest CSS things.  As with a lot of their articles you could always argue that this is all information that is freely available and perhaps that most web designers should already be taking for granted but the fact of the matter is that with so much new stuff constantly coming out, and so many people finding new ways of doing things these run downs are incredibly useful.

Things that I found especially interesting / useful were;

• Compressing JavaScript and CSS.
• Useful layout tips and tricks.
• Multiple Backgrounds.
• A whole lot more.

I would really suggest you bookmark this article and really spend time going through each of the sections.

Related Posts

1. Really cool dropdown menu
2. Adsense Tips and Tricks
3. About Pages – Are they totally necessary?

I was recently reading an article by Smashing Magazine on the subject of best practices for designing about me pages and whilst there is no arguments from me that some of the About pages on display look fantastic I am a little dubious of their opening statement.

The “about me”-page is one of the most overlooked pages in development and one of the highest ranked pages on many websites. In a world that’s becoming increasingly connected through the Web, it’s important that you engage your audience in a personal and friendly way, otherwise you risk just being another faceless web designer among a sea of websites.

I agree that you need to engage your audience, and the more personal you make that the better.  However I don't think an About Me page is the place to be doing it.

Most people include the following information in their About Me section;

• A small mission statement.
• General information about them (stats and hobbies).
• A small blurb on work they have done.

If a mission statement is to be included on your site I would argue that it is too important to be hidden in an about me page, it should appear perhaps in the footer of the site or somewhere of prominence, I don't think I would go looking for a mission statement so if you need someone to see yours you can't leave it to chance.

The general information is perhaps the most included bit of information found in most About Me sections, this is where people try to make themselves stand out above the rest, this is obviously far more crucial for designers than it is developers, however again I feel that getting your personality across is something that is too important to just put into one page, the entire site needs to sweat your personality, it needs to soak into the person viewing the site regardless of what page they are on.  Once you have got your personality across things like vital statistics (age, sex etc) aren't really that necessary and are small enough in volume that you could probably place them somewhere else on your site.

The small blurb on work you have done is something I have seen more and more in About Me sections, and I really don't agree with it being there at all.  If you have a portfolio of work you want to show off then you need to have a portfolio section, there you can talk in brief or in depth about work you have done.  Again, you site should scream that you are a competent designer/developer/seoer/whateverer so you should either be backing up the claims implied by your site with a full blown portfolio showing a body of work, or nothing.

Another point I would like to make is a lot of people would say their main call to action on a site would be to get the user to contact them, and with more and more people offering things like Twitter and Facebook as contact mediums, there is really no need to include a personal bio on your site, users can easily see that on the various social sites you have already written stuff on.

Of course I could be totally wrong, perhaps the About Me section *is* vital and the information stored in it helps potential clients/partners see the real you.  Let me know in the comments!

Related Posts

1. Looking Critically at Your Design
2. Eoghan McCabe and Des Traynor – Sexy or Meaningful
3. CSS Techniques Run Down