The article contains some great interviews with some of Ireland’s top designers, some info about what’s happening across the island and a showcase of some top notch websites.

Read the full article here.

p.s. sorry if none of your sites are featured - don’t take it personally, there are only so many I can fit in.

Submit your site to WebDesignire so I can feature it next time

If you’re up-to-date with your CSS knowledge, you’ll know that CSS 3 has introduced rounded corners, among other ‘goodies’. The problem is though that IE doesn’t support CSS 3 yet but Firefox, Safari and Chrome do.

Some CSS 3 techniques I’ve been using on Sharethrough and Lookaly:

CSS 3 rounded corners

div{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

CSS 3 text shadow

div{
text-shadow: -1px -1px 3px rgba(0,0,0,0.25);
}

CSS 3 box shadow

img{
-webkit-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
-moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
}

But how do you deal with clients?

This is where it gets tricky. If you show a client a mockup with rounded corners and the final solution doesn’t have these (because they use IE) they’ll probably not be too happy.

If you’re working with computer savvy clients, who use Safari or Firefox, they should understand. If you’re working on your own personal or side project, happy days. If not, you can try Andy Clarke’s approach of designing in the browser. Time to stop showing clients static design visuals is a very good article about skipping the static mockup stage.

Conclusion

The point I’m trying to make here is that as long as it looks OK in all browsers, we can afford to take liberties when it comes to making it look nicer for those who use Firefox and Safari. Most designers use Firefox or Safari and they’ll appreciate the rounded corners more. IE users *probably* don’t care.

What do you think? Have you started using CSS 3 in your designs? Do you think IE users should get to see the rounded corners too? Share your thoughts below.

Rather than listing everything that was talked about over the 2 day event I’ve put together some notes on things that stood out.

280 Atlas

Atlas is a development environment for building web/desktop apps with Cappuccino. Looks really easy to setup and should be available in November - check out the demo below.

PayPal Change How We Pay

PayPal are opening up their platform. What does this mean? Check out the ‘Anthem Video’ below.

Facebook Connect Wizard

Facebook now has an easier way for you to setup Facebook connect on your site. Check out Facebook Connect Wizard.

HTML5

Bruce Lawson gave a great talk on HTML5. I’m definitely a lot more excited about it now.

Check out HTML5 Demos for some cool examples (best viewed in Opera).

Go Test It

Go Test It is a useful tool for running website tests across various browsers. Sign up for a free trial.

Other speaker notes

• Addison Berry - Make your app ‘open’, the more open it is the more you will have people contributing for free
• Osama Bedier - Remove friction and enable innovation
• Chris Abad - praise your passionate community, incentivise users to market for you, make use of viral channels (e.g. Twitter updates)
• Robin Christopherson - 80% of Twitter is from mobile devices, captchas = 7% loss in conversions
• Alex Hunter - Be emotionally invested in your brand and be willing to risk your reputation on your app
• Lynne d Johnson - 35% of adults now have Facebook profiles
• Dave McClure - Less = more, remove features, focus on UX, make fast iterations and measure goals

As far as I know the videos of each talk will be uploaded shortly.

Met lots of great people at FOWA, all doing really interesting things. If there’s an opportunity for you to attend a future FOWA, take it

How can I learn how to build websites?

There are two approaches you can take to learning how to build websites.

1. Learn how to build websites
2. Learn how to build websites the right way, aka the Web Standardistas’ way

I built my first website over 10 years ago but it wasn’t until final year of my University degree course Interactive Multimedia Design (IMD) that I discovered how to build sites properly using well structured HTML and CSS. Before this I was using tables, unstructured markup and invalid HTML. Who do I have to thank for this? Chris Murphy and Nicklas Persson, two lecturers on the IMD course.

Now you don’t have to take a University course to be taught by these two world renowned mentors. They have branded themselves as the Standardistas and have put all their years of wisdom and knowledge on paper in the form of HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach.

This book will teach you how to build websites from scratch. Starting with the basics of semantic markup and how web pages work moving onto styling your first web page with CSS. It’s a one stop shop for putting together your first web site.

Who is it for?

• People who want to learn how to build websites
• Developers who need to brush up their front end markup skills
• Designers who are using outdated techniques e.g. tables, to build websites
• Professionals who want to earn the badge of a Web Standardista

Benefits of the Web Standardistas’ approach

• Separates content and presentation (easier to update layouts)
• Reduced markup (reducing page download times)
• Increased accessibility (for screen readers and other platforms)
• Cross browser compatibility
• Forward compatibility

Recommended

It’s an easily read book, clearly laid out with lots of code examples to help you get started. After reading this you’ll be able to build websites with your eyes closed.

• The Book
• Web Standardistas website
• @standardistas on Twitter

iPhone GUI PSD

First lets get you started with the iPhone GUI PSD file from Teehan + Lax. This contains the iPhone and all the iPhone elements you need when creating your iPhone interface. Very handy, in PSD format for Photoshop.

Showcase of websites with iPhones

Now for some inspiration.

Tea Round App

First & 20

Classics

June Cloud

Zumobi

Graphik

dBelement

Firetask

Tweetie

Bottle Rocket Apps

Snow Reports

Wordpress

Paraply

Voxtopia

Mock Draft

Cellar

Satisfaction Remote

Bird Feed

Tapbots

Pokeseo

Has anyone developed an iPhone app or have you designed a website for an app?

It’s an extra field

For me, I don’t think you do need to confirm your password. It’s an extra field to fill in therefore it takes extra time to complete sign up, so the more fields there are to complete the more I’ll think twice about signing up.

But what if I misspell my password?

A password field will be starred out i.e. you don’t see what you’re typing, which means you could easily make a mistake and submit the wrong password without knowing.

This is where the ‘Forget your password‘ function comes in handy, which is an inconvenience but will have you up and running again with your old/new password in a couple of minutes.

Sign up forms with confirm password

WuFoo

GMail

Basecamp

Sign up forms without confirm password

Twitter

Facebook

Tumblr

What you think on Twitter

What’s everyones thoughts on confirm/verify password fields on sign up. Are they necessary?

I’d say if you have a FOOLPROOF password reset mechanism it’s ok, but remember users are always the weak link.

Annoying and not needed if there’s decent ‘forgot your password’ functionality later in the game.

yes! either that or do what neilsen suggests and make password fields plain text…

Confirm/Verify just a nuisance to me, I use 1Password or Textexpander to fill that in, so it just makes me paste twice

They are useful, but not necessary, somehow it looks unfriendly, like mistrusting the user.

Unnecessary. The iphone Password system is good. You see the char you typed for 1 sec then it disappears

I despise them. Just make sure they have a means of getting back in if they do manage to mess it up

They don’t bother me so much, handy for the odd times when a typo is entered into a password field during a rushed sign-up.

Yes. A large portion of support calls to clients regarding log in issues were reduced when we introduced a p/word confirm field.

i would think so, just incase you mistype it =)

