designforweb.co.uk/blog

OK, this little niche trend is unlikely to become the next gradient or ‘wet floor’ but I thought I’d point it out all the same. I’m sure somebody somewhere will find this useful. ;-)

Whilst browsing through my recent inspiration bookmarks (I need to get a del.icio.us account so I can share all these with you) I noticed something rather odd about about the latest websites. Out of the last dozen or so half of them contained logos, emblems or illustration related to birds. Yes - birds. Examples follow.

See birds:

Conclusion: What to make of this?

I could make up a theory stating that spring (in the northern hemisphere) is on its way so were likely to see more nature in work.

I could make up a theory stating that use of birds are more likely to get the user to create a bookmark.

I could make up a theory stating that Paris Hilton said that ‘Birds are cool’ and therefore everyone has jumped on the proverbial bandwagon.

But I won’t. This was just meant to be a fun mini-post highlighting my surprise when I realised 50% of recent inspiration bookmarks were in some way related to our avian friends. Any more examples/bizarre theories are more than welcome.

Share This

I would like to share with our readers a list of websites where freelance web designers, coders, SEO specialists can easily find jobs. This also relates to non-IT professionals as many of these portals are oriented on all kind of projects.

It would be wise to choose 1-2 such project marketplaces you are going to use then pay for a professional business membership there, carefully fill the portfolio and start bidding on the projects. The initial stage is most difficult as when you have no experience, no feedback and no earnings this is displayed in your profile and you have to persuade people to give the project to you. Afterwards it becomes much easier.

So here it goes, the project marketplaces list

• http://www.rentacoder.com/
• http://www.guru.com/
• http://odesk.com/
• http://www.scriptlance.com/
• http://www.getafreelancer.com
• http://www.cgilance.com/
• http://www.elance.com/
• http://contractedwork.com/
• http://programmingbids.com/
• http://www.projectspring.com/
• http://www.smarterwork.com/
• http://www.freelancecenter.com/
• http://www.freelancewebprojects.com/
• http://www.totalfreelance.com/
• http://www.homeworkers.org/
• http://www.gofreelance.com/
• http://www.allfreelancework.com/
• http://www.freelancebbs.com/
• http://www.freelancebank.com/
• http://www.freelance-world.co.uk/

I can add from the personal experience that we have tried guru.com and elance, and have chosen the latter as the first project had come from it. Elance is also a very dynamic and easy to use system.
Hope this helps you to find the projects which are both interesting and well paid. Good luck in your work!

Taras Filatov, project manager, “DesignForWeb”

A while back I wrote 25 Ways To Improve Your Site Today. Many people thought it was useful. I’m trying again now with a twist. I’m offering you, dear reader, tips to improve your site in various ways - each one only taking approximately 5 minutes.

This is starting to sound like a one-page spammy advert (did I mention my advice is free free free!) so let’s get stuck in. After all, you only have 5 minutes to read this…

The Tips

Disclaimer: The tips I’ve come up with would take me about 5 minutes to complete on website’s I’ve built. Everyone builds sites differently so times may vary. :-)

Usability/Accessibility

1. Use your logo: Link it to your homepage. Sounds simple enough but it will save time for your users.
2. Make links obvious: It’s a quick job to style them so they contrast against regular body copy.
3. Make text readable: Don’t worry about cramming text so small so it stays ‘above the fold’ - let your text breathe by adding line height and space. And don’t be shy about increasing your font size.
4. Make a useful 404 page: Maybe put a few words to explain what a 404 error is and point people to your site map, homepage or search facility.
5. Offer a way to contact: Sounds simple, but if there is no way to contact you, people may not be able to tell you of issues on the site.

SEO

1. Add title attributes: Add relevant title attributes to your main navigation. It will strengthen on-page SEO with very little effort.
2. Create a Google site map: There are many generators and it only takes minutes. You can increase your website’s saturation almost instantly.
3. Optimise title tags: Check title tags are relevant on your key pages and improve them where necessary.
4. Check headers: Check that pages make use of H1, H2 and H3 tags. Check that these contain your main keywords (and still make perfect sense to the reader. No spammy tactics, else a kitten will tread on broken glass remember.)
5. Link from your copy: Often forgotten about, why not interlink from key pages deeper into the site?

Design/Development

1. Feedback: Get a few people to make one suggestion each about your site. It’s easy to be blind to mistakes on your own website.
2. Browsers: Check your main website’s functionality in (e-commerce/gallery etc) in as many browsers as possible. Note any issues to fix later.
3. Give direction: Your homepage isn’t an ‘about’ page. Give visitors a reason to click around. (Log in / Sign up / Request brochure etc.)
4. Let the user be in control: Avoid popups, resizers and all those nasty things. It’s the users browser, not yours. Most popups can simply be placed on a new page.
5. Animation: I’m not against a bit of useful animation, but don’t let images animate continually whilst the user is trying to read the content or look at a product. It’s like trying to sell a car to someone whilst dancing around distractingly in the background in a giant banana suit. Almost.

