I have an example of a company that I think is well on its way to succeed with the use of social media in their marketing strategy. And for the sake of clarity, I have not worked with this company in any way. This is just a neutral observation from a satisfied customer.

Postbanken (one of Norway’s largest and most traditional banks) has created a blog where one of their consumer economists gives advice about personal finance. She encourage users to ask about things that concern them within the economy. Commenting on posts requires no registration and anyone can participate in dialogue with the bank representative. The people behind the blog have enough confidence that the comments that are posted are of relevance, that they’re not held for moderation before they are published. If any inappropriate comments should show up, there will be no problem to remove them within a short amount of time.

However although the blogposts are well written and they encourage anyone to comment, it doesn’t help very much if nobody knows the blog exists.

The bank has made some cheap but smart moves on marketing the blog. By linking directly to the blog on the banks main page, it’s clear that the project is a priority at the top of the organization. Putting a banner on the first page surely doesn’t cost a lot of money, and it ensures that most of their customers are made aware that they can go there if they need any financial advice.

The bank’s consumer economist is also present on Twitter, and it appears that she understands the importance of participating in the debate, listen to people’s opinions and last but not least, share knowledge. She follows everyone that follows her, which suggests that she is equally interested in your opinions as you are in hers. Big thumbs up!

Examples of other companies that are active in the social media sphere are Stormberg, Ludo Mobil and Kvasir.

Do you have any examples of good (or bad) business presence in social media?

More creative business cards

Do also check out the Business Card set on Flickr, the art of the business card and Inspiredology.

Websites designed for large screens can be a pain to navigate on mobile devices such as iPhones. Webdesigners should therefore consider creating alternative layouts to ensure optimal user experience for users on the move.

There is much to think about when designing for mobile devices. A List Apart has compiled many of these thoughts in a brilliant article which can be found here. I think this sums up some of the most important:

Mobile users operate in a very different usage context than PC users, and providing them with an experience customized to their needs is likely to be the best service you can offer to them.

Simulate the iPhone browser on your computer

If you don’t have an iPhone, you can easily simulate how any website will appear in a mobile browser just by using Safari (click on the links for screenshots):

1. Open Safari and click “Preferences”
2. Select “Advanced” and check the “Show Develop menu in menu bar”
3. Select Developer in the menu bar and click “User Agent> Mobile Safari 3.0 – iPhone”
4. Type any URL and see how the website will appear on an iPhone

Voila! Your web pages will appear as they would appear on an iPhone.

As you can see on these screendumps, BBC, CNN, and this blog has (at least) one thing in common: They have a customized layout for iPhone users:

Easy to install plugin for WordPress

If your site is powered by WordPress, you can customize the layout for various mobile devices with a few keystrokes. The plugin WPtouch iPhone Theme allows you to make a range of settings and can customize the layout automatically for smartphone, blackberry, android, iPhone and others.

Is your website a breeze to browse on iPhones, smartphones or androids?

1. Be clear on your purpose

Before you start up a new web project, it’s important that you at least have made up some thoughts about the purpose of what you’re doing. Do some research, establish your target audience, study other websites within your industry and ask yourself what you would do differently. Find some paper, a pencil, make some coffee and start sketching.

2. Content is king

In my opinion content is that most important thing on ANY website. Content can be creative work, such as text, graphics, images or video. Without content appealing to your audience your website is likely to fail, regardsless of other design factors. Great special effects and visually appealing animations are not going to help you out if your content is crap. (But as a designer I will be the first to admit that good and proper use of design is important to emphasize your expression and support the content).

Your chosen target audience should influence every single decision you make in relation to the design and content of your website.

Always keep your reader in mind and use words that your audience understands.

A common mistake that many make is to forget who their readers are. Always keep your reader in mind and use words that your audience understands. Will your readers care about all the internal news and excerpts from an annual report that you put on the front page of your website? Peel away that which is not likely to be read and focus on your core values for your website instad.

And don’t save the best for last. Place your most important content high on the page. Also check your page display with different screen resolutions to make sure that your most important content is visible for users with screen resolution of 1024×768. (Tip: You can easily resize your browser window to emulate different screen resolutions with the Web Developer toolbar for Firefox)

