Archive for June, 2009

30 Jun 2009

11

5 Simple Time Management Techniques for Freelance Designers

While there are, of course, probably thousands of time-management tips and techniques, starting with the basics has a greater chance of actually changing one’s habits. Follow these 5 to get started.

29 Jun 2009

14

10 Highly Common SEO Mistakes That Designers Make

Before diving into this article, I would first like to state that I am not a designer. I certainly hope I can call myself one in the future, but for now, I’ll stick with what I know best.

Having said that, it’s easy for me to write this article because as someone who has worked with a bazillion designers on so many different projects, I’ve seen every one of these mistakes made, of which I have to go back and correct…which is totally cool because contrary to popular belief, being a designer doesn’t mean you’re an SEO expert. But if you, the designer, can knock out some of this stuff before it gets to the marketing/SEO person, it would play a part in boosting productivity and efficiency, which we all know equals more money in the bank.

The following 10 mistakes are very common, and very easy to correct. If anything, at least you’ll know what to do for your own personal website projects, but I can assure you that your clients will appreciate (even if they don’t know it) the extra SEO effort that you can start them out with.

1. Abusing or Ignoring the Title Tag

This may be the most common mistake made when designing a website (and not just by designers). The Title tag is pretty much the first thing someone will see when they view your website in a list of search results. Not only that, but it’s one of the first things a search engine sees when deciding what to rank your site for.

There are a few ways that this incredibly simple, yet important element can be screwed up:

1. Leaving the Title tag blank (see below)

No Title

2. Stuffing it with keywords (see below)

Title with too many keywords

So if your title tag looks like either of the above, it’s not going to do anything for you SEO wise, and more importantly, a botched Title tag will harm your overall situation as you’ll lose search visitors and with keyword stuffing, potentially be penalized.

So what’s the proper way to format a Title tag? It’s easy, really. You want a nice, (no more than) 70 character introduction to your page, with a main keyword or two in it at most.

Example of a properly formatted Title tag:

Properly formatted title tag

Also, make sure you use your main keyword toward the beginning if possible (just in case your Title is longer and gets truncated), and take the time to create a unique Title tag for each page on your site.

2. Confusing Meta Description and Meta Keywords

Right, right, I know, the Meta keywords tag doesn’t have much bearing (if any at all) on your rankings. The Meta description isn’t seriously high on the priority list, but it’s up there somewhere for a lot of folks. Just hear me out…

All too many times, I’ve seen the two tags flip-flopped around, and instead of entering a nicely formatted Meta description of a page, they jam it up full of 300 keywords AND they do the same thing for the Meta keywords tag. This is a very common mistake, and can easily be corrected.

At one time (long ago), these tags held incredible importance in the ranking of your site (when search engines were stupid), so keyword stuffing everything possible quickly became an effective (albeit blackhat) way to get your site at the top. Of course, this doesn’t hold true anymore, and I’ll go on record of saying that unless I’m being super anal about a site, I rarely mess with the Meta keywords tag anymore because it’s nearly completely useless. The Meta description, however, is something that Google sees and takes into consideration when providing search results, and again, it’s also one of the first things that a visitor will see after performing a search – so properly formatting it is probably worth your time.

A good Meta description should be a nice, 155 character description of your site, incorporating a few target keywords – but make it look “natural”. Usually, describing your site (whether you offer services or products) in a few well written sentences should do the trick, but here is an example of a less desirable Meta description vs. a good one:

Less Desirable

Bad Meta Tags

Good

Good Meta Tags

Why? The “good” one takes advantage of the space they’re given, uses a couple of good keywords without sounding or looking like spam, and gives the end-user a clear and concise description of the services/products offered.

What’s wrong with the less desirable one? It’s not the worst I’ve ever seen, but it’s too short, and doesn’t fully explain to me what they have to offer, compared to the next guy.

Just like Title tags, make sure you generate a unique Meta description for each page for maximum benefit.

3. Forgetting Image Alt Attributes

A very common mistake made among all is forgetting (or neglecting) to use good alt tags for the images on a page. Naming the image with a good keyword or phrase that describes the image is key to getting the search engines to recognize it (they can’t see what’s in the image…yet). Not only will it help you in places like Google images, but it will also help search engines more accurately identify what your page is about.

This one is quite simple, but just in case you need a visual…here is what the “Alternate Text” line should say for the following example:

Image Alt Attribute

Remember to keep your image sizes as optimized as possible, because you don’t want to slow down load time for your site. This can affect spider performance when they arrive on your page.

4. Too Many H1’s, or None at All

Header tags play an important role in “on-page” SEO, and properly using the available header tags can give the search engines a more clear-cut idea of the theme and idea of your page.

I’ve seen some projects use several H1’s (do they think they’re going to fool someone?), and completely ignore any other tags. The general rule is to use one H1 per page, and you want to use it for that particular page’s most important keyword (in other words, the text in your H1 should pretty much portray the content of the entire page). Then use your H2’s, H3’s and so on.

