Helping You Rock Out Your Site Like A Rockstar!

I was talking with a gal, whom I would probably call a colleague when it comes to art in general. She was having issues finding the right colors to inspire her to make her next website layout and not being inspired. Of course, for color issues I told her right away that she should try ColourLovers as a way to look at palettes others have put together. However I also went into explaining about inspiration works for writers and artists in the same way. It is all about experience.

Inspiration can be in anything: the color of a dewdrop dripping from the petals of a flower, in the way a person walks, the shape and texture of an object, and much more. Life is an unending inspiration. Art is Life and life is art. I am not sure if there is a famous phrase similar, but if there is, I would have quoted it already. I am just writing from my experience.

If you want to write about something, but do not know anything about the subject, you research the matter. If you want to draw a picture of a rare object, you find pictures or the real thing. All of the senses are used in finding inspiration.

Web design is a form of art. Yes, it involves a process that may be difficult for some, but the design of a webpage is very much a part of expressing oneself. Often website design takes on trends from time to time and it can be seen. Webmasters learn and inspire each other to build the next layout that becomes eyecandy for others to enjoy. Some share how they accomplish their amazing work through tutorials.

So, if you want to build a website and you just cannot seem to find that exact inspiration, look around and read up on new ways to take your layout and of course, your website to the next level.

Where do you find your inspiration?

Have you ever been told that your site was very cluttered? What does that mean? Does it mean you have too many graphics or it just seems everything runs into each other. A website almost seems as if talking about a bedroom. Indeed, a website can be compared in some ways to your bedroom. It is your place online and you are letting people in to see it. So think about it: Do you want people to see your messy room?

Now, when tidying up your site, it boils down to harnessing the whitespace and filling it in a way that is not cluttered of disorganized. Now, you do not have to totally sacrifice design. You do have to consider what items could either be removed, or what items can be moved to its own page. Organization is extremely important.

Below are just some pointers when it comes time to clean your site up.

• You do not have to put every social site account you belong to.
• You also do not have to put your link exchange buttons to friends sites. Put their text link instead on a special page or put a blogroll for your sidebar.
• You do not have put put all your information about yourself on the sidebar. You can focus on putting that on the about page .
• Divide your site into the specific categories or page sections which are more relevant to your site. If you have a lot of visitor items, a long page that is named ‘visitor’ containing every single item can be daunting to your audience. Also the title is very vague. Make it unique.
• Make sure to hook yourself up with a sitemap. A sitemap will list all your pages and posts in case they cannot find what they are looking for by normal means (ex. through your site search bar, or your navigation)

Of course, in the end, make sure your site is how you want it to be. Just like a bedroom, you control your site’s look.

I have been seeing a disturbing number of blogs with some creepy tag clouds. Some have no CSS spacing implemented and others, well, they really are a ‘drag’ on the layout’s load time. I am not going to draw this article out, as I would like feedback from you all on your tag cloud practices.

I get a lot of questions whether if people should use tag clouds on their site or not. I usually ask them if they tried one on their site and made an opinion of its look and whether it fits with their site. Then, I would ask them if they had categories and if it was necessary that they have the tags when they also offer a search form. These are just a few factors I have always considered.

However, I want to focus on the aesthetics of the tag cloud. I have pulled one example of a ‘do’ and one of a don’t. Then I will give you my best advice. Out of respect of the webmasters the screen shots of these tag clouds belong to, I am not naming them.

Tag Cloud Don’t
This tag cloud was actually rotating the tag words. This slowed the load time of the site down and it was annoying as I tried to play catch to click on the tag word. It looked like the big bang theory happened in the sidebar of this person’s page. It was definitely a do not. The tag cloud had no real value except to look like a nifty tool. In fact, the webmaster used it on a Compositio WordPress layout by Design Disease and it severely detracted from the original layout. Also, as a note, the small screen shot was cut down in length from the actual size.

What can be learned from this Don’t:
There is no reason to make a tag cloud look like it is a blog all on its own or something you tossed cookies on. Keep your tag clouds simple and relevant to your site.

Tag Cloud Do

This tag cloud is much better than the previous. The tags are spaced well and they are in alphabetical order. Another great example, although the webmaster does not have the tag cloud up anymore. It is a shame as I thought it was one of the best yet. What they did was instead of alphabetical order, they specified the parameter of their tag cloud as largest count to smallest and from that, adjusted the CSS to have a pleasant rainbow type color effect.

