10 years ago I had a big problem. I was a print designer but I loved the internet and desperately wanted to work with it.

I wanted a software package that would let me mess around with drag-and-drop functionality and when I was ready I could click “GO” and miraculously produce perfect code. I was probably using Internet Explorer as my web browser and used Dreamweaver as a design tool to churn out horrendous tabled mark up.

I gradually came around to seeing that web design was about standards, SEO, speed, aesthetics – and … horror of horrors … that I was going to have to learn code.

I certainly learnt the hard way – going up countless blind alleys that turned out to be cul-de-sacs – in my path to creating websites. Here are some of the most useful things I have learnt in the last few years:

1. Web developer tools and Firebug

One of the most useful previewing techniques that will help you learn CSS is viewing the Developer Tools in Chrome or Internet Explorer and in Firefox the Firebug extension. While using these tools’ cursor (it can be an arrow or a magnifying glass) click on an element and the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel.

You can actually make HTML and CSS changes on the fly so if you want to see what a web page would look like with different colored links you can. These tools will also show you which CSS selectors effect an element and which are overrided.

2. WordPress.org as blogging software

WordPress was first released in May 2003 by Matt Mullenweg as a fork of b2/cafelog so I couldn’t have known about it 10 years ago but I would say discovering WordPress was one of the best things that happened to me as a web designer. It’s essential, once you’ve learnt HTML and CSS, to get to grips with a CMS (Content Management System) to organize your website.

3. Hosts

Not all hosts are created equal. It is incredibly important to spend a bit of time on forums and social networking sites asking people with similar sites their experiences with hosts. Here are the results of surveys I did to find the best shared hosts and VPS hosts for WordPress.

4. Ensure cross browser consistency

Different browsers will apply different default paddings and margins, even to common elements like paragraphs, body and forms. Put this handy bit of code in your CSS as a starter for ensuring your web page will look the same in all browsers:

*{margin:0;padding:0}

Make sure you have a local version of all the major browsers Chrome, Opera, Safari, Internet Explorer and Firefox – as well as the ability to view the browsers on the Mac and Windows operating systems. The best online browser rendering service is Adobe’s BrowserLab.

5. Test

Whenever you change a bit of code in a CSS, HTML, JavaScript or PHP file always be sure to test the effected page straight after you’ve done it. It’s a no brainer really but I can’t tell you how many times I’ve made two or more changes to code only to find the web page broken with no idea which change had caused the break.

Obviously, you don’t want to test on every different browser after every particular change as that would drive you potty. But try to check each time in Firefox and check Internet Explorer or Chrome every other change as well.

6. Validate

And as you go along testing, so should you go along validating the HTML and CSS. It’s easier to sort out validation errors when you’ve just started the first page than when the site is further down the line and has several pages. Sorting out validation errors can solve a lot of IE problems as well.

7. Use JavaScript not Flash

I’ve got nothing against Flash, in fact the first time I saw it I remember thinking it was the answer to all my prayers – you could use any font you wanted and it would compress files pretty well as it used vectors I was used to in print design. However, it was never well crawled by the search engine bots, it made designers “over-design” and now it’s not even supported by certain devices.

For the sort of user-friendly sites I do I’m much better off using JavaScript, and more specifically jQuery, solutions as they degrade better: if you don’t have JavaScript enabled on your browser (and it usually is) the page still works, whereas if you don’t have the correct version of Flash running, Flash doesn’t.

8. SEO

The practice of getting your site indexed and high up the search engines’ results pages is something that starts the first second you work on it. The HTML should be as clean and as sparse as possible, marked up to leave the search engines in no doubt as to the contents and hierarchy of the pages.

The most important factors for good search engine rankings are firstly good content and secondly good incoming links and, usually, the first will ensure the second. However, there are other important things to learn and implement on the site such as XML sitemap, robots.txt, .htaccess and Google Webmaster Tools to check broken links, etc.

9. Speed and compression

And, as with SEO, the practice to get you site load as quickly as possible starts right at the beginning. So, combine external CSS and JavaScript files, enable gzip compression and caching server side, optimise your images as much as possible (even sacrifice quality a little bit), minimize code and PHP calls.

It’s good for your visitors and now Google uses speed in it’s algorithm for calculating a site’s ranking.

10. Picking colors and adding space

With designing generally it is usually a good idea to choose two colors, a primary and a secondary, to build your color scheme around. The tendency, particularly with webpages, is to have just one color for links and then use different tints of that color for backgrounds etc. But this leads to a very monochromatic look. So it helps to choose at least one other color other than the main color. Of course, the choice of colors depends on the client and the type of site, but it’s something you need to get right and to get right early.

The amount of web page real estate with nothing in it is almost as important as the pixels that contain information. Spacing out the design will make it easier for the visitors to digest the information. You will not only have to learn how to do this; you will also have to learn how to persuade the client that this is necessary – as with many of the above.

Extras

Other things that would have made my learning less painful are listed here:

• Sidebar – all website’s need a sidebar – OK that’s a bit of a generalization and not always true but a designer will always want things to look clean and so many times I have tried to get the page contents to stretch right across the full width of the browser. Ouch, no, big mistake!
• Put the client’s logo on the top left hand corner and link it to the home page – as you go along there are more and more standards that visitors are coming to expect. It’s usually important not to disappoint or confuse your visitors!
• Contact page – just as ubiquitous as the Home link is the Contact link somewhere on every page.
• Vectors – when designing your site in Photoshop or Fireworks, use vectors as much as possible so that the continuous re-sizing doesn’t affect the quality of the finished image.

And what about you?

What would you have loved to have known about web design when you were starting out?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

So you’re using WordPress and you are getting a nice amount of traffic, say a few hundred visitors a day. Maybe you love running many of the great plugins that add extra functionality for your visitors. There’s just one problem: your server is struggling with the load and your site isn’t just slow, it’s ssslllooowww!

Shared hosting maybe inexpensive but resources are limited and security can be compromised. Dedicated servers are very powerful, can require high levels of technical knowledge for customization and are extremely expensive.

VPS hosting can be the happy halfway house

Virtual private server (VPS) hosting could be a solution if you have outgrown your shared hosting and don’t need to move to a dedicated server. It is the best option for small to medium sized businesses. A site hosted on a VPS gets its own RAM and disk space, however, it shares the processing capacity (CPU) with other sites.

Remember, Google includes a site’s speed into it’s algorithm – so a faster running site is not only advantageous to your visitors but also may push you higher in the search engine results pages.

I contacted hundreds of WordPress experts to ask them about their experiences and recommendations. Speed, reliability, ease of use and quality of support are important factors when looking for a host and came up again and again when talking to the experts.

Here are the most recommended VPS hosts

Here I’m listing the VPS hosts that were recommended by the pool of WordPress experts. I include a short synopsis of the specs, usability and pricing for the entry level packages.

• A2 hosting Inexpensive and their support comes highly recommended. 128 MB RAM, 1 GB storage, 100GB bandwidth for $10.46/month. You can get cPanel with higher specs for $17.46/month.
• Dreamhost Reasonably priced, good support, fantastic recommendations. This is my choice! 300MB RAM, unlimited space and bandwidth. Dreamhost have their own award-winning user’s control panel. For $15/month.
• Wiredtree Expensive but good. Intel Dual Xeon (8 CPUs), 512MB RAM, 40GB RAID-10 storage, 1000GB bandwidth, 4 dedicated IPs and cPanel for the base price of $49/month.
• Linode Knowledge of the command line is helpful as they do not offer a GUI out of the box. 360MB RAM, 16GB storage, 200GB bandwidth for $19.95/month.
• Liquidweb Their VPS plans start at $60/month and include cPanel as well as root access, 384MB RAM, 20GB storage, 400GB bandwidth, 4 IP addresses.
• MediaTemple The (dv) starts at $50/month and uses Plesk as a control panel. The (ve) at $30/month is for more advanced web developers that may find a control panel a hinderance.
• Rackspace Their users had nothing but good things to say about Rackspace. Cloud Sites™ runs on a series of clusters so it has redundancy and protection built in. When you upload your site or web based application, multiple instances of it run so that even if an entire server goes down your site stays up and running. They have their own cloud control panel proprietary GUI to navigate you through the clouds. Cloud Sites™ start at $149/month.
• VPS.net By default everything is command line; cPanel is an extra $10 a month. 376MB RAM
, 10GB storage
,
 250GB bandwidth for 
£15/month per node. (I don’t know why they have the monthly price in pounds but the cPanel extra in dollars!) But again, their users were extremely complimentary.

To command line or to control panel?

A web host control panel (such a cPanel) provides a graphical interface designed to simplify the process of hosting a web site. It makes it easier to, for example, move files around, or set up or import MySQL databases necessary for WordPress. Alternatively you can type command lines through a Secure Shell (SSH). SSH is a network protocol that allows data to be exchanged securely between two networked devices. Anything you can do via cPanel is also doable via SSH without the overhead of the HTML, imagery and web server processing so it is therefore quicker.

Personally, I find the WYSIWYG nature of the control panel more familiar and intuitive, however, I’ve been using SSH as well and it can sometimes be a better way of doing things.

Conclusion

Deciding on a VPS host for WordPress is no easy business. There are many things to consider. Above all make sure you pick a host that other WordPressers recommend. If you have any other recommendations or questions be sure to make them known in the comments section!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

As the internet becomes the preferred method of communication for businesses worldwide, the tool of creating and publishing the content is of increasing importance.

WordPress is used by millions to deliver news, messages and articles to the world. It has become not only the blogger’s weapon of choice but also a hugely popular Content Management System.

Learning how to use WordPress is easy. All you have to do is to login, add a new article and either write in WordPress, or copy and paste from your favorite word processor. But WordPress hosting is not for every web service. WordPress requires high standards from the web hosting provider which is why I took a lot of time to discover the best hosts. But first here’s a description of shared hosting and why it might be for you.

Shared Hosting

Shared web hosting is a service where many websites reside on one web server connected to the internet. It is generally the most economical option for hosting, as many people share the overall cost of server maintenance. However, being the cheapest package, it has its disadvantages. Firstly, it usually has a reduced level of security as you are sharing the server with several other websites. Shared hosting also has limited resources causing speed issues at both the back and front ends of your site.

Maybe you are just starting out as a blogger, or maybe you are using WordPress as a Content Management System for your new website. Maybe you are probably not expecting thousands or even hundreds of visitors a day. Does this sound like you? Then you need a shared host.

Recommended shared hosting for WordPress websites

During the course of my research I contacted hundreds of individuals through the WordPress LinkedIn group. Members of this group are high end webmasters with hundreds of sites on their books who have been around the block as far as web hosts are concerned – many of them were using 3 or 4 shared hosts for multiple sites. If you’re into LinkedIn and WordPress I would strongly recommend this group as I have found the advice and discussions there to be top notch!

The three most important factors we discussed in the survey were: speed, reliability and quality of support. We’ve all had the terrible experience of a website not behaving as it should and sometimes a timely and considered approach by the support team is worth a thousand dollars!

Here are the three hosts who came out as the best shared hosts for WordPress by WordPress professionals:

• JustHost. JustHost started providing high quality hosting services in 2008, so, compared to other hosting companies, JustHost is a new kid on the block. But nonetheless it scored high on our three hosting factors: speed, reliability and quality of support.
• Bluehost. The general consensus seems to be that Bluehost is inexpensive and has many powerful tools but support is maybe where it lacks the most. BlueHost is one of the 20 largest web hosts, collectively hosting well over 450000 domains with its sister company, HostMonster.
• Hostgator. The company was founded in 2002 by Chairman Brent Oxley, who started the company from his dorm room at university. With over two million domains, HostGator hosts approximately 1% of the world’s internet traffic. They came up many times in our survey as being a reliable host.

What not to do!

One hosting company’s name came up for all the wrong reasons so many times. The server sluggishness and all round poor performance at GoDaddy was mentioned again and again! So, by all means, register your domain name with GoDaddy, but don’t use them for hosting!

Conclusion

I learnt a huge amount from doing this survey. However, I decided to turn my back on shared hosting for this site and went for a Virtual Private Server (VPS). My next post will be about the best VPS hosts as recommended by WordPress professionals.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I got a call from a potential client the other day and he asked me a very simple question.

“Once you’ve created the website for me will you charge me every time I want to edit one of the pages?”

And, although this is not the first time I have heard this question, it still amazes me every time I hear it. Some web agencies create websites which their client has absolutely no ability to change once completed. This isn’t standard practice in the industry but it does happen.

If you have a website, it is never a question of if you want to change it; it’s always a question of when you want to change it.

Get your website set up with a Content Management System that is easy to use

A Content Management System (CMS) is software, implemented as a web application, that manages web sites. It should have an intuitive user interface that makes navigating to the page and changing it as easy as updating a text document on your computer.

There’s many great CMSs that enable you to create, edit and delete pages at will and, there’s even better news, a lot of them are free!

WordPress