To confirm or not to confirm?

What is the best route to take if designing/developing a sign up form? Have an extra field to verify the password or forget about the extra field and assume if the user makes a mistake they can use the forgotten password link? Or is there something else about the confirm password field that I’m overlooking here?

Let me know what you think as a user and your reasoning behind your preference.

I’ll be joining the lineup of Andy Clarke, Drew McLellan, Web Standardistas and others.

The Belfast event is being held in W5 at The Odyssey starting at 8.45am.

Tickets are still available at £59 (bargain for a FOWD event).

I’ll be talking about ‘Rounding the edges of your website‘:

• Minor adjustments to ensure your user has an enjoyable experience
• How to optimise your site for optimal performance
• Essential checks before launching your website

Further links:

• Check out the schedule
• Check out the speaker list
• More Carsonified events

I’m very excited about the event and hope to see a lot of you there. Who’s going?

Overview

I was recently hired by Newsgroup Direct (NGD), a leading Usenet newsgroup service provider, to revamp their website, make it more modern and improve signups.

Here is their previous design.

Planning

The first thing that happens when I get an enquiry is I send the potential client a website planner. The website planner, a series of questions I have listed in a Word document, will gather requirements for the project.

The key objectives of the planner:

• Find out who the client is and what they do
• Who their target market/user is
• Who their competition is
• What deliverables they want from me
• Timeframe and budget