3. Make your website easy to navigate

Intuitive navigation is a key factor to retain your users. To avoid confusion, it is wise to implement an universal navigation element with consistent placement on all of your pages. If you’re planning a site with lots of content and multiple levels with navigation, your users will most likely appreciate if your have their path visualized with some kind of breadcrumb trails.

If you’re unsure about breadcrumb trails, I’d recommend that you check out this article on Smashing Magazine.

4. What to focus on: Usability, functionality or design?

Yes, it is possible to combine these things. I think Apple’s website is a good example of this. Steve Jobs (Co-Founder and CEO, Apple Inc.) once said:

Design is not how it looks and feels,
design is how it works.

In other words, design is much more than just smooth buttons, rounded corners and drop shadows. For me, good design is to make things workable, usable and lovable.

If you have a clear idea of what you want to accomplish (see first paragraph), you can achieve this goal if you pay attention to usability, functionality and design (and your content of course).

5. Make your website easy to read with proper use of contrast

This may seem obvious, but it’s important that text and graphic have sufficient contrast compared to its background. People browsing your website under less than ideal circumstances (such as a bad monitor or sunlight hitting the screen) may not be able to read your content. Of course you don’t want that to happen.

Here is a list of web based tools you can use to check the contrast in your design:

Colour Contrast Check:
This tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.

Colour Contrast Analyser Firefox Extension:
This Firefox extension finds all text elements in a document and examines the differnce between foreground and background colours for them. It displays the resultes in a new tab, complete with previews of the colours. You need a HTML document for this plugin to work.

CSS Analyser:
The CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.

6. Consistency throughout the site

All your graphic elements, images, typefaces, headings and footers should remain consistent throughout your website. There are many methods of ensuring consistency. One of them is to use Cascading Style Sheets (CSS), where you can easily specify that the text on every page should display as 11pt Verdana, all headings (h1, h2, h3) red etc.

Consistency is very important in webdesign because it makes the reader do less thinking. I can recommend Steve Krugs book: Don’t make me think which is an excellent book on web usability.

7. Know the rules before you break them

In webdesign there are at least 10 rules you should know. But these rules are not enforced by anyone and should be broken when necessary, especially when breaking them would lead to a stunning design. Webdesignersdepot has written a good blogpost on this.

• Rule #1: Do not display the horizontal scrollbar
• Rule #2: Use a minimal number of font faces
• Rule #3: Do not use to many colors
• Rule #4: Make your site’s goal obvious
• Rule #5: Navigation should be easy to figure out
• Rule #6: Use different colors for the text and background
• Rule #7: Don’t put animation in the way of your content
• Rule #8: Stick to web-safe fonts
• Rule #9: Don’t have a splash/landing page
• Rule #10: Don’t use tables

Read the full blogpost from Webdesignersdepot here:
http://www.webdesignerdepot.com/2009/06/10-web-design-rules-that-you-can-break/

8. Design for different screen resolutions

If your chosen audience are a group of advanced computer geeks aged 18-30 years, there is a chance that most of your visitors will have monitors with higher screen resolution than 1024×768. Anyway, a rule of thumb is that your most important content should always be shown within this area. Your site could be considered safe from horizontal scrolling if you keep the width at a max of 960 pixels. I prefer to use the 960 grid framework when designing websites.

9. Consider spending some time cross browser testing

Let’s admit it! Cross browser testing can be a nightmare for Web Developers. Even if your HTML and CSS code validates by the standards set by W3C, it is not certain that your layout will display properly in Internet Explorer (IE). According to statistics 65% of Norwegian internet users are surfing the web with various  versions of IE. Only 7% are using IE6, so I don’t bother spending hours tweaking hacks for this outdated browser. Unfortunately 39% of the Norwegian population are surfing with IE (that despite the fact that it is much better than its predecessor, also has obvious errors), so I’ve made an effort making a specific stylesheet for this browser version.

I would recommend IETester, which is a free program that lets you simulate all versions of Internet Explorer at once without any complicated installation processes. Download IETester here.

