5 Handy Ways To Improve Your Website

Web design is far more complex than most people realise.

There are so many different things you need to keep in mind that it is hard for the beginner to get a solid grasp of it all.

That is why in this post I would like to share with you 5 handy ways to improve your website design and user experience.

Your readers and perhaps your bank balance will thank me for it, I am sure of that!

Without further ado, let’s get going.

1. Use A Cohesive Color Scheme

All too often we just want to add one more colour. Whether it be within the text, the overall colour scheme of the website or anywhere else. The temptation to add and create is always there.

But, you have to deny yourself this temptation. It is not a good thing to do.

Instead, what you should do is restrict yourself in your website design to a limited colour scheme. We are talking about 2 main colours and an accent colour it necessary.

Here are some examples where this has been done well.

Concourse Hosting

They use an overall brown colour with yellow, and then have an accent of orange where needed. They stick to this theme throughout their website as you can see clearly on their hosting services page.

Concourse Hosting Services Page Example

Cuberto

These guys of course know what they are doing because they are a creative agency. But they stick with an even simpler colour scheme, at least on most pages. Blue and white. Done. You can check there website out here.

cuberto-blue-white-example

 

2. Reduce Your Menu

One of the best things you can do for your visitors and your website is to focus and reduce.

This is best seen when talking about your menu. All too frequently I come across menus that are just trying to do too much.

Instead of adding everything that a user could possibly want, you are better off focusing their attention to the most important pages on your website.

Have a serious think about:

  • what they might be looking for first and foremost
  • what you want them to see and find first

Then reduce your menu to say 5-7 elements maximum and add submenus if you have to.

3. Increase White Space Everywhere

We all want to add more stuff to our website and more often. It is a tendency we cannot control.

There are images, video, social media embeds, slideshares and a whole lot more.

And although it is not a bad thing to give our readers more content to enjoy, be careful not to make it too crowded.

Add space and a lot of it – all the time.

  • Keep your paragraphs and sentences spaced out
  • Add space around your images
  • Make sure there are borders of space on the sides of your website

Keep it clean, simple and well spaced out.

Take a look at how By Regina, a design guru, does it

by-regina

4. Add Images Instead of Words

If you take another look at the above from Regina you will see that there are fewer words and more images.

That is something that you should strive for where possible in all web design.

Sure, words should always be present. They help to explain, clarify and enlighten. But images are worth 1000? well a lot of words. And adding images to your design everywhere will help people to understand in a flash what it is you are trying to convey.

So, next time you want to write a swathe of text try an image instead.

One good place to start especially when creating blog content is with infographics. Here is a great website to find some.

5. Improve Your Content Readability

Last but certainly not least, always keep the readability of your content in mind.

There are a number of simple ways to test this stuff and the following are a few I would recommend:

Conclusion

Improving your website design does not have to be so hard. Just give one or two of these ideas a try in your next design and I am sure you will be smiling at the results.

Any questions be sure to get in touch.

Read More

2 Easy Ways To Add Fonts To Your Website

Adding a font to your website is one of the best and most dynamic changes you can make to a new or existing website.

If you have not done this before, then you are in for a treat.

Fonts are one of the greatest differentiators around and it is time to make your next website shine!

Using CSS3 @font-face – The Hard Option

One of the more generic and technical ways of adding a font to a website is to use the @font-face option within your CSS file. This is the original and perhaps the most complicated way of doing it.

It requires you to take quite a number of technical steps which include:

  • Downloading the font from a free font repository (more on that below)
  • Add the font and directory to your website installation
  • Adding a reference to the font family within your CSS

Here is a very basic example of how you would do that.

including-font-face

As you can see there are two parts to including the font in the CSS

  • the font declaration
  • the font face inclusion

Places To Find Free Fonts

One of the biggest tricks with using new fonts is to not get overexcited and use fonts that are NOT FREE.