In a nutshell, NGD require a makeover with a modern & easy to use interface. I am responsible for the XHTML/CSS templates for the main pages (they already have a development team in place for the back-end programming & intagration).

Research & Ideas

Current site

I start by going through the current website and list things that can be improved.

Various issues raised for NGD include non-semantic markup, no defensive design, markup was invalid, poor Google ranking for keywords, no signup enticement, overload of available sign up options and several usability issues.

NGD had over 40 packages to choose from, which can be too overwhelming for the average user.

Competitors sites

The next stage is to analyse competitor websites; what is good or bad about them. If I can take on board what is good and eliminate what is bad, then there’s a better chance of coming up with a successful solution.

Ideas

I suggest several improvements that can be made to the current site, showcase various features of other non-related sites that I feel can be integrated into the new site.

Several ideas I have for NGD:

• Clear instructions on how to use NGD and setup newsreaders for novice users
• New logo to reflect new branding
• Narrow down the packages (introduce a free package for trial)
• Clear call to actions
• Highlight the key features of NGD with a slide reel in the header

Logo

Depending on the project new branding may be necessary including logo, stationary, company image and the website.

To help with their new online branding, I recommended NGD have a new logo designed & I suggested a couple of professional logo designers I know or have worked with. They went with Graham Smith, a well respected and well known graphic designer from the UK.

Graham did a great job with the logo and this was the final outcome.

Information Architecture & Sitemap

I should mention here that at each stage I get feedback from the client and discuss it. It’s important to make sure they’re involved the whole way through the process.

For IA I jot down every section of the website on post-its and arrange them (on a wall or fridge) in order of importance. This is an great technique (that I was first introduced to by Front) that allows you to easily change and rearrange your order. In the end you will end up with various levels of importance, which will help with your sitemap and wireframes.

Once I settle on the IA I produce a sitemap. I usually produce the sitemap in Illustrator. The reason I use Illustrator is it allows me to move pages about (unlike using paper) and it also produces a professional outcome that I can pass onto the client, but there are various other tools you can use.

Wireframes

I start by sketching wireframes and then move onto Illustrator to produce more professional looking wireframes that I can pass onto the client and depending on the project I could produce 1, 2 or 3 wireframes.

For NGD I only produced 1 that was the homepage as this is the most important page while I kept the other pages (pricing, info pages etc.) as paper sketches.

Mockups

Once the client is happy with the wireframes it is time to open Photoshop and start with a fresh canvas. The good thing about this process is that I now have a wireframe to build the design over.

Some key things to keep in mind here:

• Branding - tying in with the overall brand, colours, mood
• Target audience - NGD’s audience are 20-35yr old males so it has to appeal to them
• Grid - keeping the elements structured and to a grid system is important
• Development - bare in mind this has to be produced in CSS so don’t make anything too complicated and keep graphics minimal

Homepage mockup

Implementation

All good to go, the front end development process starts and I produce templates for:

• Homepage
• About Us
• Pricing
• Sign Up

I also produce a template that has various other styled elements that the NGD developers can use if need be, which includes tables, forms, buttons, alerts etc.

Completion

The project is complete and the templates are then passed onto the client (in this case NGD’s development team to integrate into the framework).

After launch I will still monitor the analytics and make suggestions on how to improve the site and conversion rate. It’s hard (or impossible) to get it perfect first time, there are always things you can learn from how the users use the site and make improvements based on this.

What’s your process involve?

Insights are always interesting and useful. Even if you’re not a web designer, it’s good to hear how projects develop.

• Going through emails
• Sending website planners to potential clients
• Reading and replying to returned website planners
• Quoting people for services
• Sending proposals
• Replying to current clients about different enquiries
• Going through new Twitter followers
• Tweeting
• Approving blog comments
• Replying to friends
• Writing blog posts
• etc.

