Post under Web Design | By LGR | On January 18th, 2010
I have been doing more research on best practices for landing pages recently and came across this great video on YouTube. I have watched and listened to this video several times now and thought I would share it. It has given me some great ideas to improve some landing pages for some of the pay per click campaigns and websites I work on. I am amazed at how some of the little things that he talks about makes such a huge difference in conversions.
If you don’t have the time to watch / listen to the video here are the seven deadly sins that Tim Ash talks about.
I have talked about my problems picking colours in the past. Fortunately I have found several tools that can help me, and today I found another one. Color Scheme Designer is a Javascript, browser based application that you can use to create colour schemes based on the various colour rules (are they rules?), such as mono, complimentary, triad, tetrad, analogic and accented analogic. It is an easy to use tool to help pick colours and allows you to preview your colour selection on a light and dark examples. The site even offers an API for those that want to tap into it. One of the more interesting features I discovered is the ability to simulate different colour deficiencies that people have. You can see what the colour scheme for your website looks like for someone that is completely colour blind for example.
If you are looking for a new tool to help pcik colour schemes for websites, or any other design projects take a look at Color Scheme Designer. It might be just the tool you need to pick the right colours for the job.
Light background web page example.
Dark background web poage example.
P.S. I know I used color and colour through out the post. I am Canadian, to me spelling it as color is wrong, so I only spelled it that way when I referred to the site because that is the way they spelled it.
One of the things I have had on my to do list was to replace the WordPress search with the Google Custom search. The WordPress search gives decent search results, but it is hard to compete with the accuracy of Google website search. I was reminded about that today when I was searching for a post I knew I had written about url canonicalization but I could not find it with the WordPress search quickly. I have written about Google custom search in the past and decided that this was the time to add it to the site.
Adding a Google Custom Search to your website or blog is a very easy thing to do. The first step is to visit the Google custom search to create your new custom search. Click the nice big button that says “Create a Custom Search Engine” to get started.
You will then be presented with a screen similar to the one below. Follow the simple instructions to setup you website search engine by giving your search engine a name and description. You probably want to skip the keywords box for a website search engine. It is important to select “Only sites I select.” under what sites you want to search, unless you have network of websites that you want to including in your results. In the select some sites input box make sure you take a look at the “Tips for Formatting URLs. You need to enter the URL correctly or your search engine might not search your entire website. For example to search all of a website you need to enter it like this:
Entire sites: Specifying www.mysite.com/* will include all the pages on www.mysite.com.
Once you agree to the terms of service you can then try out your new website search engine and manage many if the smaller details about it. Some of the sections you might want to pay attention to to manage your website search include the look and feel tab and the code sections. The look and feel options allow you to customize the search box, colors and add your custom logo to the Google hosted results pages. Whether you choose to host the results on your website or let Google host the results it is always nice to blend the results with your colors and logo.
The code tab allows you to setup the search to host the results on your own website or blog instead of relying on Google hosting the results. This is great to keep people on your website and blog as well as blend the website search even more with your website. In order to host the results on your own website you need to create a new page for it. Depending on what content management system you use or blogging software this can be different for everyone. The basic requirement is you need to create a new page to host the results with the Javascript code that Google gives you. For example using WordPress I created a new page called Search Results and I published it. I hide it from the menu using the Page Link Manager plugin. Once you have the URL for the page, paste it into the Google Custom Search Code page then you can copy and paste the search results Javascript code into the search results page you just created.
You will also need to include the search box on your site somewhere. An easy place it to copy it into a sidebar text widget or place it directly into your theme like I have. Once this is all done you can use your new search engine to search your website.blog and make it easy for people to find what they are looking for all with them not leaving your website. The added bonus is that the the Google Custom Search can also be linked to your Adsense account, making you money every time someone clicks on an ad on the search results.
I took me roughly 20 minutes to add a Google custom search to the LGR Internet Solutions website and blog but it has already been a benefit to my users. I have noticed people doing searches in my statistics and reading more pages on the website. As a result my overall bounce rate has gone down and my page views have increased. While that is not just because of the search box, it has helped to keep people here and reading. Take a look at adding a Google custom search to your website/blog. It could help them find exactly what they are looking for.
Optimizing images for the Internet can be a pain staking task to make the image as small as possible while still making it look as good as it can. Back in the day when everyone was on dialup web developers used to spend lots of time to make sure those images were as small as possible. With more and more people on high speed DSL and cable connections it is easy to get lazy about image compression. There is also the reality that web publishing has become much easier with content management systems such as Joomla and WordPress. No longer do you have to be a total web geek to be able to run a website or blog, as a result image compression has often been forgotten about. Smush It! is about to change all of that.
While I use Photoshop or the GIMP for my graphic work, I have to admit I don’t take as much time as I used to to make sure images are compressed as much as possible. Smush It! makes it easy to squeeze those images down as much as possible without sacrificing image quality. The site it easy to use and you can upload an image from your computer or through a URL. They also offer a Firefox add on that allows you to upload any image from a URL with a click on the icon in Firefox.
How well does it work? Here are some examples I tried:
Original Video Rambler logo:
Size: 8.5 KB
I can see Smush It! being very useful for people that want to compress images for their website or blog to make it load as fast as possible. No longer do you need to spend countless hours fiddling with Photoshop to make the image as small as possible, now all you need to do is Smush It! Bloggers that regularly add photos to their posts can use Smush It! to compress the images and save on bandwidth and file size making their websites load faster. Combine Smush It! with Aviary or Splashup and pretty soon you won’t need Photoshop any more to create and compress images. Give Smush It! a try and see how much it can compress your images.
Post under Web Design | By LGR | On November 16th, 2007
It has been a very crazy week trying to get things done, so I have not had a chance to post as often as I wanted to this week. One of the many challanges of running a business and being a work from home Dad. I wanted to quickly point you to these 51 RSS buttons for your blog. I came across it thanks to this post on Jeffro 2.0.
I thought this huge RSS button was fun. Do you think people will notice it?
Post under Web Design | By LGR | On September 8th, 2007
If you have been visiting for a little while, or have browsed through some of the older posts (Color Combinations & Color Combinations Update) you know that one of the areas I struggle with is colour for websites. Because of this I am always on the look out for new colour ideas and tools to help me come up with attractive looking colour schemes for the sites I work on. That brings me to ColourLovers.com. I found the site thanks to Search-This, one of the blogs I like to read occasionally.
First off I have to say, what a great site! I don’t say that very often, ask my wife. Usually when I talk about a website with her I will list off four or five things that I do not like about the site. With ColourLovers I honestly can say that my first impression was very good. It was very clear what the site was about and why you were there, you are looking for colours. You can easily browse the colour palettes by preset sorts such as top rated and new, as well as search the colour palettes by colour.
Once you register you can download different colour palette combinations in a number of different formats including Photoshop, Illustrator (I think the one is Illustator, I could be wrong), CSS, HTML and as a Zip file.
There is also a whole colour section, where you can browse and search for individual colours and see the various palettes combinations that have been created with that colour. I could see this section being very useful since often I have clients that have one colour they want to see in the website, and this way I can quickly see what colour palettes have been created. The only thing I would like to see in this section is a way to search for a specific colour, for example, let me enter in a RGB or Hex of a colour and find the different colour combinations for that colour.
Overall a very useful colour website. I know where I will be heading to when I start my next website design and I need some inspiration for colours.
In the week I have been back I have been busy doing a redesign of a website for a client. The redesign is going well but there have been some problems with Internet Explorer. While the problems have not been unsurmountable yet, it did get me started on my list of reasons why I hate Internet Explorer.
PNG Alpha Transparancy
Sure Internet Explorer 7 has it, but there are tons of people out there on Windows 2000 and Windows 98 still, not to mention those that just never upgrade there computers. Have you ever tried to update a Windows XP computer on dialup? I did not think so, and I doubt Microsoft ever has either.
Box Model
I really hate hacks to fix the Internet Explorer box model.
Disappearing Floats
Why does that image keep disappearing?
Insecure
People should not have to worry about misspelling Google.
CSS Support Incomplete
While I try not to do fancy things with CSS, I just wish Internet Explorer supported some more CSS features. Things like hover on elements other than a:hover.
Those are the major things I dislike about Internet Explorer. What other Internet Explorer oddities can you add to the list?
I was working on a new website today, and as is often the case, I did not have the copy for any of the pages yet. I needed to fill a few pages with some text so I could simply get the pages to the point that they were ready for the clients copy. To my rescue once again was the lorem ipsum generator. I usually use some lorem ipsum as placeholder text in web designs and in web page templates. It allows me to focus on the look of the site so I can tweak the little things that need done. In the end I am sure it has saved me considerable amount of time on websites, because when I do get the clients actual copy I can simple insert their copy and it will look exactly like it is suppose to.
If you want to read more about the history of lorem ipsum check out the article at Wikipedia. It has some great information on the history and use of lorem ipsum.
I first heard the term “Mystery Meat Navigation” several years ago, and I have to admit, I have been guilty of creating the odd site with mystery meat navigation. Things seemed to be getting better, but recently I have been coming a cross a lot of Web 2.0 websites that are brining back mystery meat navigation with a vengeance.
<rant>I won’t post links to the sites, but I just have to rant a little. Why do websites that use Javascript and/or Flash for navigation think they have to reinvent the wheel. Use what works! Put the menu someplace easy to see and use. Don’t make it spin, rotate, fly across the screen or appear and disappear. The fastest way to lose a user is to make your site hard to navigate. If your web development company is not capable of doing something that simple, then call me and I will fix it for you.</rant>
The following post is a guest post by Vivien who runs Inspiration Bit. Vivien is a web developer and freelance web and graphic designer from Vancouver. Her post came at a good time as I have been battling a cold/flu for the last few days. Thanks for the great post Vivien.
Whether we like it or not we’re constantly dealing with type. Type is everywhere – on websites that we visit daily; in magazines, books and newspapers that we read on a regular basis; on the street and store signs; it’s used on packaging of products we consistently buy, and even on TV in commercials, movies and the list goes on. When used correctly Type doesn’t distract our attention from its main goal – deliver a message in the best readable way possible.
However with so many typefaces available it can be a daunting task to pick and combine the right typefaces for the task. I’ll try breaking the selection strategies into 8 bits to help you with achieving the most effective type combinations.
How many typefaces can be used?
As a general rule of thumb, there’s a very little need in using more than two typefaces or type families in a design. However, this rule can be broken depending on the project. First of all, what is the point of using different typefaces in design? The obvious answer is to differentiate certain elements of design. A typical page can consist of more than one element such as plain body text, headlines, subheads, sidenotes, captions, numbers.
If a design doesn’t have much text then using more than one typeface may look too garish. On the other hand, if a design has lots of content with various elements that need to be projected differently, then more than two typefaces may be used to achieve the right effect.
Get the terms right.
It is very important to understand the difference between the terms Font, Typeface and Type Family. Font is the variation of type in styles (bold, italic) and sizes (12pt, 1in). Typeface describes the shape of characters, created by typographers. Type family is a group of related types with the variations in weight, width, orientation.
To summarize: “Times” is a type family, consisting of typefaces like Times Roman, Times Italic, that can be used as a Times Roman 12pt font or Times Roman 18pt font.
Harmonious Combinations
Perhaps the easiest and safest way to combine multiple typefaces in design is by choosing them from the same large type family. You can simply mix types with various weights, proportions from the same family to differentiate the headline from the body text.
The best way is to work with so-called “super families” that consist of various subfamilies. Some of the examples of Super type families are ITC Legacy, ITC Stone, Neue Helvetica, Zapfino.
Mixing Serifs with Sans Serifs
While working with the types within the same family produced harmonious combinations, using the opposite typeface styles generate a better visual interest by adding more depth to the overall layout. The simplest approach here would be to combine serifs with sans serifs. As long as you don’t pick serif and sans serif typefaces with similar designs (i.e. Times with Arial Black) you will almost never go wrong with combining practically any sans serif type with an opposite in style serif typeface. It works because serifs and sans serifs have very different structures so visually they create a good contrast.
Contrast Combinations: Size and Weight
Choosing two serifs or two sans serifs for your type combinations will work too, but once again you must provide a clear distinction between all characters of type. One way to achieve this is by creating contrast in size and weight. Some types look very different when utilized with a large point size, they look especially good on headings.
The weight of a typefase is determined by the thickness of strokes. When combining typefaces with different weights it is best to go with the highest contrast: combine Regular with Heavy or Extra Bold instead of just usual Bold or Demi. Contrast in weight is one of the most effective and popular ways of combining types.
Contrast Combinations: Colour and Form
The shape of a letter (character) is referred to as a form, for example caps vs. lowercase, regular vs. italic. Keep in mind that it is much more difficult to read words that are set in all caps, because they take on a rectangular form and we’re forced to read them letter by letter. So avoid using All caps, or all Bold with a large amount of text.
There are two kinds of colours in typography: black and white – that is achieved by setting headlines and subheads in a heavier wieght, playing with a space between the letters, between the lines, the size of the x-height. This creates an illusion of a darker black colour as opposed to the lighter grayish colour of a regular text.
Another kind is by actually injecting some colour to your designs. It will attract attention to an element by emphasizing and reinforcing the contrast of the types in the combination. It is very important to keep in mind that the number one priority when combining type and colour should be readability, then contrast. There should be enough contrast between the type and background colour, between two types in the post or a logo.
Avoid conflicting combinations
Don’t mix typefaces that fall into the same type category, for example Georgia and Garamond – they both belong to the oldstyle category. Don’t choose two similar faces, because they don’t give enough contrast and look more like a mistake since they are not really the same but don’t differ much either. This defeats the whole purpose – why choose different typefaces if they closely resemble each other.
Here are a few typeface combinations that you should steer away from:
Avant Garde Gothis with Univers
Bodoni with ZapfBook
Caslon with Korinna
Palatino with Bembo
For more typeface combinations you can refer to this very useful cheat sheet in PDF.
Don’t combine electronically distorted types
Whatever type combination you choose for your project don’t get tempted by Image Editing software to add Bold or Italic effects to your text. Type designers spend a great deal of time to properly design the italic and bold versions of a type, by carefully adjusting character proportions, shifts in stroke weight. Electronically distorted type destroys important character proportions and stroke weights. So if you want to use typeface Andale Mono, but it comes only as Regular, don’t force a bold effect on it in Photoshop, choose a different type instead or use a big font size.
Comments