Tables are great for displaying data and getting complex analysis data across. But who are we kidding, this is the internet. I know I for one have the attention span of a goldfish. A picture or a graph say more than a thousand words have never been truer than it is today. I’ve collected a list of jQuery plugins to help you make nice looking graphs and charts from your data.

jqbargraph

Great looking bar graphs with jQuery. Learn more about it here.

jQuery Visualize Plugin

Really the all in one of jQuery charts, it comes with editable tables that will change the charts on the fly. A really cool plugin form filamentgroup

JGcharts

JGcharts is a simple looking chart plugin with the nice little 3d pie chart feature.

jQchart

A great looking bar chart plugin with a ton of options available.

Flot

Flot is a great jQuery plugin, that is easily customisable to fit you needs, and it has a nice hover function similar to google analytics.

jQuery Sparkline

A lightweight and easy-to-use charts plugin for when you don’t need something too fancy. Sparkline might be what you are looking for.

jQuery plugin for canvas pies

Nice and simple canvas pies.

TufteGraph

Good plugin with some easy-to-use options.

Horizontal Bar Graph in jQuery

This is a small plugin with horizontal bars. Might not be the prettiest around but it’s a solid plugin, that might be a better fit for you than some of the bigger plugins in the list.

JQplot

BIG plugin with a ton of options to choose from. These guys have done a great job of making a really really good jQuery charting plugin.

That’s 10 really useful jQuery plugins to do help draw some pretty graphs from your data, have I missed any? Please share your favorite plugins down below.

Getting a favicon on your website is a great way to help your visitor find your website, in their bookmarks. If you do not know what a favicon is, it’s the small icon next to the URL in the address bar of your browser. It’s also shown besides bookmarks in all common browsers. It’s a great little something extra to have on your website. I am going to show you how to do it in Photoshop. Now if you are not a designer or use Photoshop you can do it using one of the online makers like favicon.cc.

So here is just a quick run-through of how to make a favicon for your website in Photoshop.

First Photoshop, isn’t able to save images as .ico files by default, so you’ll need to download a plugin. You can download it completely free here. You just download it and follow the instructions on where to put it. on Windows and Photoshop CS3 its Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats. Then just do a quick restart of Photoshop.

Now make a new image that’s 16×16 pixels and start creating you icon. Don’t give it too much detail at it’ll just make it look messy.

When you are done creating you icon save it as a ICO file. Select it from the Format dropdown and save it as favicon.ico.

Now that it’s saved, upload it to your website (often done via FTP).

Now go into the head section of your html files or if you are using something like wordpress you’ll find it in header.php and add the following html code:  <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />

That’s it. Your done. Now you need to have a bit of patience as it might take some time for your browser to register the icon, some browsers might loose it from time to time, but you don’t need to change anything to get it back.

I’ve tried out a couple of different CMS systems lately and have had a chance to look at the back-end of some rather small, local sites. And boy there’s a lot of different ways to go about giving clients access. Some of them have full access to every corner of the CMS and some aren’t even able to make new pages or content elements.  My question is are you providing a user-friendly solution to your clients? Do your clients agree with your answer?

Are some of your clients suddenly getting their websites redesigned by other people than you? If this is happening to you, here is one scenario that might have happened.

Sales guy call your (former) client, let’s call him architect Jim.

Sales guy ask: Do you find it hard to update your website with new information?

Jim: Actually, yes. I find it hard to upload pictures and getting them aligned as I want them.

Sales guy: Well I think I have a solution that can help you with that. uploading images is a easy as getting them from you digital camera to your computer. If you have a minute why do I show you how it’s done on this little test site. Go to www.testdomain.com/admin/ and login.

And over the course of a couple of minutes they have together made a new page and uploaded images into an easy to use image gallery. Your client is now your former client, if your solution is not easy enough to use.

So what can you do about it?

Well here’s the thing, you might be using a great CMS solution, that’s really easy to use. But are you making sure that you are not providing too many options for you client?

What’s does this button do?

Cutting down on options is the easiest way to make clients happier about their website. Ex. if you are using wordpress as a CMS and you client is only supposed to use pages. Make sure he can’t see posts, settings, themes etc. He doesn’t need them so don’t let him see them. So hide them. By all means give your client a full login, but keep his work load down to a minimum. Make it easy to update the website. You client will be happier, will keep their site updated and will tell their friends about your services.

