Archive for the ‘Web Design’ Category

How to Build a Website in Under 60 Minutes

Post under Blogging, Web Design, WordPress | By LGR | On August 29th, 2011

Building a website used to be extremely difficult. You had to know HTML, cascading style sheets, possibly javascript and graphic design. Things have changed, now it is possible to build a website in under 60 minutes. Don’t believe me? Here are the steps you need to create your own website in 60 minutes.

Step 1: Register a domain. Using GoDaddy or your other favourite domain registrar get your own domain name registered. Time required 5 minutes.

Step 2: Get hosting. You can spend hours and days researching web hosts. To do this as fast as possible look at a decent WordPress host. I recomend Hostgator, but there are several good WordPress hosts. If you already have a hosting account somewhere you can probably skip this step and simply use an addon domain on your current hosting account. Time required 25 minutes.

Step 3: Change nameservers. This step only takes a few minutes. You need to login to your registrar and set your new domain name nameservers to point to your web hosting account. Time required 5 minutes.

Step 4: Login to your web hosting control panel and use their script installer to install WordPress. Most cPanel hosts have Fantastico to quickly install WordPress. Time required 10 minutes.

Step 5: Login to your new WordPress install and start writing! You have 15 mins left to spare to write your first post.

Now of course this only gets you the bare bones of a website. There is still a great deal more work to do like finding a new theme for your website and customizing it. Adding some plugins to help with different website tasks. Creating a Twitter account to help promote your new website. Creating a Facebook page. Taking the time to update your website regularly with new content. Well, you get the idea, but setting up the core of a website can be done in less than an hour.

Landing Page Design

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.

  • Sin #1 – Unclear Call-to-action
  • Sin #2 – Too Many Choices:
  • Sin #3 – Asking For Too Much Information
  • Sin #4 – Too Much Text
  • Sin #5 – Not Keeping Your Promises
  • Sin #6 – Visual Distractions
  • Sin #7 – Lack of Credibility and Trust

I was also so impressed by the video I ordered his book “Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions” from Amazon.

Color Scheme Designer

Post under Tools, Web Design | By LGR | On April 9th, 2009

csd-screenshot-1

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.

Light background web page example.

Dark background web poage 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.

Add a Google Website Search

Post under Google, Tools, Web Design | By LGR | On November 24th, 2008

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.

Google Custom Search setup

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.

Smush It!

Post under Tools, Web Design | By LGR | On October 2nd, 2008

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

After Smush It!
Size: 6.87 KB
Savings: 1.60 KB
% Savings: 18.84%

Original Photo:
Size: 164.6 KB

After Smush It!
Size: 156.47 KB
Savings: 8.17 KB
% Savings: 4.96%

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.

51 RSS Buttons For Your Blog

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?
rss48.png

There are smaller ones available as well.

Colour Lovers

Post under Web Design | By LGR | On September 8th, 2007

colourlogo.pngIf 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.Colour Palette Search

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.

Internet Explorer – How I Loath Thee!

Post under Web Design | By LGR | On July 22nd, 2007

I have been back for just over a week now from a great week off up at Waskesui, in Prince Albert National Park.

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?

Lorem Ipsum

Post under Web Design | By LGR | On June 26th, 2007

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.

Web 2.0 Bringing Back Mystery Meat Navigation

Post under Web Design | By LGR | On June 21st, 2007

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>