As a designer, you should know that you can style the header tags any way you’d like, so that shouldn’t be an excuse to use them improperly. H1 tags are huge by default, but with a little CSS, you can hook it up real nice.

5. Internal Linking – Not Using Good Anchor Text

This is a simple, yet potentially large issue. Internal linking (meaning, links that link pages of your entire website together) plays a part in your overall SEO situation. Google and others like to see healthy amounts of internal linking, so while its good to get in the habit of linking to your other pages in a proper, SEO friendly way.

To this day, I still see new sites that have fantastic internal linking, but they lack the ability to make the links really work for them by linking with proper anchor text. The most common instance of this is the dreadful “Click Here” anchor text. I have nothing against using “Click Here” for quick blog posts or things like that, but when it comes down to linking products or services, instead of using “Click Here” for blah blah blah, try using an anchor text that describes the page you’re linking to.

Example: Instead of “Click here to see the latest iPhone cases” you could use “Check out the latest iPhone cases” (using “iPhone cases” as the anchor text).

6. Forgetting to Leave Room for Text

Designers love to use all sorts of images and graphics wherever possible, which can make for a pretty page, but don’t forget to leave plenty of room for actual text!

While I hate using the phrase, “content is king”, it really still holds true, and allowing your clients to have a healthy amount of text on that newly designed page will help them achieve better rankings in the long run.

Organize your pages, and don’t be scared of using fancy images and graphics, just try not to overdo it. Simple, really.

7. Dirty Code

Again, I’m not a designer or coder, but I do know that Google and other search engines are not a fan of dirty, cluttered code. Having ugly and messy code can hurt your search rankings tremendously.

You want to make the job of searching the page as easy as possible on the search spiders, so that they’ll keep coming back on a regular basis.

Make sure HTML is validated and W3C compliant, and to go a step further for even more gains, try to bring your website up to 508 compliance, which is designed to allow sites to be accessible by those with disabilities. This is a relatively quiet subject, but I’ve heard through the grapevine that 508 compliant sites enjoy an extra boost when it comes to rankings. Here’s more on 508 compliancy standards.

8. Not Using Clean and Descriptive URLs

You’d think that by now, most people (even those that aren’t that familiar with SEO) would know that a cleaner, more keyword friendly URL is easier for the user and the search engines, but to this day, it’s still common to see URLs structured like this:

http://badexample.com/1=5545453245/klaljksd/h774.asp

While Google and other search engines are still smart enough to find out what the page is about, there is still plenty of evidence that having a keyword descriptive URL will give you an edge when it comes to organic rankings.

An example of a search engine friendly URL:

http://goodexample.com/new-photoshop-examples

So, why not play it safe, and make sure your URLs are looking as friendly as possible? Name your pages with keywords that appropriately describe them, and if you’re using a WordPress platform, make sure and change the permalink structure to something like /%postname%/

9. Too Much Flash

We all understand that flash can make a page look extremely attractive (if done right), and that you have a wide range of design possibilities when implementing it.

However, flash is the bane of Google’s existence. While Google and Adobe announced an initiative last year to allow Google to more deeply and thoroughly index and read flash, it’s still not anywhere near an optimal experience.

Using flash in your site should be limited to a supplemental design element at most – and if you remember anything, don’t put any important keyword rich text in the flash element where Google can’t see it. There’s certainly nothing wrong with incorporating a bit of flash into a page, but just keep in mind that search engine’s are still pretty much blind to it.

10. Using Only Javascript Navigation Menu’s

There is absolutely nothing wrong with using a fancied up Javascript navigation menu with cool drop down’s and what-not. But keep in mind that search engines cannot read these navigation menus and follow them to their respective pages.

The most common and accepted way to use sweet Javascript based navigation and still allow the ability for search engine’s to discover your pages? Just duplicate the menu in text and throw it in the footer. You’ll see this on 9 out of 10 sites, and it is encouraged by Google to do so.

Are you making any of the 10 mistakes above in your design process?

If so, that’s alright, because it’s never too late to start adapting better SEO practices. Like I said at the beginning, your clients will appreciate the added SEO boost (even if they don’t know it) when you design a site that has a lot of the basics already implemented. Not only that, but the term “SEO” is a hot buzzword and through personal experience, a lot of clients have heard of it, but are not quite sure what it means – so being able to proudly say that your sites are “Search Engine Optimized” could make the difference between them selecting your or your competition.

28 Jun 2009

13

5 Simple Ways Twitter Can Make You a Better Web Designer

Twitter. The slogan is “what are you doing?”. Everyone has an account. But web designers should be aware of the fact that Twitter is much more than just “I’m eating some cereal” and “I’m driving to work”. In fact, Twitter can make you a better web designer. In this post I am going to show you how you can use Twitter to improve your web designs, learn new design techniques and grow your businesses profile. I can honestly say that Twitter has improved my web design skills more than any other single entity.