There are so many free fonts available that it is not really worth buying one unless you really have a specific purpose, client or outcome in mind. In most cases there are similar free fonts available that are very easy to find and download.

Here are some of the best places to find free fonts online that I have seen:

This list is not exhaustive of course and there are many more places to find free fonts, one of the best and even easier of which is Google.

Let’s take a look at how easy it is to find and use fonts if you decide to use their free font repository.

Google Fonts To The Rescue

Google fonts has one of the biggest and easiest to use directories of web fonts. There are over 650 fonts in there, and no doubt you will find a great one to suit your needs

They also provide a handy font testing tool so you can easily check out each font and see if it suits your needs.

Just give it a try and I am sure you will find the right one within 10 minutes (ok there rare 650 to choose from, so it might take a bit longer).

google-fonts-example

A pro tip for choosing is to narrow the search down based on the filters on the left had side to give you a smaller choice to begin with.

Things to think about:

  • What kind of project is it for (serious – try sans serif, personal – serif might be good etc)
  • What kinds of font weights do you need (bold, italic etc)
  • What kind of image are you trying to project.

 

Add Google Fonts To Your Website

Google provides some easy ways to add fonts right at the bottom of your choice

google-fonts-download

 

You can choose any one of these ways of adding the font to your website.

The easier ones are either adding the above link code to your <head> area, or using the @import statement within an existing CSS style sheet that you are using. But ultimately the choice is up to you and how you work when designing and creating websites.

Conclusion

Adding some flair to your website with the massive range of free fonts available is quite easy. It is really no excuse in today’s day and age to not try and do it.

Give a new font a try on your next web project and see how you go.

 

 

Read More

The Best Way To Capture Leads For Your Website

Best Leads Tools

One of the most forgotten things for website owners is the fact that you have to catch the visitors that come to your site and then get them on an email list so that you can communicate with them later. And the best way to do this is with lead capture and optin forms where you make them an offer they cannot refuse.

There are a lot of tools out there to obviously help you achieve these lofty heights, but I want to take a look at one or two in this post to show you the options you have.

Lead Capture Tools

So here are a few of the tools you should consider.

Thrive Leads

One of the leading tools you can use if you are a WordPress owner is Thrive Leads Plugin.

Thrive Leads offers you a range of optin forms that you can place just about anywhere on your website.

For example you can place optin forms using:

  • A Header Bar (similar to the Hello Bar)
  • An end of blog post form
  • A lightbox style popup
  • A Slider
  • 2 Step optin, which are clicked from anywhere (link, buttons, image)
  • 2 page option process (brand new from Thrive this involves a process similar to Neil Patel’s QuickSprout site.)

A/B Split Testing

Thrive Leads also comes with a great built in split testing system so that you can refine any or all of your optin forms and make them even better and higher converting.

They show you a range of statistics on each form, which one is winning and by how much, so that you can make the best decision on which optin form to use.

You can see a great demonstration from the Thrive Theme founder Shane below:

Optin Monster

Optin Monster is probably the only other direct competitor of Thrive Leads and they have a lot to offer as well.

They have an easy to use drag and drop editor as well as a whole bunch of other features like optin forms options:

  • footer bar
  • slider
  • popup canvas (only of Pro)
  • after post widget
  • exit intent popups (only on Pro)
  • sidebar widget

They also have many of the same features that you will have found to be great on Thrive Leads such as

  • campaigns (where to show the options – pages, posts, categories etc)
  • A/B testing to see which of your options is performing the best
  • Statistics to help you make decisions on testing

Where they lack a little is in the innovative features of Thrive:

  • 2 Step Optin Process
  • 2 Page Optin Process

For the rest they are very similar products.

See the video from Optin Monster below:

Price Comparison

For both of these products, prices are quite similar

  • Optin Monsters 1 Site – $49
  • Thrive Leads 1 Site – $59

