Posts Tagged ‘web design’

Creating Rounded Corners Using CSS

Thursday, March 4th, 2010

Rounded corners are a great way to add character to a web site. Rounded corners are also modern and fancy. In this tutorial you will learn how to create rounded corners using simple CSS.

First of all, lets discuss the new CSS3 property which allows you to specify curved corners using CSS. This new CSS property has not yet been finalised, but you will be pleased to know that it works in 3 of the most modern browsers (Firefox, Safari and Chrome). As ever though, Internet Explorer has problems rendering the CSS property which makes curved corners, so an additional Javascript file to force render. Download the file from below.

This technique for rounding corners is about the most robust way I have found of doing it. It uses very little markup and no addition images. It also supports the use of background images on DIVs, even if they do not have rounded corners themselves.

Curvycorners Javascript File (some users may need to right click and ’save link as’)

From here it is very simple to implement:

1. Create your website as you normally would. In the head of each page enter this line of code <script type=”text/JavaScript” src=”curvycorners.js”></script> . This tells the browser to refer to the external Javascript file which you have downloaded from this tutorial. Place the JS file in the root folder for this to work.

2. Apply these CSS attributes to any element you want to apply rounded corners to
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

The code contains a pixel value which, if changed will change the curve on your element. The higher the pixel value the bigger the curve. In addition to this, you can specify diffferent values to each corner by applying the code like this
-moz-border-radius: 10px 20px 10px 20px;
-webkit-border-radius: 10px 20px 10px 20px;

Each figure applies to a different corner, starting with the top left and working around in a clockwise direction.

Example of how code should be applied
.midbox {
height: 280px;
width: 295px;
padding: 5px;
float: left;
margin-left: 5px;
border: 1px solid #CCC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-image: url(images/midboxbg.png);
background-repeat: repeat-x;
text-align: justify;
}

You can apply curvycorners to both classes and IDs.

This technique will make curved corners render in any modern browser simply by using a 3kb javascript file and 2 lines of CSS3.

Understanding Search Engine Optimisation for Web Designers

Wednesday, February 17th, 2010

You practice search engine optimisation because you want people to view your site. Without search engine optimisation, your work as a web designer would be wasted. So what key factors do you need to consider when optimising your web site?

Alex Croucher discusses how to optimise your website to a professional level, and how to make the monster of all search engines, Google, give your site a boost in its ranking.

The Quality of the Site Itself
A very key factor to good SEO is the quality of the site itself. Assuming you are a Web Designer who designs web sites and then codes them without the aid of a developer, you will find this bit extremely useful.

We discussed the importance of optimising your images in the previous post. Make sure you don’t overload your site with KB heavy images, as these will stop the search spiders in their tracks. It is also essential to keep your code lean, and to avoid using too much Javascript within the page code. Javascript can be an useful tool, but more often than not it is a hindrance and causes untold problems. Google hates Javascript as it adds very heavy code to your site and slows the crawling process. If you must use is then place it in an external file just as you would with your CSS. Make sure that your HTML is clean, and trim the code wherever possible. The same goes with your CSS. If your web site is compliant and lean, you have overcome the first obstacle of bad SEO.

Website HEAD Tags & META Data
This is pretty standard stuff so I will keep it short. The three important META tags to use are Title, Keywords and Description (in that order). Use all of them. Try to be as descriptive as possible without going too far over 400 characters in each tag. Avoid using words like ‘and’, ‘on’ & ‘in’ as they are a waste of valuable SEO space. Be creative and put yourself in the shoes of your clients. Imagine that you want to make a legitimate search. What words would you type in to Google?

USE the keywords tag. Many SEO experts claim that the keywords tag is not relevant to Google anymore, but to tell you the truth, nobody really knows. Google are generally very secretive about the various aspects of their algorithm, and to include keywords tags cannot do any harm. In fact, it would be pure laziness not to!

Try to be diverse with your META tags. Change them on every page so you cover as many variations of a key phrase (or set of phrases) as possible.