1. Follow the best designers

The first thing you need to do is follow the best web designers. These guys are constantly giving tips and hints on how you can improve your designs and as such they will be an invaluable source of knowledge. I make it a habit to keep my Twitter window open all day long and periodically check for updates from these top designers. I can think of at least four occasions when a revolutionary Tweet changed the way I designed one of my client’s websites.

Follow the Best Designers

A bunch of very patient and diligent bloggers out there have compiled some fantastic and valuable lists of the best web designers on Twitter. Here are a few:

TIP: Follow people who live in a different country than you. European and Australian designers are doing very different things than Americans.

2. Tweet some questions

Now that you are following the best web designers on Twitter you need to start asking them questions. The wonderful thing about Twitter is that, for the first time ever, you can connect with your design heroes without feeling like you are really bothering them. In the past you could have sent out an email but chances are you would never hear back. Now you can post a simple Tweet and get an instant response.

Make sure your questions are direct, simple and easy to answer. Here is an example of a Tweet I do every time I finish a new design. The result is about 40 to 100 replies from people telling me what they like/don’t like and as such I am always able to improve the design.

Questions

You can also ask question during the design process. I recently asked my followers whether there was a way to “resolution test” my designs on the one computer. Five minutes later I had 20 websites that converted my design to every screen size available. Fantastic!

TIP: Add “@designersname” to your questions if you want to make sure they see your question.

3. Promote your clients

A good web designer doesn’t just design the site and then vanish into thing air. Instead, they should put some initial effort into promoting their client’s business and the new website that they have created. One fantastic way to do this is to use Twitter to create a burst of initial traffic and gain some backlinks. This will do a lot for their Google rankings and help them kick start their online presence.

For example, if you have just designed a website for a local pizza joint (like in the example above) you can Tweet some details about their pizza and promote it to your followers. If you have followers in the area there is a good chance they will retweet your message and your client might even get some orders! Try and be creative in the way you do this.

Promote your clients with Twitter

TIP: Keep your message short if you want it to get retweeted. Remember, the retweeters are limited by 140 characters as well!

4. Get your clients on Twitter

This idea is about taking the previous point to a new level by getting your clients involved with the magic that is Twitter! Obviously this tip isn’t about the design itself, but it is about being a better web designer on the whole. Your clients can get a lot out of Twitter and if you are the one that takes the time to incorporate it into their site, get them involved and get them profiting from it then you will (in my opinion) be a lot better at what you do. It is extremely important to keep your clients and your designs up to speed with the latest trends and avoid being one of these “set and forget” type of web designers.

Here is a great example of how it is done. Terrafolia Flowers is a florist in Montreal and she uses her website to promote her Twitter account and her Twitter account to promote her website. By marketing herself as the “social florist” she can tap into a generation of tech-savvy users and provide a way for her clients to find her again and again. Take a look.

Florist Twitter Page

The Twitter page (above) is used to show some of her latest floral arrangements and provide inspiration for other florists out there. She can also keep in touch with her existing clients in a very informal and friendly way.

Florist Web Page

With over 1,300 followers her Tweets are bound to get some repeat business. Now ask yourself whether any of your clients could have benefitted from this type of interactivity. What a wonderful (and free!) way for them to promote their business on a new scale. They would love you for this idea.

TIP: Make this an additional package in your web designs that you either charge for or add on as a bonus for premium sign ups.

5. Use contests to promote your firm

In the right hand sidebar there is a list of the most popular topics on Twitter for any given day. They are called Trending Topics. At the top of this list for the first part of June 2009 was the word #squarespace. The reason? Squarespace were giving away an iPhone every day for a month if you added that word to your Tweets. The result? Squarespace experienced an avalanche of traffic and got masses of new sign ups for their blogging software packages. I was shocked to see how many of my followers set up new Squarespace blogs during this promotion.

Squarespace Contest

Of all the social media sites it is Twitter that has the ability to go truly viral. The reason I use the world “truly” is because Twitter seems to create a lot of conversions, not just traffic. Stumble Upon and Digg are wonderful for bringing new visitors to your site but these visitors rarely convert to friends, followers or clients. Twitter is different. Squarespace are getting hundreds of new clients paying $30 a month due to some free marketing on Twitter. Imagine what you could do for your web design business.

TIP: Make your prizes concrete items like cash, phones or iPods. People do not respond well to eBooks, free designs or consulting.

Conclusion

Twitter is fantastic because it is full of talented people who are willing to converse with their peers. A few months on Twitter and I guarantee you will re-think the way you look at the web design business. You will modernize, become more effective and learn a wealth of new tips for dealing with your clients. If you aren’t already on Twitter I urge you to sign up today and implement these five tips.