Also check out Designm.ag ’s blogspost on 10 helpful resources for cross browser testing.

10. Implement statistics for your website and use it

Statistics of the visitor behavior on your website can give you a good indication of what is more or less popular content. It can also give you valuable information about how long visitors stayed on your domain, which pages are most common exit pages, and not least where the visitors are referred from (direct traffic, site referrals or search engines). You can also obtain statistics on where your visitors are located geographically. If your website’s purpose is to promote a small jewelry store in Dallas, and 85% of your visitors seems to come from Sweden, it would perhaps be appropriate to consider implementation of some kind of webshop solution.

Google Analytics is one of the most popular free web analytics tools. Statcounter , Clicktale and Snoop are other free alternatives. I have good experience with using Google Analytics for my projects. It is relatively easy to implement, but is doesn’t really become useful until you digg into the user data and customize the content according to what your users are actually looking for.

Check out these simple but effective billboards. (Click on images to view full size)

Credits:
Advertising Agency: GPYR Brisbane, Australia
Creative Directors: David Joubert, Piet Human
Art Director: Adam Gower
Copywriter: Andrew Thompson
Retouch: John Shard
Account manager: Jess Hughes

When you’ve worked your way through prototypes, there are countless applications that can take you on to the fun part: creating beautiful web pages.

In this article I have compiled a list of top 5 most essential applications I use in my work as a web designer.

1. Adobe Photoshop CS4

This program is considered industry standard as it is the current market leader for commercial bitmap and image manipulation software. Despite the stiff price of $699, Photoshop is without doubt the preferred tool for serious designers worldwide.

If you’re a web developer or designer with a limited budget and less need for advanced functionality, you will go far with open source apps as GIMP (mac/pac) or Paint.NET (pc only). Both of these programs also allow you to import. PSD files.

Download trial: Adobe Photoshop CS4 (mac and pc)

2. Coda

There are countless types of text and code editors and correspondingly many opinions about what is best. But of all the editors I’ve used, Coda sticks out as the best. It has a relatively stiff price of $99 for a single user license, but the price can be justified by an incredibly intuitive interface, ability to collaborate in teams, customized add-on modules, spelling and subversion.

Text Mate is an option that also reap a lot of praise, but I have no first hand experience with this application. May be worth checking out.

Adobe Dreamweaver is probably one of the most well-known editors that works on both Mac and PC, but at a price of $ 399, Coda is for me without doubt the preferred option.

Download trial: Coda Panic (mac)

3. MAMP/XAMPP

This program lets your computer run as a test server during development of dynamic web pages. Whether you program in PHP, Perl or Python, you can work against a local MySQL database without the need to upload files to a remote server each time you make a code change.

Download freeware: MAMP (mac) or XAMPP (pc)

4. Mozilla Firefox (with Firebug)

For me, Mozilla Firefox is the preferred browser because of the huge variety of free add-ons and the large community of engaged developers and users. As far as I can see, Firebug will be the most essential plugin you’ll need in web development projects. This add-on allows you to debug and monitor CSS, HTML and JavaScript live in any web page.

Download freeware: Firefox (all platforms)

5. Transmit

If you are looking for an affordable FTP Client for Mac OSX, don’t look any further. Transmit comes with handy features such as uploading via dashboard widget or docking, support for. Mac and iDisk / WebDAV, Spotlight and Automator. The program costs $ 29.95, and a free trial is avaliable here.

If you only require a simple FTP Client without too much additional functionality, Cyberduck is a good and free alternative.

Download trial: Transmit (mac)
Download freeware: Cyberduck (mac)

Do you have any suggestions to other apps that could improve my workflow? Feel free to share your thoughts!

You get 2GB of space free of charge, and if you need more you can get 50GB for $9.99 per month or 100GB for 19.99 per month.

Dropbox also comes with a free iPhone application, so you can sync files on mac/pc and iPhone or iPod Touch. If you’re tired of cluttering with physical memory sticks or just want the advantage of saving stuff to an online syncronized folder, you should give this a try.

Visit this link to get a free dropbox!