H1, H2 and P Tags
Writing a good copy for your website is crucial, and tailoring it to contain key words and phrases is just as important. Try to include key phrases throughout the site without making the copy read as if it’s stuffed. Keyword stuffing is a black hat technique and will not help your SEO progress. More importantly than just placing key words and phrases in your web site copy, is placing them stratgically. You NEED to place key phrases in the first 50 words of your copy. I would also recommend using your H tags just as strategically by placing key words and phrases in between. Google knows the importance or such tags and keywords placed within them will add more weight to a good SEO plan.

Links
Be descriptive with your links. Don’t just call them ‘About’ or ‘Contact. Use extra words to add value to these links. You’ll notice on my homepage at www.2spheres.co.uk, I have short links at the top of the page, but I then include descriptive text links in the footer. The destination of these links are identical, but the links in the footer have been named descriptively, for example ‘Contact Web Designer’ and ‘About Web Designer’. If you use images in place of text for your links then you should include descriptive alt tags (see below).

Off Page Optimisation
This is your domain name and URL. You might not be in a position to change your domain name, but you can change your URL(s). Make sure you name each page descriptively. Don’t opt for numerical names such as page14.html. Be descriptive with your names. If it means re-linking your entire web site then so be it. It is a highly recommended technique. Keep the URL about 3 or 4 words long. If you make it much longer than that you could be penalised for keyword stuffing.

Alt Tags & Image Names
Alt tags are descriptions of images used by screen readers for accessibility. Alt tags also help your web site gain exposure.  Google image search is influenced by alt tags, and, believe it or not, you can generate a lot of traffic this way. The same goes for the name of the image, which is why I highly reccomend naming your images descriptively. Google treats an underscore as a space, so calling an image graphic_designer.jpeg will be much more search engine friendly that calling it graphicdesigner.jpeg, or 56985.jpeg!

Do Yourself a Blog
I’m quite a giving person, but I don’t spend hours writing Blog posts just for the benefit of others. A well structured Blog is a great way to increase your SEO. It does two positive things for your site:

  • Keeps the content fresh, thus avoiding the possibility that Google could consider your site as ‘gone stale’.
  • Draws more people to your site naturally (assuming you are writing content rich Blogs which people want to read).

Be original with your Blog. Write about things that people want to read about. Try not to duplicate things and DO NOT rip off other peoples articles. One of my competitors has a Blog containing articles which have been copied and pasted from elsewhere. Although he states that he is not the author, this could still be seen as bad move by Google. Duplicate content is a potential Black Hat technique which could earn you a spot in the dunce corner if you’re not careful.

Wordpress is my Blogging tool of choice because it’s FREE and it’s very good. To install Wordpress you only need very basic developer knowledge and a host which supports PHP (most do). There are other Blogging tools, but Wordpress is very good. If you are interested in installing Wordpress on your site just visit wordpress.com. Here you will find the download and a very simple, step-by-step installation guide. It took me about half an hour!

Backlinks
Backlinks are key to any successful SEO plan. Backlinks can be hard to gain naturally, so good networking is required to make this work. Try and partner with sites who may be willing to exchange links with you. Using my site as an example, I try to build backlinks with Web Design forums, Web Design directories and other credible business directories. By submitting articles to various other Blogs and forums you can also earn quality backlinks. If you build a lot of web sites for businesses, you can usually get away with placing a link back to your own site as a free credit. Make sure the anchor text (that’s the text which describes the link, rather than the link itself) is SEO descriptive. I typically use anchor text like “Web Design Southampton”. This makes a massive difference rather then just including a standard link with no anchor text at all.

A WORD OF WARNING ABOUT LINKING – It is easy to submit your website to a directory using supposed “SEO Software”, but be warned, this is bad practice, and if (when) you get caught, your web site will lose rank, or potentially will become sandboxed. If your site becomes sandboxed by Google then you might as well give up as you will lose 90% of your search engine generated traffic. The same rule applies to link farms, and any other sites which exist purely to provide backlinks to other sites.

Summary
I hate this expression, but, ‘at the end of the day’ content is king. If you create a good website with high quality information that people want to read, then people will come. The techniques mentioned above are all very very important, but they will not work if you create a bad website with poor content that nobody wants to see.

Follow the rules, don’t cut corners, provide information which is useful to people and presented in a legible, professional manner and you will get visitors to your site.