I want something more in tune with the new main site look, but not exactly that. Might go with red, black, and white to match it though.

Time to get out the paintbrush.

~Nicole

Quit Using URL Shortener Services.

Why Not Just Use Some URL Shortening Service?

If you’e arriving at this article directly, head back to part one to read about why to make your own short urls.

Moving Along

Well, so far I’ve shown you ways to work with your existing CMS to create short urls, but the last methods are sometimes less time consuming in the long run but a bit more technical to start with.

Let’s talk about what some good options might be.

If Your Domain Is What’s Long

So what if you have a piece of software or structure that allows you to shorten the end of your url into something more workable. For instance, the last article in this series has a page link that looks like this normally:

http://blog.websitestyle.com/index.php/2009/04/19/make-your-own-short-urls-in-ee-mt-joomla-drupal/

Since I run that site using WordPress, I can also access that page this way:

http://blog.websitestyle.com/?p=458

Now my nice page names can be as long as they need to be, and that part of the URL is nice and short. In this case, it’s actually my main url portion ( blog.websitestyle.com ) that could be shorter.

Using an Alternate Domain

So what’s an easy maintenance option for that? What if I take another domain name and forward it to that. You could make something short, but in my case I just use one of my other domains on this one to manage it (although this may change in the future so don’t count on this being testable forever using the link below).

I take my websitestyle.net (16 characters) domain, and redirect it to blog.websitestyle.com (21 characters).

Redirection Screen in GoDaddy.

So now my short url to that last post will be 30 characters total:
http://websitestyle.net/?p=458

Yes, that’s longer than the url shortened version of tiny shortened version with only 20 characters.
http://tiny.cc/M9CHx

But again, it’s about trust, if I looked at the two links below, I know which I would trust more.
http://websitestyle.net/?p=458 OR http://tiny.cc/M9CHx

Can It Be Even Shorter?

Sure! If your going to get a new domain name, nothing says you have to get a name that is exactly your domain with a different ending.

Anyone who follows TechCrunch.com on Twitter has seen their links done like this: http://tcrn.ch/Uj

Nothing holds you back from finding a creative way to put your site name in the link because it still tells people that it’s your brand, your site, your trust that you’ve earned.

Can I Do This On WordPress.com Blogs?

Sure! If you’ve got a free blog on WordPress.com you’ve definitely got the long domain issue, but you have the built in option to use the numeric version of your post. You’d do it exactly the same way, get a new domain name, forward it to your WordPress.com blog URL, and it works.

My Post Title Is Still The Problem

If you’re not using any of the services mentioned in the second and third articles in this series, then you’re probably going to need another solution to shorten your urls.

Obviously a bit more of a learning curve to do this, but there are definitely options. In a nutshell, you just install some software that basically provides the same functionality as a TinyURL service – but using your domain name.

You can try out the two software options below that you would install on your server hosting:

TightURL – http://tighturl.com/project/

Shorty – http://get-shorty.com/

Wait Wait, Can’t I Just Use mod_rewriting For This?

Yes, but manual mod_rewrites are way more technical than the simple solutions we’re talking about. If that’s what you’d like to look into, here are a few articles on how to mod_rewrite.

Wrapping Up

Hopefully this has given you some options to consider when you’re thinking about using a url shortening service. My emphasis to you would be this:

Keep it yours. Keep it simple. Keep it safe.

Read The Whole Series:

Part 1: I Don’t Trust Short URL’s
Part 2: Make Your Own Short URLs in WordPress
Part 3: Make Your Own Short URLs in EE, MT, Joomla and Drupal
Part 4: This Article.

So I was browsing around looking at WordPress themes (again) and I decided to conduct an experiment on my ‘reaction’ to the themes. I ended up collecting a list the 13 most eye-catching, reaction causing (good and bad), non-traditional theme headers I saw yesterday.

Consider this ‘inspiration’ for the non-advertising specialist. Or just use the images as ideas of what you could possibly do with your own site. As a web designer I’m often expected to know what kind of images and text are best for marketing and advertising etc.. Well, I don’t know about you, but my knowledge of that is fairly limited. That’s what advertising and marketing people are for. I know people who work in advertising – they practically have an encyclopedia of "what images cause what reactions in people" and "what works get people to do certain things" and probably lots more I’m unaware of.

However, even with my limited knowledge, I think most people have heard about the ‘above the fold’ importance. That need to grab people and make them at least move their eyes around and possibly stay a bit longer. Attention getting top areas of your site. Something that makes the speed-browser in all of us slow down. All the screen-shots are above the fold for me – only what I could see immediately. For reference, I’m on a wide screen monitor with high resolution, but I also have 7 Firefox toolbars (don’t ask) taking up space at the top.