The bigger difference happens with multiple sites:

  • Optin Monster 3 Sites – $99
  • Optin Monster Unlimited – $199
  • Thrive Leads Unlimited Sites (yours) – $97
  • Thrive Leads Agency – $247 per year

Final Thoughts on Leads

These plugins are only for WordPress users but they are quite impressive and enable you to collect leads fast, and with optimal conversion.

I certainly recommend you take a look at both of them and see which leads plugin suites your needs the most.

Price is an issue, especially is you have multiple sites or are an agency. But for single site owners, there is only $10 in it.

Whichever you choose to use, you should be collecting leads no matter what. Otherwise you are wasting those visitors you are getting to your site.

But more on that issue another time.

Read More

How To Get Free Content – UGC Content!

User Generated Content

A lot of my customers complain to me that they do not have time to write content for their websites or blogs all the time.

This is something I completely understand and I try to help them make a schedule so that they can stick to what they should be doing. This is something like blogfging x times per week or month, and making sure their website pages are up to date and that the right ones are their. Like their about and contact pages. Privacy page and so on.

But for a lot or people adding new content on a blog is just not possible. They need an alternative. And that is where I often tell them to consider something called User Generated Content.

What is User Generated Content (UGC)?

The idea behind user generated content is that your readers or users create something for you. It can be anything actually, from words to images, or even video. It all depends on your site, your niche and your needs.

There are also many ways to get, or encourage, users to create this information and we will cover that in a minute.

But the main thing to realize is that there is an alternative to always creating your own content: User Generated Content.

Types of UGC

The lovely folks over at WordStream have compiled a great list, and amazing post, to help us understand what is UGC and what types of things we can use.

Here is the basic list they have in their post

  • Blog comments
  • Facebook comments or posts
  • Reviews
  • User generated videos
  • User generated blog posts
  • Forums
  • Podcasts

If we break it down into the main areas, we have

  • Content created on your site (comments, reviews, Forums)
  • Content created externally and send to you (videos, images, blog posts)
  • Social media content that can be embedded on your site
  • Interviews (written or podcasts)

So you can choose the avenue you want to take to help create the content for your site, given the time it takes to compile this information.

For example a podcast is quite time consuming, a guest blog post less so. Forums often require administrators where as reviews take very little time to check. But you probably need to have an e-commerce site for that.

What Other Companies are Doing

One of the best ways to get an idea of what can be great User Generated Content is to see what other companies have successfully implemented.

Here are some blog posts that you should definitely check out that give great examples of such UGC campaigns:

Take a close look at how companies implemented the campaigns, took the content and re-used it on their sites or social media platforms. There is certainly a lot to learn from what others have done before you and how successful they have been. It is not always reproducible, but certainly worth giving a go.

Should You Use UGC?

I cannot tell you if you should use user generated content on your website, but it is certainly an option that you should consider. When it comes down to it, the range of content types you can use is very broad, and there should be a way for every site owner to benefit from their readers or users. And not always with a substantial amount of effort.

So the next time you are looking to create some amazing content for your website, why not ask your readers to contribute?

After all, not only might it save you significant time and money, but it might also get them on board as a raving fan – because you asked them to help you out!

Read More

Amazing Web Fonts That Are Also Free

Modern web design is all about style. And with that quest for style comes a lot of new fonts. You might have noticed on the web in the last few years.

The browsers and makers of things like HTML and CSS have enabled us to add any font we want to our website via a variety of methods, which has in turn changed design completely.

But one of the biggest issues for many web designers is the inherent cost of fonts on the web. We are not publishing companies with millions of dollars, so it is up to use to find fonts that are free to use.

Places to Find Free Fonts

During my travels on the inter webs and by designing different kinds of websites for customers i have had to chance and luck to find some great websites where you can find free fonts for use in your next project.

The first and probably most well known is Google Web Fonts. Google has made over 850 fonts available to use and some great tools to go with it.