Content

1. Rewrite: Read your opening paragraph. If it doesn’t engage you then rewrite it.
2. Simplify: If you use too much jargon, replace as many instances as you can with clear wording. Jargon doesn’t help anyone.
3. RSS: Let your RSS feed be auto-discovered. It’s easier for the user to locate that way.
4. Don’t overdo it: People don’t have all day. Put key information in succinct paragraphs on the page. Waffling (except for around here!) is not for the web.
5. Accessible: Check that you can access all the key pages of your site as a first time user. You may need a volunteer or two to test this theory.

Off Site

1. Visibility: Check that you’re high in Google for your company name. If not, add a few links to your site with the company name in the link.
2. Be nice: Answer a question on a forum about your speciality. You’ll gain a friend and some respect. Authority = traffic.
3. Get involved: If you’re not on (by on I mean even a basic profile/listing) all of the cool places to hang out (Facebook for instance) then sign up. People may be looking for your services via these channels.
4. Read: Read stuff on the internet? But it’s all fake? I kid. Read a news story about your industry - it may come in handy as a reference.
5. Stay Ahead: Similar to the above, except this time keep an eye on new web technology. If you can use a new technology to your advantage and you get in there first then you may have just carved out a niche.

Helped?

I hope that helped out a few of you with little time on your hands. Let me know your quick tips by leaving a comment.

Share This

Well after owning my Dell 3100cn for a very very very long time, I've finally found out how to get rid of streaks that were running down the middle of the page on color prints.

Well today, I found an answer that immediately fixed the problem within about 2 minutes. I found a great article that shows that the culprit is bad design of the imaging drum inside the 3100cn. Here are the instructions on how to fix it: (This will void your warranty with Dell so DON'T DO THIS IF YOU DON'T WANT YOUR WARRANTY VOIDED. WE ARE NOT RESPONSIBLE FOR ANY DAMAGE THAT OCCURS FROM THESE STEPS:)

Well I am now very happy that my Dell 3100cn prints without any streaks. A little background will help you figure out why I'm so happy.

I got a Dell 3100cn printer a couple of years ago. I had a friend that had one and I loved the way it printed and everything about it, so I decided to get one of my own. After setting it up, I printed a few sheets and all of the color prints had streaks or lines that ran down the middle of the page at extremely regular intervals on every print. I called Dell and they shipped me a new printer drum. It didn't fix the problem. They had me ship the printer back and they sent me a used printer. (I was upset because I figured I'd get a new printer... but that is a different story.) This one wouldn't even fire up. It kept giving an error about temperature. They sent out a tech and he replaced some controller. It didn't fix the problem with the error message. So I sent that printer back to Dell.

Finally they sent me another printer that streaked again. I was fed up by then and found that if I printed enough pages the printer would "warm up" and the streaks would go away. So any time we wanted to print anything in color, we'd just print about 150 black and white pages of whatever and then print our color pages.

As we go about our online lives we are all exposed to “Calls To Action” on a day by day, and sometimes minute to minute, basis . This article examines what a Call To Action is and how you can make yours stronger than the competition.

What Is A Call To Action

Basically a “Call To Action” (CTA) is a section of text which tells the user to do something. For example “contact us today”, “find out more”, “register now” or the famous “click here”. Normally a call to action is placed along-side an attention grabbing advert or graphic.

There has been much discussion on CTA’s, from userbility, accessibility, design and marketing perspectives. There is no general way of doing CTA’s because it depends on what you are trying to get the user to do and where you CTA is placed. Here we have laid out a few guidelines for making your CTA’s better…

Wording

Many web designers argue that the commonly used “click here” is inadequate as a CTA because it does not convey why the user should take such an action.

It is commonly acknowledged that an effective CTA will inform the user as to why they should follow it. For example if we came across a “register now” CTA it informs us as to WHY we need to click it. “Click here” is an expression which fails on the informative front.

However on the other hand “click here” is a commonly used term which seems to work for the big companies. For example, see below:

Now we’re not suggesting that this makes it right but if it works for them then it’s logical to ask why can’t it work for the rest of us? The answer is of course, that it can work for us - only we can make our CTA even better. For example on the WSPA banner advert above, it may work saying “click here” but what if it said “click here to save a gorilla”, or “click here to find out why we need your help”. This would tell the user why they should do what it says as well as using the common term “click here” telling them how to do it. To make the CTA even stronger you could, for example, on the MYA cosmetic surgery advert have “click here for a free brochure”. This example offers incentives to the user as well as telling them why they should click.