27 Jun 2009

23

19 Web Design Blogs you Should be Following

Need an extra boost in creativity? Follow these 19 web design (and some development) blogs to learn, grow, and become inspired.

Whether you’ve heard of all of them or not, everyone of these blogs is worth a follow.

26 Jun 2009

6

The 5 Worst Mistakes That Web Designers Can Make

Being a web designer is a bit like being a famous basketballer. There are so many people looking at your work, pointing out your flaws and following your every move. But unlike a basketballer, our profession is constantly changing. We have new technologies, trends and fads to follow. And in this fast paced environment it is easy to make mistakes.

In this article I am going to show you the five worst mistakes that web designers constantly make. Some of them are to do with designs and coding and other are to do with networking and branding. Avoid them all equally. They could come back to haunt you.

NOTE: If you can think of any others please drop a comment and let us know. It might really help someone out there.

1. Having a poorly defined brand

What is your brand? Can I discover what your brand is within the first five seconds of visiting your website? Do you constantly reinforce that brand or are you always parting from it? The worst mistake that a freelance web designer or web design company can make is having a poorly defined brand. It will spell the end of your career.

Why is it important?

So why is branding so important? It is simple. It differentiates you from the rest. And we all know how important differentiating is. There are literally millions of web designers out there – you need a way to stand out or you will be just another dope in the crowd who will get overlooked every time.

What are you offering?

Branding is also about knowing who you are and what you are offering. Are you designing $5000 professional websites for up market companies or are you using templates to give people a website for $400? Do you promise two week turn around times or will you take six months? If you don’t have a well defined brand you will not know what you are offering and that will make it almost impossible to sell.

If you don’t believe in your brand, how do you expect other people to? If you don’t even have a brand… well, what more do I need to say?

An example of a well defined brand

A classic example of a well defined brand is Nike. Of all the brands ever created I am of the opinion that Nike is the best. Their logo (the swoosh) is synonymous with success and “correct answers” and their three word catch phrase “just do it” evokes emotion and imagery extremely well.

Nike Logo

When it comes to Nike gear you don’t care what the price is because you automatically know it is what you need. It is endorsed by the Michael Jordan, Tiger Woods and Roger Federer, all of whom reinforce in your mind that Nike is what you need to be the greatest.

If you want to be a successful web designer you need to solidify your brand as if your life depended on it. Make sure you know who you are, what you offer and why you are different from the rest. Without this concrete grounding your business will be forever shaky.

2. Making clients’ sites load slowly

I love images. I love big, unique, professionally taken photographs. I think they make a website come alive. But initially I used these images poorly and as a result my client’s websites loaded slowly. This had an impact on my business. Let me tell you how.

Simone Hanckel Photography

Simone Hanckel Photography: A great fast loading image site.

A story about loading times

One day I got a call from a person who had been referred to me via a friend. They wanted a website for their perfume shop and so we met up for coffee to chat about their options. The cafe had wireless internet so I could show them my portfolio. The problem? All of the image based sites I wanted to show them failed to load. The mixture of slow cafe internet and badly saved images meant that it timed out. I didn’t get the job.

People are fickle

Take a look at how you react when you visit a website that you’ve found on Google. If it takes longer than about three seconds to load do you click “back” and go to another site? I know I do. You need to remember this when you design a site for your clients. Make sure it has a fast loading time and doesn’t take too long to browse between pages, bring up images, etc.

How to make websites load faster

This is an article in itself so I want to keep these tips brief. If you want to make sure your websites load fast you need to:

  • Save for web and devices
    Make sure you save your images in Photoshop using the “save for web and devices” function and setting the appropriate level. If you use the regular “save as” function the images will be too large.
  • Reduce unnecessary code
    Part of the reason the web design community hate the old school tables commands is because they create a lot of extra code. Always find a css solution and keep your web page files to a bare minimum. Its only a small thing but it makes a difference, especially on more robust websites.
  • Simplify your designs
    You need to reduce the amount of different files that you have on your website. If your website is calling up images, flash, java, html, sound files, css, etc. your site is going to load slowly. Keep the design simple and clean and reduce all these requests.

I think that slow loading times is one mistake that beginners constantly make. It might seem like a small issue but in reality it will annoy your clients and your client’s customers. Make sure that website loads like a rocket.

3. Not delivering your product when you said you would

At Taplin Web Design we take the mildly brave step of giving our clients a “post-production survey” which asks them what aspect of our service they were happy/not happy with. Something that has come up once or twice is that delays are super annoying.

Laptop Stress

Why delays suck

Now, let me be clear. My company normally has a very fast turn around time. But on the odd occasion when our coder has been sick or our servers have been down we have had to unleash a website a day or two late. And the client hated it. Every time.