WordPress is a fantastic web publishing platform which focuses on aesthetics, web standards, and usability. And, as it is open source, it’s free. “Free and priceless at the same time”. As you can see from the screenshot below there is a WYSIWYG interface which can be mastered easily.

I have written extensively about the setting up WordPress and creating and editing web pages using the WordPress UI.

WordPress is actually blogging software that is fast being used as the most simple and robust CMS. If you just want pages, with sub-pages, and maybe even sub-sub-pages that will be created and deleted along the way then WordPress can be set up to do that for you. Your web designer will not have to be involved at all. And, if you’re interested in improving your site’s position in search engines and you’d like to publish more than just web pages, then add a blog to your site. WordPress will do that easily!

I appreciate that many of my visitors will know this already but I felt I had to state the basics of WordPress as it’s potential as a CMS is so awesome people should know about it. As does that potential client I mentioned earlier, who’s now a client!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Blogs are, in my opinion, the easiest and best way to get stuff on the web.

With a blog you can publish constantly updated information about yourself, your company or your interests to the world. And what makes it even better is that this information is chronologically ordered and categorized for search engines almost automatically.

Your blog posts should be delivered in the most beautiful and readable way to get the most out of this fantastic medium.

Here are some design essentials you can use to improve the look of your blog and your blog posts.

Body text size and line spacing

The body text is the text you are reading at the moment – a normal paragraph within an article. It’s the meat and drink of the blog so it has to be readable. Having said that it’s amazing how many websites have their body text too small. Some people will not read text below a certain size.

I’m going to stick my neck out now and say that the font size of body text on a website should never be smaller than 15 pixels or 1 em in size. Furthermore the line height (the line spacing or leading) should always be 25% larger than the font size or more. So if the font size of your body text is 15 pixels; your line height should be 19 pixels or more. If the font size of your body text is 1 em; your line height should be 1.25 em or more.

If you are not familiar with the terms pixels, ems, font size, line height, etc., or don’t know how to change them read on.

The file that controls the size of the body text on your blog is the CSS (Cascading Style Sheets) file. If you are are a WordPress user it will most likely be in your theme folder and called “style.css”.

You can identify the font size and the location of this CSS file as well as previewing the changes using your browser. If you’re using Chrome or Internet Explorer you can view Developer Tools. And if you’re using Firefox you can use the Firebug extension.

While using these tools’ cursor (it can be an arrow or a magnifying glass), click on the element that concerns you and then the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel. So, if you click on a body text paragraph you may see that it is controlled by the body element in your main CSS file.

Above you can see in a screen shot from the Firebug panel in Firefox that the font size of the body text is 12 pixels and the line height is 20 pixels. You can actually change the values in this panel and the browser will render the changes live. This is a great way to learn CSS and mess around with different design elements. You can also see that the file controlling these styles is called “style.css”, hover over the file name in this panel and the web address of the CSS file will show as a tool tip.

Paragraph spacing

Paragraphs on the web should have a space between them. It should be around half the line height. So, if your line height is 20 pixels, you should add a 10 pixel gap between paragraphs. This is usually done with either padding or margin on the <p> tag. Here is a sample CSS code that adds a 10 pixel gap to the end of each paragraph:

p { margin-bottom: 10px }

Include sub-headings in your blog posts

If you are writing a post with more than a few hundred words then you should use subheadings. They improve the post for your readers as they break up and order the text and they are also good for SEO. Here is the HTML code for the above subheading:

<h3>Include sub-headings in your blog posts</h3>

As my normal blog title is wrapped inside <h2> tags my subhead text is therefore wrapped inside <h3> tags. This shows the hierarchy of headings – the subheading isn’t as important as the heading. Some blog post titles are <h1> in which case the subheadings should be <h2>.

As above, use Firebug for Firefox and the Developer Tools in Internet Explorer and Chrome to identify the title tag and then set up an <h2> tag or <h3> tag in your stylesheet accordingly. Here is the CSS for my titles and subheadings:

h2 { font-size: 23px; line-height:27px; color: #4c5464; }
h3 { font-size: 18px; line-height:22px; color: #243f76; }

Make your text scannable

Remember your visitors will typically spend a few seconds on your website so it is necessary to make them feel at ease and entrap them. So far we have talked about good body text typography, paragraph spacing and subheadings to do this. But you can also add bold text, italics, bullets, numbered lists, links, etc. to break up otherwise dull lines of text. These highlighted words jump out and may interest your readers. It also looks nicer.

Insert images

Blog posts are incredibly boring without images or video. Use them. Here is an article I wrote on how to add images to WordPress posts.

Conclusion

I wrote more about the technicalities of writing and designing a WordPress post here.

Font size, line height, paragraph spacing, subheads, images and other typographical elements can all be used to improve legibility and aesthetics in your blog posts. Have I forgotten something? Can you suggest other ways to improve the design of blog posts?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Back in the olden days just after Al Gore invented the internet, designers designed and programmers programmed. The web was full of slow good-looking sites that didn’t do much and useful busy sites that, frankly, looked like a dog’s dinner.

But every year since then more and more fantastically usable sites that also look great have cropped up. Why? The two previously separate disciplines of design and code have combined and at the intersection point is usability.

Usability

Everyone wants user-friendly websites that are easy to navigate and interact with the user without mess or confusion. A designer is more likely to achieve this when coding it himself. A knowledge of code is a knowledge of how the website works. If you know how the web works you can make it work well.

A designer who codes understands the pay off between clean code and great user experience. They know that if they want the website to load fast they may have to cut out some of the more gimmicky processor-hungry bells and whistles. The user is the winner as the website will do the job and won’t show off.

Less confusion, time and money

The more people involved in a project the more time and money is spent. The interaction between a designer and a developer is so often a compromise between what was wanted and what is now possible. A flexible designer will reinterpret the original design to the practicalities of the project. This is more likely to happen with a designer who codes as (s)he will understand the limitations much better.

With a designer designing and a coder coding the two processes have to run sequentially with one party waiting for the other to finish before they can start. With a designer coding the processes will be sequential the design will grow along with the website with tweaking and improvements being easily implemented along the way.

Better SEO

And while I’m talking about clean code I should mention SEO. The code-savvy designer will know to write good file names and alt text for images, for example, and write standards-compliant code. All good for getting the website higher in search engine results.

In my experience when the designer passes the Photoshop file to the coder it gets chopped up and called “image01.jpg” and “image02.jpg”, etc. Not very descriptive.

Ignore the nay-sayers

The wonderful thing about the internet is that many people are dropping the constraints of old-fashioned thinking that said “this person can’t do that; that person can’t do this”.

Open source CMSs, plugins and JavaScript libraries make it easier for the designer to learn new skills.

People are saying “why can’t I start up a website on my own” or “why can’t I set up an e-commerce facility”. The tools are freely available; you just have to learn how to use them.

Indeed, people who would never have been considered musicians 20 years ago are now successfully creating music online. Others who would never have had the financial ability to buy film cameras are shooting, editing and marketing their own movies successfully.

Don’t let negative thinking from yourself or from others get to you. I used to think HTML and CSS were beyond me. And then I thought I’d have nothing to do with PHP or JavaScript. But I was wrong. I was guilty of listening to nay-sayers.

Now I hope I can carry on exploring new avenues and encourage others to do so.

It’s never too late to learn!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

What sort of website to you want to create?

Web developers love jargon as they like to give your site a label. So is the site commercial (an e-commerce or affiliate site), personal, organisational (maybe a .org), educational (maybe a .edu), entertainment, news or blog?

Your site will not be adequately explained with one word. Maybe you want an commercial website with a blog, or an entertainment website with an e-commerce angle, but this can be explained after you’ve decided upon the most adequate one or two word description of your website.

What sort of functionality do you want?

Do you want a forum, multimedia (movies, sounds, image galleries), blog, site registration, shopping cart or electronic fund transfer, forms, databases, chat?

Now search again for your web designer / developer

So now you can enter different keywords into a search engine, such as “freelance blog designer” or “e-commerce designer and developer” and you will get more relevant search results.

Should I choose a web agency or an individual designer / developer?

This depends on the size of your site. If you are thinking of creating a huge e-commerce site on a par with Walmart then you should consider contacting a web agency. Otherwise, contact an individual who does websites. I may be biassed, as I am an individual web designer and developer, but we have many advantages over the agencies:

• One person is responsible for the whole site. Cuts down bureaucracy and keeps things simple.
• It’s … errr … cheaper. Now there’s a no brainer if ever there was one.
• A freelancer or independent web designer is more likely to choose an open source CMS (Content Management System) for your website rather than creating one especially for the job. Again, this depends on the size of the website and sometimes a bespoke CMS for a large site is the only answer but I always advise against them. Open source CMSs – such as WordPress, Joomla or Drupal – are well-known website systems that are free and already available for use. They are cheaper to run, have huge support networks behind them and can be used by countless web professionals for many years to come. A bespoke or proprietary CMS will be more expensive and, if you want it changed (which you will), you will have to go back to the original agency and give them more money to do it.

Don’t worry if you think the site is too much work for one person, it is normal for developers and designers to employ others if the work load gets too much for them. They will be better at this than you and, as long as you have one person in charge and responsible for the whole project, you don’t need to worry about how many people are working on it.

The last thing you want to do is to hire designers and developers separately and hope that they will communicate together or through you – this will never work.

What do I look for?

When you arrive and a web designer / developer’s website, look for examples of their work first and see if they have done sites that are similar to what you’re looking to create. Try to find out what this individual is like to work with. You can contact the people he or she has worked with or see if there is a testimonial page on the site.

Once you have explained what you want, see if the developer responds in plain English or uses jargon that you don’t understand. Be wary of jargon as misunderstandings can be very expensive and it is essential you hire a good communicator.

Conclusion

Communication is key here. Research types of websites, CMSs and jargon before you start out and have a clear idea of the functionality, audience and purpose of your website. If you have this crystal clear in your mind you will be able to find the right individual by talking to them and reading their quotes and proposals.

Responsible web designers and developers will present you with the exact functionality and extent of the website they will build for you with their initial quote so you will be in no doubt about what you are getting for your money.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I haven’t written as many posts as I would have liked on this blog in the last couple of months. The reason? I have been creating an e-book which will be used as an incentive for join my mailing list. It’s ready now!

Why did I do this?

Many reasons … I wanted to do something a bit different; to showcase my own design of an interactive PDF; to get some extra exposure. But mostly, I want to take my site to the next level.

The subject matter of the e-book is something I’m passionate about – setting up and getting noticed with a self-hosted WordPress site; SEO, social media and blogging.

Five years ago I was waking up every morning wearily to do uncreative artwork in other people’s companies. After five years of blogging, I run my own company where I am habitually involved in incredibly creative and interesting work for the most amazing and wide-ranging group of clients.

The change I have seen in my own life is testimony to the power of blogging with a self hosted WordPress site. But creating a blog is one thing; developing a website which attracts regular traffic and returning visitors is quite another, and I have outlined every step I took to achieve this in the 35-page PDF.

I will write more about creating an interactive PDF and using it as an incentive for a mailing list in the blog. I created the PDF in InDesign and I used Vertical Response to sort out the list and the sign up form.

OK, so how do you get a copy?

Please follow this link below to my main sign up page where you will only have to fill in your email address (and, if you like, your first and last name).Then you will receive an email with a subscription link. After that you will receive another email which welcomes you to the list and has the link to the PDF.

I would be grateful for comments and I hope its helpful to some of you.

So, here’s the link:

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

When writing a WordPress post it is extremely important to make it as visually appealing as possible. Visitors are much more likely to spend a bit of time on the page if it has a nice image and the text is laid out in a pleasing way.

Images are important in terms of SEO. If they are uploaded with correct and keyword-rich names and alt texts they can pull in a valuable amount of targetted traffic from image searches.

Adding an image with text above and below

Click the first icon top left after the words “Upload/Insert”, if you hover over the tooltip will be “Add an Image”. In the resulting dialog box you can click “Select Files” to get the image from your computer. (I would choose the Browser uploader rather than the Flash uploader). Once the image is uploaded you will see another dialog box with the image’s thumbnail displayed.

It will usually be a large image (of, say, 400 pixels or more wide) that you will want to put on it’s own after a paragraph of text. Make sure you have hit Return (once in Visual mode; twice in HTML mode) before clicking the Add an Image icon. And, after uploading, in the Adding Image dialog box, under Alignment, click “Center” (alternatively you can select the image and click the centered text button after inserting).

Adding an image with text flowing around

If you have a smaller image of, maybe, 200 pixels width, you may want to insert it into a paragraph with the text flowing around it. If so, make sure your cursor is blinking next to the word at the beginning of the paragraph you want the image to go in when you click the add image icon. And whilst in the Add an Image dialog box click, under Alignment click “Left” or “Right”.

Your image should always have a descriptive file name with no spaces and a .jpg, .gif or .png at the end. For the image here, left, I would use the file name “brown-bear-in-woods.jpg”. Upper and lower case letters are irrelevant here so it is best stick to lowercase and use hyphens to separate the words. Spaces will be converted to hyphens after uploading via WordPress. And, hyphens are better than underscores.

Alt text

Always try to write an Alternate text for the image. This is how you would describe the image to a blind person. So, in our example the Alternate text would be “European Brown Bear walking through the forests of Finland”. Remember, this is crawled by the search engines so put keywords in where appropriate! The Alternate text is in the Adding Image dialog box which appears after an image is uploaded.

Image size

One last thing to consider when uploading images is their size. If you want the image to be the same size as it is on your computer click Full Size under Size. If you want the image to be a different size you can choose Thumbnail, Medium or Large. You can change these sizes in Settings > Media.

Finally…

If you want to write a caption you may.

Lastly, click “Insert into Post”. If you’ve made a mistake you can always click the image in the Visual editor and click on the “mountain” icon, then click “Advanced Settings” and here you can change some of the above variables. Otherwise, delete the image and start again.

Image is not displaying to the left or right correctly or the caption does not appear close enough to image

Put this code in your theme’s CSS:

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

It says in the WordPress Codex that “Each theme should have these or similar styles in its style.css file to be able to display images and captions properly”. But I can tell you many themes don’t has this code in there. Probably because theme designers like to style images and captions themselves and don’t realise that WordPress can do it for you.

This concludes my post on inserting images to a WordPress post. If anybody has anything to add or thinks I have missed anything please comment away!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Go cmd/cntl-N or File > New… to create a new Photoshop document of the size of your button. This one has a width of 175 pixels and a height of 35 but it can be any size. (You knew that, didn’t you?). The Resolution should be 72 pixels per inch and Color Mode RGB for websites, of course, and I have the Background Contents to be White as the button is going on an area of a website that has a white background.

Draw a rounded rectangle with, you guessed it, the Rounded Rectangle Tool (U) make the radius 3 pixels in the Options bar at the top.

Make sure the rounded rectangle snaps to the edges and fits exactly the size of the image. It doesn’t matter what color. Here’s a gray one zoomed in to 200%.

Now there are two Layer Styles you want to give the rounded rectangle – Gradient Overlay and Stroke. So with the rounded rectangle selected in the Layers palette go to the “fx” icon at the bottom and choose Gradient Overlay.

On the first panel you should make sure that the angle of the gradient is either 90º or -90º so the gradient either goes straight up or straight down. (Otherwise keep the default values of Normal Blend Mode, 100% Opacity, Linear Style and 100% Scale). To choose the actual colors of the gradient you need to click on the gradient to get the Gradient Editor to pop-up.

Here the trick is to choose two colors that are of the same tone but very close together so that you can only just tell them apart. To choose the colors click of one of the colored squares (stops) with triangles on top of them underneath the gradient (the default is black and white). Once the stop is clicked on, click on the color where it says “Color:” and that will give you a Select stop color box. Here I have also copied the darker of the two colors in the Gradient Editor by option dragging the stop. This ensures that more of the gradient is a solid color and the color change occurs more quickly at one end (in this case at the top).
And the second Layer Style is Stroke. Here you want to choose a color that is darker than the darker of your two colors but only just (with the same degree of separation as the difference between the two colors in the gradient. The size should be 1 pixel and the Position should be Inside. The other values should be the default ones.

Now your button should look like this:

… a little too flat! Now we’ve got to get a bit creative with our penultimate pixels!

The web designer’s secret penultimate pixels!

In order to give the illusion of a flat but 3D button there needs to be a slight highlight near the top and a slight shadow near the bottom – so slight, in fact, it’ll be the height of one pixel; so near the top and bottom, in fact, it will be offset by one pixel. In order to do this, it is necessary to create a new layer and select the Single Row Marquee Tool.

You will need to zoom in to your button by going Cmd/Ctrl-+ a few times. And then position your single row of pixels with the marquee on the second row of pixels just below the top. You can do this easily by just dragging the Single Row Marquee Tool to the top of the image and then moving it down one pixel by hitting the down cursor key once. Now fill this white – (get the Default Background and Foreground Colors by hitting “D” and filling with the Foreground Color (white) by going alt/opt-delete). This will leave you with this:

The do the same again but for the black line. First create a new layer (very important that the white and black lines are on different layers for reasons you will see in a moment), then put a row of black pixels on the second to bottom row of pixels using the same method. And you will be left with something like this:

There’s one more important thing to be done with these pixels. As the corners of this button are slightly rounded we need to shave a couple of pixels off the ends of the black and white lines. You can do this with the Rectangular Marquee Tool (M) and using the cursor keys for positioning. Remember the marquee will move one pixel to the left, right or up or down every time you hit one of the cursor keys. If nothing happens when you hit delete be sure you are on the correct layer!

When you’re finished you will be left with something like this, with two pixels deleted off both ends off the black and white lines:

The last thing that remains to be done (as you can see above) is just to make the white penultimate pixels line less prominent. Do this by changing the white line’s layer opacity to 30% (hit “3″ with the layer selected).
And now you should by left with this:

Other web button tutorials

This is a very flat button. I have written lots of tutorials about more bulging, shiny, jelly buttons. Here is one for a cool, shiny, web2.0 button. (If anyone get excited by my use of the expression “web2.0″ to describe the look of a button, please be advised that it wasn’t me who coined that first as a design term!!!)

And, here’s another tutorial about how to create cool shiny buttons in Illustrator alone.

That’s all for now and please accept a big apology, especially to my regular readers, for the month’s gap in between my last two posts. I will shortly be writing and backlogging a number of great posts about design and marketing so this won’t happen again. Goodbye, everybody!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The site that seems to embody this transformation – at the moment! – is Twitter. Although Twitter’s growth seems to have leveled off in 2009 after recording a massive 752% growth in 2008, there no signs of it’s influence waning as this century nears its troublesome teenage years. Savvy businesses see money in Twitter: I recently tweeted that I’d had a bad experience with BT and, within a few hours, I got a tweet from them asking me what the problem was.

So if we have to engage with this social media how do we do it productively and without turning into some sort of anti-social geekia dullard? Here are a few pointers on how to organize your web-life amongst the blogs, wikis and social sites, create a consistent online image and sync up all the various parts of your online world.

Create your Avatar

And, no, I don’t mean head over to Pandora and consort with the Na’vi, I mean use a consistent image when you comment on blogs or on your profile page of various other sites. Head over to Gravatar (created by those awfully nice Automattic people that gave us WordPress) and upload a square (150 by 150 pixels should do it) image which will appear by your name when you comment on a blog. Keep this square JPG, GIF or PNG handy on your hard drive and use it every time you register for a forum or social networking or bookmarking site. That way you have a consistent visual sign that people will come to recognize and trust!

Connect your social bookmarking sites to tweet your faves

If you don’t use social bookmarking sites then you should. Sites like Digg, Reddit, StumbleUpon, Delicious, etc., are excellent ways of rank and store useful articles and to promote yourself. As with your tweets, don’t use these services to shamelessly promote only your blog posts. Use them to store articles that you find interesting and then you will earn a reputation for distributing interesting material in your niche and your blog posts will benefit.

The best thing about these sites is that you can link them up to your Twitter ID and therefore promote your post on both the social bookmarking site and Twitter at the same time. Digg and Delicious are especially good for this.

Tweet your latest blog posts and blog your latest tweets

(Bit of a no-brainer, obviously) Some people claim that blogging’s light has been faded by the more advanced social tools. However, I think macro-blogging (sorry!) can only grow from the surge of interest in Twitter’s micro-blogging service. So, to automatically tweet your latest posts use WP to Twitter. And use Twitter for WordPress to display your latest tweets on your blog.

Publish videos and photos and tweet them

With their value going from zero to over a billion dollars in under 2 years, YouTube were the understated social media success story of the last decade. Together with the more stylish Vimeo and Metacafe (which is easily synced with Facebook), video sites are a great way of promoting your brand. For photos, apart from TwitPic there’s the more popular Flickr. Once you have joined these sites remember to favorite other videos, channels, photos and photostreams so that yours are more likely to get seen. Embed your logo and/or website into the videos or images. Remember to always put your website address in your profile settings of all of these sites!

Sync up your LinkedIn and Facebook status with your Twitter feed

LinkedIn users can automatically feed their Twitter status updates to their LinkedIn status updates. Use the Twitter exporter to automatically post your Facebook status updates to Twitter.

URL shorteners

The most successful URL shortener is bit.ly, followed by ow.ly, most likely because they are newer and contain fewer characters. The least retweeted URL shorteners are the older and longer Tiny URL and TwitPic. I think Bitly is great because not only does it shorten URL and posts to Twitter it also provides great stats on the links.

Conclusion

With so many social media sites out there, all wanting your info and time, it’s easy to become overwhelmed and disheartened. As a general rule of thumb, lurk on these sites to see what they’ve got on the subjects that interest you. And then, once signed up (and linked to your main website), make sure you add articles, photos and videos of genuine interest from third parties as well as your own material.

What about you? Do you have any social media top tips that you’d like to share?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

You’ve got a beautiful website and blog and you want people to contact you, either by phone or email. What do you do? Everyone has a contact page on their website. OK, maybe not everyone, but you should have one, really. Here are some really important points to think about when you’re doing your contact page.

How to publish your email address online without getting spam

Spammers use software to crawl the internet to look for email addresses to spam to. This is why people have their email addresses as something like me [at] server.com or something like that to try to cloak the email address from the spammer.

But there’s better ways out there. For example there’s HTML clocking which uses HTML number codes for the ASCII characters.

<a href=”m&#97;ilto:&#97;&#98;c&#64;myhost&#46;&#99;om”> contact us</a>

Here is how the above HTML will look like in the browser: contact us

But even better is JavaScript cloaking of the email address and the mailto: tag.

<script type="text/javascript">
<!--
var username = "rob";
var hostname = "robcubbon.com";
var linktext = username + "@" + hostname;
document.write("<a href=" + "mail" + "to:" + username + "@" + hostname + "?subject=Enquiry" + ">" + linktext + "</a>")
//--></script>

When put into the webpage it creates the clickable email address that will give you “Enquiry” in the subject field of the email. Go on, try it, you can send me an email if you want to:

If you are using WordPress you can happily paste this into the body of a page or post as long as you are using the HTML editor.

Warning: I can not guarantee that any of the above methods will not produce spam at all, just substantially less than if you published your email address uncloaked.

Contact form

But it always makes sense to give your visitors a choice and every website should also have a contact form. There are many different ways of doing these. One thing you need if you want one is PHP on your server.

If you are using WordPress I would recommend the Contact Form 7 plugin. If you are using a Linux server you can basically plug in this plugin and play with it.

However, things are slightly more complicated if you are working on a Windows IIS server. In this case I have found you need to use WP Mail SMTP plugin to get it to work.

Should I include my telephone number and address online?

Whether you include your telephone number and address is entirely up to you. I wouldn’t give out my address on my website for security reasons. I include a mobile number on my contact page and it hasn’t resulted in many problems. In the UK, if your phone rings once and hangs up and you’re wondering whether to call back, simply check the number in the WhoCallsMe website or even just Google the number. If it’s a premium rate scam someone will have posted up a warning about it. This has happened to me maybe 5 times in about 4 years.

How to design your contact page

Generally, I would say that you should put the link to your contact page as prominently as possible on all pages – preferably at the end of the top navigation. The contact page itself should be simple and well laid out. Here is my contact page, what do you think about it?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Cloud computing is a term usually used to describe the proliferation of resources and services accessed through the internet. These resources (for example, Google maps; Google docs; Google Analytics; WordPress.com; online Adobe applications; your website host) in fact, any online service that happens “out there” – you don’t care where, as long as it works – is said to happen “in the cloud”.

Cloud commuting is not a term that has the same widespread understanding. For me the term cloud commuting means working from home.

Cloud computing has made cloud commuting possible with the availability of ever cheaper, faster and larger servers. Just think, whether you are reading at home or at work, how much of your digital life exists outside the computer you are using?

• Do you have a Gmail, Yahoo or Hotmail email address?
• Do you have your words and pictures stored in a social networking site?
• Do you use a website (your own or somebody else’s) for work?

My guess is that the answers to these questions are yes. And, if so, this means you are already outsourcing some of your digital life. This also means that you, if you aren’t already, can work at least some of the time at home.

Outsourcing has suffered from a slight misrepresentation as a practice of companies laying off workers in the west replacing them with cheaper services from the east.

Cloud commuting for me means people from all over the world breaking free from the corporate machine and setting up shop in their homes, providing high quality professional services for clients whilst, importantly, employing others to provide services for them. As Amanda O’Donovan says:

The Cloud Commuter is highly skilled, eco-friendly, doesn’t take up valuable office space and won’t be asking for health benefits… Why take the risk of committing to a permanent headcount when you can drink from the talent pool whenever you want to?

Personally, I feel liberated by becoming a cloud commuter. For one thing I don’t miss the mornings struggling onto crowded trains with thousands of other real world commuters. And then at work, I felt that my input was hampered by the structure of the company – you couldn’t do something until it was agreed by someone else. I liked to get things done. I wasn’t big on water cooler discussions, team building exercises and endless meetings.

The benefit of cloud commuting

The environment – it’s a no-brainer: less meaningless car, bus, train journeys. It’s a good thing.

Productivity – the cloud commuter immediately wins up to 2 hours a day by cutting out this pointless journey. And, the cloud commuter can concentrate better on work. Ever tried PHP coding in a busy office? Don’t.

The family – the cloud commuter spends more time with loved ones; less time with “the boss”. The family will usually benefit. OK, I know that there’s a potential pitfall here where the cloud commuter could be 24/7 locked away in the home office, continually stressed as not able to separate work from home life but this hasn’t been my experience.

The community – instead of living the false “double life” of the real world commuter who suffers the daily routine of traveling to the phony community, cloud commuters spends their time in the most important community – the one they live in. This will provide nicer neighborhoods for people to live in rather than neighborhoods for people to sleep in.

The disadvantage of cloud commuting

There’s one, but it’s a big one: security. Moving all your work to the clouds does compromise the information. The extent of this problem depends on the sensitivity of the files that you store in the cloud. Security should be set on a case by case basis but I would urge all cloud commuters to employ all the usual procedures: run regular back ups of everything and keep them away from where you work, have secure email if necessary; run the latest upgrades of all the software you are using, and install and regularly update virus scanning software.

Cloud commuting and graphic design

To me, the business of graphic design and marketing lends itself perfectly to cloud commuting. We are often in the business of selling an idea not a physical product so we don’t actually have to be anywhere when we work. We just need to be near a computer with an internet connection.

Graphic designers work best when they are free to express themselves and unfettered by the corporate restraints of time, money and hierarchy.

Employ a cloud commuter to deliver a message, sell a product or re-design a website and you’ll have a enthusiastic, hard-working and experienced professional working for you – for a price that would compare very well to an agency’s for the same work!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

What is RSS?

RSS stands for Real Simple Syndication and is a format used to publish frequently updated content from the web on the web. The RSS feed is your posts’ content without any of your website’s style so it will contain just the titles, body text and image paths of your posts. So you better make your image paths absolute not relative!

The benefit of RSS is the aggregation of your favorite websites from multiple sources in one place. RSS content can be read using software called an “RSS reader”, “feed reader” or an “aggregator”, which can be on your browser or on your desktop.

How to set up a Feedburner feed

Google has bought FeedBurner, so you need to sign in to Google and then go to Feedburner and look for where it says something like “Burn a feed right this instant”. WordPress blogs already come with a feed so you can enter either your blog’s URL (eg: http://www.my-blog.com) or your blog’s feed (eg: http://www.my-blog.com/feed, http://www.my-blog.com/?feed=rss2), check a box if you are a podcaster and hit “Next”.

You will next be greeted with a page where you can change your feed title and feed address. Once you are satisfied with those hit “Next” again. After this there are further Feedburner options to choose from – most of which I ignore, it’s FeedBurner’s email subscription that rocks but I’ll come to that later!

Install the FeedBurner plugin

For the best results using FeedBurner with your self-hosted WordPress site, the FeedBurner FeedSmith plugin is recommended. It will detect all ways to access your feed (e.g. http://www.my-blog.com/feed/ or http://www.my-blog.com/wp-rss2.php, etc.), and redirect them to your FeedBurner feed so you can track every possible subscriber.

WordPress settings

Feedburner can only handle feeds under 512K. In WordPress, make sure your feed doesn’t exceed this in the administration area, by going Settings > Reading, “For each article in a feed, show” – you can choose “Summary” although I like to have “Full text” and don’t put more than 50 in “Syndication feeds show the most recent” if you write long posts.

What is email subscription and how can you set it up?

Email subscription to your blog allows those who have signed up for it to receive your blog posts in their inbox. You can use Aweber to do this but I’ll show you how to do it for free with FeedBurner.

With your feed selected click the “Publicize” tab, then click “Email Subscriptions” on the left, making sure “Feedburner” is selected, and click “Activate”. This will then present you with some HTML code in the box which you will need to copy and paste somewhere in your website.

Once signed up a subscriber will receive your posts as emails shortly after they are published. Google/FeedBurner handles all the backend work – subscribers verify themselves by email and have the option of unsubscribing at the bottom of every email they receive.

Design your posts so they look great as an email

Underneath the “Email Subscriptions” link in FeedBurner whilst in the “Publicize” tab there is another link entitled “Email Branding”. Do spend some time on this page formatting text, headings and links – you can specify the font, size and color. You can also add your logo and specify the title of the email.

Advertise the RSS feed and email subscription on your website

On my website I advertise the RSS feed with the familiar RSS icon which is linked to my FeedBurner feed. And I use the familiar email icon which takes you to the page where you can subscribe to my posts by email. I’ve also got some general information about feeds on this page so that my readers can decide which is the best way for them to subscribe to my blog.

What’s the benefit of RSS and email subscription?

They are both fantastic marketing tools. RSS brings in traffic as it is, for some people, an easy way of reading a site’s content. Email subscription can work like a weekly newsletter to your subscribers with a link back to your site. A subscriber is always worth more than a visitor because, more often than not they will return to your site again and again. The added advantage of the email subscribers is that you have the list of their email address’s although I wouldn’t advocate sending them much in the way of extra mail.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

How long has it been since you first used the internet? How much have your habits of information gathering changed since then? If you’re anything like me a myriad of different interests discovered on the internet crowd your mind as well as the exciting new ways you find out about them.

The future is on the internet not in print?

So is the internet the future of communication and print as relevant to the the 21st century as the horse is to modern transport?

Well, print is tangible, of course, and that gives it a sense of permanence in a fast-changing world.

If the printed book was launched today it would be described as completely platform-independent, requiring no special software, hardware or electric power to use, more portable than any laptop, does not have to be upgraded, might last a careful user their entire lifetime, and costs less than $15!

If I’m excited about a new subject and really want to learn or to get my teeth into something – I’ll always go to Amazon to try to pick up a cheap book to read.

Technology was supposed to replace paper. But that hasn’t happened. Every country in the western world uses more paper today, on a per-capita basis, than it did ten years ago.

So, there is a place for print design. But where?

Paul Simpson makes the point that print has changed enormously since Gutenberg fiddled with movable type nearly 570 years ago. And will change again. He says that key decision makers – those who don’t surf the web, never open links in emails and are unlikely to stumble across your website – are more successfully targeted by a printed piece of marketing rather than an online one.

If you’re trying to reach out to people who don’t know your business – or do know it and have already decided you stink – the printed product still has a cache, prestige and charisma that the internet can, as yet, only aspire to.

So where does this leave the freelance graphic designer?

The old mantra “If you build a website they will come” on the web is finished. And not even the new mantra of “content is king” explains it as you can have excellent content but no one will visit to sample its excellence.

Content is extremely important but it has to share its throne with marketing.

Whether designing for print or web knowing your market and how to reach it is more important now than ever.

The internet is the new kid on the block but ignore print at your peril. Investing in quality print design could give you the edge on your competitors in these challenging times.

So what do you think? Do you find yourself like me besieged by clients who are obsessed with Google, internet marketing and never consider the power of the printed word? Or do you work in print happily unaware of the parallel internet universe?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

What are email blacklists?

Email blacklists are databases used by organizations to decide if the IP connecting to a certain mail server is a spammer someone known to send invalid messages. If you don’t know the IP address that you send you mail from (not necessarily your own IP address) contact your host or internet service provider.

They aim to improve mail security and most of them are community managed. If you (your mail server’s IP) are listed in any of these databases and you try to send an e-mail to a server that uses that particular database to filter spam, you will find out that you cannot send e-mails to that host.

One such system is SORBS which blacklisted my IP once. Due to the fact that SORBS is run by volunteers and requests money to remove blocks, I am not sure that many organizations use it in their spam prevention plans. Sometimes the issue that will create a blacklisting is very small, yet removing it becomes something very big.

Are you on an email blacklist?

There are several sites where you can enter the IP address that your mail is sent from to check if you are on a blacklist.

Most of the time, you can remove your IP from any blacklist by visiting their site and submitting a removal form. Such information may include proof that you have ceased any actions that got your IP blacklisted in the first place, or may not require anything but your mere interaction, to demonstrate that you are not a robot or a script. Or you can get your host to do this. However this can take about a week! What do you do in the meantime?

Get your host to route your mail through a different IP address

This will stop the problem in the short term while you negotiate the de-listing with the blacklisting company.

Use Gmail to send and receive mail from the blacklisted address

Whether or not you are on an email blacklist it’s good to have backup. I can’t think of anything better than Google Mail. Here you can store up to 7340 MB of emails!

Forward all your mail to your Gmail account

This is how I do this using cPanel. To forward email from cPanel to Gmail:

1. Log in to your cPanel administration page
2. Click on the top left icon “Email Accounts”
3. Click on the Access Webmail globe next to the email address you want to access
4. Enter password
5. Then when you get to the screen where you choose RoundCube, Squirrel Mail or Horde, click the “Forwarding” or “Forwarding options” and get a copy of all the mail you receive sent to your Gmail address.

How to add a custom “From:” address in Gmail:

1. Then in Gmail, click Settings > Accounts then click “Add another email address you own” and enter your other email address.
2. Google will then send you an email with a confirmation code to this other email address which you should enter in the window that has popped up from Gmail.

The benefit of doing this Gmail set up is that you can reply to emails sent to any other email address (as long as you click the “Reply from the same address the message was sent to” option) and make it look like the replies are being sent from the other address rather than Gmail. Also when composing a new mail in Gmail you have the option of which email address you want the email to be sent from in the dropdown menu next to the From:

Forwarding all mail to Gmail and adding custom “From:” addresses is by no means a fool-proof or fale-safe plan for email. However it’s incredibly useful to have copies of the mail that’s sent to your inbox and the ability to reply to that mail from the Gmail interface on a browser is a great way of nullifying the painful effects of a blacklisting!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Simple and interactive image slideshow fader with JavaScript

I got this image slideshow fader from DynamicDrive. I used it to show images from different websites I have designed and developed on my home page.

How to use it

You should save all the images you want in your fader and put them in your image directory as normal. The references to the images (plus links when the image is clicked) should be put in the beginning of a script found at DynamicDrive. If you follow the directions at DynamicDrive they’ll tell you to put this script in the <head> section of your page. The JavaScript will always be contained by the tags <script type="text/javascript"> and </script>. I prefer to delete these tags from the script and save it in a .js file and call it in the header between the meta tags and the style sheet link, like so:

<script src="http://robcubbon.com/js/rotation.js" type="text/javascript"> </script>

As I saved all the JavaScript in a file called “rotation.js” in a folder called “js” in the route of my host’s server.

After this is done another, much shorter, section of code should be placed in the body of your page where you want the fader which invokes various parameters such as the the delay between the images and whether the slideshow should pause (not rotate) while the mouse is over it, etc.

Here is another example of the JavaScript image fader rotating a few different images on the home page of a website I designed and developed for Sarah Youren Planning Solicitors.

Other JavaScript resources on the web

As mentioned this image fader was created by DynamicDrive. Check out their website there are loads of simple, cross-browser image effects, scrollers, menus, form effects, etc. Another lightweight cut and paste collection of JavaScripts is at The JavaScript Source.

And more powerful JavaScript frameworks can be found at jQuery where you will find a JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for web development while at MooTools they have a super lightweight web2.0 JavaScript framework.

What about you? Have you got any JavaScript tricks or resources up your sleeve?

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Constantly updated quality content is the mainstay of any website or blog. I have already described how to set up a WordPress.org blog and what to write about when you have one. Here’s the “how to” for those new-ish to WordPress…

There are three things to remember when you are writing:

1. Make your text scannable! That means, by what ever means – using bold text, titles, italics, bullets, links, etc – break up otherwise dull looking text. Remember your visitors will typically spend a few seconds on your website so it is necessary to entrap them. These words and phrases that jump out may interest the reader. It also looks nicer.
2. SEO. Include your keywords in the title of your post or page, in the <h3> tags or subtitles or in bold. Keywords are descriptors of the page or the site. But you may want to emphasize the ones with which you want to be found by search engine. So I may want to put graphic designer in my headings more often than not as I mainly want to be found on Google for people searching for graphic designers. However, only include words that are relevant to the article.
3. Save. As soon as you start writing click the “Save Draft” button. And click this intermittently through the writing process. Also, click the “Preview” button (you can do this straight after even if it hasn’t finished saving the draft) from time to time and see how your post looks. This opens it in a different window of your browser (or tab if you are using them) and if you keep this window open it will update every time you hit “Preview”. Don’t worry, the unfinished post or page is invisible to your website’s visitors until you click the “Publish” button! WordPress does have an autosave function but I find this the best method.

Getting started: What is the difference between a WordPress page and a WordPress post?

Both WordPress pages and posts create webpages! However a WordPress page is for static content (typically the “About Us” or “Contact” page) and a WordPress post is for adding content to your blog, something that is dated and belongs to a certain category.

The process of writing a new post or page in WordPress 2.7 and above starts in the dashboard (the dashboard is the welcome screen which displays when you add “wp-admin” after your blog’s URL in the browser’s address bar). Look for where it says Post or Page in the left hand column. Under these headings, click “Add New” (you may need to click the small arrow when you hover the mouse over to the right of where it says Post or Page).

Adding the title of your post or page

OK, this may be pretty obvious. The box at the top of the “Add New Post” or “Add New Page” screen (just below where it says “Add New Post” or “Add New Page”) is for the title. Remember this title is very important for SEO terms so cram it full of keywords.

If you have your permalinks set to %postname% (as is highly recommended) the permalink will be displayed beneath the post title. WordPress is quite good at generating these pretty permalinks. However, if you’ve taken a while to write the title you may find that not all of the words are in the permalink. In this case you can type in all the words you want, separated by hyphens.

Writing – what all those buttons mean above your WordPress text editor?

Writing a WordPress post can be like writing in a word processing package. Well, nearly, but not quite…

There are two tabs above the text editor – Visual and HTML. If you are a beginner with HTML I would advise you to start to flick between the two. If you know about HTML you’ll probably stay on the HTML tab all the time.

The following bulleted list is my explanation of the buttons along the top of the Visual editor and their results in HTML.

• Bold: Fairly simple one to start with. It emboldens the text in Visual mode and wraps <strong> tags around it in HTML mode.
• Italic: You guessed it. This italicizes the text in Visual mode and wraps <em> tags around it in HTML mode.
• Strikethrough: This strikesthrough the text in Visual mode and wraps <del> tags around it in HTML mode, it usually means that the word was in the original version of the text but is to be discounted now. (No, I’ve never used it before.)
• Unordered list or bullet points: Click to add a bullet and then hit return for subsequent bullets. Hit return twice to end bullets. In HTML mode, click <li> when each individual bullet point is highlighted, then select all bullets plus <li> tags and click <ul>.
• Ordered list or numbered points: Much like above. Click to add number 1 and then hit return for the following numbers. Hit return twice to finish the numbered list. In HTML mode, click <li> when each individual numbered phrase is highlighted, then select all phrases plus <li> tags and click <ol>.
• Blockquote: This defines the selected text as a block quotation. It is indented and most themes will put in a colored background. It is a very good way of breaking up text and I must confess I don’t always use it for a quotation but also as a method of differentiating a block of text from the main article.
• Align left, center and right: Pretty obvious really. Adds style="text-align: left;", style="text-align: center;" or style="text-align: right;" into whatever element the cursor is blinking in.
• Insert link: This is very useful in both modes. Once the text you want to anchor the hyperlink is selected and this button is clicked a window will pop up with a handy (or not so handy) http:// already there. Put the whole link into this box (for example http://www.google.com/) and in the HTML mode you will see <a href="http://www.google.com/"> at the beginning of the anchor text and </a> at the end.
• Unlink: Select the colored underlined text in Visual mode and click this and it’ll get rid of the link.
• More: This breaks a post into “teaser” and content sections. Insert this tag after a few sentences of your post and on your blog’s home page you’ll see only those first few sentences followed by a hyperlink (more...), which when clicked displays the rest of the post’s content.
• Spellcheck: I tend to rely on Firefox’s spellchecker so I don’t know how good this one is.
• Fullscreen mode: Does what it says on the tin.
• Kitchensink: When clicked this will bring a whole second line of formatting options. Click here for further explanation of the kitchensink.

This is only a brief description of using the text editor in Visual mode. Remember to constantly flick between Visual and HTML tabs and you will learn a bit about HTML. One thing you will see is that most HTML tags consist of two tags – a start tag and an end tag. The end tag is identified by a forward slash (/) before the tag name (look out for this in your HTML editor).

Indeed, instead of selecting the text and clicking the button to apply whatever text style you want, you can position your cursor before the text, click the style button once, then move it to the end of the text that you want styling and click the same button again and the end result will be the same. It’s a case of opening and closing a tag.

Insertion of the <p> tag

If you hit the return key on your keyboard in the Visual text editor you will get a new paragraph. So it will wrap the previous text in <p> tags.

In the HTML editor, one hit of the return key will give you a line break or <br/> tag. (A slightly different type of tag, it stands on it’s own, is “self-closing” and therefore requires no start or end tag). Two hits of the return key in the HTML text editor will give you the new paragraph <p> tags just like one hit does in the Visual editor.

Any more hits of the return key won’t give you any more line breaks so don’t try it!

Insertion of the <h3> tag

Remember our important points to think of while writing a WordPress page or post? Breaking text up and SEO? The <h3> tag encompasses both of these in a big way.

In most WordPress themes, the title of your post is wrapped within <h2> tags which conveys to search engines that it is important text. Similarly, you can break up your text with subheadings or <h3> tags which conveys to search engines that it isn’t as important as <h2> text but is important nonetheless.

So I find these tags very important. But they don’t exist in the Visual editor so you’ll have to use the HTML editor to insert a subheading in your post or page!

Insertion of code into the HTML text editor

You can add any HTML code you like into the HTML text editor which is very useful. I’ve often added tables and divs. One word of warning when doing this: remember the <p> tags!

Say you want to put ordinary text inside a <td> tag. You will have to hit your carriage return twice to get the <p> tags to appear. In this case it is probably easier to add the <p> tags in the editor.

How to insert images manually into a WordPress post or page

OK. WordPress has great new options for inserting images, audio and video into your post. But I’m old-school and I want to show you how to do it the HTML way.

There are two main ways to put an image into a post. One way (see above) is to make the image straddle the whole width of the text. To be able to get the image to fit snuggly into the box you are writing you need to know the width in pixels of the <div> that contains the post text. Go to Appearance > Editor in the WordPress dashboard and click on <style.css> to find this out. In my theme the <div> that contains the text and headlines is called “entry”.

Once you have done this you need to re-size your image to that pixel width using photo editing software such as Photoshop and upload it using an FTP client to your website, preferably into a directory called “images”. Once that is done you can enter this code into the HTML text editor:

<img src="http://your-site.com/images/image.jpg" alt=""/>

Remember to add two returns above and below it in the HTML text editor. Also, don’t forget to write good keyword rich and descriptive file names and alt text for the image.

The other method is to add a less wide image to the left or the right of the main body of text and have the text wrap around it. In this case you don’t want to add any returns after the code as you want the text to run adjacent to it. Simply insert this into the beginning of a paragraph to insert an image on the left hand side of the text:

<img src="http://your-site.com/images/image.jpg" style="float: left; margin: 0px 10px 0px 0px;" alt=""/>

And here is the code for inserting an image on the right hand side of the text:

<img src="http://your-site.com/images/image.jpg" style="float: right; margin: 0px 0px 0px 10px;" alt=""/>

Conclusion – OMG this post has been so long and you’ve got to the end of it!

I’m sorry that went on for a bit longer than I thought it would. Just goes to show you there’s more to writing a WordPress page or post than just … writing!

If anyone has anything to add to this, as always, please do so in the comments below. I’m bound to have left some important things out and probably made a mistake or two – intentional, of course!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I would do catastrophically badly.

I am particularly bad at public speaking. But, even if I weren’t what would it matter if I said: “I am an excellent graphic designer and I have great marketing ideas when it comes to promoting businesses.”

Why would anyone believe me? This is why I am a great believer in the website being your permanent shop window.

It is much better (for me at least) to get your potential clients knocking at your door rather that the other way around. That is why I always eulogize about the benefits of writing constantly about what you do in order to advertise your services to the world.

How to create this in Photoshop

Re-sizing and putting perspective into type is easy in Photoshop. Here’s how I put the text onto the lectern picture.

First of all, create the text you want with the Type tool (T). When you are doing this it is important to make it as large as possible. The reason for this is that it need to be rasterized in order to apply perspective.

The next step (you guessed it) is to rasterize the type layer. Go Layer > Rasterize > Type or right-click (PC) or Cntl-click (Mac) on the type layer and select Rasterize Type.

Now go Edit > Free Transform, or Cntl/Cmd-T and you will see a box around the text with eight anchor points on it. In order to apply perspective Cntl/Cmd-alt-shift-click on one of the four corner anchors and drag. But what you will find easier is just a Cntl/Cmd-click on one of the four corners of the Free Transform box to move that corner to wherever you want. Finally hit return to render the transform.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I have a love/hate relationship with Flash. It gives you great freedom when designing, allowing you to use fonts, graphics and animation with carefree abandon. On the other hand, Flash sites are currently less likely to rank well with search engines than comparable HTML sites and the file sizes are generally larger increasing the wait for your site’s visitors.

So, sometimes an HTML/CSS site is best (blogs, forums and a whole host of other things) and sometimes Flash is the obvious answer (animation, games and, see below, galleries).

When doing a Flash gallery you may like to consider purchasing a template and customizing it. I’ve recently done this twice with two different templates and the two experiences couldn’t have been more different.

The Flashnifties positive experience

Click here to view the Flashnifties Media Gallery

For $40 I got Flash Media Gallery from Flashnifties. This Flash template is a multi-category gallery which displays images, videos, text and SWF files along with music.

The first and most important thing to say about the Flashnifties template is that the support documentation is excellent. And if your questions about customization are not answered in the FAQs there is a forum with helpful moderators for each of their products.

The end product is viewable in Flash Player 6 so good for those that haven’t updated for a few years. It can be sized to fit any pixel dimensions. One disadvantage I would give is that the image thumbnails take a while to load as they are actually smaller versions of the main image rather than separate smaller thumbnail files.

All in all, I would say that any product from Flashnifties is probably worth the money. Don’t worry too much about a lack of Flash or ActionScript knowledge – most of the changes you’ll want to make will be to text files not the FLA.

See the Flashnifties example on this page. The project was managed by Alenea Consulting.

The Flashmint negative experience

Click here to view the Flashmint photo gallery

Unfortunately just about everything that was good about the Flashnifties experience was bad about the Flashmint experience. A massive $134.00 (how much?) will buy you a photo gallery template from one of the big boys, Flashmint.

Flashmint boast on their website “both professional web masters and beginners won’t find it difficult to modify the templates according to any requirements.” Actually reading that rings alarm bells!

Most of the changes needed to be made to the ActionScript 3.0 and it required Flash Player 9 to play it. ActionScripts can be structured in many different ways and without adequate instructions the scripts need to be deciphered first which takes time. The Flashmint template came with zero supporting documentation.

Flashmint did have a support department, here is a quote from them: “we unfortunately don’t provide assistance in editing Flash and ActionScript”. I have asked them what support they actually provide. I’m still waiting for an answer.

The one subject the support department were keen to explain was how to employ their customization services.

This particular Flashmint template allows for images to be displayed nice and big. But I would bet there’s a better one out there for the money.

What to look for in a Flash gallery template?

• What version of Flash Player is it? Adobe’s claim that 98% of computers have Flash Player 9 is, in my opinion, grossly exaggerated. You’re safe-ish with Flash Player 6.
• Does the site have a good FAQs section? Flashmint does have FAQs but you can tell at a glance that it’s basic and not useful.
• Does the site have a good forum? If you check out Flashnifties forums you can see that every question gets answered pretty well.
• How much is it? Prefer $40 to $134.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There are two sides of a coin when considering how to market your site on the internet. Firstly, concentrate on the site itself: write regularly updated quality content and optimize the site for search engines. Secondly, by concentrating off the site: getting quality sites to link to yours.

Introduction

As I’ve said before in this series, there is no way to cheat the system. Employ these link building methods in an honest and respectful way. There is no quick and easy solution to link building and SEO. It takes time to do and time to see the results.

Why get links? Simply, more links = more traffic.

But also, Google (and other search engines) counts a link as a “vote” for your site. The more votes for your site, the higher your site will feature in their search results. But it is important what sort of page is linking to your site.

Here is what Google says about links:

Links help our crawlers find your site and can give your site greater visibility in our search results. When returning results for a search, Google combines PageRank (our view of a page’s importance) with sophisticated text-matching techniques to display pages that are both important and relevant to each search. Google counts the number of votes a page receives as part of its PageRank assessment, interpreting a link from page A to page B as a vote by page A for page B. Votes cast by pages that are themselves “important” weigh more heavily and help to make other pages “important.”

Download the Google toolbar for Firefox and it will show you the PageRank of every page in the internet. If you get links to your site from pages that have a PR of 7 or more you’re laughing!

But the relevance of the inbound link is also important. Get links from sites that are in a similar area of business to yours.

Here’s a great little trick of doing this. Find a site of a company or individual who does what you do but is more established, has a higher PageRank – basically find a website that you want to emulate. Check out the links to their site. Google “links:www.their-site.com” and you will see who links to them. Try to get these sites to link to you!

Here are some tried and tested ways of getting good relevant inbound links to your site. (Apart from having quality content!!!)

Write articles for other sites

I would advise writing original material for other websites, blogs, articles site and industry news sites that are relevant to your field. Duplicated content that already exists on your site might be counted against you by Google. Of course, sometimes you will write an article for someone else and then think to yourself “oh that’s quite good, I should use that on my own site!”

Here are some general articles sites but you should also look for articles sites and blogs that deal with your area of expertise.

• EzineArticles
• GoArticles
• iSnare

Write a press release about developments in your business or site. Take the time to make it a compelling and newsworthy release. Submit it to PRWeb or PRLeap.

Your article or press release will sit on these sites for months and years to come with a link back to your site.

Comment on other blogs

If you read a good article on a blog, why not spend a few minutes writing to say what you liked about the post and see if you can add anything to the discussion? People may follow the link from the comment to your site.

These comment links back to your site may not provide you with any link juice.

The thorny nofollow/dofollow issue and an explanation of “Link Juice”

Link Juice is the name given to the PageRank (and other things) passed from one page to another via a link. Because a lot of blogs, forums, social bookmarking sites and even some directories are “nofollow” you will not get any link juice from links from these sites.

What is a “nofollow” link? rel="nofollow" is a piece of HTML that is used to instruct search engines that the link should not influence the target’s ranking. In other words, a nofollow link sends traffic but not PageRank.

Some webmasters and blog owners actually want to reward commenters with a bit of link juice and remove the rel=”nofollow” tag. So if you comment on these blogs your PageRank and, ultimately, your place in the search engine rankings will improve. Lists of “dofollow” or “nonofollow” blogs do exist but I would exercise caution here.

Commenting on these blogs with a few words such as “nice post, dude” and entering your keywords instead of your name will not help you. Comments such as these will be deleted immediately (they may not even make it on to the page) and will serve only to make you unpopular with the very people you need to get on with. As always with SEO, act honestly.

I used to be a “dofollow” blog but I stopped because of too much comment spam.

Social bookmarking sites

People submit links of content they like on the web to social bookmarking sites such as Digg, del.icio.us, StumbleUpon, Technorati (more of a blog search engine) and, new-ish kid on the block, Twitter.

You can create a page of your own favorite links and include a few back to your site. If your links are considered a good resource by others they will follow them, including the ones to your site, and you may get more links from them.

Social bookmarking is a great way to promote your site, network with other people in your area of expertise and find new ideas and information to help you develop your site. But don’t over-submit your own content or you will be penalized. As always with SEO adopt the “white hat” approach. If you’re offering something valuable you will reap rewards. If you don’t, you won’t!

Link to other sites

Link to sites as you would like sites to link to you.

If you find some valuable information or resource related to your field then link to it from your site. But do this in the correct way. Write good anchor text for the link. The anchor text or link label is the visible, clickable text in a hyperlink. The words contained in the anchor text is weighted highly by search engines. So when you are linking to some other page say what it is (and maybe something nice!).

So do this:

<a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>

or this:

<a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia, is amazing multilingual, web-based, free-content encyclopedia </a>

but not this:

<a href="http://en.wikipedia.org/wiki/Main_Page">Click here</a> for Wikipedia

The webmaster or blog owner will see this lovely inbound link with good anchor text and may return the favor one day.

Also certain blogs will automatically publish a trackback to your site when you link to it. These trackbacks can produce traffic and, in a minority of cases, link juice – but, again, don’t abuse!

Submit to directories

It’s tedious and depressing and should only be done for 10-15 minutes at a time with some musical accompaniment but here’s a list of 50 free directories with good Google PageRank with no reciprocal link needed.

Reciprocal links and three way link exchanges

Reciprocal links are the “I’ll scratch your back” method of SEO. You link to them if they link to you. The benefit of doing this is considered to be extremely limited.

What may be slightly better is a three way link exchange where site A links to site B and site C links to site A. This creates the illusion of a one way link in the eyes of the search engines. When partaking in this form of linking I would be cautious of link building companies. Regularly check to see if their link to you stays there as many will delete these links a few weeks after they are set up. And try keep them relevant to your site’s subject matter.

Conclusion

Question: So, what’s the best method of ensuring good in-bound links from sites of high Google PageRank?

Answer: content. If you haven’t got anything anybody wants, not many people will link to you. But you knew that, didn’t you.

Another interesting point is that the two reasons for linking – traffic and link juice – usually go hand in hand: my best links in terms of PageRank are actually the best links in terms of traffic.

Go about the above techniques with respect for other sites and for the subject matter – keep it real and honest. And, in my opinion, limit these link building activities to less than an hour a week. You’ll go mad otherwise and it’ll make sure you’re not diverted from the main goal – quality content!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This is the fifth in the series where I explain how an individual or small or medium sized organization can get themselves noticed in the big bad world.

Other installments explained how to set up a web site from scratch, how to install WordPress and what to write on your site.

Before we commence a couple of definitions – SEO or Search Engine Optimization: is the process of improving the volume and quality of traffic to a web site from search engines via organic search results. Keywords: (1) descriptors that capture the essence of a topic or (2) the words you type into a search engine in order to find stuff.

WordPress is pretty well structured for SEO anyway but there are a number of things you can do to improve it’s performance thus winning you more visitors, collaborators and clients.

Get the right URLs

By default WordPress uses web URLs which have question marks and lots of numbers in them (for example: http://www.your-site.com/?p=N). It’s not good and it’s not pretty. In the WordPress admin panel go Settings > Permalinks. What format is the best to choose? I would go for /%postname%/. This is best because the URLs to articles should never change and it gets keyword rich page titles in there separated by hyphens (for example: http://www.your-site.com/keyword-rich-post/). But, remember, don’t stuff any area with your keywords. Just use them naturally.

Title tags

The most important part of a web page in terms of SEO is the title. Optimize what goes in between and on the top of your browser window. So the name of your WordPress blog to include the keywords that you want people to find you with when they enter them into a search engine. Do this in Settings > General > Blog Title in WordPress’s administration panel. My title is Freelance Graphic Designer London. That’s sort of what I am and I want to attract people who type those words into a search engine to me.

Search engines put more weight on the early words so it is better to have your page title (and then category) to come before your site title. There are many ways of doing this. I would recommend that you use the HeadSpace plugin to do this. Mac users beware that HeadSpace does not work correctly with Firefox, so try Safari.

Categories

WordPress offers excellent categorization of your content. Make sure the category titles are keyword-rich. Write enticing descriptions of your categories in Posts > Categories. Use HeadSpace to add that description to the meta description, by adding %%category_description%% in the Description field.

Heading tags

Generally keywords are better off appearing within <h1>, <h2> and <h3> tags than within <p> tags. The <h2> tags are the title of your post or page so put keywords in there. Within your posts and pages you can add subheadings (<h3> tags) which can also contain keywords.

Images

When including an image in the content of your website be sure to name it correctly. So make it “computer-screen.jpg” rather than “image01.jpg”. Also always put an <alt> tag description of about four words explaining what the image looks like. By all means put keywords in there if they are relevant but (as always with keywords) don’t force it. I get about as much traffic from Google image search as I do from ordinary organic Google search just from doing this.

Sitemap and robots.txt

Creating an XML sitemap is often considered a boost to your SEO. It is a widely adopted search engine standard that helps search engine robots crawl your site. It was created by Google and adopted by Yahoo!, Microsoft and others in the search engine industry. You can do this very easily with the Google sitemap generator plugin for WordPress.

So you’ve created an XML sitemap so now what do you do? If you haven’t already, log on to Google Webmaster Tools add your site and submit your sitemap.

You need to add a reference to it in your robots.txt so robots other than Googlebot will know of its presence.

Search engines will look in your root domain for a special file named “robots.txt” (http://www.mydomain.com/robots.txt). The file tells the robot (spider) which files it may spider and where your sitemap is. Here is mine:

User-agent: * Sitemap: http://robcubbon.com/sitemap.xml
Disallow: /wp-


I have disallowed the robots from directories that have either no relevant content or duplicate content.

Embolden words

Words within <strong> tags carry more weight in SEO terms (as well as visually) than words within <p> tags.

Meta tags

The meta tags provide structured metadata about a web page and exist in the <head> section. They are generally considered to be obsolete but the description tag does appear on the SERPS and therefore should be generated separately for each page. Keyword tags maybe totally ignored but HeadSpace makes creating them very easy so you may as well.

Write your .htaccess

You can choose whether your site should be a www or non-www site. Your site with and without a www could appear to be two sites with the exact same content. Search engines don’t like seeing content copied. You can divert your www url to your non-www url or vice versa by entering a small bit of code into the .htaccess document on the root of your server.

Follow standards

Make sure HTML and CSS code is standards compliant.

Further reading

Here are a couple of pages I have found to be very useful for SEO and WordPress:

• SEO for WordPress – The Complete Guide by Jim Westergren
• WordPress SEO by Joost de Valk

These are only a few things I can think of in order to make a WordPress site optimized for search engines. If anyone knows anymore white hat techniques for SEO – let me know.

Apologies to my English brethren, forefathers and Shakespeare, I’m using American spellings from now on. Most of my visitors are American and with the pound down so low I’d be especially pleased to attract American clients! (As I am pleased to attract a client from anywhere!)

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

So you’ve got your WordPress blog set up and you are just starting to write – what you do?

Words are, in my opinion, the most important thing on a website. This is because the search engine robots that crawl the web every day can pretty much “read” what you’ve written, but they can’t look at your website and think “mmm, nice graphics!”

For me, there’s two things to think about when writing. One is keywords; the other is making sure you’re writing stuff that people are going to want to read.

Keywords in your content

Keywords are what people type into a search engine (Google, for example) in order to find websites. Now there are good and bad ways to introduce keywords into your website text for SEO purposes, but I’ll come to that in my next post. For the time being, if you are a designer for example, you should write about – guess what? – design.

But it’s not as simple as that. It’s virtually impossible to be found on the internet with just one keyword so you should think of your second most important keyword; for me it’s probably “graphic”. Your third most important keyword; for me, “freelance”. The fourth; “London”. And so on. Don’t sweat about choosing these you can always change them.

Use these keywords in the title and body of your articles with the most important being the most frequent. But, there is only one way to do this – naturally.

Write about the subject as you would normally, don’t struggle to add the keywords as many times as possible or even once more than is necessary. For one thing, search engines will penalise you for keyword repetition; for another, it will make your site very unpleasant reading for your visitors.

How would you rather read about a subject you’re interested in – in an ad or an article? It’s so much better to read the considered thoughts of an expert in a field rather than the hurried ramblings of someone who just wants to make money.

Here’s how you make money:

Write content that people will want to read

Write intelligently and lucidly about what you know most about.

Remember, you are an expert, we all are. You’ve spent your life doing something – it doesn’t matter what it is – that something is useful to somebody. This to me is the crux of what internet marketing is all about.

When you write about your specialities you will naturally attract to your website those who are your best customers. Let me explain, I do graphic design and marketing, now graphic design and marketing are huge fields, it would be nuts for me to market myself in this area and leave it at that. So I specialise – every organisation does. Web information about a niche area will draw in like-minded people and perfect clients through Long Tail keywords.

So I’ve written tutorials for Photoshop and Illustrator, blog posts about delivering advertising messages with graphics, articles about web and print production. Other articles have been solely responsible for melanding certain jobs. The subjects of these have been: interactive and rich media PDFs; pop art; creating countries’ map outlines and flags; WordPress for website creation. Quite a mixed bag. But if someone wants to ask me to do something I’m always grateful for the work!

When you are writing about what you know best, keep checking your facts. Constantly ask yourself when you write something if you really are sure about it. Very often in our professional careers it’s easy to believe certain things by hearsay or rumour. Use the internet and any other resource to back up your assertions thoroughly before you publish your post.

So when writing about your specialities, do you spill the beans and reveal all your trade secrets or do you hold back on certain information hoping to retain the power of knowledge from your competitors? I would always favour the former rather than the latter.

I would encourage anyone to put as much detail into their descriptive articles as possible. I’m sure it won’t harm your business to reveal the correct and best practices that you use. Transparency in governments is considered to be ethical so I would encourage anyone to be open as possible in their own organisation.

Your potential clients won’t have the time or the inclination to use this information to do the job themselves and this priceless insight will win you kudos for your generosity. (And, of course, valuable information on the internet will be linked to raising the profile of your site and have it appear higher in search engines’ results, more to come on SEO in the next post.)

I have benefited immeasurably for the community of designers and marketers who have explained techniques and solved problems in websites, blogs and forums. It’s only fair that I give back to the community.

For me this is kind of business karma. Take Matt Mullenweg, for example, the founding developer of WordPress – the most popular and best blogging software that has empowered millions of ordinary people to publish in a beautiful way for free. Matt is listed in Business Week’s 25 Most Influential People on the Web, is in Inc.com’s 30 under 30 – America’s Coolest Young Entrepreneurs and his company Automattic Inc is 123rd in TechCrunch.com’s list of Startups Best Positioned To Weather A Downturn. My point is that Matt’s initial and ongoing commitment to open source software – giving out good stuff for free – has helped him in his brilliant career.

So I would advise virtually anyone to get a WordPress site and start writing on the cutting edge of what they know best. The advantages you will see in your community, your networking and your client list will far outweigh the effort.

And in the area of the style of writing, here are ten tips for writing a blog post.

Some say write for a month when starting and then publish for the first time. Some say write every week once you’ve got going. Some say make every post no longer than 350 words.

I say … write!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

In the previous post in my How to market yourself series, I described how to set up a website on a host’s server. Here I will tell you how to set up a WordPress blog on that server. Read my introduction to this self-marketing series here.

OK, so this information exists elsewhere on the internet, so why am I writing this post? Because WordPress is the best way I know to market yourself on the internet so this post is hugely important for this reason.

What is WordPress?

WordPress is a robust and feature-full web publishing platform with a focus on aesthetics, web standards and usability. WordPress, as it says on it’s homepage, is both free and priceless at the same time.

This is about a WordPress.org blog. What’s the difference between WordPress.org and WordPress.com? WordPress.org is where you can download WordPress to use on your own hosting service and have your own specific website address (this is what I’m recommending). WordPress.com hosts WordPress blogs and therefore puts WordPress.com in your website address and gives you generally less control over your website, for example, the number and kind of adverts and affiliate links are restricted.

WordPress is the best Content Management System for simple “shop window on the world” websites for small and medium sized companies, in my opinion.

What’s good about WordPress?

It’s free. It’s easy to use. There is excellent support documentation and forums because, literally, millions use it. It’s database driven so you can transport it to another CMS if you really want to. Anyone can edit the site (with a username and password) from anywhere in the world. There are many different themes designed that you can dress it up in.

You can add loads of functionality to your website very easily, for example, search, sitemap, RSS feeds, comment forms, contact forms, galleries, etc. Believe me, I could go on.

Still not convinced? Have a look at these websites that use it: StyleWatch at People.com, Martha Stewart, PlayStation’s US blog, Stephen Fry and NY Times blogs.

So here’s the nitty-gritty.

How to install WordPress on your host server

Of course, there is great information on how to install WordPress on the WordPress site. But here’s what you do.

First download and un-zip the current version of WordPress.

Then, create a database and a MySQL user who has all privileges for accessing and modifying it. For those with cPanel go to MySQL Databases and do this. Write down the database name and the MySQL username and password. Finally add the user to the database.

Go to your version of WordPress you had just downloaded and in the folder named “wordpress” look for a file named “wp-config-sample.php”. Open it in your favourite text editor (eg. TextEdit for Mac; NotePad for PC), making sure you are editing in plain text, and look for these three lines at the top.

define(’DB_NAME’, ‘wordpress’); // The name of the database
define(’DB_USER’, ‘username’); // Your MySQL username
define(’DB_PASSWORD’, ‘password’); // …and password

Fill in the words you chose for your database name, username and password where it says 'wordpress', 'username' and 'password' in lowercase, keeping the inverted commas. Look back at your MySQL Databases page and make sure you have the database name and username exactly as it is there (there maybe prefixes added). Once you are happy with this Save As… “wp-config.php” back in the WordPress directory on your computer.

Now you have to decide whether you want WordPress to power your entire site or just a blog within the site. If you want your whole site to be a WordPress site then upload the contents of the “wordpress” folder but not the folder on the root directory of your host server. The root directory is sometimes called “public_html” or “html_docs”. If, however, you already have a site but just want to add WordPress as a blog then upload the whole “wordpress” folder to the root directory. You may want to re-name the directory “blog” so that the URL of the blog is forward slash blog after your website address.

Lastly, once the uploading is complete, simply go to http://www.mydomain.com/wp-admin/install.php if your whole website is WordPress, or http://www.mydomain.com/subdirectory/wp-admin/install.php if you put WordPress inside a sub-directory. (Replace “mydomain.com” with your own domain name and “subdirectory” with the name of the sub-directory you created, “blog” in our example).

Once at this page follow the prompts. You will be ask for your email address and website title, you can change these later. You will also be asked if you want to appear in search engines. I would check that option unless you want to view your website in isolation!

You will soon be emailed a password to access administration panels – keep a copy of this safe.

And now the fun really begins!

That was the famous 5 minute installation which took me at least half an hour the first time I did it and even now takes at least 10 minutes! Setting up WordPress on your host server is a task that prepares you for the process of owning and maintaining and constantly updated professional-looking website!

Picture credit: Francis Chouquet WordPress Designer

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This is the second post in my How to market yourself series, a personal account of the best marketing techniques you can employ for yourself or your business. Read my introduction to this self-marketing series here.

There are three things you need to do when setting up your website.

1. Decide on your website address (URL)
2. Register it
3. Find a web host

How to decide on your web address

Many people spend hours thinking up a catchy URL (Uniform Resource Locator) or website address. The most important SEO (Search Engine Optimisation) point is to include some keywords (separated by hyphens). Your URL doesn’t have to be your name or your company name so why not increase your chances of being found in searches before you’ve even written a web page? So, if you are a web designer, why not try web-designer dot com? (OK, it’s already gone, but you know what I mean).

You can test out domain names at any domain name registrar. Which brings me on to the next thing you have to do.

Register your website’s address

Once you have decided on the name of your website it is necessary to register it. I use GoDaddy. There doesn’t seem to be a much cheaper option and GoDaddy are the market leaders. You can also try 123-Reg, particularly if you’re based in the UK and want a .co.uk domain.

One thing I would suggest is not to use your domain name registrar as your host. I like to keep the two operations separate because if you have a problem with one it is easier to move.

Cost: You’re looking at around $10 a year. When you register a domain name, your contact details are included in a publicly available database known as the Whois database which can lead to spamming. You can spend slightly more to hide these details.

An important SEO point: Search engines prefer if the domain is registered for a longer time into the future so that you don’t look like a fly-by-night website. For this reason, it’s better to register for five years rather than the minimum one year.

How to choose a web host?

The web hosting industry is highly competitive with seemingly hundreds of companies offering similar packages. Here are some of the things you need to take into account.

A great way to market yourself and get search engines to include you in their search results is to blog. The blogging software I’ll be recommending in this series of articles is WordPress.

The minimum specifications for the hosting of a WordPress blog are PHP 4.3 or greater, MySQL 4.0 or greater and the mod_rewrite Apache module. PHP is scripting language; MySQL is a database server. These are fairly standard specifications and will be offered by most quality web hosts but make sure you check! WordPress recommends a few hosts here.

Other than that here are some more important points to look out for:

1. Disk space. Once you have a host you will find it useful for a number of things not just your website. It is another bit of computer space to use. You can use it as your own personal FTP site for storing information. If you think you need this facility go for a web host that’s offering tons of disk space.
2. Monthly transfer / Bandwidth. This refers to how much your website is accessed. For example, if your website consists of one page of 1MB (very unlikely) and is visited by ten people a month, you would need more than 10MB of monthly transfer to facilitate this. Of course most website pages are less than 100K so, unless you are expecting huge amounts of visitors, 10GB/month will be enough at first and your web host will be able to offer you more as your website increases in popularity. Keep your eye on it though. How?
3. A control panel. cPanel is the most advanced web hosting control panel in the industry, designed to simplify administration of a website and I would recommend choosing a host that offers it. Through the cPanel you can set up and read email, manage and edit your website’s files, monitor your website’s traffic (making sure you don’t exceed any bandwidth or space restrictions), and loads of other things including backing up a MySQL database which is essential for good WordPress maintenance. cPanel sometimes comes bundled with Fantastico which is a set of scripts which automate the installation of, but not always the update of, CMSs such as SMF, phpBB, Drupal, Joomla!, WordPress and over 50 others, although I would not install WordPress this way.
4. The validity of your web host. I would only choose a web host that had a professional looking website. Also, I would definitely insist on 24/7 email support, personally I wouldn’t mind if it didn’t have phone support.

Cost: You’re looking at around 8$/month for a decent shared hosting package. Shared hosting is fine if you are only going to have one website and you’re just starting out.

An important SEO point: The most important point for search engine marketing is the location of your website. If, for example, you are interested in the UK market you should use a UK based web host. However, if for example, you are a UK company wanting to market your services internationally, then I would choose a US host.

Recommended web hosts for WordPress users

I’ve researched this by asking WordPress professionals in forums and LinkedIn groups about the most reliable shared hosting and the following three companies came up with the most votes:

• Justhost
• Bluehost
• Hostgator

So, I’ve got a web address and a host, now what do I do?

Your new host should give you 4 useful pieces of information so that you can set up a website.

1. IP address. An IP address is a unique number that every computer connected to the internet is assigned. It consists of 4 numbers separated by dots. This is the IP address of your server’s computer, not your personal computer.
2. Your username.
3. A password. These first 3 are necessary for uploading files to the server.
4. Domain Name Servers/System/Service (DNS). A very important link between your domain name and IP address.

If, as I suggest, you register your domain name with a company other than your host you will need to return to your domain name registrar’s website and and fill in the name servers (usually one primary and one secondary) you got from your host.

That done, wait 24 hours (usually much less) and you can create your new website.

Next, use your favourite FTP client (eg. Cyberduck for Mac; Filezilla for PC) and, with the IP address, username and password, you can log on to your host. You may find quite a few directories. Look for one called “public_html” or similar. This is where your website should go.

Use your favourite text editor (eg. TextEdit for Mac; Notepad for PC) and make a new plain text document, write a message in it and save it as “index.html”. Upload the “index.html” file. Now if you type in your domain name in a browser it will display your message.

Congratulations, you have just created a website!

As always, I welcome comments, especially to notify me of anything I’ve missed!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Web 2.0 in design and marketing

This is an image I made to try to explain the digital grapevine: A network of users that interact to answer questions, solve problems and have fun or the trend in the use of the internet and web design that enhances creativity, information sharing and collaboration among users that has been referred to as “Web 2.0″. The best description of this that I have read is from Stephen Fry:

… an idea in people’s heads rather than a reality … an idea that the reciprocity between user and provider is what’s emphasised. In other words, genuine interactivity, if you like, simply because people can upload as well as download.

The internet is now a teenager – it’s been 14 years since Marc Andreessen’s release of the Netscape Navigator browser in 1994. Now the technology has evolved to web-based communities such as social-networking sites, wikis and blogs.

I intend to harness the benefit of this trend both for myself and my clients as I see it as an important approach to both design and marketing at the moment.

How I made the image

I was very suprised I couldn’t find a sample series of binary numbers on the net quickly, so here are mine.


001001010111010101101001010011010100110010001100100001
011010011000010001100100010101001100110000100101011101
101011011001100001100100010110010010011001101101001100
010100100000110110101101101101110111001000110100101001
011011101011101110101000100101100000011000110111011101
110100000100010000011101011011110100101010100101011110
110110101010010001100100011001000110001111011011101001
0001000100000110101101010111010111100

These numbers were put in the OCR-A font. This font is used for a variety of purposes including the ISBN labels on books. After scrolling through Blend Modes in the Layers palette in Photoshop, I hit upon Soft Light and Overlay as ones that seemed to work.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I have just created a phpBB bulletin board or forum for my music website. Click here to visit the mu-sik forum.

I installed it using Fantastico which I have on my host’s cPanel. I chose the prosilver phpBB theme which was close to the look I was trying to achieve. This meant tweaking a few of the HTML template pages and uploading a new header image.

Similar to WordPress, phpBB is an open source CMS written in PHP programming language and backed by a MySQL database. In English, this means that it’s free and it runs websites.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The primary objective of this website is to attract clients to my design business. The two ways I try to achieve this are:

1. Get other good websites to link to me with my desired keywords as the anchor text. For example, freelance graphic designer, designer in London, UK design services, are good phrases to explain what I do and I try to get these words a published as a hyperlink to my site on as many sites as possible.
2. Write regularly updated content with my keywords scattered around the site, particularly within title tags and headline tags. So I try to write an article a week about artworking, designing, Photoshop, Illustrator, InDesign, Quark, logos, packaging, marketing, advertising … the list goes on and on!

This strategy has reaped rewards as I have been employed by some great clients this year (Accenture and MasterCard, for example) who have asked me to help them on a variety of interesting projects. All because they found me on Google, or some similar search engine.

The nature of SEO (Search Engine Optimisation) is unpredictable. It’s not an exact science as it takes a bit of luck to second guess Google’s secret algorithm – the mathematical equation that uses certain information from a website in order to define its rankings – and get on the first page of search results.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

If you don’t know what this is about please look here for the first two HTML emails.

This is for a client that do graduate IT recruitment. They send these HTML emails out to 20,000 addresses with a click-through to their site where visitors can search for job, sign up, apply, etc. Well, the first one was with a mouse, the second was with a cat and a mouse, there was only one way to go, really.

Have a look at one they didn’t go for…

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

It was sent out to 20,000 email addresses and was very successful.

They came back to me and asked me to come up with a follow up html email. I racked my brains. I thought of all the mouse clichés I could. Finally I came up with this one that they quite liked.

The problem is I’ve got to come up with a third!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Firstly, when creating this shiny effect in Illustrator remember to make the document RGB. Go File > Document Color Mode > RGB. It won’t work otherwise. Many thanks to Simon Mcferran who pointed this out in the comments below!

Let’s explain how to make the triangle one. How do you make a triangle in Illustrator? Easy! Click on the Polygon Tool and click once on the artboard and enter 3 in the Sides: field of the resulting dialog box. (Didn’t know a triangle was a polygon? Neither did I until the other day!)

Make another small triangle and place it on top and fill it with a lighter colour. Go Object > Blend > Blend Options and enter 100 in the Specified Steps field. (Half that would probably do). Then, with both large and small triangles selected, go Object > Blend > Make (Cmd/Ctrl-Opt-B) and a beautiful rounded blur will fill your triangle. This method gives you more control that a simple radial gradient fill. See below my tutorial without words; I hope it makes some sense.

To make the shiny highlight at the top of the triangle you have to create a shape by intersecting a circle and a triangle together (see 2nd row above). With both triangle and circle selected option-click on the third Shape Mode icon in the Pathfinder palette where the tool tip says “Intersect shape areas (Option-click to expand)”. You will now be left with just the top of the triangle with a curved base.

Fill this with a linear gradient black-to-white, size and position it inset a bit from the top of the main triangle and set it to Screen in the Transparency palette.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I have just set up a quit smoking blog for my stop smoking website.

The blog is powered by WordPress – who else? – and I chose the ShadedGrey theme which is made by Web Hosting Bluebook.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

An earlier tutorial on how to make a shiny button in Illustrator using the Opacity Mask feature can be improved upon greatly by adding a sexy brushed steel surrounding ring to your amber jelly button!

As previously explained, the shiny “web 2.0″ button look can be made by placing a circle with a linear black-to-white gradient over a circle with a radial gradient and selecting Make Opacity Mask in the Transparency palette with both selected. See the first row in key below.

Other crescent shapes can be added by putting a smaller circle on top of another and Option-clicking on the second icon from the left of the Shape Modes row in the Pathfinder palette, the tool tip says “Subtract from shape area (Option-click to expand)”. This is a one click way to subtract one shape from another and something I use all the time in Illustrator. See rows 2, 3 and 4 below.

In row 5 below, the steel rim. Double-click the Scale Tool (S) enter 125% and hit Copy with the orange button selected (go Release Opacity Mask in the Transparency palette and get rid of the black and white circle. Put a linear gradient going white-to-black-to-white onto this larger circle. Duplicate the orange button again by pasting in front (Cmd/Ctl-F) get rid of the black and white circle and go Object > Compound Paths > Make (Cmd/Ctl-8).

Finally put all the elements on separate layers in Illustrator and go File > Export and choose Photoshop (psd) from the Format drop down menu. Choose RGB, 72 ppi and make sure you have the Write Layer radio button clicked on. Now we move into Photoshop for some final tweaking and blurring. Open the PSD you exported from Illustrator and you will see all your layers from Illustrator on different layers in Photoshop (top tip!).

Play around with it by blurring the crescent shapes a bit and copying and colouring layers a bit.

Most of the work I did was to the steel rim layer. Add a Drop Shadow and an Inner Glow in Layer Styles in Photoshop. Add Grain or Noise and a horizontal Motion Blur for the steel effect.

I put the orange button layer on top of the House layer and set it to Linear Burn Blend Mode.

They look quite nice as navigation icons.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I was recently approached by an IT recruitment company to come up with an idea for an HTML email that could also be used in other forms of online advertising, such as banners, MPUs and skyscrapers.

The result was the above which will be used as an HTML email and to be sent out to 20,000 potential customers.

Here’s how you do an HTML email on a Mac: Compose your email as a separate “index.html” document in a directory on your server. Don’t use much CSS (only for text formatting, don’t use divs) and put the CSS in the body not the head. Contain everything within a table where width="100%". And within that table put other ones with widths no larger than 600 pixels. Make sure all your image sources have full routes. Once you’re happy with the result, view the page in Safari and go File > Mail Contents of This Page (Command-I) and a beautiful HTML email will open up in Mac Mail for you to email the client.

The email should be welcoming and friendly with an eye-catching theme, enticing the recipient to click through to your client’s website.

Have a look at the other ideas I came up with for this HTML email brief.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

You could do this in almost the same way in Photoshop but I have recently been following the mantra “If you can do it in Illustrator, do it in Illustrator” – to save on disc space if for no other reason.

First draw the circle of your button (I’m following the bottom line of blue buttons in the above picture).

Then copy (Cntl/Cmd -C), paste in front (Cntl/Cmd -F), apply a gradient (the default white-to-black gradient is the one you want, with an angel of 90º) and, lastly, squash it vertically upwards to about half the size (you may need the bounding box for this (Cntl/Cmd-Shift -B).

Now the gradient orb needs to fit inside the button so you need to apply a little perspective. To do this in Illustrator, get your Free Transform Tool (E) click on the top left hand corner, once clicked hold down and press Cntl/Cmd-Option-Shift and then drag towards the right.

You can hardly see the difference after doing the next stage but it’s essential- move the gradient orb down a touch.

Here’s the clever bit. With the both the blue button and the gradient orb selected go to your Transparency palette and select Make Opacity Mask (make sure both Clip and Invert Mask and all other options in the palette are unchecked.

Finally, go Effect > Stylize > Inner Glow, leave the default options of Screen Mode, the yellow colour and a 75% opacity, but play with the blur (these are 35 pixels) and click the Center radio button.

The advantage of this method is that you can then change the fill of the button and keep all the effects. Obviously, it works on all other possible shapes.

And then you can have fun experimenting with adding type to your buttons!

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

All comments from this website will have the nofollow command and therefore if you’re after a bit of link juice you best go elsewhere. If you’re a genuine commenter then I’m sorry I can’t reward you with a proper link. I’ve just got tired of deleting all the rubbish comments from people with keywords for names.

From May 1st 2007, if you commented on this site and added your url, search engine spiders would have followed to your site. Google would have counted it as a link to your site from a page with a PageRank from 1 to 4 – an all important “vote” of importance for your website, hopefully resulting in greater appearance and frequency in search engine results.

By default, WordPress, the blogging software which powers this site, adds the rel=nofollow command to all links in comments. And this DoFollow plugin removes rel=nofollow command allowing those search engine robots to follow.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Here are my favourite three blogs of people who, like me, are graphic designers and write about it on the internet. Firstly, from Romania, I really like webee design blog. Webee has really helped me out with his tips and encouragement.

Also a beautiful creative design blog by David Airey who has blogging help as well as design discussion. Lastly there is Creative Guy who has numerous mac and design tricks.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Somebody wrote to me the other day whose website had lovely blue type on a black background. Fine. Unfortunately, the results when changed into CMYK and printed were dull, muddy and terrible.

How can this be prevented? Once converted to CMYK Photoshop will display its interpretation of how it will be printed. Further investigation should be made by using the Info palette and observing the CMYK values whilst hovering the mouse over certain areas of the image. Remember Photoshop can only give you an approximation both on screen and with its conversion values. Printed materials will never look the same as they do on screen.

The other thing you can do is change the CMYK values to make it look good. Look above. Picture number 1: How the website was, a black background with blue type. The blue was R80 G80 B252 (Hex: #5050fc).

Picture number 2: Look at the difference! That RGB colour when converted to CMYK is re-interpreted to a muddy, dull blue, C76 M70 Y0 K0. Almost illegible against the background black.

Picture number 3: The only possible solution. Lighten up the blue to a cyan dominated one, C64 M11 Y0 K0. Maybe not in the style of the website but at least punchy and legible.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Here are some icons I designed for a friend’s website. He asked me to make them at three sizes: 20 pixels wide, 80 pixels wide and 300 pixels wide.

There’s a real skill to designing icons. You have to make them simple enough to be understandable at small sizes but interesting enough to be beautiful when bigger.

I used a well-known aqua or jelly technique for the background. Basically it is a gradient with a series of superimposed arcs to give an impression of translucent 3d shape. The arcs are intersections of two circles, squeeze or stretched slightly where appropriate. I blurred the arcs at the top but at the bottom they remain sharp to give an ultra-modern feel.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I would advise anyone who wants to make money and find more work to get blogging.

I was encouraged to get a WordPress blog by a friend but I didn’t really realise what blogging was at first. I thought, what’s the point of writing “I woke up this morning, had breakfast …”? I really only started taking it seriously in November 2006 about two months before I started to get results.

There are plenty of ways to make money from your blog from advertising but that’s not what I’m discussing here. And, personally, I find blogs that are peppered with adverts really ugly.

Blogs are, for me, a great way to find work and make contacts through searches. But, because of the illogical and secretive way search engines in general and Google in particular work, you will never know how to be top of the list on certain searches. So the trick is go for every conceivable search you can think of.

You should write about what you know. Write about your work, your way of doing things, practices that other people might find useful. What sets you apart from others.

Take me as an example. If you search for “freelance graphic designer” on Google, I’m number 22. That’s the third page. Not so good. Even worse is “London graphic designer”, number 68 on Google. Pretty bad. However, one day someone – now a client of mine – wanted a PDF newsletter designed in InDesign so searched for “freelance InDesign London”. Guess what? I’m number 3!

How did that come about? Because I wrote a blog discussing PDF design, newsletters and InDesign amongst other things.

My point is I never would have guessed that someone would search specifically for that. It was only by writing about the nature of my work that I got work! And it is the blog that makes that process so easy.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The ad states as a matter of fact that giving up cigarettes is easier and more successful using a nicotine injection technique (such as their patches) rather than the “cold turkey” approach (adopted by “Paul” in the picture). This is, in my opinion, a lie and the opposite is more correct according to many professionals who work in this field.

I know they can get away with conning the public because they can afford to spend millions on “research” that “proves” their point. It shows that nicotine replacement therapy works better in their tests than a placebo. It doesn’t show that worldwide more people give up with these products than with will power alone. Trust me, will power and cold turkey do work. They’ve been working for years before NRTs even existed.

So the result is people are lied to and assume that they have to spend money on nicotine replacement techniques, fail and continue smoking. This belief and this ad – no exaggeration – are killing people! For a free and easy way to stop smoking, visit my website www.quitcigs4free.com

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Creatives are paid fortunes to think laterally, to come up with a word or an image that no one else has thought of. But now we have the most amazing lateral thinking resource at our fingertips – the internet.

You have dictionaries and thesauruses to help you with words. There are directories of English idioms and expressions which are particularly helpful with advertising copy. But, my personal favourite internet aid to lateral thinking is image searching.

Illustrating abstract notions is one of the most creative and fun things. Try putting an abstract term that complies with your brief (like, empty; separation; togetherness; contrast; love; big; help) into a stock photography site’s search engine and see if it gives you any ideas. Don’t forget normal search engine’s images searches like Google or Yahoo! They are getting better and better and give you a different option to the staid stock image.

Computers don’t have the associations with words that we do. They just dispassionately match the word we type in. Think of all the times you’ve had a search fail. It’s these “failures” that can spark an un-thought-of angle that could really make a campaign.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I started smoking when I was 18 and very quickly developed a 20 a day habit. I immediately noticed a dip in my health – not to mention an increase in my asthma. But still I soldiered on. I tried to give up numerous times, sometimes using gum or patches, but it never worked. Every minute of the day I thought about smoking, or felt awkward, or both.

Over three years ago I developed a passing interest in Neuro-linguistic programming (NLP) and from that became interested in self-hypnosis and meditation. For other reasons I started practising self-hypnosis and meditation for a few weeks and then one day stopped smoking! I was 35. I have been free from cigarettes and the desire to smoke for over 3 years.

The problem now is how to communicate this to fellow human beings.

I’m facing an uphill struggle with the … deep breath … smoking cessation community. I don’t want to sound cynical but they seem to be as honest as the tobacco industry. “Our practise is to only endorse or link to official quit sites or methods approved by independent research published in reputable journals.” Yeah, research no doubt sponsored by drug companies. Its funny how research suggests that success with giving up smoking is more likely with pharmacological aids and yet heresay and those who work in the field say the cold turkey approach is best.

We have been here before. It was clearly spelled out in the 1964 US Surgeon General’s Report that cigarette smoking was not an addiction and he only came round to the idea in 1988. Nowadays the Surgeon General is advocating the use of pharmalogical aids in quitting smoking. Plus ça change, plus c’est la même chose.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The problem is not everyone has the Flash Player installed in their browser – not everyone can see it! And it is bad for SEO – the search engines’ bots can’t read everything in them. Also it is proprietary software – you can’t edit a SWF you need to find the FLA and edit it in Flash, which is expensive.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

If you now type “freelance graphic designer and artworker in London” into Yahoo! I’m number one. In Google I’m hundred and fifty something!

I’m trying to do reciprocal links to get my PageRank up. I’m a massive 1 out of 10 at the moment. If anybody is interested in trading reciprocal links with me then get in touch. Have a look at the links.

This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.