I look at theme houses (sites that are mega-lists of themes) ALOT, and I realize there are actually a couple of stages you have to go through to get someone to actually look at your theme:

1. The first is that you have to get them to take notice of your design from a little screenshot.
2. Part two is to get them to click that all-important ‘demo’ link so they look closer at it.
3. Part three is getting them not to hit the back button because they hate what is above the fold on site.

If you can keep them there a few seconds, you might actually get them to like the entire theme and consider downloading it.

So, back to the experiment.

I decided to write down what I thought about as I was browsing. I wanted to see which ones got the most reaction out of me based on the header section. Obviously the themes I’m going to show you got me to click on the little thumbnail, but I’m going to share my first impression of some of the themes I looked at yesterday.

Now, hopefully by the time you’ve gotten here, all the images have loaded. So have fun, and feel free to try out the demo links so you can see if your ‘up close’ reaction was anything like mine.

Disclaimer: I am not advocating these themes as great themes. In fact, I don’t like most of them as entire themes. Some are actually just plain broken beyond the header. These are just examples of eye-catching header designs, nothing more.

Odd Note: Some of these themes actually ended up having the same author. This was not intended, I merely bookmarked the designs that got the most reaction and then when I was writing this up I discovered some had the same designer.

#1 – Forbidden Forest

Thoughts: "Wow. That’s really cool looking."
Links: Theme page. Online Demo. Designer.

#2 – A Good Catch

Thoughts: "People just LOVE to use animals to make people go ‘awww.’ Cute sketches."
Links: Theme page. Demo page. Designer.

#3 – Cherry Swirls

Thoughs:"Whew, that’s alot of color. I like the sweeping curves. Cutesy and summery but that bright yellow is evil."
Links: Theme page. Demo page.

#4 – City Slicker

Thoughts: "Now that’s neat. I like all the graphics at the top… but why so teeny?"
Links: Theme page. Demo page. Designer.

#5 – Desktop

Thoughts: "I love the collage headers. Always makes me stop and look at all the individual stuff."
Links: Theme page. Demo page. Designer.

#6 – Dreaming Off

Thoughts: "Lots of color, but I like how it is hanging on the sides like that. It makes a major impression above the fold, but its actually not the ‘header’ that does it but everything that’s around it.
Links: Theme page. Demo page.

#7 – Fleur

Thoughts: "Gorgeous. Finally, the only one I like the whole page of. Very minimal."
Links: Theme page. Demo page.

#8 – Kukufall

Thoughts: "Interesting illustration. Really grabs your attention."
Links: Demo page. Designer.

#9 – Lover Paradise

Thoughts: " Color! Wow. Lots of it. Very neat looking."
Links: Theme page. Demo page.

#10 – Orange Kitten

Thoughts: "Awww. Again, we know about the animals, but now we also have the protective reaction and it looks like the darn kitten is about to fall off."
Links: Theme page. Demo page. Designer.

#11 – My Gerbil

Thoughts: "Eep! What a way to freak out your viewers and get their attention. I literally leaned back when this loaded up. Just the thing… a rodent with beady eyes staring at you!"
Links: Theme page. Demo page. Designer.

#12 – She’s Got Style