After going through all these daily tasks, it can be very easy to see your day come and go without getting any ‘real’ work done.

When I finished University and started freelancing full time I found myself getting caught up with these daily tasks so I went about making some changes and trying to find a more effective way of dealing with them. Here are several techniques I use for getting more done.

Email

Cancel blog comment alerts

Cancel any automatic email alerts from your various blogs. This means you’re not notified of any new comments or any comments waiting approval.

Instead, put these on a ‘To-Check’ list so when you have 5 minutes free in the morning/evening, you can check these sites for comments. This saves you being concerned with checking throughout the day.

Unsubscribe to newsletters

You probably get a lot of newsletters through to your email, most of which you have no interest in. It can be easy to delete/ignore them but instead make an effort to unsubscribe to any that are no use. This way they don’t clutter up your inbox at all.

Check email twice a day

This is a hard one and I’m still getting used to it. Ideally you should only check your emails twice per day. The ideal times are 12pm and 4pm (unless you’re expecting an important email/reply).

This gives you time in the morning to concentrate on work already planned and also lets you correspond with anyone between 12 & 4. No in-between wasting time. Every time you check your email it takes up a few seconds or even minutes so it’s good practice to batch process this.

The best way to accomplish this is to keep your mail app, Gmail etc. closed.

Use templates

As a freelance web designer I get a lot of requests for quotes or to see if I’m interested in taking on a project. To let me find out more about a project I will send out a website planner to gather requirements.

Rather than writing the same email everytime you receive an enquiry, have a template that you can use. This way you can copy and paste the template into the reply, and simply add the senders name at the start to personalise it.

Some email templates you should have to hand (as a freelance web designer):

• I’d like to find out more, please complete this website planner
• Sorry but I’m busy until…
• Proposal and estimate attached

And of course have Word (or similar) templates ready for your proposals, contracts, invoices etc. Any document that you’re going to need more than once.

Twitter

Tweet in advance

I like to share interesting links and articles with my followers and usually I’ll find these links while going through my RSS reader. But if I’m checking my feeds first thing in the morning, it’s a bit of a waste to tweet all the interesting links at once that early. So how do I spread out my tweets? I use Tweet Later.

Tweet Later is a useful service that lets you set a time to publish your tweet. Very handy for spreading out all those useful tweets throughout the day. RTweeter is another new Twitter app that lets you schedule tweets.

Use Tweetdeck to filter your Twitter friends and replies

It’s hard to keep track of what everyone is doing on Twitter if you follow more than 100 people. Using Tweetdeck you can setup filters which will group particular users into 1 column. This way you can keep track of the designers you’re interested in or keep track of local tweets, keywords or business related words that you’re interested in.

Cancel Twitter follower alerts

This also comes down under email distractions. Turn off automatic emails for new followers but make a point of checking your new followers at 1 point during the day. Again an example of batch processing a task.

Blogs

Read blog posts for 1 hour in the morning/night

It’s crazy how many interesting blog posts there are out there and it takes forever to go through them. Go through your RSS reader for 1 hour in the morning instead of receiving alerts throughout the day.

But what about all the interesting links appearing on Twitter during the day? Usually all these posts may appear in your reader too but if there’s a particularly interesting one drag it into a ‘To read’ folder saved in your browser favourites.

Only check analytics once a week

It’s very easy to get drawn into checking analytics multiple times a day. It’s always good to see your visitor count go up.

But instead of wasting your time checking all your websites stats daily, its much more useful to check at the end of every week and every month as this gives you a better bulk overview of your true stats.

Use a desktop blogging app to continuously write notes for blog posts

Using MarsEdit you can continuously take notes for different blog posts throughout the week, then when you have time take a look at all of the blog post ideas you’ve jotted down and finish one before publishing it. This works a lot better than sitting down to a blank canvas and MarsEdit saves you having to open up your Wordpress admin area each time.

How do you get things done?

These are some of the techniques I have introduced to getting things done.

Are there any special tips or techniques you will use to get things done? I would still like to get more work done during the day so it would be great if you could contribute some suggestions.