You can test out the kinds of phrases you are going to use, if you want to see how the different fonts look. They also provide a way to find them via search and categories, which is very helpful.

And last but not least, they have an easy download option where you can choose the way you want the font and the options you need like bold and italics (if the font have them available). All in all, a great experience.

And many WordPress Themes often come with these built in as well.

Then there are also a load of other sites you want to get to know. These sites have either some or all fonts for free. Here are some of the best ones that I have used in the past:

Fonts In images

Sometimes you are looking for web friendly versions and sometimes something like Open Fonts for use on you Mac (I use them in Illustrator and Photoshop too). It all depends on your needs. You might need to do some research on  using these fonts.

Because  I make use of a lot of fonts in my images, to highlight a blog post or explain and ad or story, there are times when you want to whip them up quickly or you do not have the expensive tools at hand.

In these cases, I go for online tools and there are many. The ones I prefer to use are Canva and Pixlr. They allow you to manipulate the images as well as add overlays and text. In fact, Canva is the most design and text friendly with the only downside that the final product is often a too-large PNG file. So then I use Pixlr to quickly resize and covert it to a reasonable web JPEG.

Final Thoughts

There is definitely a lot more to say on the subject of fonts and design, but knowing where to find alternatives to the boring old Times New Roman is a start. And also knowing some tools to help bring fonts into your images will help impact your design too.

If you have any other tools you would like to share, please leave a comment below.

Read More

Web Hosting You Might Like

web hosting options

As a web design company, many people often ask us for our preferences in terms of web hosting companies.

While we certainly cannot specifically recommend one web hosting company, we will do our best in this post to highlight some of the best that we have seen over the years.

Another thing to consider is that we often work with WordPress web design projects, so this list might be slightly biased in that regard.

Our Top Picks for Web Hosting

We will cover about 5 different web hosting companies in this review, all of which are based on our experience.

Siteground

The first is SiteGround, which are one of the most exceptional web hosting companies around (that Siteground review is one of the reasons we got into them in the first place)

If you just want to head over to their website then do so here.

Reasons we love Siteground:

  • Reasonably priced shared web hosting (without being so cheap the rest is horrible)
  • Great service on many channels (phone, email, twitter, chat etc)
  • Options for hosting in 3 locations (Europe, USA and Asia)
  • Additional features to others (improved speed, backup, assistance in migration)
  • They also have exceptional uptime 99.997% last year

So if you are looking for shared hosting with great features and service then they are the best choice we have found.

BlueHost and Hostgator

Although many people love Dreamhost, we have had issues creating websites on their less than easy to use system so we have gone with a second choice of Hostgator and Bluehost.

If you want some reviews of both of them, then head over to this post here.

Although these guys are more or less owned by the same companies these days and probably hosted at the same location in Utah, we think they are still quite good.

The reasons we would still recommend them:

  • Competitive pricing (especially for longer plans)
  • Great service (comparable with Siteground)
  • Good cPanel support and features (including one click installs, which we struggled with on Dreamhost)

Their prices are similar to Siteground’s in most cases, but again if you can afford the few extra bucks, go with Siteground.

WPEngine Dedicated WordPress Hosting

This one is a little more expensive than the other options we have mentioned above, but if you are really wanting the Rolls Royce of web hosting then this is the baby.

It is for WordPress hosting only (the others are general hosting) and helps you to take care of your site without having to maintain and protect it yourself.

The reasons we love WP Engine:

  • fast loading websites
  • 100% uptime
  • WordPress expert support
  • monthly payments (not locked into a year or multiple years like other hosting)

If you want top web hosting for WordPress then this is the way to go. The costs might scare a blog owner, but for a business I think it is a great alternative.

Summary of Hosting Options

In the above review you can see that there are many options for a website owner, from WordPress dedicated top of the line hosting to run of the mill shared hosting at a reasonable price.

When you choose one of the above that we have used and verified, then you will certainly be happy either way. Just make sure that the features and support that you want are included.

