Posts Tagged ‘Web Design’

6 great ways to ruin your website

Friday, March 12th, 2010

Here are a handful of sure fire ways to ruin the user experience for your visitors, increase your bounce rates and make sure you get very few returning visitors.

Random colour palette
With all the free website colour tools available there is no excuse not to have a consistent and pre-planned colour palette throughout your website. Even subtle differences such as a slightly lighter blue in the .gif logo than you used in your <H1> tag can create a sense that something is off and be uncomfortable to look at.

Aesthetically pleasing, easier to read, more professional, clear branding… there are dozens of reasons why you should maintain a consistent colour scheme and only one why you shouldn’t; laziness. For a list of the best colour scheme pickers, read Ben’s blog post about his favourite website colour scheme inspiration & tools

Link to pages that don’t exist
Pages can come and go but it is important that your internal navigation reflects this. Linking to a 404 looks unprofessional and is a sure fire tactic to losing that visitor.  To avoid this set up a 404 redirect to a special error page. Avoid redirecting to your home page as the visitor will not know there was an error, only that he’s not where he thought he would be.

Create a .htaccess file (using that exact name) and put it in your root directory with something along the lines of…

ErrorDocument 404 /404.html

Don’t check it is compatible across the browsers
The days of designing a website with one or even two browsers in mind is long gone, and even with the movement to kill off IE6, that still leaves IE8, FF3, Chrome, Safari and Opera to think about. If your site breaks in Opera because of the 1,000 visits you get per month ‘only’ 5% of those are using Opera, that is still 50 visitors per month, and if you have a conversion rate of 10%, that’s a potential 5 sales you have missed out on. Designm.ag has a great list of resources for cross browser testing here http://designm.ag/resources/cross-browser-testing/

Intrusive advertising
Too many adverts on the page, pop-ups and pop-unders, and adverts that illicit an epileptic fit no longer have any place on any website. Advanced internet users certainly won’t put up with it and will be quite vocal about it but the more casual internet users are passively annoyed by it too. Integrated text links and clean banners near the content both increase visibility and click through rates without impacting on user experience.

SEO takes priority over your visitors

In all honesty, an unnatural over use of keywords can help a site’s ranking in the search engines. The paragraph below is taken from a real site but with the keyword they are targeting replaced and highlighted with the word ‘Toaster’.

Toaster services are offered by most toaster providers and are an affordable way for most users to get started with toaster services. Toaster services are the cheapest form of toasters available and it is important to remember that a toasters service is always going to be more expensive than a grill toaster service.”

The search engines clearly love it, but a human being and potential customer it’s just plain odd, tells me very little and is boring to read. It’s not going to convert me.  Use of keywords is absolutely vital to be ranked high in the search engines, but using them in your title, a couple of times in the content, and in some anchor text is enough. SEOMoz’s SEO guide for beginners offers some basic tips for writing search friendly text: http://www.seomoz.org/article/bg4#4c

Irregular navigation from one page to another

People don’t want to be made to work out how to navigate your site. They want clear consistent navigation that allows them to find what they are looking for as quickly as possible. Navigation on the “home page” running along the header suddenly snapping to the left on the “about us” page and then back again in the product pages is going to confuse, frustrate and anger your visitors and drive them away pretty quickly.

9 great GIMP tutorials for beginners

Monday, February 8th, 2010

This post lists some of the best GIMP tutorials we have come across for beginners looking to flex their design muscles and learn something new and useful to apply to their designs and websites.

If you haven’t already got GIMP you should! One of the most popular blog posts we published in 2009 was Ricky’s “5 Great Open Source Graphic and Web Design Alternatives”. The open source alternative to Photoshop Ricky recommended is GIMP which in his words… “GIMP is almost a ‘clone’ of Photoshop. It works in very similar way with its layers, selections, filters and painting tools. It can even read and write in Photoshop format, making it ultra compatible with your Photoshop using colleagues or clients. The software doesn’t feel quite as polished as Photoshop does, and its text manipulation is a little behind Photoshop’s. But, if you’re like the majority of people who use Photoshop to resize their images, reduce the colours, and maybe add the odd special effect to add a little extra to your websites, then the GIMP is definitely something you should try!”