The WordPress Codex talks about customizing your tag cloud template by changing the parameters like excluding certain tags, specifying how many should be listed and even the tag order. I recommend taking a look at it and finding out what is best for your blog if you do like to use tag clouds. You may just want to create a tag cloud archive page instead of listing your tags in your sidebar. In fact, it might be a nice addition to your 404 page.

Do you use a tag cloud? Why and what are your suggestions on improving how a tag cloud should be displayed? Any tricks to share?

Converting site visitors is not the easiest in the world. People need convincing all the time, even regulars. How can you do that? What elements of a site might be needed to improve site conversion. Remember, in order to draw people in, you must have something in place so they know what you want them to see, especially if you might even be selling a product.

Here are 6 valuable elements you might want to add to your own blog.

• Featured Content Slider
  There are so many types of jquery image sliders and many more being introduced daily. However, in general, it if best for you to select the ones that fit your needs. While both of the following have premium versions, for WordPress users, the Easing Slider and Slidedeck are some of the nicest ones I have tested as plugins. They are very easy to use and can make your site look more interesting when added.

  While there are a lot of people who like built in sliders, some of them just fall short of having some pizazz. The ones listed above add that extra oomph.

• Featured Thumbnails in posts
  Since WordPress has made it easier for people to have thumbnail images added to articles, this has appealed greatly to those who love sites that are more visual. Many themes out there do not have this capability, adding the code snippet for featured thumbnails is not difficult.
• Featured Posts with Thumbnails in sidebar
  Having articles featured will allow you to bring material out from the archive and into the eyes of your visitors. This element will give them something extra to look at and choose if they want to go deeper in your site. One plugin, conveniently named Featured Post with thumbnail is pretty nice about it. It does though take some tweaking to make it look as you want it to me.
• Related Posts plugin
  This is an older and simpler method. Some people choose related posts with thumbnails and that is great, but if your site is already a little heavy on the graphics, just a simple related post plugin like Yet Another Related Posts Plugin. This plugin can also be displayed as a widget too.

• Method to automatically share posts on the social networks
  Twitter Tools and Tweet Old Post are both great plugins. While one can pump out your current posts, the other brings up older posts. What an arsenal! While your site alone can only do so much, social networks are a huge source of traffic for some bloggers.
• Good old fashion method of banners
  Words can go a long way, but images can go even farther. As said above, if you want to convert people, you need to provide a way to lead them there. Banners have been a method used for many years. Your banners do not have to be traditional sizes. They can be enough to say what you need it to say.

Of course, there are other methods, but the above mentioned are not as obtrusive. RSS footer ads, jquery pop ups, and even old pop ups (including DHTML) can become annoying for regular visitors. They do not add much to a blog site, but they are great for sites selling products.

What kind of site conversion elements do you use on your site? Any special ones you suggest that are not annoying or in the way of a user’s overall site experience?

I thought after I was reading a few websites that I would address some common mistakes I see in web design layouts. I am not too much of a stickler about being valid, but more on the design issues as those are what people catch.

1. Margins. I cannot express the times I have been to websites and the margins between images, the browser itself, or other elements within the layout are either too far apart, over lapping, or way too close. Whitespacing is obviously an art in itself.

2. Bulky site. Too many graphics or too many large graphics.

3. Colors. Some sites, the colors are absolutely atrocious. For those who are unsure of what looks great together, try Colourlovers.com for some great palettes.

4. Too Simple of a design. Sometimes simplicity is great, but too simple and it can detract from the reader’s experience. Remember, a website is like a business card. Sometimes having an interesting one will stick in your reader’s mind more than others that they have gone to.

5. Inability to navigate easily. Some type of navigation should be clearly placed. With WordPress users, WP-PageNavi and Yoast Breadcrumbs are great tools to incorporate into layouts. They allow people to always know where they are on the site and can find a way back.

6. Too many scripts. Like images, too many scripts operating at the same time can be a real drag on load time. Make sure to choose ones you believe are really necessary. This goes for plugins as well.

7. Too many advertisements. Monetizing a site is a great way to make some cash, but too many ads, and your visitors might feel spammed. Your visitors are on your site for the content, not to be blasted by your advertisements.

8. Inconsistent fonts. While making different sections have different fonts, too many can detract from the layout. Keep it consistent and to no more than a couple choices.

9. Header tags are wonky. There are times when I have gone to websites and h1 tags are huge as well as h2, h3, and so on. Keep these varied and tasteful. Also, try not to vary the, no text tranform, uppercase and lowercase on text transforming in your CSS. Plan to choose one.

10. Not a memorable main graphic. Whether it is a logo or a special image, if it is too small, too plain, or sub par on design, you might not be putting your best foot forward. You do not want your logo too small or where next to it is a huge banner. Your visitors may get the idea that your banner is more important than you trying to brand yourself properly.