The best word to use is “Free”. Marketeers all agree that “Free” is the most powerful word. So whatever it is, whether it is a free product or simply free information. A killer call to action then would include the command “click here” with the incentive of “free”. “Click here for a free sample” for example.

Messaging

Again the messaging which accompanies the CTA needs to be clear and simple. Most of all though it needs to give a sense of urgency. For example “Sale Now On - Hurry, ends on Friday” with the CTA “click here to see what’s on offer”. If we also added “Free” in there somewhere we would have a irisistable call to action!

The message needs to appeal to your target *audience and it needs to grab their attention. Don’t tell the user what you want them to do in the message, thats in the CTA, tell them what they will want to hear then tell them what to do.

Design & Images

Obviously CTA’s come in all shapes and sizes. The most simple CTAs are used in HTML text in anchor tags like this. Text links are useful for search engines who record the text held in anchor tags and add them as bonuses to search phrases - however they don’t look great. Use them in your copy but maybe use an image based CTA somewhere as well. If you are going to use a CTA in text - why not pop an icon next to it help the user to it from other text or links.

When styling CTA’s its important to make them obvious. The idea is to make sure the sure knows that they are supposed to click on it. Below are some examples of “button” style CTA’s:

CTA buttons are widely used alongside images with marketing messages. The message gets the interest, the CTA tells the user what to do. Again the principles of the wording of the CTA still apply but when coupled with graphics, especially appealing ones, the eye is incited in a way which simple plain text cannot do.

All images that you use need to be uncomplicated and need to back up or enforce the message and call to action. Sometimes just using a product shot will do the trick, other times a clever concept could be developed into the image. The important thing is to keep it simple though.

Conclusion

So there ends a breif introduction to makign your CTA’s better. Has anybody got any other tips or examples of better CTA’s? Leave a comment below…

This article can also be found on Attitude Design

Share This

Adobe is ending its Stock Photography Service.

I received the following email from Adobe just the other day:

As of April 1, 2008, the Adobe(R) Stock Photos royalty-free image
service will be discontinued. We made this decision in order to focus our efforts in other areas, and we want to share this news with you and let you know how it affects you.

Over the next few months we will be making changes to Adobe Stock
Photos. On March 4, 2008, search functionality will be disabled. You will be able to purchase images through our service until March
31, 2008.

To finalize your transactions with us, please follow these steps:
1. Complete your image searches by March 4, 2008.
2. Make final image purchases by March 31, 2008.
3. If necessary, re-download past purchases and print your
purchase history by March 31, 2008.
4. When you're ready, uninstall Adobe Stock Photos from Adobe(R)
Bridge in your Creative Suite(R) applications.

For a long time I really wondered why Adobe would offer a stock photography service. It just seemed like a big hassle for them to get information from the big stock photography sites, organize it, etc. I really doubt that they were making very much off of each purchase. Now it looks like I was correct because they are shutting down the service.

So from now on you'll have to go search for your images the good ol' fashioned way. At least this way everyone that uses the Adobe suite won't be presented exactly the same images any more.

I may be preaching to the choir in this post, but one can always use it as a reference to clients or colleagues.

Accessibility is one of my favourite aspects of web design. It’s also got a lot of hangups and myths associated with it. For example, it is not just for disabled users contrary to popular belief. I hope the linked article put that one to bed for a while.

My other favourite myth is the old-fangled “Accessible sites are boring.” Pah! Poppycock! It may be true that often accessible sites are created from a pool of fairly unimaginative templates (think the accessible template set from pre-Dreamweaver 8.) They don’t do anything wrong (except harm my case thus far) but they’re not exciting. They’re not really designed. I aim to show you examples of brilliant and accessible design, and show that it is all a myth after all. Accessibility and design are not mutually exclusive. They walk hand in hand.

Boring? Try Beautiful

Without inspiration such as a bunch of CSS galleries (nothing looked promising after searching for an accessible website showcase) I had to dig a little deeper this time. The following is the pick of the bunch from my search. Feel free to suggest a site if you think it fits the list.

For the record, the following are chosen based upon achieving WAI Priority 2 using the Cynthia Says accessibility tester for their homepage. I am fully aware that validation is not the be-all-and end-all of accessibility. I know accessibility goes beyond the homepage. I think this is the fairest and quickest (let’s be honest I don’t have that much free time!) way to put a benchmark on a site in this case. I’m not suggesting for a minute that this should be the benchmark to test all sites - this simply allows me to find sites of a certain standard. Anyway, on with the sites:

Clean and creative. Good use of space and typography to create a welcoming site.

Use of a flash element - passes the accessibility test. Nicely falls back to good old HTML.