Of course there are a lot of other things, you can do to make CMS systems easier to use for non-technical clients.

• Make sure that the CMS is in their language if you work in non-english speaking countries.
• Some systems have built in help that isn’t turned on by default, enable those.
• If you are adding features to the system, make sure they are following the same principles as the system itself.

Make sure you deliver a solution that is easy to use and just works.

First impressions, they are a bitch ain’t they? Everybody has had a bad day when they are not looking their best at a party or an event. And then there’s that feeling. The feeling that no matter what you say, no matter what you do, people are going to keep looking at you funny, like you are not the fastest moped on the harbour, like you are a loser. Guess what, people can give your website that look too.

Looking like a teenager

Let’s face it, you don’t see many baggy-pants and converse sneakers at board meetings, but on many mid-level company websites you can still go and see every freaking color from the photoshop crayon box splashed around in unimportant boxes and surprisingly enough some people still thing comic sans is a great font. The point is, if you are a serious company, serving serious people, you should make your website look professional and serious, the content on your website should look serious. The design should reflect that too.

Looking old and outdated

I’ll only say this once so pay attention: IF your site isn’t being update regularly, DO not put a last updated text on it. In general their is no need for a last updated text on websites, unless you are in the news business. Keep it away from your site. And don’t make references to last weeks meet-up, if you are not going to update your site for the next 3 years. It’s perfectly okay to have a great deal of old content on your site. It’s often really valuable to your visitors because the content is still worthwhile but the last updated tag can turn people off. As can a really outdated design. You don’t need the best design in the world. But a decent design will make your visitors stick a little bit better.

Looking like a con-artist

This one can be tricky, you want to get your great offer out there, so you make a good sales page listing every advantage of buying your product and your page doesn’t do well. When people get a good deal, they gladly take it. When they get a great deal, they start to wonder. What’s the catch? Is this guy legit? You really have to scrutinize your sales page and test it, make small changes to see what works for your customers. It’s not the same for every customergroup. You might have seen a website having a really spammy looking landing page, but that might actually be a really good converting page for that site. Now there are of course some things that will help for every site, things like:

• Display address and phone number on the page.
• Have your terms of service where people can find it.
• have a FAQ page on the site
• Display testimonials (REAL ones)
• Have a contact form

Give your visitors a good first impression and then you’ll have a much better chance of converting them into long time customers or returning visitors.

Print designers have a hard time adapting to webdesign. And I can understand why. We are required to think different, and more technical than usual. Lime green becomes #9dff33 and moving images around becomes waaayy more difficult! So here are some tips for starting out with designing for the web.

There are no such thing as a standard height!

I’ve worked with a bunch of graphic designers, taking their PSD files and making a website that actually work from it. And often they want their site to be 500 pixels high. Why would you limit your website content like that. People will scroll if you have something good to say or show them. And you have no idea how high your users browser screen is anyway. Make a design that will work with scrolling and you are much better of.

I Want to use “ITC Avant Garde Gothic Extra Light Oblique” for all headlines!

Or any other font for that matter. If you want to use special fonts, you have two options. Images or a replacement technique like Cufon or sIFR. It is possible, but please do it the right way and don’t just try to make it work through your normal font-family call in CSS.

Keep your html clean

There is really no reason to over specify everything in your html. Use your CSS to do things like .content h2 {} instead of h2.headlinecontent {}. And please try to stir away from “div soup (unnecessary div tags)” – It has a really bad taste No seriously, keep your html as clean as possible, it will make your editing time much less and errors are easier to spot.

Making everything stick to the lower right corner is a REALLY bad idea

Oh yeah I’ve tried that. That gets really ugly when you resize your browser window Just don’t try to do it before you have the skill and knowledge to know the consequences.

Keep the focus on what matters!

The Content, the product – That should be your main focus. Designers that have works in the news field especially has a tendency to clutter up their first web layouts with way too many flashy objects that take focus away from products and content on the page. Just being aware of this fact will make you a great deal better at webdesign. Most designers from the print world seem to forget this when creating websites even though they are great at doing it when they work on printed mediums.