What mistakes do you often see when you visit websites?

Web Design, uses your creativity and can run low from time to time, just like a writer can experience ‘writer’s block.’ However as much as that can be an excuse, there really is no such thing as a creative block. It is all in the designer’s mind. Some of this can be spurred on from the following:

• Physical limitations due to lifestyle choices (ex: stress, sleep problems)
• Lack of confidence in your own work
• Too busy or too much on your plate
• Not enough knowledge in field to complete certain projects
• Lack of motivation.

These are things that can be changed by taking a positive approach. I love to write as much as I love to design. I design like I write, which means I do the following: make sure I keep focused with the design before doing anything else.

• 1. Write down in notebook or type in notepad what you do not know in my field. Once this list is made, go out and search for books, and online resources to help teach myself how to do something.
• 2. Look around the internet for web trends and take notes. A lot of clients like to give example sites for something that they have in mind. These also can help you learn different tools that you can design for websites even if you code it your own way.
• 3. Keep designing. Do something, even simple stuff. You will find that if you work with one photo, you could discover dozens of ways to change or enhance it. Look for sites that offer graphic challenges. Some might offer a prize (even a small graphic), but the prize is not the goal. The goal is to keep designing and create something. A prompt sometimes helps and these challenges, even ridiculous ones can help. Here is a site called Graphic Competitions that may be handy for helping you get in the design mood.
• 4. Try joining forums for graphic and web designers to share pointers or visit blogs of these genre to get in touch with your field better.
• 5. Try drawing offline. Make mockups of layout ideas without the graphics on paper.
• When designing, try designate a time. Occasional breaks are great, but distractions can be a nuisance. If you are a mother, perhaps during naptime, during school hours, or after the kids go to bed might be the best times to design without being distracted.
• 6. Be confident in your work. Yes, rejection might hit hard for you, but you can always change the work. Take your client’s constructive criticism seriously and try to apply. You are working with a client which is a partnership. Most of the time, it is communication failure that breaks the partnership. The client chose you because they liked your past work and believe you can do the job because you said you could, so think about your past work and what your client wants. Do not let fear get in the way. You got the job, so you can do it
• 7. Be honest about your work. In the case that you cannot complete a project for some reason, be up front with your client. However, try to be resourceful and refer them to a possible web design buddy you may have met according to my 4th suggestion.
• 8. Keep a positive attitude. It is not the end of the world if your first proof is rejected. Persevere and you will definitely come up with something better second time around.

Remember, even if you design professionally, have some fun. It will help keep you motivated.

Having valid coding for your site is important. It could mean the difference of a visitor being able to access and view your site properly. Whether you are just learning HTML, know a little bit, or know quite a few tricks, one of the best tools a designer and developer can use is the W3 Markup Validation Service by the World Wide Consortium.

The World Wide Consortium (also known as W3 or W3C) has been around for quite some time and is the governing body to consult about web accessibility and semantic coding. No matter if you are a novice or a seasoned professional in web design, the validator is a great tool for both learning and also correcting those minor mistakes missed the first time.

From my experience, many people who have used it have asked me how can they tell where to correct a mistake.

Below is a short video run through to help you through understanding how to use the W3C Markup Validation Service.

As your site grows older, you have learned a lot of things (at least I hope you have.) In that time you should have played with ideas on what you would like to change in order to improve your website. However, I am sure that you probably think that if you change certain parts of your website, that you might alienate your visitors.

PSST— In a lot of cases, you probably will not alienate your blog visitors unless your site is hard to navigate, your content starts to suck, or your whole brand changes (the design of your site, logo, and even yourself.)

Ease your visitors into the idea of the change.

1. Let them know of your upcoming plans to change your site. You can make this sound like something exciting for your visitors to keep checking the site. You can let them know with a blog post, or perhaps a tweet, through your site’s newsletter, or maybe a message on your Fan page or a message on any other social network you have.

2. As the time comes to unveil the new design, inform your guests of the changes. Involve them with the change by asking them to contribute their opinion or to tell you if they catch any minor design issues.

3. Unveil the site and again, ask for feedback and even ask your visitors to spread the word, especially if they like the new site design.

4. Try to make the re-brand of your new site’s design consistent with your social network handles, like your Twitter background, Youtube channel, or Facebook page.

Now, the above are suggestions that can be used for total blog and website revamps or partial changes. Including your visitors in on the process allows them to feel like they have helped and that you really do like to listen to their feedback.