Perspective, tips, and insight

Articles to help you improve your digital marketing

Stock photos vs. original photography

Photographs are an essential piece to a business's website.


They allow you to actually show what you do instead of your clients reading about it. For the typical end user, a visual portfolio has more impact than a well descriptive paragraph. With photos being so critical comes the question what kind of photos do you use? There are two answers to this question, either take your own photos or buy stock photos. Of these two answers, which one is better? Let's take a look...

Stock Photos

Stock photography is a common source for website graphics and it is easy to find photos that pertain to most any business via search options. Most popular stock photo websites include iStockPhoto, ShutterStock, and Fotolia among many others. Some of these sites are free and some of them have you buy credit for their photos, but they are all professional photos and there are a lot to choose from.

One problem with using stock photos is that anyone can use them.
Your business could end up with a photo that your competitor is using on their website. This makes your website seem unoriginal from using photos that your clients have already seen somewhere else.

This is a perfect example of Canonical and New Horizons using the same Stock Photograph. It's not the exact same picture, but the people (actors) are the same.

Yet there is nothing wrong with using stock photography, but it might be more beneficial to try to take your own or hire someone to take some for you.

Your Own Photos

Taking your own photos gives you the ability to create what you want your clients to see. It will be unique because you took it, so no one else will have it. Nicely said from D. A. Shaver's blog titled How to Take Pictures for your Website, "...these are pictures for a purpose; not for art". You need these photos on your website for a purpose, not to fill space on your website. It's better for you to take control and find what you would like to be that purpose for your business and photograph it. Shaver's blog gives some great advice on how to take great pictures for you website. What if these photos don't turn out to look professional or anything like the stock photos? Well there are many tutorials out there to help edit your photos to make them look professional. Some of them could take more time than others, but in the end it is worth it when you have a completely original website and photos.

Photo Retouching Tutorials

Useful Photoshop Tips And Tricks For Photo Retouching - By Smashing Magazine

Before and after adjusting the levels
This blog lists a number of tutorials including the example above which explains how to adjust the levels of the photo decrease color tints. This blog also includes a tutorial for adding natural increased light, changing skin tones, and reducing noise.


Photo Retouching Tips and Tricks in Photoshop - by Smashing Magazine


Another blog by Smashing Magazine lists even more touch up techniques like the example above, creating bright eyes with exposure. This blog also includes some tutorials on matching skin tones and defining colors.

35 Fantastic Photo Retouching Tutorials - by Noupe

This blog by Noupe gives some quick and easy tutorials to adjust your photos, including this tutorial on how to make your landscape photo less dull and boring. It also has a useful tutorial on how to reduce wrinkles as well as adding color to a black and white photo and how to reduce blemishes with the clone tool.

Summary

With these tutorials you can create original professional photos for your website. If you don't have the time to take these photos and to retouch them, stock photos are always an option. Just remember that there is a risk when buying stock photos -- someone else probably already bought it for their website. If you don't have the time, go ahead and use it. But if you do have time, we encourage you to take your own, unique and special images that will only be used on your website.

If you don't think that you can come up with your own creative photos, TBH Creative can help and provide an evaluation of your website with a web consultation. We can direct you in the right direction by letting you know how important a great website is. Looking through our industry links can guide you to more blogs that have photoshop tutorials.

Don't Overlook the Importance of a Custom 404 Page

Does this page look familiar?

An example of the standard 404 Error Page
This is a 404 Error page -- a user ends up on a page like this when they click on a broken link, a misspelled link, or a link that no longer exists. Users end up getting confused when they reach this page and could decide to just leave your company's website and move on to the next.

A custom 404 page is better.

Customizing this page allows you to take control and give the visitor some direction on how to find what they are looking for. The best is to design this page to look like your website as to not confuse customers and suggest some links that you want them to visit.

The best 404 pages seem to have some fun with a little creative design, and to include a search bar to help them find what they need. Here are some tips.

Design to match your main website

Customizing your 404 Error Page allows you to show your brand and apologize for the error, as well as list ways back to other pages on the site. First, it should be customized to have the same design as your website. You'll want it to look like your website so that the user knows they haven't drifted away from your website completely, telling them they are just lost.

Suggest links