Thoughts: "Ooooh… I love that drawing! I wish I could illustrate like that.. I need to find that artist."
Links: Theme page. Demo page. Designer.
(Note: There is a separate artist of the graphic. She has a deviantART page here http://vikifloki.deviantart.com/ and has a great looking gallery of other illustrations.)

#13 – Summer Holidays

Thoughts: "When all else fails… just put the site on the wrong side and scribble all over it."
Links: Theme page. Demo page. Designer.

That’s all folks! Hope you were inspired, and at least not too creeped out by the rodent

~Nicole

If you’d like to join in and don’t have a theme handy, there are a couple I happened upon that were really great for it.

There’s a blog called Scribblescratch.com that’s got quite a few unique themes in various ‘girly’ designs.

Here are two on the site specifically for the October pink switch:

You can download them both here. There’s actually quite a few others on that page that might serve well for the pink theme.

I’m not entirely understanding why all these themes are flagged as ‘based on the Dusk theme by Beccary’ … they all seem unique enough to me in comparison to stand on their own, but ah well, to each his own.

I’m really liking the pink plaid, I might even borrow that one this year. Who knows.

One from last year that I recall was this one from 5thirtyone.com.

Not sure if that theme works with new versions of WP, but you might check it out.

Another from last year was this one, which actually has 2 looks to it. A business’ish look and a fun look. I much prefer the fun look:

You can check out a live demo here, or see the downloads.

If you none of those fit what you are looking for, head over to the Pink Section of the Theme Viewer and browse around

Have fun!

~Nicole

Note: Unless you are really picky about how the colors in your entire site coordinate, you probably will not go to the trouble to use this for everyday photos you insert in your site, but you may find it useful for images that are integral to the site design in some way.

The first thing you will need is a screenshot of the web design you want the image to coordinate with. I’m going to use my old Midnight Rainforest design for this because it’s a very simple design and uses few colors (which makes it even more challenging to do this process with). If you have design that uses gradients or many colors, you will probably have it a bit easier.

Here’s a full screenshot of the design I want to match with:

Now I have a couple of images (from PDPhoto) I’d like to match to this design, but the colors they use are very different from the dark greens and blacks used in the Midnight Rainforest design.

Crawfish:

Hot Air Balloon:

Here’s what they look like currently in the design.

The images look fine, but I’d like to make them match the design much more. The first thing we need is that original screenshot of the design without the images.

We will open the screenshot in Photoshop. Then also open a window with one of our images, starting with the crawfish.

Make sure that you click on the image you want to change so it is the active image, as in the above image. With the image you want to change active, go to Image -> Adjustments -> Match Color…

When you click on ‘Match Color…’ it will bring up a dialog box with some options. Near the bottom of that dialog box, you want to use the drop-down that says ‘Source’ and select the image you want to GET the colors from, in this case, that’s the original Midnight Rainforest screenshot image.

From that point, you can adjust the ‘Image Options’ sliders (Luminance, Color Intensity, and Fade) to get it to look the way you want.

When you are done, click ‘Ok’ and then save and close the crawfish image. Now you can open your next image (the balloon). Note: Leave the Midnight Rainforest screenshot open so it is an option in the source selection.

Repeat the process with the hot air balloon image.

Your new design images should now coordinate alot better with the design because they are using the colors from the design itself.

Remember that the color matching works the best if you have alot of color to start with, and the starting design had only a few colors, but I think the result definitely coordinates better with the overall color scheme.

Again, I don’t suggest doing this for EVERY image you might put in a daily blog or often updated site unless you are extremely picky about the cohesiveness of the color in your design. I would instead suggest this be used to enhance certain commonly used pictures in standard websites.

A few examples where this could be used might be:

• A photo of a business location on a locations page.
• A photo of employees or the site owner.
• Graphic sets to let people link back to your site.
• Etc…

Hope this helps you out in some way!

~Nicole

Of course, the problem with that is that I do great designs for my clients and I realize that I’m not showcasing my abilities on my own business site. My current site doesn’t exactly tell a potential client that I am quite skilled with graphics, nor does it scream that I am decent with creating enhancements on a site with Javascript and DOM in a nice accessible way. It doesn’t even yell out loud that I’m strong with CMS and blogging software, nor does it give a great indication of my ability to use PHP since I never bothered to take my main site code out of SSI. This is what procrastination causes. Anyway, point being – I am trying to put together a nice ‘portfolio’ site. Something that I actually really put some effort in and use all of my skills in some way.

So I had been talking to a artist who was going to take an outside point of view on my site and try to help me conceive an idea for it and design it for me. Well, a few weeks later and that plan has changed. Unfortunately, my artist and myself haven’t been able to find a ‘meet in the middle’ point. My design preference is very minimal, where she is the kind of artist who wants to cover any white space because its ‘being wasted.’ So… it just wasn’t going to work to have her conceive of a design that I could use.

We did, however, realize quickly that she’s great at coming up with unique ideas for -other- designs, just not for my site. So we’ll implement some of those in the future. However, in all that creativity she had, I still was lacking a good design. So, I did the only thing I could do – I cracked open my Adobe Photoshop CS3 and started tinkering with ideas. And tinkering. And scrapping. And tinkering, and tossing. But then! Suddenly, I had the beginnings of an idea.

I knew already that I wanted my colors to stay at least similar to what they were already. In an ideal world, I would keep the exact colors and just use them in different ratios. When you change a site design entirely, it’s rather important for the site to still have some elements that are recognizable so your viewers don’t think they mistyped the url. With that said, I just also didn’t want to suddenly take my rich earthy toned website and make it look like a cotton-candy explosion.

My current color scheme involves the use of a deep burgundy, a rich chocolate color, some soft beige, a little white, and hints of gray. My design now uses the white the most, but right after that is burgundy, beige, then the chocolate and gray. I wasn’t terribly happy with that proportion, because I like the richness of the browns and really wanted to work with them more. I used one particular brown color for my skiplink menu at the top and really love it – so I decided I wanted to try with that color as a background.

Another thing I have been thinking about is my title font and little flower image in my current design.

To put it simply – I hate them. I have for a while, but I’ve just been too busy (or maybe too uninspired?) to change it.

I decided that since I hate them so much, I would focus on creating a title and flower design that I really loved. It took me a while to work that out, but I finally nailed the font I loved in Trajan Pro. It’s exactly what I was looking for in a traditional style print. So I’m going along, tinkering with brushes, and I used this great flower brush that really fit what I was going for and took the scale completely to another level from the old little ugly flower.

So I played with the title and flower, and played some more. Suddenly I realized what I was doing. I was having a design ‘moment’ and really creating what I like personally. I decorate at home in heavy traditional styles. Not modern traditional, but traditional as in antique, heavy, inlaid, carved (preferably all of the above) sort of furniture. I like dark, rich colors, with a heavy impact. This new design is definitely heavy. But you know what? It’s perfect for me for it to look like that. It is a personal site and if it’s going to reflect who I am, then it needs to be a heavy design because I’m just not a light and airy person. So… I decided to step out of my minimalism hat for a bit and went for the rich and dark sort of look.

If you want a sneak peek, here’s a look at that header, flower, and rectangle loving design remixed:

Before anyone starts thinking.. ew.. ‘I hate dark designs!’ let me say first that I don’t. I love dark designs. It’s also my website, and I want it to reflect what I like. However! Since I am going to use this as a showcase of what I can do, I will be adding in an alternate (at least one) switchable style that is completely and totally different – when I figure it out, that is. I am thinking, currently, of a chocolate, white, and pink deconstructed sort of look, but I’m not entirely certain what the alternative style will end up being. The only thing I do know is that the alternative style will be as light as this design is dark.

I had some great success working on this design today. I’m not going to be implementing it tomorrow. I probably won’t even implement it this next month. The design needs finishing, a few details, and then… I’m going to re-write some content, re-organize some of the pages and how they are laid out, and then I have to take it from being a rather complex Photoshop design to a completely flexible website design. Once it’s actually coded – then I can start creating some enhancement effects with Javascript and toying around with adding nifty features.

So.. it’s been productive. I am glad I decided to attempt getting outside input on it, but in the end, I finally ended up figuring out what I wanted and deciding to simply design for me.

~Nicole

October is Breast Cancer Awareness Month, and there is a great website that is getting people involved by asking them to go Pink for October. From that site you can read the overall purpose:

Web sites will Go Pink during the month of October to bring attention to Breast Cancer Awareness Month, get people talking about breast cancer, and raise money for research.

Simple enough, and for a good cause. I urge anyone who can spare a bit for the changeover to do up their site in support of this month.

While I’m not terribly fond of pink, I actually sort of like this look for the site. The change over was a quick and dirty job of changing color hues on my graphics.. but I might tweak it a bit more to make it look better. If you are a pink hater, feel free to change the theme – link to do that are currently on the left hand sidebar.

~Nicole

I’ve only very recently migrated this blog over here to this new location and am running it on WordPress. However… when it comes to thinking up what sort of design I want to do, I keep hitting mental blocks. The same happens with my personal site. Oddly enough, I don’t have this issue with other peoples sites. I can easily design for someone else, I even have marvelous little flashes of artistic flair that pop up when I do… but when it comes to my own sites I have a recurring problem with it. I’ve tried various techniques to change this, like trying to pretend that I’m designing for someone else. It doesn’t work, and I’m still not sure why.

Granted, for any really artsy and graphical sites, I’ve always sub-contracted an actual graphic artist to do the work. I guess I am just stubborn when it comes to my own website. Regardless, I am finding myself yet again trying to determine what sort of design I want to do. I have lots of things that I’m going to need to do to this new blog still, and coming up with alternate styles and more accessibility for the new blog is a priority. I’m still just not sure what I want.

I’m trying to come up with solutions and ideas for themes that would fit both Beyond Caffeine (this blog) and Website Style (my main website that feeds from my blog). A cross between something fun and lively (stylish?) and something elegant and cafe feeling. At the same time, I tend to prefer clean styles – though I am willing to try something different. Is there a way to blend the two smoothly… that is what I’m going to be figuring out. I plan to reboot them both with a new theme for the May Reboot, so I’ve got a while to hopefully come up with some ideas. Suggestions are definitely welcome.

Edit: Ironically, the morning after I posted this I came to a realization about the color scheme I wanted for this blog.

~Nicole

Website colors are extremely important. One second. Let’s say that again. Color is VERY important. Allright. Now let’s continue.

To begin to illustrate why colors are so very important, we have to list a few basic aspects of color:

• Color evokes emotion. (More specifically: People subconsciously react emotionally to colors.)
• Color guides the eye. (Meaning that colors are used by the user to follow a trail across a page.)
• People see colors differently. (Ever have someone tell you that your dark-blue shirt looks black?)
• Computers limit color. (Computer monitors and operating systems will limit and change how colors are shown.)

Color Evokes Emotion

These things are pretty much standard after much research and testing, so I’m just going to give you a quote from a nice article on this topic found here.

“Red is associated with blood, and with feelings that are energetic, exciting, passionate or erotic. Most colors carry both positive and negative implications. The downside of red evokes aggressive feelings, suggesting anger or violence.

Orange is the color of flesh, or the friendly warmth of the hearth fire. The positive implications of this color suggest approachability, informality. The negative side might imply accessibility to the point of suggesting that anyone can approach– a lack of discrimination or quality.

Yellow is the color of sunshine. This color is optimistic, upbeat, modern. The energy of yellow can become overwhelming. Therefore yellow is not a color that tends to dominate fashion for long periods of time.

Green In its positive mode, green suggests nature (plant life, forests), life, stability, restfulness, naturalness. On the other hand, green in some tones or certain contexts (such as green skin) might instead suggest decay (fungus, mold), toxicity, artificiality.

Blue suggests coolness, distance, spirituality, or perhaps reserved elegance. Some shade of blue is flattering to almost anyone. In its negative mode, we can think of the “blues”-the implication being one of sadness, passivity, alienation, or depression.

Violet is the color of fantasy, playfulness, impulsiveness, and dream states. In its negative mode, it can suggest nightmares, or madness.”

Now, there are quite a few websites that have really gone into detail on this topic, I definitely suggest you give Google.com a whirl. However, I’m going to point you toward a couple of sites that are really helpful.

One website called ReturnofDesign has a excellent sampling of popular color schemes that are pleasing to the eye on their color page. That site is great if you want a tried and true color scheme.

Another favorite of mine is WebWhirlers. This site includes some indepth discussion on color theory, and has a lovely little online software program called ‘The Color Wheel’ (free) that lets you create your own complimentary color scheme.

Color Guides the Eye

Where you place your colors, and how you use them, will influence where your viewer looks. Whether you are looking at a webpage or someones living room, some things will always attract the eye better than others. Various things do factor in, such as size, shape, and placement – but color is one of the key elements involved. A careful balance between using color to help guide the eye, and maintaining accessibility standards for the visually impaired is something that will be addressed in another section. For now, let’s focus on some steps.

• Step 1) Analyze what your website is for.
• Step 2) Decide on no more than four important visual components of your site. (Remember that your site name is always one.)
• Step 3) Use a common visual model, or make one that guides the eye on its own.
• Step 4) Use emotion specific colors from your color scheme to influence the response to the points.