Now you have the software, what can you do with it?

Creating the light text effect in GIMP
http://puteraaladin.blogspot.com/2008/12/creating-light-text-effect-in-gimp.html

Designing iPod Touch in GIMP
http://bulbing.blogspot.com/2009/04/designing-ipod-touch-in-gimp.html

Round Web 2.0 button with a metal ring
http://gtuts.com/web/round-web-20-button-with-a-metal-ring

Gold text effect
http://gimpology.com/submission/view/gold_text_effect/

Transparent glass lettering
http://gimpology.com/submission/view/transparent_glass_lettering

Fancy glow effects
http://gtuts.com/effects/fancy-glow-effects-in-gimp

Making a pencil drawing from a photo
http://www.gimpusers.com/tutorials/making-a-pencil-drawing-from-a-photo.html

Mac style wall paper
http://gimp-tutorials.net/mac-wallpaper-tutorial

Turn a digital photo in to Polaroid
http://howto.nicubunu.ro/gimp_polaroid_photo/

If you are still not quite ready for these tutorials the official GIMP tutorials can be found here and we would recommend going through them to learn the basics http://www.gimp.org/tutorials/

Interview: thewebdesignblog.co.uk's Phil Matthews

Thursday, December 3rd, 2009

philmatthewsWe had a chat with freelance web designer Phil Matthews (www.twitter.com/philmatthews) about his recently launched UK web design blog www.thewebdesignblog.co.uk, the challenges of writing regular content, his thoughts on the web design trends we will see in 2010 and his tips for anyone looking to set up their own blog…

Could you provide a bit of information about yourself and thewebdesignblog.co.uk?
I’ve been a freelance web designer (www.weymouthwebdesign.com) for nearly six years. In September 2009 I setup The Web Design Blog with the intention of providing web design resources, tutorials, downloads and interviews.

How do you come up with your article ideas and how long does each one take to research and write?
In the strangest of places! I’ve found the best ideas come when I least expect it. I could be sat at my desk for hours wracking my brains for an idea that never comes to fruition. Then, suddenly (normally before I fall asleep at night) an idea for an article will pop in to my mind so I always make sure I have a notepad next to the bed to jot them down for the morning.

Are there any web design trends you are expecting to be big in 2010?
I’m expecting to see a lot more designs push the boundaries of the normal grid and box models and not stick to rigid layouts. The trend for big imagery, logos and headers will probably continue as designers look to provide immediate impact with their creations. I quite like the hand drawn look that has become popular so I’d quite like to try this style out for myself if I get the chance.

The UK has a large and active web design community but why do you think that article/ blog style sites from the USA still dominate so much (e.g. smashingmagazine.com and its network)?
I don’t know for sure. A lot of the big blogs like Smashing Magazine, Web Design Ledger and Web Designer Depot have all earned the right to be at the top because their content and articles are superb. Smashing Magazine has picked up an unfair reputation for writing too many “list articles” but I disagree with this. They have a wonderful archive of resources and information and I love the content they provide.

Although my blog is UK based I try to provide resources that will appeal to everyone. There are so many talented designers all around the world and design is universal!

When you first started the website how did you go about getting people to read your blog?
Initially I just posted links to my Twitter feed (www.twitter.com/philmatthews) which got a small amount of traffic. I’ve been lucky enough to interview some fantastically talented designers for the blog which has proved very popular. They’ve shared lots of advice and stories which have really helped promote the blog to a wider audience.

How big a part does ’social media’ play in raising awareness and driving traffic to your blog?
Quite a bit in fact! Twitter is the main way I promote the blog and articles I publish but I also make sure I submit new stories to sites like Design Bump, Design Float, The Web Blend, Digg and Stumble Upon. I’ve also been lucky enough to have the website featured on CSS Remix which has provided a lot of traffic to the website.

What are the top three tips you would give to someone planning on setting up their own industry blog?
1) Write about something you are passionate about. This could be a niche subject or, like with my blog, a more general subject like web design. Whatever you choose you have to be fanatical about your subject otherwise you won’t have the motivation to keep writing about it. Pick something you love and it will be a lot easier to come up with content.