Second, you can list and suggest links to the pages on your website that you want clients to visit -- maybe your most popular services or contact information. Of course by including the main navigation of your site with a matching design, the client can easily get to where they want, but it's also good to suggest links you want them to go to.

Here's a great example from Frye / Wiles.

Frye/Wiles custom 404 page lists suggested links and links to their latest blog posts.

Lighten It Up

Third, don't be afraid to have a little fun with it. In the Frye/Wiles example, birds sitting on a wire with a blank spot between them and the phrase "Whoops looks like we lost one!" This gives you a chance to play with your company and what you do. It also gives you the opportunity to say, for example, "Hey, it's not your fault you're lost, it's ours. Here are some links that we suggest."

Take a look at these two examples.

CSS Tricks, they have an image of some code, which is what the company is based around and is clever but is ineffective because there is no way to escape, no brand, and no links to other pages.

CSS Tricks ends up being a great example for two things.
  1. A great example of having a little fun with your company for a page that people reach when they're lost in your site.
  2. An even better example of what NOT to do for your 404 page. There are absolutely no links back on this page, unless you hit the back button. It also isn't given the recommended links that can draw your customers back to your site and more importantly to the pages you want them to visit. 

This is CSS Tricks 404 error page. Kind of hard to tell right?
This is something that you don't want your 404 error page to do, lead to a dead end.
 Nclude they have a nice saying of "Whoops! We've slipped!" and they have a picture of a banana peel.

Nclud on the other hand kept their design the same as the rest of their website, included a little bit of humor, but also lists some links that are helpful for the user.


Nclud's 404 page includes humor and suggested links in the paragraphs.


Include a Search Bar

And last but not least, include a search bar. What if the user doesn't want to go to the recommended links that you specified. Instead, they had something specific of their own in mind. A search bar leaves the user to look for the link that they were trying to reach. It could give them the answer they were looking for and it could also give information that could be helpful that they weren't looking for.

Fubiz gives a good example; no suggestive links, but some text and a search bar.

Fubiz also used a little bit of humor spelling "oops" as "oopz" on their 404 page.

TBH Creative's 404 page has some humor and lets you know that they would appreciate you letting them know the link you were looking for so that they can fix it. This is also great to have on your 404 page.

Here is our custom 404 Error Page, we have a link in the body that will send the user to the contact page.

If you're not sure if your 404 error page matches your website, look into it. Once you're there think about the importance of a search bar, suggestive links, and having a creative fun feel to it.

Search Engine Optimization: The first step is to do your homework

I want to be #1 in Google.

We understand. The problem is, so does your competition! Appearing at the top of major search engines like Google is not a simple process of adding keywords to your META tags like it once was. Source: Google Webmaster Central, Matt Cutts.

Google is sophisticated.
The people who work at Google are smart and have developed an algorithm that truly results the best websites for given keywords. How in the world do they do that? There are a lot of factors involved, and they are continually changing that 'algorithm' to ensure the results are good and that no one is cheating the system. We want Google to be this way though -- when you search for pizza, furniture, baby stores, consultants or whatever, you are happy that the results give you what you want. And so it all  begins...


Unfortunately, this means: if you are the best furniture store in Indianapolis but you have never done much with your website or online marketing, Google does not probably know about you. It is unfortunate but true. You are missing the mark and need to catch up and take advantate of the huge opportunity.

When a company comes to us and says they want to 'rank' #1 in search engines, we start with research. We cannot give adequate advice or even a cost estimate until we know more about their industry, competition, current ranking, and optimal keywords. Search Engine Optimization step 1 is research.

What keywords or phrases are visitors and potential new clients really searching to find you, your products or your services?

Make a list... a long list to start is fine and optimal. Brainstorm with your staff, your friends, family and ask your clients. If someone found you online already, ask them what they searched. If you have statistics, look at what they are telling you about keywords.

Try to identify your most important for closing a deal (top 10, top 5, and even top 3 keywords/terms to start).

Of these identified keywords: 

What potential keywords are you not thinking about? It is important to think of your keywords as an outsider. Ask others. Since you are so heavily involved in your business, the keywords that you think of may actually not be what your potential new customer is thinking of.

Adding location value for a local type of business is very helpful to achieve results and also very relevant. Many users search 'what they are looking for' + 'their location'.