This is understandable. The client has worked themselves up into a mini frenzy waiting for that website. If you are a good salesperson you have probably pitched it to them such that they now really believe that they need it up and running as fast as possible. So when you turn around and say “it is going to be a day late” they get upset. And they pass this information on to their friends. The last thing you need in a fast-paced, highly competitive business world is a reputation for being tardy. It just won’t do.

The one saying to live by

I grew up in family of very successful (non internet based) business people and they often gave me pieces of advice on how I should run my web design firm. The one saying that has stuck with me all these years is:

“Always under promise and over deliver.”

Now, this does not mean you should down talk your product and undersell your skills. That is not the point. The point is to avoid making promises that you can’t keep and always attempting to surprise your clients by exceeding their expectations.

How to under promise and over deliver

If you have a client that has asked you to upload 100 images to their website you should explain that this is a time consuming process and that it could take up to a fortnight. Then make sure it is done within 24 hours. Send them a nice SMS or email letting them know that you value their ongoing business and as such made it a top priority. This is how great relationships are built. They will recommend you to everyone.

4. Not organizing your time properly

If you are a freelancer you will undoubtedly be a very busy person. Most freelance web designers have five to ten projects going at one time and, if you don’t organize your time, you will get lost.

Two Phones

For example, you might have three web design clients, two content creation clients and some images that you need to edit for your own websites. Now you get a phone call from a new client and begin work on their project straight away. After a week you realize that you are behind schedule on the other three web design clients and the content creation is just never going to get done. Not only will you lose your clients, you will not make any money.

How to organize your time better

It is vital that you create some sort of system for organizing your time. Everyone is different so make sure you experiment until you find something that works for you. Here are some basic things that every designer should do:

  • Keep a diary
    Keep a comprehensive diary with dates clients called, dates you need to finish designs by and so on. Refer to it everyday.
  • Write daily lists
    Everyday before you start your work spend five minutes itemizing the day. Write down everything you need to do and the order in which you need to do it. Put the most important items first, not the easiest ones.
  • Take organized breaks
    Don’t break when you feel like it, break when your schedule says so. One of the biggest differences between successful web designers and unsuccessful ones is how disciplined you are with your daily routine. Regular breaks will refresh your day, but only if you actually do work in-between

The stress of looming deadlines is horrible. It can make your work feel like a real drag and end up leaving you stressed, depressed and anxious. If you manage your time you will avoid these feelings as you will constantly reassure yourself that you are on top of all of the tasks. Organizing your time well is the first step to creating a very fruitful career.

5. Not giving your clients enough advice

This last point goes against a lot of the current wisdom out there which states that you should always do what your clients wants. Not so. Your client is not the expert. You are.

Caution Tape

The doctor and the patient example

Would you ever go to your doctor with a painful lump in your neck and then tell him/her how to do their job? No. You wouldn’t. You would listen to the advice and take it on board.

The same is true for web design.

You are the doctor, the client is the patient and the painful lump is the website that they really need to get built.

Now, one thing about the doctor and patient example that is also important to notice is that the doctor will always listen to the patient’s symptoms, feelings and fears before making a diagnosis. You need to do the same. Find out what they want, when they want it by and what they need it to do. But don’t be afraid to tell them if they are making a mistake or if there is a better “treatment” out there. For example, I will always advise my clients against a Flash website if they are trying to sell a product and rank well on Google. Almost all of the time they take the advice and their business is better off for having done so.

Again, the goal here is not to bully the client into doing what you want. Rather you are trying to do the best by them and giving them advice that you think will help them succeed. Don’t advise out of laziness. Do it to help.

Conclusion

The web design industry is a very volatile one and mistakes will be made. Do your best, however, to make sure the above five are not on your list of failures. If they are, pick up the pieces and make sure they don’t occur again. That way your mistakes become lessons and allow you to grow as a designer. After all, isn’t that what we all want?

Have you got any other mistakes to share? Remember, they might really help someone out there.

24 Jun 2009

3

Blogger, Designer, and Self-Employed – Interview with Chris Spooner

Chris Spooner1. To get started, could you tell us a bit about yourself and what you do for a living?

Sure, I’m Chris Spooner, I work as a self employed designer and run my design blogs, Blog.SpoonGraphics and Line25.

2. How did your two blogs come to be, and why did you create them?

Blog.SpoonGraphics was created over two years ago originally as a little experiment with the WordPress application. I had seen design blogs springing up and decided to give it a go myself. Soon after publishing a couple of tutorials and freebies, the site started to grow in popularity. Many articles and posts later the site is continuing to grow and has reached a fantastic level of popularity in the web community!

Line25 was setup more recently, given the enjoyment I have developing Blog.SpoonGraphics, I decided to branch out and do it all again. I wanted to focus more on web design topics, but with Blog.SpoonGraphics developing a name for Illustrator tutorials, I didn’t want to suddenly switch subjects. Setting up a second blog seemed like the perfect way forward, and Line25 is also seeing some unbelievable growth in the four months it has been active.