These things will help some, but the real test is to watch someone visit your site for the first time. Ask a friend, coworker, or relative to take a look at your site. Watch their eyes and their face.

When someone hates a color, they tend to squint when their eyes go near it, somewhat in a way of ‘blocking it out.’ The same with things they can’t see clearly and applies especially to small text. Also watch to see if their eyes follow a natural and easy flow or if they are darting all over the place. Ask them to find you some things on your site. Do they naturally go to the right place or are they not sure where to find it and start searching?

Overall, it’s very important to get actual user feedback on a website.

People See Color Differently

I gave the example earlier about the person who thinks your dark-blue shirt is black. Everyone has a different ‘range’ of color that they can see really well, and this is affected by various vision issues that you have no control over. However, what you can do to control it is to follow three small rules in your color design:

• Make sure that you have a drastic color contrast for things that should look different.
• Make borders fade gracefully by using a series of small changes in background colors around the edge, rather than one start line.
• Remember that people always recall and see information better if it is light text on a dark background better than they recall dark text on a light background.

Computers Limit Color

This is a somewhat intricate topic, so I’ll just give a non-technical overview. Some colors will not show up properly on your users monitor. To compensate for that, the web community has distinguished 216 ‘Web Safe’ colors. An 8-bit monitor displays 256 colors, but not all of those are Web Safe colors. This article explains the entire reasoning behind the ‘Web Safe’ colors. That is definitely some good reading. However, if you’d just like to see what the colors are, you can take a look at the Web Safe colors that W3Schools has on their site. Also, Visibone has a great little color lab program on their website that you can use online. This program will not show you the colors that look best together, but it will show you how the colors look together, and it only uses web safe colors.

Overall, remember: Color Evokes Emotion. Color Guides the Eye. People See Color Differently. Computers Limit Color.

~Nicole