For example, in our industry, a term might be 'website design' + 'indianapolis'.

Remember: Spelling matters, the order of words counts, plural vs. singular result in two different results.


    Where do you current rank for these terms? You can search terms in Google to get a general sense of your rank. First, log out of your Google account. That will skew your results significantly in your favor -- you will think WOW, I rank #1 already. That is not true. Google is so smart that your account, browsing history, location and other factors weigh into the results you see. However, it is a starting point. You may consider searching from another computer such as a friends or opening/downloading a brand new browser platform.

      There are tools to give an accurate read that we use to understand and report your current rank. SEOmoz is a great tool and even offers a free trial or a few readings per day without cost.

      Can you narrow down the list based on competition, optimal focus, etc.? For example, if you are a carpet store in Indianapolis. An appropriate keyterm would be 'Flooring Indianapolis'. 'Indianapolis Flooring' also seemed like a good keyword, but would be extremely difficult to achieve #1 spot because there is a company called Indianapolis Flooring and they even own the domain for indianapolisflooring.com and .net. It would be better to focus efforts on the reverse of the phrase 'Flooring Indianapolis'.
        After that initial list is developed, we validate those keywords and determine if how much traffic they could drive to your site (how many people are searching for this term?). This information will give a true sense of the potential available for a given keyword and help evaluate your true return on investment. See sample near bottom of this post.

        Will these keywords actually result in a conversion for your business?

        This is by far the most important question to ask because that's the whole point, right?
        "Get people to my website to make a sale or gain leads."
        In terms of conversion and your keywords, think about what clients and customers are searching for. Be as specific as you can. Remember that conversions are more than just keywords though... true conversions and success are a result of your marketing description when you do rank in search results and the landing page and clarity of call to action when make it to your website.

        Remember, if you get them to your website, you still have to make the sale. The landing page has to be clear and easy for them to find what they need and make contact!

        From this Research...

        Once we have this initial information, we can make educated recommendations around search engine optimization for your business. Below is an example of what kind of information can be determined once we know what keyword you are striving for and how competitive that keyword might be (plus considering your potential rank position).
        If your optimal keyword is 'bankruptcy law indianapolis'. We can determine there are142,000 search results and 650 people searching this term in a given month. Knowing how people search a term over a given period of time can help us determine if it is good target phrase. If the results show only 50 people, we may conclude you would get 20 clicks based on your #2 position. Of those 20 clicks, based on your current statistics, 4 would be a conversion if your conversion factor was filling out your contact form.
        The numbers above are fake, but show you how we would come to our recommendations to help you receive the best SEO strategy.

        A few other starter tips:

        Make sure statistics are set up on your domain. We recommend Google Analytics, and they must be properly installed -- this is baseline of our continual solution and evaluation of results. If you do not have statistics for your website or do not review them regularly (monthly, quarterly); you are missing a huge opportunity and important insight about the success and failures of your website as a marketing tool.


        Make sure the site has a robots.txt file, sitemaps.xml, and is registered with Google Webmaster Tools. These small things allow us to monitor how the search engine is finding and indexing your website content and also helps identify small problems that are usually very easy to fix.


        Summary

        Research is just the starting point to boost your website to the top of the search engine results. Remember that it won't happen right away, but doing the research will help you understand what to target, what your options are, and how much effort might be required to see results... and even how many leads and ROI you could see. After initial SEO research, we recommend a success strategy that will help get you there based on your goals and the competitiveness of your keywords.

        Hiring: Experienced Web Professional in Indianapolis, Indiana (March 2011)

        Position Title:
        Web Professional (Experienced)

        Job Description:
        TBH Creative is hiring an experienced web professional. If you understand websites for business and a broad range of skills from code to graphics to social media, you might be a fit. This is an opportunity to utilize your experience and continue to grow your expertise.

        Requirements/Skills:
        • 4-year college degree required.
        • BS in a technical or creative field preferred.
        • 2+ years of experience in web design or development role.
        • Proficient with Photoshop, HTML/CSS coding
        • Excellent communication skills.
        • Highly organized and able to work concurrently with multiple projects.
        • Understands how to use Social Media and its benefits for business.
        • Recognizes what good web design is.
        • Quick learning of new things and changing technology.
        • Passion for high quality website work.
        • Highly motivated to learn more about building successful websites for businesses.
        • Comprehension of SEO techniques and strategies a plus.
        • .NET experience and programming skills a plus.
        • Flash or video editing experiences a plus.

        Primary Responsibilities:
        • Page by page website work to increase effectiveness and performance of website.
        • Routine daily maintenance of existing sites and applications – from graphics to code.
        • Social media and online marketing assistance.
        • Run and learn to analyze Google Analytic and SEO reports.
        • Research of client competitors and reporting.
        • Content Management System training/support.
        • Formatting website pages.
        • Project specifications/requirements gathering as needed.

        Daily Tasks:
        • Perform requested site maintenance as needed for various clients.
        • Design and coding on projects.
        • Research as it relates to Social Media – SEO – Google Analytics.
        • Take ownership of daily project needs and communications.
        • Communicate project status and deliverables with managers and clients.
        • Manage project tasks, timelines, and track/record time.
        • Other tasks as needed and related to online strategy.
        • Attend project meetings with team/clients.

        Company Information:

        TBH Creative is an energetic and reliable full-service web design company located in Indianapolis, Indiana. As we approach 10 years in business, our reputation and experience speak for themselves. Plain and simple... We design and build high-end web solutions for business.

        Our office is located in Northeast side of Indianapolis near Castleton and Keystone Mall.

        Compensation will be based on experience and/or expertise.

        If you are interested in this position, please visit http://www.tbhcreative.com/contact/employment-application/default.aspx to apply and send samples of work to jobs@tbhcreative.com. No phone calls, please.

        Hiring: Entry Level Web Professional in Indianapolis, Indiana (March 2011)

        Position Title:
        Web Professional (Entry Level)

        Job Description:
        TBH Creative is hiring an entry level web professional. If you understand websites for business and a broad range of skills from code to graphics to social media, you might be a fit. This is an opportunity to gain a lot of experience and growing responsibilities based on performance.

        Requirements/Skills:
        • 4-year college degree required.
        • BS in a technical or creative field preferred.
        • Proficient with Photoshop, HTML/CSS coding
        • Excellent communication skills.
        • Highly organized and able to work concurrently with multiple projects.
        • Understands how to use Social Media and its benefits for business.
        • Recognizes what good web design is.
        • Quick learning of new things and changing technology.
        • Passion for high quality website work.
        • Highly motivated to learn about building successful websites for businesses.
        • Comprehension of SEO techniques and strategies a plus.
        • .NET experience and programming skills a plus.
        • Flash or video editing experiences a plus.
        Primary Responsibilities:
        • Routine daily maintenance of existing sites and applications – from graphics to code.
        • Social media and online marketing assistance.
        • Run and learn to analyze Google Analytic and SEO reports.
        • Research of client competitors and reporting.
        • Content Management System training/support.
        • Formatting website pages.
        • Project specifications/requirements gathering as needed.

        Daily Tasks:
        • Perform requested site maintenance as needed for various clients.
        • Strengthen design and coding skills.
        • Research as it relates to Social Media – SEO – Google Analytics.
        • Take ownership of daily project needs and communications.
        • Communicate project status and deliverables with managers and clients.
        • Manage project tasks, timelines, and track/record time.
        • Other tasks as needed and related to online strategy.
        • Attend project meetings with team/clients.

        Company Information:

        TBH Creative is an energetic and reliable full-service web design company located in Indianapolis, Indiana. As we approach 10 years in business, our reputation and experience speak for themselves. Plain and simple... We design and build high-end web solutions for business.

        Our office is located in Northeast side of Indianapolis near Castleton and Keystone Mall.

        Compensation will be based on experience and/or expertise.

        If you are interested in this position, please visit http://www.tbhcreative.com/contact/employment-application/default.aspx to apply and send samples of work to jobs@tbhcreative.com. No phone calls, please.

        IE6: To Test or Not To Test?

        This is the question that plagues most web developers. IE6 has been around for 10 years now and I'm sure developers have been hating it for the past 5 years. Not everyone has moved on from IE6 even though Internet Explorer is pushing out IE9 (currently in Beta, but to be released sometime this year). IE6 doesn't support a lot of things and not to mention the amount of bugs that pop up while using it. It also is lacking security features, like privacy. It's so old it lacks many of the new features that appear in current web browsers today.

        I found a website, BrowserUpgrade.info, which discusses some of the things I mentioned above. It also states that IE6 is bad for users because there are security risks and bad for businesses because developers are wasting their time trying to get their websites to work correctly. The answer for some developers are hacks, but this slows down the site and makes it difficult to update the site.
        • IE6 has limited or buggy support for modern web standards
        • IE6 is not very secure and lacks privacy features
        • IE6 lacks many well-loved features such as tabs, RSS integration, transparent PNGs, etc.
        This article, Top 30 Websites, Viewed in IE6, by Elated that was written in November last year. So just last year these websites were developed, which for the most part work in IE6, and wasted time making sure that the still looked the same and worked the same in IE6. Even Facebook produces a pop up that says it would be better to upgrade to a newer version or use a different web browser. It says not everything will work on their website, including the chat feature.


        So it has come time for developers to take a stand, which they have been doing for a few years now, and they have been heard. I stumbled across this website powered by Microsoft called IE6 Countdown. Microsoft has dedicated this website to watch IE6 drop from the current 12% (which has dropped 9% from the previous year) of the world using it to 1%. According to W3schools, that number is already even lower: 26% of users use IE; of that only 4% are still on IE6 = less than 2% [Jan 2011]. They have also noticed that it would save developers time once IE6 is gone and have also posted how to join the cause and spread the news on this site.


        So now that Microsoft has come to the realization with the rest of it, what can we do as designers until this count reaches 1%? This is where designing and presenting in the browser comes into play. This is something that Andy Clarke discusses in this article Ignorance Is Bliss. Instead of designing a layout in Photoshop, providing a static image that brings expectations; design in the browser. This will allow the developer to correct these errors that appear in different browsers. Don't do this with IE hacks to try and make PNGs work or creating rounded corners, just design a different layout that is similar but looks/works well in the browser that your client will view it in. The client is going to go through every browser to make sure that it looks the same. In the article, two clients from the company were satisfied with the website when they viewed it in their browsers. They saw two different layouts for the same site and they both approved the design/development because they were happy with it.

        In summary, don't succumb to IE6's evil ways. Don't develop so that your site looks the same in every browser, despite their flaws. Embrace their flaws, at least you know what they are and you can just design differently to accommodate for that. If your client is using IE6, send them that website that Microsoft posted. If they insist on not upgrading their browser, then make them a simple site; and if they say it's too simple, tell them that IE6 doesn't allow for you to use rounded corners or PNGs or whatever it is they're wanting that IE6 doesn't allow.

        Also share with your friends that Microsoft is counting down to the day they can remove IE6 from the world, it's a great stop for change. :D

        Subtle Web Design Changes Make a Big Difference

        As a website designer, sometimes you have to take a step back and think to yourself, what would make this website stand out? What would make it special or unique? You could either decide that you've gone in the wrong direction and start from scratch or you could use techniques to create subtle changes to the design that really make a big difference.

        Business owners with a website are in the same boat. Should you scrap it and start again or hire a talented web design company to make subtle and effective changes?

        A good web designer knows she could add changes to the background, special text treatment, use jQuery, or add custom buttons that will can a big impact.


        Background

        Adding subtle changes to the background could include a number of techniques. I'm going to provide some tutorials for the most common techniques that I see used on websites. Here is a tutorial, Basic Web Page Background Techniques with CSS, from Line25 that has a few of the techniques I'm going to discuss into detail below.

        Gradients
        Using a gradient for the background shouldn't be too tricky. The most effective and subtle way to use them would be to create the gradient with two colors that are somewhat close to each other. This way when users are looking at the website, their eyes don't become distracted by the gradient (taken them away from the content), but the background won't seem flat. They will notice that something nice is going on behind the content that is almost soothing. Gradients are one of those design elements that when you see a good one, it's relaxing. If you are going to use more than two colors, just make sure that it doesn't look tacky/crazy and that the colors flow from one to another. Here is an example of a multiple colored gradient background that looks nice.

        MotoCMS


        Another great thing about gradients is that you can either create a repeating background image OR you can create a gradient with CSS3. Here are some tutorials for gradients.
        CSS Tricks - Speed Up With CSS3 Gradients


        Bjango - Gradients

        This tutorial is really useful as far as all gradients go. Plus it's a good way to be able to create your own buttons.

        Texture
        Adding a texture to the background is probably the most common way to add a subtle change to your design. I mostly add textures to my web designs with Photoshop brushes. Brushking, My Photoshop Brushes, and Brusheezy are probably the most popular sites to download brushes from. Here are some of my favorites to use.

        Grunge


        Old/Crinkled Paper


        Blurry Lights


        Patterns
        Now patterns can get complicated depending on how detailed the pattern is. Patterns can either be used for the background or they could be used for small detail. I'm going to give an example of this one because it's kind of hard to describe. You can also find patterns at My Photoshop Brushes and Brusheezy. This website uses multiple patterns for different sections of their page. Though there are three different patterns being used, they are blended in well with the background colors making them very subtle.

        Panoetic


        The next example of a patterned background is a bigger and more detailed pattern. The pattern is big enough to seem almost like noise to the background color. It's not too noticeable, but once you start concentrating on it you can see that it is very large.

        Gravual


        Lighting
        This is something that a designer can easily add either behind their logo or behind their content boxes. Usually it should be used to make a certain area stick out. If your background color is a lighter color you could darken their area behind your Logo or behind a Call to Action section, distinguishing it from the rest of the content. Or if the background is a darker color you could lighten the areas behind those sections. In this example the area behind Beauty Brains is highlighted to make it stand out.

        Foundation Six


        Headers
        This section isn't about making subtle changes to your header design, we're still in the background section. A trend that I have been noticing a lot more is a design that is behind the header/beginning of the content box. This design remains at the top and the rest of the background fades into a single color.

        Bohemia



        Special Text Treatment

        There are many things that you could do with text as I have mentioned in other blog posts. Of course you can enhance a header or a call to action with a different text than your body. This can be done by using a Photoshop font with a graphic or a web safe font (which has expanded with Typekit and Google Web Fonts). A few other ways that I'm going to list are dropshadows and the sunken effect. There are many other effects that you could use, but these are the most subtle and easiest to create in my opinion.

        DropShadow
        Whether you're creating a dropshadow with Photoshop or with CSS3 (which depends if you're using a web safe font or not), dropshadows are one of the easiest techniques to add to your site to give it some extra umph. I have a few examples, but I'm sure most of us know what a dropshadow looks like. First here is a tutorial of how to create a dropshadow with CSS from CSS Tricks.

        Tinder

        This site also uses the Sunken Text effect that I'm about to discuss.

        Sunken Text
        This is a technique that I continue to see more and more. I really like this effect. I think that the dropshadow has been a default to fall on when trying to added a certain something to a website. I'm not saying that dropshadows aren't tasteful, but this is something that is new that you could play around with. The example that is below is from a tutorial on how to make a layout for a website, but I am focusing on Step 4: Adding the Tagline. It explains step by step how to create this intriguing text effect.


        JQuery

        I have discussed jQuery numerous times in my previous blogs, so I won't take too long on it. I'm actually going to link to the 6 Secret Weapon JQuery Tips blog. I'll still list a new example, but jQuery is something that you can add to your navigation and a slideshow to make them more interactive and interesting. Here is an interesting one.

        Fly Out Menu



        Custom Buttons

        Social media buttons and buttons for navigation for the most part always look the same. Yes, there are may different buttons out there, but sometimes we create buttons purely because we liked the way that someone else did it. We look at it and twist it a little to make it our own. I want to encourage designers to create their own buttons, especially because it is easier to match the theme of your website. I'm going to provide some good examples, but don't try to steal them! :]


        Occasions by Elizabeth


        Toasted Digital


        Pink Turkey

        Fort Harrison Reuse Authority (New Site Coming Soon)


        Summary

        Even though subtle changes are what they are [subtle], they truly help a website stand out. These techniques help clean up the design from looking flat to looking fabulous. Remember to use them wisely, use them in the areas of your site that you want to stick out the most and draw your customers to. Also feel free to share some subtle changes that you like to use or one of your favorite tutorials for enhancing a website.


        Receive articles in your inbox