Just a couple of small tips on going from print to web. And if you are looking to expand skill set to the online world. Then it is really just a matter of putting in the time to learn it. It’s easy enough if you work at it. And if you want more tips on how to do it, you are more than welcome to contact me.

Getting the perfect website designed – the last 10% will cost you more that the first 90%

Most webdesigners have had clients that wanted the perfect website for their business and that is a nice goal to have. But getting there will take a lot more effort and money, than getting a website that’s great, but not perfect.

I might be letting some big cat out the bag here but having the prettiest website does not make you content or your product great! Canned spam in a Louis Vuitton bag is still canned spam!

The devil is in the details

The small details that make a website perfect is time consuming. Really time consuming. Getting that line just right and that headline just a little more blue will use up a lot of time. Not only the designers time, but also the clients time. That’s okay if you have the money to do it but a lot of small business’ don’t have that. And more importantly they don’t have the time. Does that mean that they shouldn’t put up a website? No, get a proper site up and starting making yourself visible.

Getting the the website online is only half the story

When you get your site up you are only half way there, now starts the long process of getting people on to your site and converting them into costumers. And that, is the really hard part cause there is not way around this without hard work!

Sometimes it’s better to stop at 95%

Having a perfectly designed website does not guarantee that your website will be a success. The internet is a big place and I’m sure you’re not the only one trying to sell, what you are selling. Have you put some money aside for a marketing campaign? The people you are up against have.

You might think that getting a website up will give you more business. Well It won’t. If you are not going to commit long-term to making your website visible and keeping it up to date, then save your money and find something better to do.

If you have a budget that’s $10.000 for your website. How much of it are you going to spend on promotion? At least half if you ask me.

Now could we please lay the assumption to rest that online business is make and forget! It’s hard work and you are up against people that are willing to work harder and longer than you.

Now have a nice day, and get back to work

Page speed is all the rage right now. And although wordpress is a fast blogging platform, it can get really bloated, really quick. With all the free plugins and themes using a lot of requests. Here are some tips to get a faster loading wordpress blog.

First Grab yourself some tools to measure the speed

Get yourself some tools to test your speed.
Yahoo’s Yslow, Firebug firefox extension, google pagespeed are just some of the speed tools out there. Try them out to see which one you like.

Backup everything!

Make yourself a backup of all your Wordpress files and you database. Just to be save

And lets get on with it.

Cut down on javascript files and minify the javascript and css files

Every request you send out will take time. And having a lot of Javascripts files is a real killer.

Put your javascripts after your CSS files

CSS files can load at the same time, javascript can’t. so put your CSS files before your js files. This will save a bit of time, but it will also give the illusion of a fast loading site as your elements will be styled earlier.

Compress your images to the right format and the right size

Getting your images down to the right size and getting them properly compressed isn’t as hard as you might think. Use photoshop if you have it or try something like SmushIt. And If you are using photoshop you can read about compression and save for web here.

Optimize your SQL database

Go into your phpMyAdmin, Select all tables, click repair and then click optimize. This can work wonders and takes very little work. You can even get and extension for it here from Yoast.

Leverage GZip if you have access to your servers

GZip will compress your content before sending it to your users. It is a bit technical and you will need some server knowhow to do it.

Save on http requests with CSS sprites

Try putting your graphics in a sprite image to save http requests, It helps a lot on graphic heavy sites. Here’s a in-depth explanation on how to use CSS sprites.

Hardcoding your wordpress header, sidebar and footer to cut down on the php calls

Hardcode as many of the php calls in your theme as you can. It’ll cut your loadtime in half if you have a lot of them. Thanks to Justin Parks for the tip.

Cache your pages

Caching your pages will make a static copy of your pages on your server which will load faster than a normal wordpress page. There are some good wordpress extensions for this. The most popular are WP-Cache or WP-Super-Cache.

Analytics code

Watch how long your analytics code takes to load, it can be a killer. If you are using google analytics, switch to the new asynchronous tracking code. Read about it here. It can save a small amount of loading.

That’s all the tips I have for now. Happy Holidays everyone!

Save for web and devices in photoshop, seems like a relatively easy feature to get your head around. But still I see a lot of graphic designers and webdesigners not using it properly. So here are some basic tips to get smaller images without loosing quality.

Use the right format (PNG, JPG, GIF)