2) Let your users interact with your website. Providing a place for visitors to post comments on your blog will help you get feedback on what articles are popular, help promote your articles and keep the interest on the story going. Also make sure you provide a way for people to spread the word about each article to all major social networks.

3) Focus on content above everything else. It is easy to focus too much on the things that are less important when setting up a blog. I’d recommend putting the time and effort in to the content first and then everything else should fall in to place.

You use WordPress to power your blog, why did you choose that over all the other blogging and CMS programs available?
I chose WordPress as I’ve used it regularly for client websites so it was the obvious choice. Despite WordPress being a blogging platform I’ve been using it more and more as a full content management system in recent months because it is so flexible to work with. Every time I setup a new website with WordPress I find I learn something new!

Which are the essential WordPress plug-in’s you always use?
One of the best things about WordPress is the huge range of plug-ins that are available. I always use “All In One SEO” and “XML Sitemap” which are invaluable for search engine optimisation. For my blog I found “Related Posts” and “WordPress Popular Posts” were ideal for promoting older content at the end of each article.

Although I’ve been lucky to avoid spam comments (so far) on my blog, I’ve setup “Akismet” in anticipation of this starting in the future. I am currently looking to improve the comments section of my site so I’ll be on the search for some comment enhancing plug-ins soon.

Are there any UK focused resources and sites  that you would recommend for beginners and advanced designers?
Grace Smith (www.gracesmith.co.uk) always has really useful design links on her Twitter stream (twitter.com/gracesmith)  I also love both of Chris Spooner’s websites www.line25.com and http://blog.spoonergraphics.co.uk which contain tutorials and resources. I’d also highly recommend www.boagworld.com (both the podcast and forum) which is a treasure trove full of knowledge and a must for every web designer!

Thanks for the interview! :-)

Web hosting guides

Friday, November 27th, 2009

Over the year we have been putting together a series of web hosting guides covering various aspects of managing a website in detail. Below are links to the current crop of PDF web hosting guides available completely free for anyone to download and use.  Note: The links below all open a PDF.

Web Design:


Marketing:

Web hosting resellers:

Resources:

These web hosting guides can be along with our series of beginner’s guide to web hosting

Web designers/ developers: Integrating web hosting in to your existing services

Wednesday, November 25th, 2009

Being able to buy everything from one place is always an attractive proposition to clients who don’t want to have to shop around. If your core product is providing web services for small sites such as banners, logos, HTML emails etc you can easily integrate web hosting in to your product mix.

Attracting your customers
If you already have a client base, the first step is to tell them about the range of services you can do for them. Phone or email your clients with details about your hosting service and why they should sign up. Getting your foot under the table is always the hardest part. To reduce the client’s perceived risk offer them an introductory low price or a scaled down version of your service so you can demonstrate your value to them. A lot of the application developers for the iPhone and iPod touch offer a ‘Lite’ version of the application to get people hooked and wanting more (which they then have to pay for).

If your customers don’t bite straight away or you want to run a promotional campaign, you could consider offering bundling your core product (e.g. web design) and web hosting at a rate cheaper than if they were bought separately. To create a sense of urgency and prompt a quick response, run it as limited time only.

Up-selling & cross-selling
Up-selling and cross-selling are not about the hard sell or getting someone to buy something they don’t really need or want.  When done properly the process should almost feel like a service in its own right. One of the best examples online of up-selling and cross-selling is Amazon. Put an item in your basket and you are presented with “Customers who bought this also bought…” with the majority of the suggestions being more expensive items. If you go back to the home page it will have changed to show you items based on your browsing history along with items they feel are associated with that item e.g. putting a men’s skater brand watch in a basket would prompt the site to show jewellery, skater trainers and related accessories. Always keep an eye out for opportunities that may arise from any offhand comments a client may make about needing work in a particular area.

Click here to find out more about our reseller hosting product and features

CSS Tutorial: Create rounded corners with only one image

Monday, September 29th, 2008

We’re going to show you how to make expandable rounded corners with CSS. Using our method will require only 6 HTML tags and one background image (yes, ONE image for all 4 corners!). It also validates, works across all the major browsers, and looks great in your source code.

Download the full rounded corners tutorial below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip

Making the corner images
One downside of most of the other methods for rounded corners is that you require multiple background images, one for each corner. With our method you only need one. If you take a look at corners.gif in the source files you’ll see how you need to set up your image. The basic premise is to create a full circle, chop it up into 4 segments and put each segment in the opposite corner to what it started in (top left would go into the bottom right, etc).
The last thing to do is put a white (or other colour) background behind the segments and then save the image.

HTML Code
<ul class=”roundedCornerWrapper”>
    <li class=”top”>
        <span></span>
    </li>
    <li class=”middle”>
        Heart Internet
    </li>
    <li class=”bottom”>
    <span></span>
    </li>
</ul>

Keeping the HTML short and valid is important for many reasons, so for the rounded corners we’re going to use an unordered list with some span elements. There may be shorter methods, but this is quick, easy, and validates.

The full tutorial including HTML, CSS and Graphics can be download via the link below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip

Create a drop shadow effect for your website using CSS

Sunday, August 17th, 2008

This tutorial will teach you how to create a drop shadow background effect for your website, using only a single image and some CSS. Not only is a drop shadow effect simple to create (only a few lines of code) but it also adds a new dimension to your site and can really make your content stand out.This post will run through the basics of how the code works and what is needed to create the effect. A fully detailed explanation, including all the code and graphics, can be downloaded at the bottom of this post.

Drop shadow effect example:
http://www.heartinternet.co.uk/blog/HI_Drop_Shadow.zip

The shadow effect is achieved by repeating the image of the drop shadow vertically (see attached files, below) by applying the style to your <body> using CSS. Two drop shadow images have been created, allowing you to use a larger width if necessary. Included sizes are optimised for 800×600 and 1024×768 monitor resolutions. Depending on which size you wish to use, simply change the width property of the #container style.

 

Now that the background effect is applied to the website, add a #container div to your html and give it the property margin: 0 auto; this means it will always sit perfectly in the middle of your page. If you’re using the smaller shadow image make sure the width of the #container is 760px or if you’re using the wider image the width should be 960px.

HTML Code:
<div id=”container”>
     <p>Your Content Here</p>
</div>
CSS Code:
body {
     background-image: url(images/background_760.jpg);
     background-repeat: repeat-y;
     background-position: center;
     background-color: #f7f4ee;
}
#container {
     width: 760px; margin: 0 auto; text-align: center;
}

 

Create a super fast website navigation with a single image and CSS

Wednesday, August 6th, 2008

This tutorial will show you how create a navigation for your website using CSS and a single image so there’s no loading times for the rollover states, resulting in smoother transitions.

The trick to creating a seamless rollover is to have both the normal and hover (Rollover) states in a single image and then use CSS to move the image accordingly.

HTML Code: (This goes between your <body> </body> tags)
<div id=”navigation”>
     <ul>
          <li class=”navhome”><a href=”#” mce_href=”#”>Homepage</a></li>
          <li class=”navhosting”><a href=”#” mce_href=”#”>Hosting Packages</a></li>
          <li class=”navcontact”><a href=”#” mce_href=”#”>Contact Us</a></li>
     </ul>
</div>

Stylesheet Code:
#navigation ul {
     width: 333px;
     height: 27px;
     background: url(navigation.gif) no-repeat 0 0;
     list-style: none;
     padding: 0;
     margin: 0 auto;
}
#navigation li {  display: inline; }
#navigation li a:link, #navigation li a:visited {
     display: block;
      text-indent: -7000px;
     outline: none;
     height: 27px;
     width: 100px;
     float: left;
}
#navigation li.navhome a:hover {
      background: url(navigation.gif) no-repeat 0 -27px;
}
#navigation li.navhosting a:hover {
      background: url(navigation.gif) no-repeat -100px -27px;
}
#navigation li.navcontact a:hover {
      background: url(navigation.gif) no-repeat -200px -27px;
}

And that’s it!

Be sure to add the CSS code either within the <head> tag of your website or within a separate stylesheet.

Don’t worry if you are having troubles with this tutorial, you can download all the files associated with it below. If you look in the code of the html you will see everything commented to help you understand how it works and also help you modify it for your own website.

Download this tutorial:
http://www.heartinternet.co.uk/blog/HI_Tutorial_Navigation.zip