The rest is history!

 

Read More

Websites that Impress in 2014

I cannot begin to count how many websites there are on the web in 2014, although these guys certainly are counting for us and it’s up to over a billion.

But as well all know, not that many of them are as amazing as they should be.

Who knows the actual reasons for that, but unfortunately it is true.

But rising above them all are some of the best websites of 2014

Names For Change

One of the best and most interesting websites I have seen in a while is Names for Change. They have a simple website that displays a rotating series of well crafted and painted images.

Take a look at their website and see for yourself, you will love the teddy bear!

Names for Change

Sketchin

Video backgrounds are in, and Sketchin have done a great job of portraying what they do with their simple web video background.

This kind of thing works well with a simple product (for example PayPal also does it) but is not for everyone, that’s for sure.

sketchin web design

C Roots

C Roots has a great image background on their site, but they also have a very unique menu. It is basically some spokes flying out of the logo which really catches your attention and creates a bold statement.

This is one of the most interesting web designs we have seen in 2014.

c-roots-web-design

 

Our Name Is Mud

This website is pure and simple. They have some outstanding text and font usage, which slowly appears on the homepage and gets your attention.

As a web design first themselves, they are clearly using simplicity for a purpose.

They have also reversed the logo and navigation standard, which I think works well in this case.

our name is mud

 

That is all for today’s roundup of creative websites that are making a splash on the internet.

Tune in next time for some more amazing web design goodness.

If you have some suggestions for the next roundup feel free to get in touch!

Read More

Web Design Tips for a Rocking Website

There is a lot to learn to create an outstanding website, and I know that sometimes it can get pretty overwhelming.

So it is worthwhile, every now and again to take a look at some general guidelines and tips to help you create the best website you can.

The following are some tips that I use and that many don’t know about or ignore, but that you will definitely find useful in your next web design project.

1. Stand Out With Fonts

As you might have noticed in the last few years browsers are able to work with a wide range of fonts.

You are no longer restricted to the standard Times and Arial, you have almost complete choice. Kinda like a graphic designer!

You need to find some fonts that work well together of course, and normalyl 2 or 3 is the maximum that you want to be using. More is just confusing.

Here are some of the websites that you can use to find a font for your next website:

You can learn how to use Google web fonts in the video below.

There are of course many more sources for fonts, but this should be enough to get you going!

2 Make Use Of Space

In this day and age of simplistic design, space is king (no, not content anymore Bill). So make sure that your website is not super cluttered.

Have enough space around the website, including the header and sidebar. Space makes everything seem simpler and lighter and easier to use (less confusing).

One way you can do this within the content, is like in this blog post.

Only have 2-3 sentences per paragraph.

Use lots of headings and sub-headings. Add bullet points where appropriate.

And break things up with images if you can find some relevant ones for your post.

All of this will help you website start to shine.

3. Consistent Color

As well as having a huge choice of fonts today, you also have a massive range of colors to choose from.

Of course, like with fonts, you don’t want to go crazy. Two main colors with perhaps an accent color are usually enough to make any website stand out.

This goes hand in hand with your website design and branding of course, so make sure to bring this all together in your design, imagery and logo.

If you need to find some colors for your site you can try some of the following websites which do an awesome job at helping choose colors;

 4 Easy Navigation

Last but certainly not least is the navigation on your site.

Users are looking for your content and products and should not have to spend time hunting for them. So make sure that your menu is:

  • Easy to find
  • Easy to read
  • Logically ordered
  • Easy to find pages

With these simple rules you should be able to have your site humming in no time.

I hope these tips have helped to improve your web design skills and websites in general.

I would love to hear your ideas in the comments below so feel free to chip in.

Read More

Responsive Web Design Tips

In 2014 mobile internet use will overtake desktop, so it is imperative that you have a website that is usable on all devices: PC, Tablet and Smartphone.