Accessibility - not ’spoiling’ this textured design at all.

Bold, clean and simple.

Ultra-minimal portfolio. Mixed sans-serif font cases adds interest.

I hope to have shown with the aid of the preceding examples that accessibility doesn’t necessarily stunt great design. In fact using accessibility, usability and web standards as a ‘trinity’ one can often improve on their design skills. The examples above also illustrate that the code elements that increase a website’s accessibility do not often show on the design. The sites in question aren’t “littered with accessibility aids that most people don’t use” - another of my favourite statements I hear far too often.

Let me know your additions via a comment and I’ll add the best to the list, along with some link-love to the commenter if desired.

Share This

Nielson/Net Ratings has released new search engine statistics for Nov 2007. Google has really increased market share over the Feb 2006 search engine results we posted last year. Google jumped from 48.5 to 57.7 for a 9.2% increase in market share. Google captured just over 4.2 billion searches in Nov alone. There were over 7.1 billion searches performed in November.

With that many searches happening in a month, I hope you understand the importance of good Search Engine Optimization.

2007 Website Statistics from multiple websites show that the top three website browsers are still IE 6, IE 7, and Firefox.

Here are some browser statistics for 2007.

It looks like more and more people are installing IE 7 although more people are still using IE 6. Firefox is still a bit hit in the tech sector as seen from Site 2. Overall it looks like Firefox lost a little ground to the IE 7 movement compared to last years browser statistics .

2007 has been an interesting year for the internet, and for web design in particular. We have seen the rise and fall of Web 2.0, the increase of lobbying for web standards, and the growth of interest in CSS3 and HTML5. And these three things are just a few out of many other topics and trends that have created a wide swath across the design community, leaving storms of debate and discussion that are not soon to fade away. Web design is becoming much more diverse than ever before; with this in mind, it is essential to take a step back to look at the big picture: at where design trends are really headed. A few questions arise when designers do this, primarily this: are we working ourselves into a rut of design trends and cliched frameworks? And what is it that remains after the rise and fall of these bubble trends in web design?

What is “cool” in web design today is certainly not what was cool six months or a year ago, though the Web 2.0 swelling had begun to recede by the summer of 2007. Designers as a whole have grown tired of the gloss, reflections, and gradient-filled rounded corners. As a visual trend, Web 2.0 had a slightly immature look to it. But the decline of this style has helped the design world to mature and increase in depth.

Lately Jeff Croft, a major voice among professional web designers, has created stir with his opinions on mainstream issues such as CSS frameworks and web standards. Other prominent figures such as Andy Clarke, Alex Russell, and Roger Johansson have created similar discussions and memes.

Many bloggers say the future of web design is unclear, and the advancement of the tools we use to create our work, such as CSS and HTML, is even more uncertain. The reputation of working groups organized for the revisions of these tools are being questioned all across the board, as they slowly work their way forward.

Many of us know in the back of our minds that the future of web design is closely connected with the future of the computers themselves, but we fail to realize the coming situations, where nearly everything we’ve learned (and practiced) is going to be challenged by the release of new operating systems from Microsoft, Apple, and the vast Open-Source community. The only thing we can do now is help to improve the tools we use to design and build websites, and unite to stand firm against bad influences and trends that threaten our standards and practices.

It’s hazardous to our health

What is cool today in web design? That question cannot be answered definitely. Many of us are certainly glad that the bulk of the Web 2.0 design styling has been put behind us, but where do we go now? It’s time to put much more energy and time into producing creative and innovative things. One designer states that the internet may be becoming too crowded and uninspiring; most of us would beg to differ, but it makes a good point. We cannot stand for a moment to stop pushing ahead at full throttle to uselessly look back on our past. And even more importantly, we cannot afford to be bogged down in bubble design trends such as Web 2.0 or (heaven forbid the term) Web 3.0. It’s simply not healthy.

Whether knowingly or unknowingly, we have modelled and treated the internet like our lives outside of computers - where fads come and go, but certain things remain. Gloss, 3D imitations, reflections, these things will soon be a thing of the past, just as tiny text, comic sans and flashing text have already been retired. But certain things remain from all stages of the internet’s past growth. Using tables for page layout has been replaced by CSS and proper HTML structural elements such as the div tag. This is one thing that will undoubtedly remain, until something far superior replaces it.

The programming and coding side of Web 2.0 will certainly last for a while longer, because it is arguably one of the best things that has developed since the beginning of server-side development. Firmly founded social networking websites like Facebook and Digg are not soon to fade away; people have seen the great advantages of such systems.

Maybe it is time to try something crazy, as Jeff Croft puts it. Time for a creativity revolution, a greater independence among web designers, and a greater unity to improve the design world we have worked so hard to build and develop.

Share This