3. Where do you find inspiration for your blog posts, and how do you keep coming up with fresh ideas?

Ideas for blog posts tend to appear from general Internet browsing and picking out interesting images from magazines. If there’s a feature that catches my attention, creating a blog post on the topic is a great way to research into the topic further, which also helps polish my own skills.

Blog Post Title

4. How have your blogs come to have such a strong following? What advice would you give to bloggers just starting out?

Keep up the hard work. Even with Line25 having the advantage of receiving an already establishing group of subscribers from Blog.SpoonGraphics, it’s difficult in the early days to keep a consistent level of traffic. Keep the faith and pump out articles that you think would be interesting to fellow designers, sooner or later one will be picked up and receive a decent influx of visitors.

5. Where do you find inspiration for your designs?

Browsing design galleries and the work of inspiring designers is always a great help, although I also seem to pick out interesting images from magazines and general things I come across on a daily basis.

Designs

6. What first got you interested in design, and how did you go about getting into this industry?

I’ve always been fairly creative minded, and went down the creative route throughout schooling and college. After university I landed my first job as a Graphic/Web Designer at a local small studio. A good website has always been a useful resource for landing jobs and opportunities, so that’s one recommendation I’d give to others.

7. How (and when) did you transfer into the freelance designer lifestyle? How did you turn your work into a personal business and gain your first clients?

I worked on a couple of personal and client related projects in my spare time outside of work to begin with to gain a feel for managing projects completely by myself. After a while my blog revenue increased to cover my basic monthly expenses, which was a great help in making the transition to working for myself. The exposure it has developed online now brings in clients from around the world, along with some really interesting work!

8. Could you describe a typical workday in your life as a freelance designer and blogger?

A typical workday starts by catching up on Twitter and browsing through a couple of links I come across. I’ll then check over emails for the day and respond to clients or messages from my blogs. I usually aim to work on a project or blog post in the morning, and one in the afternoon, so depending on what I have in store at that moment I’ll either work on some kind of web design, a little coding, a logo design, or think of a topic to create an article about. Midday I’ll head off for some lunch, then check over my RSS feeds for some cool topics from the blogosphere. My interesting findings are then posted to Twitter to share with others.

9. Has owning Blog.SpoonGraphics and Line25 helped you find clients, or helped your freelance design career in any other way?

For sure, my blog over at Blog.SpoonGraphics has been a fantastic source of clients, mostly through the exposure it has given online. So much in fact, that I hardly need my portfolio website anymore.

10. What is your general design process now that you have the freedom of freelancing?

My design process tends to vary slightly depending on the nature of the project, but generally an estimate will be created based on an indication of time needed for the work. This is then invoiced as a 50% deposit and the project started with research and sketching. Designs are created and supplied to the client, followed by an invoice of the remaining balance. Between these steps I try to keep the relationship personal and informal, in my eyes there’s nothing worse than all that boring business jargon and malarkey!

11. Finally, what are some of our future goals for your blogs, your freelancing business, and for yourself?

I’m looking forward to developing both blogs further into the future with new posts and useful content; Line25 is heading towards the 10k subscriber milestone so I’m looking forward to that achievement. Outside of blogging I’m looking to continue on with a selection of interesting design projects and generally keep on top of any upcoming changes in the industry!

23 Jun 2009

0

PHP For Beginners: Part III

If you haven’t seen the first two posts for this series, be sure to check them out below:

This exercise assumes that you either have PHP installed on your computer already or that you have access to a server with PHP support.

Some might call it an absence, I prefer to call it a long nap. Yes, I’m back, bringing with me part three of my PHP tutorial line! Follow the program throughout the summer as I provide you at least weekly updates on this versatile language of Web 2.0.

Lets get down and dirty. This lesson will cover the following:

  • More operators
    • Concatenation operator
    • Combined assignment operators
    • Comparison operators
  • Incrementing and Decrementing
    • Operator precedence
  • Constants
  • Quiz

More Operators

Arithmetic Operators were discussed in part two of this series, but I’m sorry to say that was just the surface. Operators are necessary to manipulate information and data values to create a result desirable to the author. Thus, the more operators, the more possibilities of the script, and thus the more objectives achieved with the code! These operators are fairly common among any programming language that you find, but their unique use in PHP is what helps make it such a strong language.

Concatenation operator

We’ll start out simple. The concatenation operator is a single period (.) that essentially binds together two operands (remember, these are expressions or strings, basically values of data or information). This may not seem important now, but this operator is important in combining the results of an expression with some kind of string. Here’s an example:

$centimeters=245;
print “The width is “.($centimeters/100).” meters”;

Here I used a variable then printed it within a string operand. This script will return the output “The width is 2.45 meters”.

Combined assignment operators