Of course it is always possible to use a website on any device, but it is not always fun. That is your goal at the end. To make your website as user-friendly as possible and the experience one that the user wants to repeat again and again.

So let’s take a look at some of the reasons you might want to use a responsive website design and what it can do for you. After all this is a big web design trend in 2014.

I have also included a fantastic infographic that summarizes many of these points so you can see them clearly presented in a visual fashion.

Reasons for Responsive Design

Responsive design is intended to display your website in the best possible light on devices of varying shapes and sizes.

The main idea is that your website will adapt to the screen size of the viewer and place elements and images and text in the right place for easy use and viewing.

For example, you might have a sidebar with information on the PC version, where there is space. But on the mobile version this is either hidden or moved below the main text display area.

Similarly, the menu which might contain up to 10 elements, is not possible to display on a mobile device or perhaps even a tablet in portrait mode.

So instead the menu is compressed either with a variable font size, or put in a single menu for selection on the smaller device.

In essence your website is responding to the device and adapting.

You can see some great examples in the top area of the graphic below, where it clearly displays the elements adapting to the screen size.

* If you want to learn even more about responsive design, check out this page from Google.

Benefits of Responsive Web Design

So why would you want to use a responsive design instead of say a separate mobile website?

Well, maintenance is a big issue when you are constantly producing content and on a website in general. Ideally you do not want two versions of a website that need to be changed.

Another big reason to use such a design is that nearly 50% of people complain that websites are unusable in the standard form when viewed on a smaller devise.

This means that you are losing customers. So why would you not choose responsive design?

And one last reason – Google endorses and even encourages website owners to embrace responsive design for many of the same reasons.

So what are you waiting for?

Check your website today for mobile responsiveness and make your customers happy.

responsive web design tips

Read More

Trends to Love in Web Design

People are always wondering what the next big thing is in web design. And although things change all the time, they quite often also stay the same. Sometimes for a long time.

But in this post I am going to show you some of the trends that we love in web design, whether they are new or old. fresh or stale. We still love them and use them all the time

Big Photo backgrounds

Visual are taking over the web, and in web design they are more present than ever. But what we love is when a photo is the website. ANd with some of these design trends, that is what the website has. Just one big image as a background. It is bold and dominant and what else can we say.

Single page websites

This trends seems to wax and wane. Some people love it and some hate it. But when you don’t have a lot of content it can work really well.

Simple page websites often go hand in hand with the whole parallax thing, which we will cover below.

Oversized imagery

This trend semi-originates from the popularity of Mac OS X icon design. Since programmers began to launch websites for their Mac applications, we have frequently seen exaggerated sizes represented in branding. This trend has also been picked up by iOS developers and now comfortably rests within the modern design culture.

Yen-aware are a great example of this

Zen Aware Big Icons

Simplicity and Flat Design

Less is more, and with the increase in flat and simple design on the web this is being seen on more and more websites. And since many of the big brands are also taking up the fashion, it will only continue to grow. Even Apple did this in the last iPhone release with the revamp of their interface.

Responsive web design

In 2014 there will be more people accessing the web from their mobile devices, so if your website is not responsive (aka mobile ready) then you are missing out on pleasing and perhaps keeping your customers. What is more annoying than a website that is not mobile friendly I ask you?

responsive design

Parallax

Parallax design works well with single page websites as we mentioned above. And what happens with these designs is quite funky. The different elements on the page move up and down at different speeds which gives a great motion effect. It can work really well, if done right. Sometimes it can just seem overdone however. So be careful.

Typography

Gone are the days of browsers with only Times New Roman font and now you can have almost any font you like. Of course you should not go overboard, and use 10 fonts on your site. Be a little classy, and stick with 2 or 3 maximum. But using fonts is cool and you should start doing it for your site too.

Typography in Web Design

We would love to know what web design trends are rocking your world right now, so let us know in the comments below and start the discussion!

 

See you in the next post.

Read More