First you should decide which format will let you keep the most details with the least amount of diskspace used. My rule of thumb is JPG for photos, PNG for graphics and GIF for Transparent graphics (Some older browsers have problems with png transparency). But you should still check the file size of the different settings as every image is different.

JPG

What to look out for here:

ICC Profile
Decide whether or not to keep the ICC profile on.

Progressive
Progressive can save you a couple of kb’s by letting the file be downloaded in chunks.

Quality
Play around with the quality setting to get the smallest acceptable size.

PNG

In the PNG setup you should look out for:

Number of colors included
Don’t include colors that are not needed.

Tranparency
Don’t click this if you don’t need it.

Color reduction algoritm
Here I use Perceptual on most things.

GIF

GIF have the same features as PNG and you should still look out for:

Number of colors included
Don’t include colors that are not needed.

Tranparency
Don’t click this if you don’t need it.

Color reduction algoritm
Here I use Perceptual on most things.

So next time you use save for web, play around with it a bit instead of just hitting the save button, and you’ll get a much better result.

Print designers struggle, when they have to make a web layout. And with good reason, websites don’t have the same dimension constraints and a web page calls for a more fluid layout. Some things are not easy, nor smart, to do on the web. Drop caps, Image wraps, large images just to mention some. But we should learn from print designers. They make great designs in the offline world and some it can be used online too. Below you’ll find 5 things to look out for and some examples of webdesigns that already use these techniques.

Header spacing

Print designers play around with letter spacing in headlines to make them more readable and make them look more dynamic. On the web we have limited tools for this but play around with the letter-spacing and line-height properties in the CSS for your headlines to get a better result.

Grab attention with type

Print designers play around with headline designs all the time, changing the fonts, doing different colors and adding effects. Try that out on the web too. Use Cufon or sIFR to use special fonts and effects on your headlines.

Freelance Switch using sIFR for a fancy headline

Whitespace is key

Magazine designers have whitespace down to a fine art, and web designers are getting better at it. Give your elements breathing room. Margins and paddings will make your pages easy to browse through. And that is what people do on the web. They browse. They don’t read every word. A bit of whitespace might make them read a bit more or come back.

Zenhabits using a lot of whitespace to bring focus to the content

An image says more than a thousand words

Print designers love putting big images in and around their content, but for some strange reason this has been avoided by a lot of webdesigners. But the internet is up to a nice speed for most people now, it might be time to consider using more and bigger images in your content as it makes your content more interesting.

Problogger using an image to let you know what the post is about

All elements aren’t equal

Get attention to what’s important on the page. Try using boxes, images or pull quotes to get your readers to look at what’s important on your site.

HUGE inc. - Tell me, where are you looking?

So remember that for your next design. Think a bit more like a print designer.

Wordpress is really easy to install. It only takes about 5 minutes. But there are some easy changes you should do when you install wordpress to save time and energy later. Here are 5 things to remember when you are setting up a fresh wordpress install.

1. Change your password

Change the autogenerated password for your blog. Should be a nobrainer.

2. Change the display name on your your profile

Change the information on your profile. Else your comment replies will be from “admin”.

3. Change your permalink structure

Get yourself a better permalink structure, and get some nice looking URL’s. I recommend /%postname%/ cause it gives nice short URL’s but use the one that fits your need.

4. Change your about page

Nothing says new wordpress site more than a This is you about page page. Change it into something useful. Same goes for the classic “Hello World!” post. Delete it.

5. Install the basic plugins

There are a ton of plugins for wordpress, that will help you get the most out of wordpress. I have a couple that I use on almost every wordpress install I do.

Akismet – Will help reduce the spam comments on your site, and make your moderation a bit easier. A big help when your pick up a bit of momentum. And it’s already included in wordpress. You just need to get the API key from wordpress.com

WP-DB-Backup – Servers break down, harddrives crash. I keep a local backup of my database and this plugin helps make it easy. One less thing to worry about.

Google XML Sitemaps – Automatically generate and update an xml sitemap for your site.

All-in-one SEO plugin – Gives you some posibilities to make your titles and meta description unique for each page.

WP-Cache – Will help your site if you are on a slower hosting account or if you are getting more traffic than expected. It caches your page which takes down the number of requests to your server.

That should give you are nice foundation for your blog.