Compacting code is important in a website because it means that you have fewer things to sift through when troubleshooting. Shorter code also means a smaller file size, and if you intend to enter into a serious programming profession then that is a huge plus.

The name “combined assignment operators” is pretty much the exact description of this entire section. Basically, we combine the functions of two operators into one in an effort to simplify the code. Below is an example:

$x=4;
$x=$x+4; //$x now equals 8
$x+=4; //$x now equals 12 by the combined operator

Here is a table detailing just a few of the basic combined operators:

Combined Assignment Operators

Operators

Comparison operators

Pretty simple so far right? Well here’s where one of the biggest parts of PHP comes into play: comparison operators. Comparison operators perform tests on their operands, returning the boolean result true or false. This is again important for relating various pieces of information to one another from the user input.

We’ll just be getting familiar with them for right now; we’ve already covered a lot this lesson and this is a very important topic to fully comprehend. For right now, it is important to understand that these values are equivalent to true or false; they do not actually return the boolean value. For example:

$x=4;
$x<9; // equivalent to the value true
$x>23; // equivalent to the value false

Below is a table of comparison operators. We will learn more about these in complex coding sequences next lesson.

Comparison Operators

Comparison Operators

Incrementing and Decrementing

Incrementing and decrementing, which is increasing or decreasing by one, respectively, is a handy little ability when it comes to integrating loops into your code. For example, say that you want the script to execute a certain operation eight times; you can’t simply say “do this eight times.” Instead, you must say “start at one, then at the conclusion of each execution, add one to this number. When the number reaches eight, stop executing the function.” This method is seen in almost every programming language so mastery of this is crucial in order to learn other languages with ease.

This tutorial guide has already showed you two ways to increment and decrement a variable: the arithmetic operator and the combined operator. Below are examples of this:

$x=$x+1; // incremented by 1
$x-=1; // decremented by 1

Because changing a variable by the value of one is so important, however, the whole operation has received its own operator! Below are the respective operators for incrementation:

$x++; // $x is incremented
$x--; // $x is decremented

Putting them together into a little test code, we receive the following:

$x=3;
$x++<4; // true

But hold on, if we refer to our comparison operators, we’ll see that the < sign means only less than. How can this function return true then? It’s true because the variable x is evaluated in the function BEFORE being incremented. THIS IS VERY IMPORTANT! In order to increment the variable before evaluation, you must do the following:

++$x; // incremented
--$x; // decremented

Now to replace it in the above code:

$x=3;
++$x<4; // false

Operator precedence

The above argument brings us into operator precedence, or what most people will be familiar with, what I like to call “order of operations.” Certain operators have precedence over one another in this wonderful language PHP. Below is an example:

4+5*2 // returns 14, multiple first
(4+5)*2 // returns 18, parentheses first

This is a pretty straightforward concept that you just need to familiarize yourself with. Beyond that, this table is just for basic reference:

Order of Precedence for Selected Operators

Order of Precedence for Selected Operators

I know that we have not yet touched numbers 9, 10, or 11, but hold on to your knickers because they’ll be there next lesson!

Quiz

School is fun, especially in the summer! That’s why I’ve included this quiz. That, and to help you retain your knowledge of what we’ve just learned. Don’t peak back!

#1: Which of the following will increase $x by 2?

  1. ++$x++
  2. $x + (3/2)
  3. 4*2/6 + $x

#2: 4*9+9+(4/1) will return the following:

  1. 49
  2. 76
  3. 39

#3: 4.0===4 will return the value TRUE.

  1. True
  2. False
  3. Not enough information

#4: The expression $x*=2 is equal to:

  1. $x=$x*$x
  2. $x=$x^2
  3. $x=$x*2

#5: Without looking, which operator is executed first from this list?

  1. + -
  2. &&
  3. ||

Answer key: A,A,B,C,A

Conclusion

That’s all folks! We’ve taken some great steps today, and hopefully we will take many more in my next tutorial, PHP for Beginners: Part IV.

22 Jun 2009

14

Does Design Matter? Five Ugly Websites that Kill the Competition

Design is not always everything. The following five websites are proof that design is not all that it is made out to be. If you focus your time, money, and energy into creating a killer service, you will come out miles ahead of those pouring their time, money, and energy into the design of their mediocre service.

Most webmasters place a high amount of value on the design of their website. Many webmasters have even spent significant amounts of money to insure that their website design was exactly the way they wanted it. It is commonly argued that well-designed websites are one of the keys to insuring recurring traffic. If people enjoy the look of a website, they will continue to return. Yet, this is not always the case. Design is not always everything. The following five websites are proof that design is not all that it is made out to be. If you focus your time, money, and energy into creating a killer service, you will come out miles ahead of those pouring their time, money, and energy into the design of their mediocre service.

Chris Guitars

Chris Guitar’s is by far the ugliest website on this list. The official website/e-store for Chris Guitars in Albany, NY is e-commerce in its most elementary form. Chris Guitar’s is coded from top to bottom in HTML, complete with a “cheezy” graphic (albeit one that honors US troops and is therefore commendable). The website’s clashing color scheme of yellow text on a solid purple background is enough to make any shopper’s eyes bug out within the first minute of reading. Each product listing exists as a paragraph of product description and review along with a link to a picture of the item being sold.

Chris' Guitars

Don’t the the ancient design and super-simplicity fool you though. This guy does business. Chris Guitars has established itself as a sort of mecca for musicians and music equipment collectors. The simplicity of the website couple with the honest descriptions, pictures, and “best price on the web” make Chris Guitars exempt from any rule of good website design.

MMOFB Blog

The first three lines of this website tell all – “Don’t let the stunning graphics and good looks of this blog fool ya“. An obscure blogger writing under the anonymous pseudonym “Grizzly” has set out to prove that badly designed websites run by anonymous people can rake in cash. To see some of Grizzly’s handywork simple query “make money online” into Google and you will see Grizzly’s blogspot hosted website appear within the 1st three spots of the SERPs (depending on the data center you access). Rather than relying on flashy custom WordPress designs, personal branding, and name recognition Grizzly has simply focused on good SEO.

MMFB Blog

Grizzly essentially contends that good design is needless, and that webmasters should focus on producing a quality service focused on growing organically. Do you think he is dead wrong? Check the numbers: 4000+ subscribers (more than 3000 more than comparable websites with flashy designs), and daily earnings ranging from $150 to $300 (compared to maybe that much in a month from comparable “well designed” websites). While many may cringe at the design of Grizzly’s blog, Grizzly himself would probably tell you that all well designed sights should be as ugly. The design of the MMOFB blog is the result of careful ad testing and analytics. The design hinges upon where the ads are most productive. With his cult following and earnings of $1,000+ per month from a free hosted blog – I am tempted to go and dishevel things a bit more on my own websites.

Plenty of Fish

The story of Markus Frind and his online dating website PlentyOfFish.com have garnered quite a bit of media attention from high profile publications such as Inc. magazine and many others. Frind is the first to admit that a boring and poor design is what makes the free dating site such a huge success. Frind’s strategy in creating PlentyOfFish was to build it and code it as minimally as possible so that it would consume the least amount of (server) resources as possible. The most glaring piece of poor design is the lack of proportional resolution on the thumbnail version of the photos. Based on interview with Frind, the disproportional thumbnails encourage more clicks, pageviews, and time spent on the site which ultimately results in more advertising exposure. The purposeful design flaws on PlentyOfFish.com have resulted in an estimated $10M in revenue for 2008.

Plenty of Fish

Wikipedia

Consider Wikipedia the epitome of the age old internet adage “Content is King”. By focusing their community on creating excellent fact supported content Wikipedia has essentially negated the need for well designed pages. While Wikipedia does offer certain modules and graphs to express data in a more organized fashion, the tables do little to balance the overall asymmetrical contents often left poorly spaced and formatted by pictures and other related resources.

Wikipedia

Despite the relatively poor design and lack of eye appeal Wikipedia has established itself as the go-to resource for any online query, often showing up first in search engine results. The overwhelming existence of quality content and information often makes up for the lack of aestheticism, and lends itself well to the idea that academia should never be appealing to the eyes.

Google

Wait…why is the big “G” on the list? Excellent question. Google’s design may not be intrinsically ugly, but it certainly is primitive. Google, the number one most visited website in the world, also understands that success does not rest in good web design. For Google, success rests within a superior search product and other solutions. When compared to other design-centric search engines such as Bing and the content ridden search services of Yahoo! and AOL, Google begins to look a bit boring. Google’s logo set (save for the commemorative ones) remains rather unspectacular as well. However, what Google may lack in flashy logos and content management, they certainly make up for with their superior services and offerings.

Google.com

Questions and Conclusions

Five websites, five unspectacular designs. Does good design matter? Or is bad/boring/minimalist often used by designers intentionally to place a higher emphasis on the product and service. Should an excellent product or service be supported with flashy or cutting edge design? As a result of seeing these five websites, should a higher amount of energy be focused on website functionality and quality service development than on design?

One thing is for certain. Excellent products and quality design are not mutually exclusive. Excellent products can have excellent design, yet perhaps design should be one of those things that is gradually improved as time permits rather than thrust to the forefront of a project. If your website offers a quality product or a knockout service you should have no issues gaining users. The homework has already been done for you. Users care about functionality more than they do about design.

About the Author:

Ethan is a well-trained internaut who runs techsplosive.com, a website about Internet Startups and
Social Media.  If you like what Ethan has to say here, feel free to subscribe to the Techsplosive.com
RSS feed.

If you’d like to do a guest post on Webitect, feel free to contact us.

Page 1 of 3123