I’ve posted a few articles recently about making a child theme in Genesis for WordPress as I “filmed” almost the entire process of a client website creation. Here I’m going to put all the videos together and run through the process from beginning to end.

I start off with a mock-up of the home page (and sometimes one other page) of how the client and I want the site to look.

Here, above right is the mock up of the home page for a client site Family Twist – Bespoke luxury family holidays. On the left is how Genesis looks “out-of-the-box”.

Using WordPress locally

I start off locally using MAMP, being a Mac boy, if you are of a Windows persuasion you should use WAMP, and Linux LAMP. The upshot of all these funny words is that you can run Apache, MySQL and PHP on you computer like you do on your host, for free, and within seconds. If you are creating WordPress themes you must do it locally – it saves so much time.

Creating a child theme for Genesis

You have to start by creating a child theme for Genesis which is a very straightforward process.

The above video shows you how to create a child theme for Genesis. Also in this video I make a start styling the child theme by changing the background of the website to a creamy color.

Creating background and logo

The background of the website is further changed in this video where I run a gradient down from the top.

I get rid of the secondary navigation as well as the breadcrumbs through the Genesis Theme Settings area. I also put the logo in.

The above video shows you how to change the background and put the logo in the header in Genesis for WordPress.

Creating header widget and styling navigation bar

Here I create Facebook and Twitter buttons in the header widget and style the top nav bar.

Creating pages, the navigation menu, a home page and a blog page

Staying with the menu I then create the pages in WordPress (pretty easy, just go Pages > Add Pages!), create a primary navigation menu and drag the pages to where I want them to go in the menu. I also create a static home page and a separate blog page by changing the settings in Settings > Reading in WordPress.

The above video shows how to create pages and how to arrange them in the navigation menu and assign the home and blog pages in WordPress.

Creating sidebar widgets and styling the sidebar

Moving onto the sidebar, in this video I explain how to create and style widgets on your WordPress sidebar.

In the above video I show how I use Chrome’s Developer Tools, Photoshop and Dreamweaver to style up widgets to look exactly how you want them.

Editing the footer with Genesis

And now the footer! (As you see, I tend to work from the top to the bottom.)

In Genesis you can modify the content of the footer with the Genesis Simple Edits plugin. In the video I show how you can create the footer with WordPress and Genesis.

Creating custom pages

The home page had a completely different template from all the other pages so I had to create a custom page template in Genesis.

You can see here how I get the template from the web and edit the custom page to create a different template for the home page.

I also show how you can choose standard page templates without sidebars, etc., through the Genesis Theme Settings.

Uploading the local site to a host

I’ve been doing everything locally so far and I have the site more-or-less how I want it so it’s time to put it on the client’s host.

Here I export the WordPress and Genesis settings, copy all the files to the host’s server, set up WordPress there and finally import the WordPress and Genesis settings.

There are other ways of doing this – by exporting and importing the MySQL database, for example – but this method works for me.

Creating child and grandchild pages and a drop-down flyout menu

I perhaps should have done this stage locally but here I explain how you can build a drop-down flyout menu in WordPress and Genesis by creating pages as child pages of a parent page to show the relationship between the pages.

So the child pages will drop-down from their parent page and the grandchild pages will flyout from their parent (child) page.

Adding text and images to the pages

The website is online – although, it may not be live yet, I use a plugin like UnderConstruction to create a holding page – now we can add text and images to the pages. Or, even better, get the client to add text and images to the pages.

I always like to explain to my clients that websites are living and breathing entities and should be constantly updated instead of being left to gather dust. So it is important to get the client engaged with the website at an early stage so that they are more likely to continue adding to it and so the website will be more of a success.

So, I usually make a video like the one above explaining how to import images and format text within a WordPress page or post.

Creating WordPress sites for clients

The above 10 videos show how you can build a high quality premium business website. Clients will be prepared to pay a premium rate for this service as you are giving them exactly what they ask for plus the ability to easily change and add to the site in the future.

I’d be interested to hear what you think about this process. Are there any other stages you include when you build a website for a client?

Should I be offering any other service or functionality for the client?

If you like any of the videos, please give them a thumbs up in YouTube!

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’m often asked how to create an interactive PDF with InDesign with internal links so that you can, for example, click on a chapter title in the contents page and immediately get the PDF to jump to that page.

How to create an interactive PDF with internal links video

So I’ve made a video to show how to create hyperlink destinations within the InDesign document and then create buttons to go to them when clicked.

Interactive PDF example

To see an example of an interactive PDF then you can download my free e-book How to Market Yourself Online or, if you’re feeling rich, you can download the premium version How To Get Clients which is featured in the video.

Usual characteristics of interactive PDFs

PDFs that are normally exported from Word documents are usually linear, ugly and hard to read. They are usually upright pages of black Times New Roman text with a few hyperlinks.

In my opinion you can do so much more with PDFs. For starters you have the pages landscape so that they fill the screen. And you should use vector graphics, images, internal links, etc. You can also have forms, movies, layers, rollovers – just about any interactivity that we are used to on the web.

This makes the e-book fun, interactive, non-linear and the sort of publication that you can dip in and navigate around quickly so as to aid the reading and learning experience.

Creating internal links in the interactive PDF

In order to create an internal link within a PDF, you first have to create a Text Anchor in InDesign. With the Text Tool cursor either blinking or having highlighted some text you can create a Text Anchor by either right-clicking and selecting Interactive > New Hyperlink Destination… or by selecting New Hyperlink Destination in the Hyperlinks palette.

The page with this hyperlink destination on it can now be linked to from some text or a button on another page.

If you want to link to the Hyperlink Destination (page) by clicking a button: convert an object to a button by right-clicking and choosing Interactive > Convert to Button.

And then when you have created a button select Go To Desination as the Action of that button in the Buttons palette.

And then you can set the destination of that button as the Text Anchor or Hyperlink Destination you set earlier so that when that button is clicked the PDF will go to the relevant page.

If you want to link to the Hyperlink Destination (page) by clicking a text link: simply highlight the text that you want to be the internal link, and either click the Create new hyperlink button on the Hyperlink palette or, with the text highlighted, right-click and choose Interactive > New Hyperlink… and then in the resulting New Hyperlink dialogue box you can choose the Hyperlink Destination, a Character Style (something colorful and underlined like a link), the Appearance Type (choose Invisible Rectangle) and a Highlight (I usually don’t have one).

And now in the resulting PDF the word, when clicked, will take you to the relevant page of the Hyperlink Destination.

Creating external links in the interactive PDF

Creating hyperlinks in the InDesign document to go to web addresses when clicked is altogether more simple. All you do is select the word which is going to be the hyperlink and click the Create new hyperlink button in the Hyperlinks palette and choose URL in the New Hyperlink dialogue box and type the web address you want to link to.

I usually create a different colored but underlined Character Style for both the internal link text and the hyperlink text to aid the users’ navigation around the document.

Exporting the interactive PDF from InDesign

Remember to choose Adobe PDF (Interactive) when you’ve got the Export dialogue box up by going Cmd/Ctrl-E.

As I say in the video I like to set the Security to have None Changes Allowed in order to get rid of a very annoying pink bar along the top in Acrobat Reader when viewing the PDF. (Note to Adobe: fix this bug please!)

Creating e-books?

So, if you want to create an intuitive, beautiful and interactive PDF e-book to be sold online, I would very much recommend you do it in InDesign. Try to incorporate internal links, external links, video, etc., and as many exciting interactive elements as you can.

What other devices and interactivity can you think of to improve the humble PDF?

I would love to know your opinion in the comments below. And, if you found this post useful, please do me a favor and Tweet, Like or +1 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.

Asian economies comprise more than 4 billion people (60% of the world population) and you would have to have been living under a stone for the last 15 years not to have noticed the growing economic weight of the region.

I’m glad to see the rise of emerging markets and hope it restores some much needed balance to the world.

I’ve enjoyed the time I’ve spent in Asia. I’ve warmed to Asian philosophies, attitudes, diets, religions and medicines more than I have to those from the West. And, despite this being an English language blog, nearly a third of the readers here are Asian!

Don’t take the title of this article to mean that I see Asia as a “threat” or an “enemy” to my business or that Asian outsourcing is somehow a bad thing. It’s completely the opposite.

Interesting times

We’re living in an interesting time of commerce. The rise of internet technology has meant that Asian firms and individuals can compete much more freely with their European and North American counterparts. There has never before been a time when two people of equal abilities at opposite ends of the world – one who may need to charge $50/hour; the other $5/hour – are competing on an almost level playing field.

Not only are factory jobs being moved from the West to the East, but also middle class engineering jobs are going to Asia. Apple makes iPhones in China, for example, and we are only just beginning to see how these changes will affect all our lives.

A western design consultancy could charge $500+ for a logo to go on a website which can be bought from a designer in Malaysia for $5. Some sales copy could be charged at $500+ for 500 words in the US could also be written in the Philippines for $5. There will always be an argument about quality, of course, I’ll come back to that later.

While those of us in the West need to know how to compete against these prices, my readers from the East need to know how to get good Western clients.

Play to your strengths

At the moment work that’s outsourced most successfully to Asia is call center work, help desk/IT support, etc. However the quality of this work will continue to rise in the future.

Many people consider back-end developers from the Indian subcontinent to be of a very high standard but consider their front-end ability lacking. So, while Asian companies improve this side (and that won’t take them long!), you can point out to potential clients your front-end expertise.

The peculiarities and idiosyncrasies of the English language can work in favor of a native speaker. Sometimes only someone with total command of English can construct an English interface properly.

Whether your strengths include language, design or user experience, put these qualities at the forefront of your unique selling point.

Communicate to your clients that you understand the “why” of the job. This will increase the confidence the client has in you.

“Own” the whole job

Whatever your business does, it operates as a small part of a larger picture.

You may only be building web pages but, ultimately, these web pages are going to need SEO, social interactivity and all sorts of marketing if they’re going to be successful. Try to explain to your client that the best person to market a website is the person that built it. You may be designing some business cards. So, offer the client printing and delivery.

Try to branch out from your core business to the neighboring offshoots of the ecosystem so that you can “own” bigger processes and contracts.

Diversify your business so that you can offer your clients the whole package instead of
small bits of a larger job.

Always use clear and precise language when dealing with a client, as this shows you can be trusted with larger and larger processes.

Specialize

This may sound like a contradiction, advising you to specialize right after advising you to diversify. But I think you can do both.

It’s great for your clients to hear that you specialize in something that they want. Specialize in what you enjoy doing and provide these services to clients. Also, make sure you compete in terms of quality and not price.

Compete

You will never win when competing with price. Never put your prices as low as possible. You are much more likely to score big when competing on quality.

Think how your product is better than the next one. How there is a greater attention to detail with your work, how your years of experience produces better outcomes, how your client communication provides a better solution everytime.

This is how you can compete.

What to do now

Think of all the effects of outsourcing on your business now and double them. That’ll be reality very soon. Think of ways to embrace this new reality and how you can use it to your advantage to provide better products and services for your clients.

Think of what other companies are doing in the East and West in your sector now. What are they doing right, and what are they doing wrong? Sometimes you can stand out from the crowd by providing just a little extra service.

I would love to hear what you think about this interesting subject.

And, if you enjoyed this article, please vote for it by way of a Tweet, a Like or a +1! Cheers!

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.

One of the ways WordPress can be made to act like an all-singing, all-dancing CMS is with custom page templates. These give you the ability to make any page on your website look and/or function differently to all the others. Here I’d like to explain how you make a custom page template for Genesis.

Genesis is a premium theme framework for WordPress which I now use to build all my websites on. I do this because it has many cool functions and effects coded already that I can just pick and tack on to whatever kind of website I’m building.

Custom pages in WordPress

Creating a custom page template is super easy in WordPress. You simply copy your theme’s single.php file, call it something different like, ft-home.php, add the template name at the beginning of the file – using a text editor such as Notepad (Windows) or TextEdit (Mac) like so:

<?php /* Template Name: FT Home
*/ ?>

… and you can add or take away anything you want so that when you create a new page and choose the template you’ve created in Page Attributes (see below), it’ll appear differently to all the other pages.

But with Genesis you make child themes, so it’s slightly more complicated as we don’t have a single.php to copy. So I’ll go into it in a bit more detail.

Custom pages in Genesis

Below you can see two page layouts. On the left you have a standard blog template with a sidebar and on the right you can see a custom home page with no sidebar, a strip of images across the top and a jQuery slider next to the content.

Here is a video of me (stumbling and stuttering through) making a custom page template in Genesis.

An added benefit of creating a custom page for this page is that the tricky code to create the strip of images and the jQuery slider can be hidden away from the client in the custom page template, while the main text could be edited within the WordPress page editor as normal.

To create your custom page template in Genesis, open a new text document in Notepad (Windows) or TextEdit (Mac) and copy this code:

<?php /*
Template Name: FT Home (change name as you see fit)
*/ ?>

<?php get_header(); ?>

<?php genesis_before_content_sidebar_wrap(); ?>
<div id="content-sidebar-wrap">

<?php genesis_before_content(); ?>
<div id="content" class="hfeed">

<?php genesis_before_loop(); ?>
<?php genesis_loop(); ?>
<?php genesis_after_loop(); ?>

</div><!-- end #content -->
<?php genesis_after_content(); ?>

</div><!-- end #content-sidebar-wrap -->
<?php genesis_after_content_sidebar_wrap(); ?>

<?php get_footer(); ?>

… and save the text file as your template’s name with .php on the end.

(I totally stole the above code from How to create a Custom Template In Genesis by Christopher Cochran.)

This file should then sit in your child theme’s directory next to the functions.php and style.css. Then, same as with any other WordPress page template, you can choose the template on a page-by-page basis within the Page Attributes section when editing a page in WordPress.

I added all the extra code in before the <?php genesis_before_content(); ?> line. But, as you can see, you can add content before or after the header, before of after the loop, before or after the sidebar or before or after the footer.

With Genesis you also have the added benefit of being able to choose a basic layout on a page-by-page basis, in this case I choose a layout with no sidebar:

But what if I want more differences in the custom page template?

OK, maybe you’re thinking this isn’t quite as flexible as all that. What if you want to change something within the header, put something else in the footer or mess around with the heading in some way. Well, don’t worry! You can do anything you what with Genesis child themes by way of the functions.php.

So, for the example above, I needed to put something in between the heading and the content on the page, I actually entered the HTML of the heading in the custom page template so it would appear in the correct place. That done I needed to get rid of the page’s heading that would have been spat out by the template as it stands.

To get rid of the heading from this particular custom page, I put this in the functions.php:

add_action( 'template_redirect', 'child_remove_my_template_page_title' );
function child_remove_my_template_page_title() {
if ( is_page_template('ft-home.php') )
remove_action( 'genesis_post_title', 'genesis_do_post_title' );
}

And even I with my appallingly bad knowledge of PHP can tell that the above code removes the page title from the custom page template with the file name ft-home.php.

Genesis comes with umpteen different “hooks” such as genesis_post_title which enables you to add, subtract or edit any page element on any page or pages you want. And the glory of this system is that it just lies on top off the powerful theme framework which remains untouched so it can be updated and improved – alongside WordPress – while your website will look and function the same as alway.

What do you think?

As you can see, I think the Genesis theme framework is a pretty rock solid way to approach WordPress. But what do you think? Do you prefer creating your own themes? Do you use another framework?

How do you create custom pages in WordPress?

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’ve been reading my post from year ago on my business plan for 2011 and it was very interesting although a bit general. However, in my business plan for 2012, I’m going to be much more specific about my objectives.

My business in 2011 – what did I achieve?

In all, 2011 was a good year. My client work carried on as usual although I was hoping to increase my passive income by more than I actually did. Earning money by providing design and marketing services to clients remains 95-98% of my business’s annual income.

Anyway, I’d like to go through my very general objectives of last year and see where I was successful and where I wasn’t.

1. Describing what I’m doing as a process – and outsourcing

As anyone who reads this blog regularly will know, I’m a big fan of The 4-Hour Workweek by Tim Ferriss and The E-Myth: Why Most Small Businesses Don’t Work and What to Do About It by Michael Gerber (affiliate links).

These books really impressed upon me the need to see my business as a collection of processes that can be improved, documented and ultimately outsourced. Through excluding yourself from some of these processes you can free yourself to do other tasks to improve your business rather than getting bogged down in the minutiae of client-based work.

While this is a beautiful theory, I’ve found putting it into practice in a design business like mine a challenge. Some of the design tasks I do for my clients are one-offs and are simply impractical to outsource. However, once you get your outsourcing hat on the opportunities to use oDesk and Elance present themselves more often (affiliate links). A tracing in Illustrator here; a bit of PHP code there; a bit of typing here; some PSD to HTML there – it all adds up. It can save you money, and more importantly, time.

I have found video an incredibly important tool to help me describe the processes behind my businesses. I have recently recorded a series of videos describing exactly how I create a WordPress website from scratch by using Genesis. You can view these videos at my YouTube channel and I have also written several blog posts about how to create your own WordPress theme.

Nowadays, whenever I perform any task that I know can be repeated by someone else, I make a video of it and put it on my YouTube channel. This way I’ve got documentation that will help me to outsource the task in the future as well as a video that can help other people.

2. Building relationships with other graphic design business owners

An extremely important part of business is forming mutually beneficial relationships and I have been fairly successful at this. One of the best things I did on the blog last year was a survey of other independent graphic designers who ran their own businesses like me. The results of this survey are here:

• What Designers Do, How They Make Money and Where They Find Clients
• How Graphic Designers Get Paid
• Graphic Designers’ Hardware, Software and Back-up

I contacted over 30 designers to do this and many of them were kind enough to tweet out and share the findings of the survey. Communicating with this group of business people has been hugely educational and if I have a question about any aspect of the business I can call on the shared expertise of these fellow professionals.

Also, this year I resolved to meet with more business-people face-to-face. This has been a very successful tactic. It’s always good to get out from behind your iMac and go and talk to people about your business in person. I have found several groups online that meet in London and I have secured some good clients this way as well!

3. Increase my passive income

This is the part of the business plan for which I had the highest hopes although, if I’m honest, had the most disappointing results. Having said that I’m certainly not downhearted and I will continue with this aim for many years to come.

My attempts at securing passive income from sales of my products as well as from affiliate commissions have been many and various. But the most successful have been sales of my own e-book How To Get Clients, and my affiliate promotions of my host Dreamhost and the WordPress theme I use Genesis.

Even so, I estimate my passive earnings for the year have been less than $1000.

However, this year I’m going to be much more specific with my objectives and more systematic with my approach to this side of the business.

4. Continuing to do what I’m doing at the moment – just better

It was very important that I didn’t let my eye off the ball and disregard my core business. I have continued to provide an excellent design and marketing service to my existing clients and gained some very good new ones. Not only have I increased my portfolio of clients I have also taken on bigger projects thanks to increased outsourcing.

My objectives for 2012

As promised my objectives for 2012 are going to be much more SMART, that is Specific, Measurable, Attainable, Realistic, and Timely. And, instead of only setting annual goals, I’m going to review these goals half way through the year with a view to eventually making this a quarterly process.

SMART goals for 2012

So here are my specific, measurable, attainable, realistic objectives to be achieved by July 1st 2012:

• Passive income in the 6 months to July 1st 2012: $2000
• Monthly site visitors by July 1st 2012: 35,000 unique visitors per month
• Number of meetings attended with groups of business-people or “mastermind” groups by July 1st 2012: 5
• Number of new clients securing revenue of over $1000 by July 1st 2012: 4

I’ve set these goals deliberately very high. The passive income will basically need to quadruple. Monthly unique visitors to this site needs to increase from 27,500 to 35,000 – quite a leap. I need to get myself out to 5 group meetings with business people – that’s nearly one a month (certainly achievable). And 4 new clients securing revenue of over $1000 by July 1st 2012 is a tough one – I had 6 such new clients in the whole of 2011!

More goals for 2012

And there are a number of specific actions that I hope will benefit my business and I want to achieve these very soon.

• Create another free e-book similar in size to How to Market Yourself Online about running a design business
• Release another premium e-book similar in size to How To Get Clients about running a design business
• Create one, possibly two, membership sites
• Create 10-15 new websites
• Start Skype-based interviews and podcasting

Creating free and premium e-books won’t be too difficult as I’ve nearly finished writing the text and creating an interactive PDF e-books and selling digital products is something I’ve done before. I have also made a membership site before, however creating the content will be time consuming. I will need to employ all my outsourcing skills to create 10-15 new websites! Plus, I’ve enjoyed and learned a lot from other people’s interviews and podcasts so it’s time for me to do this – I already have some great people lined up.

Further metrics for 2012

So, now that I’ve got the important goals and objectives assigned, I thought it might be a bit of fun to see how some other metrics will be on July 1st 2012:

• My Twitter followers: 950. Although I have undeniably learned loads and been introduced to amazing people at Twitter I have taken a step back from daily engagement with it as it was becoming a severe time-killer. Having said that, I’m still getting traffic from Tweets and my followers are increasing slowly but steadily although I’ve never tried to attract followers by following loads of people and hoping that they follow back. So, it’ll be interesting to see how this develops.
• My YouTube Channel, subscribers: 50; video views: 33,000. As I’ve already said above, I’m finding video an increasingly useful medium for explaining the processes behind our business. The YouTube Channel has really taken off in the last few weeks so this is something I’ll be putting more time and effort in to.
• LinkedIn connections: 350. LinkedIn is a social network that I have found incredibly useful for getting pertinent advice – I have also started a group there called Niche Site Marketing. I’m not sure if the number of connections you have there matters a great deal but I thought I’d include it here anyway.
• Facebook page Likes/Fans: 138. Facebook has been the social network I’ve struggled with the most but I do seem to be getting a bit more traction and traffic from my Facebook page now.
• Subscribers to RobCubbon.com: 3,016. One of the most satisfying things I have been doing this last year is communicating with the readers here via the emails I send out. I find I’m getting some great and encouraging feedback from people and it’s a great privilege that so many people have signed up to receive these emails.
• My Google+ Profile: 744. And lastly, this may be the most important metric of all. If Google is going to be using the Google+ data in SEO the number of people that have you in circles in Google+ will be extremely important!

Feel free to join me in any of the above places! I’m not going to set any goals for these particular metrics but if would be great if I could get 5,000 subscribers by July 1st, 2012!

Thank you!

Most importantly, I have to thank you for everything. Because, this site or any of my other sites are nothing without the visitors. So I would like to thank you all for reading, commenting, subscribing to the newsletter and writing me emails – as I have received some lovely, encouraging messages this year and I really appreciate them.

What you can do

Get a pen and paper and write down specific, measurable and realistic goals you would like to achieve this year and put it somewhere special that you won’t forget. I promise you that doing this will help you achieve your dreams this year!

I wish you a happy and successful 2012!

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 first time I saw WordPress widgets I thought “what on earth are these useless pieces of dog’s do?” Now I think that widgets are awesome website building devices that should have pride of place in any website designer’s toolbox.

What are WordPress widgets?

WordPress widgets are self contained bits of website code that can be applied to a widgetized area via an easy-to-use intuitive interface.

A fresh install of WordPress will give you some bog-standard widgets that you can drag-and-drop into your sidebar. For example:

• Search widget adds a search box
• Categories widget lists your blog categories
• Recent Posts widget lists the x most recent blog posts you’ve written (you decide how many)

… and many more. As you are no doubt aware, the Recent Posts widget is one of the most widely used WordPress widgets!

But you can also add other amazing widgets in your sidebar by way of certain plugins. For example:

• Latest Tweets lists your last x tweets (you decide how many)
• Facebook Like Box shows how many people like a certain Facebook page (the fan page for the site) and which of your friends like it
• Newsletter Signup Box enables visitors to join a mailing list

The list is endless. I use Genesis theme framework (affiliate link) which adds a lot of useful widgets. One widget can, for example, show featured or recent posts with thumbnail images.

Why should you use WordPress widgets?

Ease of use is the reason you should be using widgets. Not because it’s easy for you to use; but because it’s easy for your clients to use.

I always try to design websites that the client can edit because constantly updated quality content is the key to a successful website.

Of course, using WordPress as a CMS (Content Management System) is a great way to enable a client to create, edit and delete pages easily. But widgets allow another level of client interaction where they can control other, traditionally static, areas of the website such as the header, sidebar and footer. Here is an article I wrote about adding to a header widget in WordPress.

With widgets, clients can determine how many posts in which category get listed, decide on an article to be featured with thumbnail image and choose the running order in which all these elements appear. And all this is controlled within an intuitive back-end – let’s face it, it doesn’t get much more easy that the widget area!

How do you use WordPress widgets?

Well, as I’ve said, WordPress widgets are almost too easy to use that they don’t bear explaining!

If you go into Appearance > Widgets on the left-hand side of the back-end you will see a large list of Available Widgets in the central area and a selection of widgetized areas on the right (for example Primary Sidebar or Header Right).

And to place a widget in a particular area – you’ve guessed it! – simply drag the widget from the Available Widgets area to the Primary Sidebar (or the desired area). Then you can choose the title of the widget (for example, you may like to title the Latest Posts widget “My recent articles”) and choose the various settings of the widget (for example, you can choose the number of posts or category in the Latest Posts widget).

Note: if you leave the title area in the widget blank; the element appears on the page without a heading.

So, for example, here is a screen shot of me moving a Genesis Featured Posts widget in the first of my three footer widget areas:

And here are the easy to use settings. As you can see, I set the heading to be “Latest Articles” and get it to display the 5 most recent posts with a 40 pixel square thumbnail image:

If you want to get rid of a widget, simply drag it from the widgetized area back to the Available Widgets area. If you want to take it away from the widgetized area but would like to save the settings as you may want to use it again, drag it to the Inactive Widgets area underneath and it’ll sit there until you want to use them again.

In the video above I explain how to add text and Recent Posts widgets and style them with CSS.

If you’re thinking this is all a bit “off the peg” – think again! You have complete control over how widgets look both generally and individually.

How do you style WordPress widgets globally?

I use – my eternal favorites – Chrome Developer Tools and Firebug add-on for Firefox to find out what selector is used for the widgets. For example here are some styles for all the widgets on my site:

#sidebar .widget {
background-color: white;
border: 1px solid #E6E6E6;
margin: 0 0 15px; }

And here is the style for the widget headings:

.widget-area h4 {
background-color: #F8F5EE;
border-bottom: 1px solid #E6E6E6;
font-size: 16px;
padding: 5px 5px 5px 10px;
margin: 0 0 10px;
color: #783D00;}

Obviously the font-family of the h4 is determined elsewhere in the stylesheet.

How do you style individual WordPress widgets?

But, what if you want the heading or background of one of the widgets to be different to the others? No problem! By using the Chrome Developer Tools (View > Developer > Developer Tools) or the Firebug add-on for Firefox, you can identify the div id that the widget is wrapped in.

So, for example, the Recent Posts widget on this blog is wrapped in div id="recent-posts-3". This is a completely unique identifier for this particular website element. (So if, for the sake of argument, you wanted to have a second Recent Posts widget on the same site, WordPress would give that a different id – “recent-posts-4″, for example).

So if you wanted to change the color of the heading (in this case the h4) of this particular widget you would add this to the CSS.

.widget-area #recent-posts-3 h4 {color: red;}

In the CSS code the dot represents a div class (in this case “widget-area”) and the hash represents a div id (in this case “recent-posts-3″). In this case the div class called “widget-area” comes before the div id “recent-posts-3″ because that’s the order they appear in the HTML.

What’s the difference between “class” and “id” in CSS? The id should be applied to an element that is unique whereas class can be applied to multiple elements on the same web page.

So how do you put something else in the sidebar that’s not a widget?

Simple, use Text Widgets! Maybe you want to add a message in the sidebar to alert potential clients that you are taking new projects? Simply drag a text widget over to the Sidebar and type!

Text Widgets can take HTML so you can add images, forms, JavaScript, whatever! I’ve used Text Widgets for my “Connect with me” links box (Twitter, Facebook, YouTube, etc.), sign-up form box, Adsense code, and all sorts of sidebar goodness!

What if you want different widgets appearing on certain pages?

You may think that this system of widgets is inflexible. I would say that the opposite is true – it actually adds flexibility.

You can use the Widget Logic plugin which uses WordPress conditional tags to specify which widgets go where. So you can can control the appearance (or not) of a certain widget on the home page, a single blog post, a blog post from a particular category, a particular page, etc.

Also, you can put a specific message on each page’s sidebar by using the PHP Code Widget plugin.

And, with the Genesis theme framework, you can use Simple Sidebars plugin to create multiple, dynamic widget areas, and assign those widget areas to the sidebar on a per post, per page, or per category basis.

What do you think?

Do you find widgets difficult or easy to use? Is there anything you want to be able to do with widgets that you haven’t found out how to do yet? If so, I want to know.

I think widgets are a great way to add client control over website areas that have traditionally been “no go”!

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.

February 7th, 2012 will be the 200th anniversary of the birth of Charles Dickens and this comes at a time when the famous nineteenth century novelist seems more and more contemporary.

Why am I writing about him when I’m in no way a Dickens expert? Well, like me, he spent most of his life in London and the English county of Kent and, having found out about his charitable nature, he’s turning into a major hero of mine.

Background

Charles Dickens, the son of a Navy pay-office clerk who was to spend time in prison for insolvency, is considered one of the best writers of the 19th century. Whilst his father was in jail, Dickens was forced to leave school and work ten-hour days pasting labels on bottles.

The experience at an early age, both of his father’s incarceration and the necessity to leave education for menial work, shaped his later life and work.

Dicken’s was entertaining, generous, and liked a drink. His life and work concerned the affairs of the impoverished and disadvantaged. He supported and educated the orphaned children of acquaintances and was involved in a number of philanthropic works.

Generosity

The mid-eighteen hundreds was a period of great turmoil in Europe, characterized by huge technological advances but by an ever increasing gap between rich and poor. In Britain, the people were cold and hungry whilst the country was at the peak of its political and technological power.

Whilst money must have been of primary importance to the young Charles Dickens, he certainly didn’t hoard it once he’d started earning.

In one of his most famous and cinematized works, A Christmas Carol, Dickens warns us against penny pinching and meanness.

Early on in the novel a couple of gentlemen visit Scrooge in his shop asking for “some slight provision for the poor and destitute, who suffer greatly at the present time”. Scrooge declines:

“Are there no prisons?” asked Scrooge.
“Plenty of prisons,” said the gentleman.
“And the Union workhouses?” demanded Scrooge. “Are they still in operation?”
“They are. Still,” returned the gentleman, “I wish I could say they were not.”

Scrooge dismisses the gentlemen by saying: “I don’t make merry myself at Christmas and I can’t afford to make idle people merry.”

Later that night, as we all know, Scrooge is visited by three ghosts. One of them reveals to Scrooge two shockingly emaciated children by the names of Ignorance and Want. Scrooge asks if the grotesque children have “no refuge, no resource,” and the spirit repeats Scrooge’s unkind words from earlier that day, “Are there no prisons, are there no workhouses?”

Scrooge is a lesson to us all. Although he is a good businessman, he is a poor man in terms of spirit, appreciation and kindliness.

People are more important than money.

Perseverance

Writing did not come naturally to Dickens. Unlike other writers, Trollope for instance, he couldn’t rattle off 6,000 words before breakfast. He had to exert himself to master his craft. After a long day’s writing, he would fetch a bucket of cold water, emerse his head in it, dry himself off and start working again.

Successful people work hard.

Changing and adapting

Dickens was eager to give the readers what they wanted. The episodic publication of his books meant that his plots could change in response to lower than normal sales of earlier chapters.

Test your products and tweak them according to what your customers want.

Travelling

As a journalist, Dickens travelled the entire country, which would have been rare at his time. And, as soon as his income from book sales allowed, he travelled to America twice and extensively throughout Europe.

His experiences of different parts of his country and of different cultures in the world broadened his mind and improved his writing.

Travel broadens the mind.

Taking exercise/walking

Scarcely a day would pass without Dickens leaving his desk and walking the streets of London. He could routinely walk 20 miles a day, and once left at 2am to walk from his house in London to his country residence in Kent, 30 miles away.

Walking not only served to inspire Dickens’s great descriptions of nineteenth century London but, more importantly, it gave him respite from his desk and helped to clear his mind so that he could return to his work refreshed. Whilst out and about, he could often be heard muttering or shouting to himself as he grappled with his characters’ dialogues.

Exercise increases productivity.

Modern Technology

To Dickens, the electric telegraph – the world’s first instantaneous means of long-distance communication – was ‘the most wonderful’ of ‘all our modern wonders’. There was obviously something about instantaneous mass communication that interested Dickens and interests us all greatly now.

What would Dickens be doing if he were alive today? He would, of course, have a blog.

Always keep your eyes open to the next advancement in communication technology.

Making money from small purchases

Dickens’s wealth didn’t come from the sale of expensive items; it was instead, as a contemporary put it, the result of “thousands and thousands of individuals, putting down their shillings month after month in exchange for another 32 pages of tightly packed letterpress”.

Selling multiple items of negligible cost is a sound business model.

Money

The effects of his father having to go to debtor’s prison left an indelible mark on the young Charles. He put these words into the mouth of David Copperfield‘s Mr Micawber: “if a man had twenty pounds a year, and spent nineteen pounds nineteen shillings and sixpence, he would be happy; but a shilling spent the other way would make him wretched”.

Dickens’s estate on his death was £93,000, comfortably making him a millionaire by today’s standards. And this despite being known for his generosity.

Always spend less than you earn.

Avoiding bubbles

In 1825, in a climate of feverish speculation, a nervous Bank of England refused to lend money cheaply to British banks and companies. 80 banks failed, and almost 500 companies went bankrupt almost overnight.

This Victorian economic crisis is depicted in Nicholas Nickleby, when Mr and Mrs Nickleby speculate with their joint assets of £2,000 and a farm. “A mania prevailed, a bubble burst … four hundred nobodies were ruined”. Mr Nickleby dies soon afterwards.

Avoid speculation and the “something for nothing” economy.

What can Charles Dickens teach you in 2012?

Charles Dickens certainly learned from the mistakes of others, dragged himself and his extended family from poverty and still found extra time and cash to do good deeds and help others.

Whereas with every financial crisis, politicians and bankers seem to have to learn the same lessons over and over again.

But, hopefully, we only have to make mistakes once to learn from them.

What mistakes have you learned from and what principles will you be applying to your life and work in 2012?

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.

Every WordPress site is different. This is because everybody chooses a different theme or “look and feel” for their site. Creating a header and top navigation menu in WordPress will be a slightly different process for each site.

Here I am using the Genesis theme framework for WordPress because I absolutely love it. However, there will be important points in this article that wil help anyone with a WordPress website.

This is part of a series of articles and videos where I create a website from scratch. I first explained how to make a child theme for the Genesis framework and then I wrote about starting to style the theme by adding the background and logo.

Adding Facebook link, Twitter link and other information to the header

Having already added the logo to the top left of our site’s header, we will now add some extra information to the right hand side of our header. In this case we will add Twitter and Facebook links, etc., by way of a widget.

I’ve got to admit I’ve gone a little widget crazy lately, having been a little dismissive of them in the past. What’s a widget? Well, they’re self contained bits of a website that you can drag around and control via an easy-to-use widget area.

One of the many beauties of Genesis is it’s effortless ability to widgetize any area of the website. So:

• If you want a different order of boxes on the sidebar you can do it in seconds.
• If you want a featured post here, 5 latest category headings with thumbnails there on the home page, you can do it in seconds.
• If you want a search bar, social sharing, Twitter feed, calendar, tag cloud, etc., here, there or anywhere, you can do it in seconds. 

This intuitive, easy-to-use back-end functionality is particularly useful when creating websites for clients that want the ability to control all areas of a website but lack the skills to do this.

Anyway, in this instance we need to create our own custom widget and we do that by dragging over a Text Widget to the Header Right area in the Appearance > Widgets interface in WordPress.

And in this Text Widget you can put HTML. Here is the HTML I put for this particular site. I just has a Facebook page link, a Twitter link and a phone number.

<div id="connect">
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p id="tel"><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

And here is the CSS to style the above:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

Here is what appears on the right hand side of the head as a result:

Video of adding heading info and navigation menu

In this video I show how to add the widget to the header and how to style up the menu in Genesis.

Creating the top navigation menu

Top navigation menus (or “navbars”) used to be the bane of my existence but now, with Genesis and WordPress menus, I have developed a really easy system of creating them which takes seconds as opposed to hours.

Genesis already has in place the ability to have a Primary and Secondary Navigation Menu. For this particular example, I got rid of the Secondary Navigation Menu using the Genesis Theme Settings as the client only wanted one.

In the video above I show how I amend the CSS to get the menu to look like the one in the PSD visual I did.

By using Chrome Developer Tools or the Firebug add-on for Firefox, you can tell which selectors in the HTML are being used in the CSS to style the menu.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

As you can see in the above video, I increased the radius of the rounded corners, added a gradient background and changed the border color of the menu. So now the menu doesn’t look like the boring gray one you get with a vanilla Genesis install.

I also added the following CSS to change the color of the text in the menu to white.

#nav li a {color: #fff; }

There is also the ability to change the style of the current page links, the hover links, the sub-page links and the sub-sub-page links.

With Genesis, you can easily have drop-down menus for sub-pages (or child pages) and then fly-out links for sub-sub-pages (or grandchild pages). You can have these on both the Primary and Secondary Navigation menus.

Creating pages, child pages and grandchild pages

Here is my video where I add new pages to the WordPress menu so that they appear in the navigation menu as pages, child pages (as drop-downs) and grandchild pages (as flyouts).

You can choose a page to be a child or grandchild page under Parent in the page editor. And when you look at the pages (under Pages > All Pages) the child and grandchild pages are indented underneath their parent. Doing this will also give them a logical URL (for example, www.site.com/music/jazz/charlie-parker where the page “Charlie Parker” is a child of “Jazz” which is a child of “Music”).

Creating a navigation menu with drop-downs and fly-outs

To get these pages to appear in the navigation menu correctly, you just have to drag and drop them into their respective positions in Appearance > Menus. Again, child pages are indented under their parent. Don’t forget to give the menu a name (like “navbar”, for example) and set it to be the primary navigation menu.

So, arranging pages in the WordPress Appearance > Menus area like this…

… will create a drop-down menu with fly-outs like this:

Please see the video above for a demonstration of this.

What do you think?

What do you think of this method of editing the header and navigation menu of a website? Do you do it in a different way?

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 my last post and video I explained how to make a child theme for the Genesis theme framework in WordPress. In this article I explain how to start styling the Genesis child theme.

Here you can see where we left off last time with the Genesis child theme only just set up plus an image of the Photoshop visual I used to show the client how the home page would look:

Once the client was happy with the PSD visual, I started creating the child theme locally using MAMP, Photoshop and a text editor.

As you can see above left, the default Genesis child theme looks particularly uninspiring but it is actually very quick to style up the new theme using Genesis. I have made around 10 videos of 5 minutes each showing how I did this, so it can be done in less than an hour!

Genesis Theme Settings

If you look again at the Genesis default theme above (kinda ugly, eh?) you see 3 gray bars across the top. All we need is one top horizontal navigation menu – which is sort of standard these days.

We can get rid of the other two straightaway by going into Genesis Theme Settings on the left hand side of the WordPress administration area.

I will run down the basics of the Theme Settings from the top to the bottom.

• Firstly, I have the default Enable Automatic Updates checked. This means you can update Genesis with a mouse click when the updates come out – as with WordPress, you should do this every time an update comes out. This is one of the benefits of using Genesis – it is developed alongside WordPress and so will always work whatever happens to the WordPress core.
• Leave the Custom Feeds section blank.
• Default Layout is a cool Genesis feature where you can put a sidebar on the left or right, have no sidebars or two sidebars in various arrangements. You can change this on a page by page basis (even cooler). For this site I put the sidebar on the right.
• For Header Settings you can either have an image or the text of the site title. I chose “Header Image” for this site.
• In the Navigation Settings you can choose to have only primary navigation which gets rid of one of those ugly gray bars. You can also Enable Fancy Dropdowns which adds a rather nice Suckerfish delay to your dropdown and makes you look like a coder rockstar when you’re not. You can add other options to the navbar such as today’s date or a site search.
• You can choose which pages you want Breadcrumbs on (I turned these off to get rid of that other ugly gray bar).
• You can choose to have Comments and Trackbacks on posts only but not on pages (as is the usual way).
• You can alter the output of your main blog pages by choosing to have excerpts only and thumbnail images, for example, in the Content Archives section.
• In the Blog Page section you can choose to have only certain Categories listed. I left this with All Categories.
• And lastly you can add various scripts to your header and footer sections of the webpages in Header and Footer Scripts. This is useful for installing Google Analytics and jQuery scripts.

I generally like to do as little as possible here in the Theme Settings and as much as possible in the style.css and functions.php files. The Theme Settings, although important, are only very general controls. When you are creating websites for demanding clients. Most of the action takes place in CSS-land.

Adding a background color and image

This is, of course, straightforward CSS. The background is a light brown color with a gradient running down from the top where it is darker. In the video below I copy a slither of the background and then create a one-pixel wide GIF in Photoshop of the gradient and same that in the child theme’s images folder as bg.gif. The CSS to create the background is:

body {background : #f3ece1 url(images/bg.gif) repeat-x; }

This repeats the one-pixel wide GIF along the top of the background and then, under the repeated GIF is a background color of the light brown #f3ece1. This color I sampled with the Photoshop Eyedropper Tool (I) was the color of the last pixel at the bottom of the copied slither from the PSD. This means that the gradient runs down from the top to the background seamlessly.

Adding a background color to the main page wrapper

This actually makes most of the page light brown which isn’t much good, so, in order to get the main core of the page white I added some CSS to a div id in the mark-up that contains all the page elements. In most web page mark up there is a div id called “wrap” or “wrapper”. In Genesis it’s called “wrap”.

#wrap {margin: 15px auto;
background: #fff;
width: 960px;
padding: 20px ;
-moz-box-shadow: 0px 0px 5px #aaa; -khtml-box-shadow: 0px 0px 5px #aaa; -webkit-box-shadow: 0px 0px 5px #aaa; box-shadow: 0px 0px 5px #aaa; }

This CSS above colors the central area white. I’ll go through the above, line by line:

• margin: 15px auto; puts 15 pixels on top and bottom and makes sure the whole website is centered – this is from the default Genesis theme
• background: #fff; makes it white
• width: 960px; makes it 960 pixels wide (good job I’m here!)
• padding: 20px; this adds 20 pixels of white around it so that the background doesn’t butt right up against the edge of the text (so it isn’t 960 pixels wide, it’s actually 1000 pixels wide – CSS will drive you mad!)
• -moz-box-shadow: 0px 0px 5px #aaa; … etc. adds an even shadow around the wrap in all most of the main browsers

So that’s the background and the wrap finished, now it’s on to the header logo.

Adding a header logo in Genesis

As you can see above I chose “Header Image” under Header Settings in the Genesis Theme Settings above.

I saved the logo in Photoshop and put it in the child theme images folder and then added this to the CSS:

.header-image #title-area {background : url(images/logo.jpg) no-repeat top left ; }

This adds the logo to the top left of the header which returns us to the home page when clicked.

The logo for this site was deeper than the space allowed so I had to add a greater height to another two elements in the stylesheet.

#header {height: 126px;}
.header-image {height: 126px;}

Genesis themes are excellently coded and the CSS is just a joy to work with, however, this is one of the few cases where you have to add something twice!

Starting to style a Genesis child theme in WordPress

I actually did realise I was filming myself for parts of this video so I apologise for the unkempt appearance.

Here is the video where I change the Genesis Theme Settings and style the background and logo in WordPress using a Genesis child theme. It also may help you to view the previous video where I create the child theme and the following video where I move on to a header text widget and the top navigation bar.

What do you think?

Hopefully this contained some useful CSS tips for those that don’t use Genesis and was helpful for those that do! I’m always interested to hear about how you create WordPress themes or if you have any questions.

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 often ask the visitors here what they would like to me write about and the most common subject people mention is making your own WordPress theme.

WordPress is a powerful publishing platform which can be made to act and look like just about any kind of website.

What are WordPress themes and how do you make them?

Themes are a collection of PHP, CSS and image files that change the design or “skin” of your website. But they also do much more than that. They can also change the interface, producing different templates for different pages, etc.

There are two main ways to create a new theme for WordPress:

• First you get use an existing simple theme like Starkers and modify it to produce your own theme
• Secondly, and this is the method I recommend, you can get a theme framework like Genesis or Thesis and create a child theme to run on top of the framework.

Setting up a child theme on a framework sounds more complicated but it actually simplifies the process of creating a website.

Using a theme framework makes your WordPress website future proof as these frameworks will be updated along with the WordPress core updates so there’s no way your site will suddenly stop working when you update WordPress.

Theme frameworks

The benefit of using a framework is that the core theme coding is already done and done right. When you create your own custom theme, you are responsible for everything – so if anything goes wrong it’s up to you to fix.

Matt Mullenweg, WordPress founder developer: “Child themes are the only way you should build your WordPress site on top of a framework, and Genesis has great support for child themes and other WordPress functionality.”

I used to create WordPress themes from scratch but when I wanted to add improvements to them, like nested comments for example, I found it would conflict with another element of the theme and fixing it would mean starting again from scratch.

Even if you think you know everything, you will always be asked to do something you’re not quite sure how to accomplish. When using a WordPress theme framework like Genesis you have the support of thousands of top quality developers – and amongst them there is bound to be someone who knows the exact and best solution to any query.

Here are some other advantages of using theme frameworks:

• Good for SEO. Frameworks such as Genesis and Thesis are much better structured for SEO. WordPress SEO expert Joost de Valk gives Genesis 5 out of 5 for SEO. The SEO controls are so good you don’t even need an SEO plug-in, although if you do want one it’s fully compatible and transferable with Yoast’s WordPress SEO plug-in and others.
• Quicker to develop with. Because it is all expertly coded and follows best practices it allows you to cherry pick the best elements (drop down menus, post thumbnails, jQuery sliders) and drop them into your design.
• WYSIWYG controls. Theme frameworks have robust settings sections and widgetized areas, enabling drag-and-drop control over the website’s elements, allowing design changes without coding.

The reasons I use Genesis

I’ve been using Genesis for most of this year and I can honestly say that I’ll never go back to writing themes on my own again. I can do everything I want with Genesis and I can do it quicker.

Yes, I’m using affiliate links in this article so if you make a purchase through one of the links I may get a commission. However, I would never recommend something to you that I don’t use myself. And this is why I use Genesis:

• Support. The documentation and developer support is awesome. You can ask how to do something through their forums and an expert developer will tell you within hours.
• Future-proof. Studiopress are always looking to the future. The next release, Genesis 1.8, will be responsive and create different device-dependent versions of the site for mobiles, iPads, tablets, etc. This is a big winner for me because the mobile web is going to be huge and so far the WordPress mobile plug-ins are not very customizable.
• Compatibility. It’s totally compatible with all the major WordPress extensions such as Gravity Forms, bbPress, WordPress Multi-Lingual, etc.
• Price. It is, actually, rediculously cheap. And cheaper than Thesis or Headway. Just $60 for the framework – which is all you need. You can create as many sites as you want and have access to the support. $60 is a small price to pay for total certainty in SEO, security, and website development.

Darren Rowse – Founder ProBlogger.net: “Genesis lets me sleep easy. Knowing my blog is well optimized, secure and easy to update lets me get on with developing content, community and building a business from my blogging.”

Creating a child theme on the Genesis framework for WordPress

I have just made 10 videos explaining how I create websites – from the Photoshop mock-up to the finished site online. I’ll be writing blog posts about every stage of the process over the next few weeks. You can see all the videos on my YouTube channel now.

Here is the first video where I create a Genesis child theme for WordPress.

I always start to create a WordPress theme and website locally on my computer before loading it up to a host for final tweaking. It only takes a few seconds to install WAMP (PC) or MAMP (Mac) on your computer and run WordPress locally and I recommend you do so when creating themes.

Once you have WordPress up and running you need to install your Genesis theme framework and your child theme. You will get your copy of Genesis as soon as you make the purchase. Un-zip it and put it in the /themes/ folder which, as you know, can be found in /wp-content/ amongst your WordPress files. No need to touch that folder ever again – all your theme changes will go in your child theme.

And then to load your child theme download a sample child theme from the StudioPress website or here:

You may want to re-name the child theme by changing the folder name and editing the style.css and the functions.php, but put the child theme next to the Genesis theme in the /theme/ folder and activate it in the WordPress back-end.

90% of the changes you make to the child theme will be to the CSS file. The other 10% – adding custom page templates, removing certain elements from certain pages, adding widgetized areas, etc., these changes can all be put in the functions.php file. Here is the functions.php file of the above sample child theme.

<?php
/** Start the engine */
require_once( get_template_directory() . '/lib/init.php' );

/** Child theme (do not remove) */
define( 'CHILD_THEME_NAME', 'Sample Child Theme' );
define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/genesis' );

If you add any code to the above, make sure it’s below the '/lib/init.php' ); line and that there are no spaces after the last character in the file.

Don’t worry about getting your hands dirty with PHP. The solution to any requirement you have of Genesis will either be in the documentation or will be sorted out in the forums. There are also a couple of Genesis plug-ins (Simple Hooks and Simple Edits) which further simplify the process. And once you start pasting in PHP you begin to understand the logic behind it.

What do you think?

I’m really looking forward to sharing my methods of developing websites – there are 9 more videos to come! Do you use a child theme on a theme framework to create sites or do you create your own custom themes? What are the advantages and disadvantages of doing it your way?

And, is there anything else you would like to know about creating WordPress sites?

Be sure to leave your comments and questions down below and, if you wish, click on one of the buttons down there 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.

I moved a WordPress blog to a new server and a new address this week. It was one of those jobs that I dreaded doing but didn’t turn out to be too complicated. And I’ve not lost any traffic!

Why was I moving a WordPress site to a new domain?

A few months back I created a site about WordPress, blogging, SEO, SM and internet marketing. I called it (maybe I didn’t spend too long thinking about this) WordPressSEOMarketing.com – catchy, huh?

It turns out that it is illegal to use “WordPress” in a domain as it is copyrighted. I spent a lot of time trying to decide on a new domain name for the website. In the end, I decided on WPBlogTalk.com.

How to move a WordPress site

Here is a basic synopsis of what you need to do.

1. Register the new domain with GoDaddy or Namecheap or some domain name registrar
2. Point the Name Servers at the domain name registrar to the new host
3. Set up the new domain at the new host
4. Copy all files and database (see below) from old site to new site
5. Edit wp-config.php to have the right database settings and add code for new domain (see below)
6. Install the Search and Replace plugin to search for old URLs and replace them with the new URL
7. Go through new site checking links, etc., change logo and branding, create new email subscription, change any product URLs, etc.
8. Add 301 redirection from old blog to new blog
9. Change feed URL in Feedburner, set up new Google Webmaster Tools and Google Analytics accounts to monitor indexing and traffic of new site

Now, what could be simpler?

If you don’t count waiting for files to copy, the actual process of moving a WordPress site only takes a few minutes – but you need to spend time checking the new site and changing some superficial elements.

The first three steps of the above synopsis are simple enough. And copying the files is an easy job to do with any FTP client. However, copying a database is always a little more complicated.

If you have Shell (Telnet or SSH) access to the hosts this can be done with one simple command line:

mysqldump -h oldhost -u oldusername -poldpassword olddbname | mysql -h newhost -u newusername -pnewpassword newdbname

This maybe a good option if your database is over 7MB in size. However, I prefer a more “hands-on” approach and migrated the database with PHPMyAdmin.

Exporting a database with PHPMyAdmin

Firstly, you need to export the database from the old site. Once you have logged in to PHPMyAdmin, selected the WordPress database on the left-hand panel and clicked the Export tab on the top right, there are a few options you must set in this page.

Underneath the section marked “Export”, make sure you have clicked “Select All” and in the radio button list below, make sure SQL is selected (this maybe already done when you arrive a the Export page). In the section marked “Structure”, check the box marked “Structure”. Within this section check boxes marked Add DROP TABLE / VIEW / PROCEDURE /, Add AUTO_INCREMENT value, and Enclose table and field names with backquotes. In the section marked “Data”, check the box marked Data. Within this section check boxes marked Complete inserts, Extended inserts and Use hexadecimal for binary fields.

Finally, check the box marked Save as file in the bottom panel and click the radio button with compression as None. Then click Go bottom right and go and get yourself a coffee.

Here is the complete panel to export or back-up and WordPress database in PHPMyAdmin:

This is the same procedure as when backing up WordPress databases. You can get a plug-in to do this for you but as this is for a new WordPress website, I thought it was better to export it this way.

Importing a database with PHPMyAdmin

Secondly, you need to create a new database on the new server and import the database you just exported.

I created a database with completely different name, username and password but you could be clever and create one with the same names and passwords as the old one which would mean you wouldn’t have to change these in the wp-config.php file later on.

In order to import the old database into the old one you need to open PHPMyAdmin for the new database that you have just created.

Click the small SQL icon, select Import Files from the resulting pop-up window, click Browse, select the file from your computer that you’d downloaded from the old site, and then click Go.

Editing the wp-config.php file

If the database imported still has the old website URL in it, you need to add these lines to the wp-config.php file:

define('WP_SITEURL', 'http://www.wpblogtalk.com');
define('WP_HOME', 'http://www.wpblogtalk.com');

I also had to change the database name, database username and password in the wp-config.php file to the settings of the database I’d just created.

At this point you can have a look at the new site and click through a few links. There’s still plenty more to do, though.

Search and Replace plugin

Meet your new friend, the Search and Replace plugin. Install this plug-in on your new site to change all the mentions of the old domain and change them to the new one. There are two places you can do this in the plug-in’s options page. I performed the search and replace in both.

If you search through all your posts now you will find all the internal links and image paths are using the new domain.

Check the site

Have a good look through your new site, checking that all is as it should be. Here’s a few things that I needed to do:

• Change image paths and internal links in the text widgets (for some reason these don’t get picked up by the Search and Replace plug-in)
• Change the logo in the header
• Create a new Aweber list for email subscriptions
• Re-brand e-books offered for download on the site
• Change the download page in Clickbank for a premium product

I actually found that these actions took the most time of the whole process!

Re-direct old site to new site

This step is absolutely essential!

You now have two sites that are identical in content – a bit of an SEO no-no. You need to set up a 301 re-direct from the old site to the new site. Put this in the old site’s .htaccess file – which you will find on the root of the site.

Redirect 301 / http://www.wpblogtalk.com/

That’s all you need! That will redirect any URL in the old domain to the equivalent page in the new site.

Final steps

Finally, I performed these following steps:

• delete the files and database of the old site (keep that all important .htaccess file though!)
• change the feed URL at Feedburner
• set up a new Google Analytics account
• set up a new account at Google Webmaster Tools to monitor how many links are indexed and register the sitemap
• create a new robots.txt to point to the sitemap
• create a new email address for the site and make sure the content form points to it (and forward emails from the old email address for the site to the new one)

Moving a WordPress website from one URL to another

Here is a video I made for your viewing pleasure concerning all the main points of copying files and databases, setting up the new WordPress site and redirecting the old site to it.

You’ve made it to the end of the article now!

I hope that helped someone. Please let me know if you do it differently or if you’ve had a problem with this operation in the comments below. And, if you’ve enjoyed the article, please don’t hesitate to vote for it down below!

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 is certainly no need to be daunted by a financial barrier to entry when starting your own web design company. Don’t be put off by the price of Photoshop or the whole Creative Suite – there’s loads of free software for web designers that can help you keep costs down.

Online image editors

Photoshop is the application that is potentially the biggest financial outlay for a web designer. But there are a few online image editors out there. Pixlr is one of the best. FotoFlexer is also worth a try.

Open source alternatives to Creative Suite

There are free open sources versions of Creative Suite applications. GIMP has been around for a long time and boasts plugins, brushes and tools to extend the basic functionality of the software. Pixelmator is not free but is cheap compared to Photoshop.

Inkscape, which is popular with the Linux community, is a free alternative to Adobe Illustrator. This free vector graphics manipulator produces SVG files without unnecessary code to a reduced file size.

Text and code editors

Aside from an image editor, a web designer will always be in need of a good code editor. There are cheap alternatives to Dreamweaver such as Textmate and Coda.

Obviously there are the free text editors available with the operating systems such as Notepad which comes with Windows and TextEdit which comes with OS-X. I’ve been really impressed with Text Wrangler which has a multi-file search & replace feature that is really handy.

FTP

For me, it’s Filezilla all the way. Easy to use and quick. It used to not be available for Mac so in the old days I used Cyberduck. I miss that yellow duck icon!

If you don’t want to download an app there’s net2ftp which gives you an FTP client in your browser. There’s even a skin designed for the iPhone.

File Sharing

If you want to deliver large files to a client there are a host of free services, I use YouSendIt. And to store files on the cloud to access from multiple devices you can use DropBox. For downloading torrents there’s µTorrent for Mac and BitTorrent.

Images

There are lots of places to get great free stock photography, stock.xchage and Flickr Creative Comms search are two of my favorites.

There are lots of great free vector resources but, instead of searching through these resources, I find a Google image search for “free vector” does the trick. Likewise, it’s not always necessary to get a free vector logo from Brands of the World but just Google the logo you want with “vector” in the search query.

Fonts

You can pick up free fonts at DaFont and a host of other places. WhatTheFont can identify a font from an image.

Google Fonts now has a catalog of around 300 excellent fonts that will work across most browsers with just a line of code in the head and a CSS declaration.

Compare and contrast the fonts with TypeTester.

Grids

If you like to use grids in your web design (or even if you don’t) then check out 960 Grid System where you can download grid templates in HTML & CSS, Photoshop, Illustrator, GIMP, etc. All these grids are for websites that are 960 pixels wide.

Web developer tools

These are a standard fare for most web designers with many of us using these tools many times a day:

• Firebug – awesome Firefox add-on that will inspect and change HTML and CSS and help you de-bug JavaScript.
• Developer Tools for Chrome and Internet Explorer – these do about the same as Firebug and are bundled with their respective browsers. Handy for working out IE hacks.
• Web Developer add-on for Firefox and Chrome – ultra handy add-on that can disable styles, disable browser default styles (handy for cross-browser compatibility), show alt text for images, resize window, validate, etc. The list is endless.

Web design online “must-haves”

The above mentioned HTML and, to a lesser extent, CSS Validators that can be reached with one click using the Web Developer add-on are services that most web designers will use all the time.

Other online services of huge importance to the web designer are Google Analytics, Google Webmaster Tools and Google Docs.

Cross browser checks

You can check websites across different browsers at BrowserShots and Adobe BrowserLab. ViewLikeUs allows you to check out how your website looks in the most popular resolution formats.

Speed

In order to analyse your page speed, use Google’s PageSpeed (try to get your score up to 100) and Yahoo!’s Y!slow.

Downtime

Use Pingdom‘s free service to be instantly informed of any downtime on your site so you can contact your host and sort it out asap!

Email marketing

I’m not sure if this really comes under the heading of “web designing” but with 2,000 subscribers for free, MailChimp is an awesome free email sending service.

Color

Color Scheme Designer can help you choose complimentary colors for your website designs.

Billing

Freshbooks tracks your time and invoices your clients automatically, saving you time and getting you paid quicker. Mint tracks all your business finances and transactions and has a free mobile app. Square will accept credit card payment off you mobile phone.

CMSs

The best things in life are free – but then again you tend to forget how amazing they are because you don’t have to pay for them! The best ones are, obviously, WordPress, Drupal and Joomla but there are loads of incredible free Content Management Systems that power most of the web.

Video

Also going under the title of “Been around so long I almost forgot about them” are the free video storage services YouTube and Vimeo, etc. If it wasn’t for these services we’d spend ages uploading our video to servers or paying services like Amazon S3 to host them for us.

Give me your suggestions!

Is there any free software you use that I have missed out? Please give me your suggestions in the comments section below. And, if you enjoyed this article, please vote for it by Tweeting, Facebook Liking or Google +1′ing 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.

In a world where 99% of business communication is done by phone, email or video/text messaging – there is no substitute for meeting clients face-to-face.

A personal meeting will create a better bond and this can be useful with challenging projects.

Do I really need to meet this client?

Not all clients are created equal.

Client One has a hair-brained website idea, calls you on a whim and asks to meet with you to discuss. You’ll go and have a conversation that will inevitably unpick their website idea so that they realise the folly of pursuing it. A wasted journey and wasted time.

Client Two is busy and would like to employ your company on an ongoing basis for years to come but will only do so after having met face-to-face. Client Two will not say this to you in as many words but has decided from your website that you can do the job.

These are two simplified caricatures of clients that I get calls from all the time. How do you tell a Client One from a Client Two?

There are lots of “red flags” that will expose a Client One to you. An email can tell you a lot about a person. Failure to spell properly, punctuate, explain exactly what’s required can portend of vague briefs, fuzzy thinking and a difficult working relationship.

Similarly, if the client is clear, business-like and polite in their dealings with you, it augurs well. It’s usually worth meeting the client if they belong to a large organisation or Fortune 500 company.

But these aren’t hard and fast rules.

I sometimes like to do some work for the client first before meeting. These are all steps that I take to ensure I don’t go out to client meetings and never see or hear from them again. I don’t want to waste my time and the potential client, presumably, doesn’t want to waste theirs.

What do I do before the meeting?

It’s a good idea to research the client, their industry and background beforehand. A quick Google will usually do. And, research the venue, how to get there and/or the parking to ensure you arrive on time and unstressed.

What do I wear?

Fashion guru, I am not. Thankfully, designers aren’t usually judged by the way they dress. I do always wear a jacket and try to look as smart as possible.

What do I take?

The last client meeting I went to, this is what I took:

• A laptop – handy for showing the client previous work samples or sites
• Some paper and pen for taking notes
• A mobile phone, preferably with SatNav further ensuring a prompt arrival

What do I say?

In an article about what you should say to a client, I say that you should not give a client details about the “how” of a job or technical information that they don’t need to know.

Try to keep the conversation as simple as possible and don’t get bogged down by discussing minutiae. Put yourself in the clients shoes, they want to know if you can do what they want on time and on budget – try and make them believe this.

If you’re introduced to somebody by name, repeat their name back to them soon afterwards. This will help you remember names when it comes to saying goodbye.

Talking to the client about money

The conversation may turn to the subject of money and you may be asked to give a quote. Obviously you should be clear about the nature and extent of the job when giving a quote. When you do come up with a figure, write it down on a piece of paper. This will help cement the number in their minds and reduce the chance of negotiation.

The end of the meeting

I often meet with clients in cafes or hotel lobbies. If coffees or drinks have been consumed throughout the meeting, it may be polite for you to offer to pay. Most clients will like to pay as they initiated the meeting. But you must thank the client for this curtesy.

I was given lunch once and I forgot to thank the client at the end. I felt such an idiot on returning to the office!

When the meeting is concluded, it’s good to thank the client and say how good it was to meet them. On returning to the office an email exchange re-iterating this is always good. You may like to write down some of the areas that were discussed and agreed upon.

Generally…

I believe you should not appear overly enthusiastic nor too cold and calculating. View the client as someone who will benefit from a partnership with you.

Maybe the next time you have a meeting try to keep the language and topics of conversation as simple as possible.

What do you think? Have you had any meetings recently and have some top tips to share with us. And, if you’ve enjoyed this post, please vote for it with a Tweet or a Facebook Like.

Plus, don’t forget my e-book on How To Get Clients in the first place!

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 much should graphic designers or design companies specialize? Should they hone their skills and expertise to a particular niche? Or should they provide a range of services for their clients?

Starting out

When a graphic designer first starts out as a freelancer or when a new graphic design company has just set up, the temptation is to take any work that is offered. This is only natural, especially in a flat economy.

However, a lot of the designers I have spoken to about this say that pretty soon afterwards they were drawn to an area of design that they enjoyed the most.

If I asked you to think of a designer that does logos and brand identity you may well think of David Airey. David urges caution at first, “I think when you’re learning, it’s important not to limit yourself to a niche. The more you know about design in general, the better equipped you are when it comes to specialising.”

Knowing more about design and the experience of designing helps you to choose your speciality but, as Karen McDade points out, experience teaches you to choose your clients carefully as well:

“When I started freelancing a few years ago I took any work that came my way in an effort to build my business. After a while I had a lot of clients but, because I wasn’t selective, some of them were less than desirable. I ended up working long hours for all these clients who wouldn’t pay me on time (or at all). I was quite naïve and trusted in their word that they would eventually pay up. It came to ahead one night when, at about 3am, I realised I was working way too hard for the level of income I was actually bringing in.”

Having streamlined her clients, Karen now provides a better service to them and her portfolio has improved as a result. I can certainly attest to the importance of keeping good clients and letting the low quality, late paying clients go.

How do I specialize?

How do you choose the area of design to specialize in? Most designers say that this happens naturally as you are drawn to a particular area as it is particularly interesting or enjoyable for you.

Chris Spooner says, “I think it’s important to find a specialism, but it’s up to the designer to figure out how wide or narrow their specialism will be. For instance some designers might only offer design services in a very specific niche, which can establish them as the go-to expert in that field, whereas other designers might offer a wider range of services under the umbrella of a particular aspect of design, which obviously increases their potential client base. It all boils down to the designer’s interests and what kind of work they enjoy creating.”

I think Chris is absolutely right here. Seek out what you enjoy doing.

What do I specialize in?

An example of a particular niche would be WordPress websites and themes.

Mike Smith explains this: “I was someone who did a bit of everything when starting out. Ad Banners, CD covers, Flyers, Website headers (yes, just he headers lol), etc. I stumbled on WordPress and started building sites for myself and just learned the ins and outs of it so much that it only seemed right to offer WordPress themes as a service. Once that took off and started doing well, I started doing less and less of the other stuff. Nowadays I spend 90% of my days working with WordPress: Designing themes, coding my own themes, PSD to WP for other people, etc. I like specializing because it gives me the ability to focus on one thing and do it really well – people like that ”

Your speciality can be any aspect of design: logos, brand identity, WordPress themes, WordPress and SEO, print collateral, anything!

However, designers tend to specialize in one aspect of design. Not in any particular industry. None of the designers who I spoke to specialized in a specific niche industry like education, retail or pharmaceuticals, for example. This may have happened with larger design companies in the recent past but not, it seems, with smaller design companies and independent designers now.

Taking it to the next level

So, you’ve specialized in your favorite aspect of design, what next? This isn’t the end of the story.

For instance, Adii Rockstar (I’m not sure if that’s his real name), specialized in creating WordPress themes and then hooked up with a couple of other guys and created WooThemes – a hugely successful theme company that have sold over 80,000 themes. Both Chris Pearson, the creator of the Thesis Theme and Brian Gardner, the creator of the Genesis Theme, have taken design to the next level by creating scalable businesses.

Here, Douglas Bonneville describes how he was able to turn his “active” design skills into “passive income”: “I really started to think about a product, and how I could step back from the crowd and say, ‘how can I help graphic designers and not so much clients anymore?’ I focused on treating myself as a client, producing my eBook and a few apps focused on typography. Things have gone extremely well since then, and I’d never go back!”

So, it is also possible to find a speciality that is beyond the client work and focusses on selling products.

And finally…

I hope this has given you a few ideas about how you can develop, specialize and grow your business – whether it’s to do with design or not. Are you specializing in anything at the moment? Can you think of an area you particular enjoy that you would like to move into? What can you do to make sure you can get more work and specialize in that area?

As always, I would love to hear your opinions in the comments below. And, I would appreciate a tweet or a vote.

Thank you to all the designers who participated in this that weren’t mentioned above, for example Derek Kirk from Web Designers London, Randa Clay from Randa Clay WordPress Design, Lynne Venart from The Art Monkey, Kyle Richardson and Craig Wilson.

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 article is more of a “plea” to web designers. Don’t look at a web page as a work of art. Look on it as something that does a job and, for God’s sake, make it legible! Too many times we see readability sacrificed at the alter of web design.

But first, some statistics for you to think about:

• Nearly 26.6 million Americans (nearly 9%) are visually impaired, meaning their vision cannot be completely corrected with lenses.
• 1 in 12 people in the world (over 8%) suffer some sort of color blindness

Here are 4 rules about readability and accessibility on websites.

1. Font size

I recently read an article arguing that body text should be at least 16 pixels in size. I was really pleased to see Smashing Magazine publish this article – although it was rather ironic that they had to create a special design with a large body text size for the article as it would have been hypocritically smaller in their normal template.

What does 16 pixels actually mean? It’s a fixed size measurement. If you’re familiar with the point measurement (1/72 of an inch), then it’s 12 points. If you’re reading this text on my website then it is set at 15 pixels in size if the browser isn’t zoomed in or out.

Another method of setting font size in CSS is with ems. Ems are usually used in combination with percentages. If the body font size is set to 100% then 1 em equals 16 pixels. This used to be considered the most accessible way to set text as it would adapt to the device. However, now that most modern browsers and devices can scale the whole page, I now prefer to use pixels.

OK, we know you can zoom in and zoom out when viewing web pages. But users shouldn’t have to do this!

Either way, body text should never be much smaller than 16 pixels, 12 points, 100% or 1 em.

2. Color and contrast

You should always think about the visually impaired and color blind when choosing the text color and background color. If the two colors are too similar some people will have difficulty reading.

Be especially careful if you are putting text on a background with a pattern or on an image as this can be very difficult for some people to make out. The are tools online such as the color contrast check which can help you.

The next two rules will help the SEO as well as the accessibility of your web pages.

3. Make your text scannable

Don’t have long paragraphs of tight text. The line height, the spacing of the line of text or leading, should be at least 25% more than the font size. So, a font size of 16 pixels should have a line height of at least 20 pixels which will make body text readable.

Furthermore, you should seek to break up your text as much as possible with headings, bullet points, bolds, italics, blockquotes. People don’t tend to read web pages from top to bottom. (Sadly you probably won’t read every word of this article! )

These extra elements will make your text more readable – and the increased use of subheads will help with SEO.

4. Use of images

Lastly, it’s important to always include an alt text for images you use in a web page. Alt text is a tag in the HTML which describes images to

<img src="http://yoursite.com/images/green-flower.jpg" alt="a bunch of green flowers in a vase on a table" />

A visually impaired reader of your web page that is using a screen reader will hear the alt text in place of the image. The alt text will also show on screen when the image can not be rendered.

Again, this is also a good practice for SEO.

Conclusion

Have a look at the websites you are responsible for. Is the body text size readable to those with slight visual impairment? Is the size smaller than 15 pixels? Are there any quick changes you can make to improve it’s readability and accessibility?

Can you add to these rules? Do you disagree with any of them? Let us know in the comments.

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.

Giving away free gifts is excellent marketing. It fosters loyalty and brand recognition. I’m giving away free 2012 calendars as PDFs. I’m also making available the InDesign and Illustrator files that were used to create the PDFs, so you can create and brand your own calendars and do the same thing, if you so wish!

Branded calendars are classic marketing materials because they are the sort of thing that “hang around” for the whole year. So your logo and your marketing message will be seen for much longer than just a few days.

Literally thousands of visitors arrive at this site every year to download these calendars.

Free 2012 Calendars to download as a PDF file

I have two PDFs here for free download. One has the whole year on a single page and the other is a 12 page document with a month on every page.

You may like to download the above PDFs by going right-click and choosing “Save as…” or “Save target as…”.

Free 2012 Calendars to download as Illustrator files

The calendar which has the whole year on one page was created in Adobe Illustrator. Here is a version in Illustrator CS5 saved as an Adobe Illustrator file (.AI) plus, for those of you with earlier versions of Illustrator, there is an EPS saved as an Illustrator 9 file.

Free 2012 Calendars to download as InDesign files

The 12 page calendar with a month to a page was created in Adobe InDesign. InDesign is a bit of a nightmare when opening in legacy versions. Firstly, I created the calendar in InDesign version CS5, I then exported this as an InDesign Mark-up Language File (IDML), then opened that in InDesign CS4 and saved a copy, before, finally, exporting from CS4 an InDesign Interchange document (INX) which can be opened in CS3.

All of the PDFs, InDesign and Illustrator files

And here are the two calendars as PDFs, the two different Illustrator files and all the various InDesign files all together in a ZIP file.

Linked text frames/boxes

Both calendars have linked text boxes in the InDesign and Illustrator files. This means that you can use these calendars in 2013, 2014, 2015, and every year to come by just shunting the numbers on in the boxes. So if one month starts on a Monday in 2012 and a Tuesday in 2013, you can just add an extra carridge return or frame break and all the dates will move over to the correct days.

I explained this in more detail last year in this video I made:

As you can see in the video linked text frames in calendars automate their creation year-on-year.

Regular readers and new readers

I apologise to my regular readers who have seen this last year and a big “hello” to new readers who have come to this site for the first time to download these calendars. You would not believe how much traffic I get from this giveaway, which is why I do it every year.

Is it a bit early to give away 2012 calendars in mid-October 2011? I don’t think so. Now is about time graphic designers get requests to do calendars for the next year. I am seeing from my Google Analytics that I’m already getting traffic from people searching for “2012 calendars to download” or such-like, so I thought it best to create them now.

So, if you’ve found this useful please feel free to Tweet, Like or vote for this article and, if it’s not too early to say it, Happy New Year!

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 success of a graphic design business – or any online business – will not only be down to how to get clients but also how you keep and maintain them. This is why client communication is extremely important.

There is a right and a wrong way to communicate with a client. Get it right and there will be a long and mutually-beneficial relationship. Get it wrong and client goes elsewhere.

Don’t baffle the client with technology

Ask yourself “is it necessary that the client knows this at this moment?” And if the answer is “no” then don’t bother. So, don’t say:

“WordPress works better on Linux servers operating Apache rather than Windows operating IIS. If you are using a Windows host we could muddle through but it might be better to change hosts which will involve you changing the Name Servers at your domain name registrar.”

But, do say:

“I will set up your website for you”

It’s very important to know your client’s knowledge. If they don’t have any technical knowledge it’s best not to try to explain the “how” of the job. Just tell them what they’ll get out of it.

Keep it simple, stupid!

Clients don’t like things to be complicated. They are paying you to keep their life simple. So the last thing they need is questions, uncertainty and complexity. So, don’t say:

“There are so many different ways to send email to your customers. You can register them with Google’s Feedburner and have your latest posts sent out automatically. This is a free services but it takes a bit of setting up. Or you can set up an account with an email service provider. This will cost a bit more but give you more flexibility. And, finally, you could just send emails out via your own personal email client – I may be able to help you with this.”

But, do say:

“I will give you the ability to create and send beautifully designed email newsletters to your customers in a matter of minutes.”

Similarly to not getting too technical, don’t explain the options unless it’s absolutely necessary.

The relationship is everything

Don’t involve any of your colleagues in the conversation with the client. The client wants a relationship with you. They don’t care how you get the job done they just want the job done well and, if there’s a problem, they want you to fix it. So, don’t say:

“I will employ the services of an PHP developer to enable some of the website’s functionality but I have done this many times before and there has never been a problem.”

But, do say:

“I will design, develop and maintain your website to function exactly as agreed.”

Do what you do best and outsource the rest. Every graphic designer must have loads of freelance contacts they can call on to help them complete a job. This is not of any specific interest to the client. The client is interested in the finished product that you will deliver not how you deliver it.

Don’t ask too many questions

Sometimes during the execution of a design or a task, a question becomes apparent that wasn’t covered in the brief. I usually try to make a decision as to what to do with this. A lot of the time the client isn’t available for further consultation and as far as they’re concerned the job has been briefed and they don’t want to hear back from you until the job is finished. So, when this is the case, don’t mention any of the problems you’ve had in completing the design. So, don’t say:

“I had a lot of trouble with this. You didn’t mention if you’d required x, y or z but I thought you might so I put them in anyway”

But, do say:

“Please find attached a visual option for the job we discussed. I look forward to your valued feedback.”

I find time and again that clients will go with your decision on some aspect of the design they haven’t thought about. That what they’re paying you for – they’re paying you to make decisions for them to save them time.

It’s all about communication

The most successful graphic designers – the most successful people who deal with clients online – are the ones that communicate best.

If you understand what a client requires and can then over deliver that on time and on budget – you’ll do very well in this business.

What do you think?

As ever, this has only been my experience with clients. We all work in different niches with different disciplines. What’s been your experiences?

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 internet is daunting, disorganized and idiosyncratic. Web designers should try to make the user’s journey as simple and as pleasant as they can. What’s more, there are certain actions that webmasters would like visitors to perform – to go to a page, to submit some information, for example. For these reasons, knowing how to design and code a beautiful web button is an essential skill for web designers to have.

Sometimes we’ll mock-up a web page design in Photoshop first before creating it with code and mark-up. The two operations are quite different but have the same effect. Firstly, I’m going to show you one way I’ll make a web button in Photoshop. And then I will explain how to reproduce the exact same visual effect using HTML and CSS.

How to make a button in Photoshop

First of all create a new document in Photoshop, making sure the color mode is RGB and it’s 72 ppi.

Then in the Tool bar (on the left-hand side, usually) select the Rounded Rectangle Tool.

And then in the Options bar (at the top, usually) set the Radius to 5 pixels. The larger the radius the more curved the corners. You will specify this value later in the CSS.

Now you can draw your button by clicking and dragging (with the Rounded Rectangle Tool selected). Don’t worry about what color it is as we will set this using Layer Styles effects in the Layer Palette.

So, once you’re happy with the shape, with the rounded-corner rectangle layer selected, click on the effects icon at the bottom of the Layers palette which is a lower case bold italic fx. Choose any of the options in the resulting drop-down menu and this will open the Layer Style dialog box which hosts a bucket-load of Photoshop goodness!

It doesn’t matter which style you work on first but let’s start with the gradient. Click on Gradient Overlay on the left-hand side of the dialog box.

Set your gradient by clicking on the, er, gradient and then choosing two colors in the Gradient Editor.

By clicking on the “color stops” at the beginning and end of the gradient, and then clicking Color underneath, you can eventually choose colors from the Color Picker. (Maybe one too many clicks here, Adobe!) The important thing here is to click to shades of the same color that are quite similar, so that the gradient isn’t too steep.

Next, let’s do the Stroke or border. After OKing everything, click on Stroke on the left-hand side of the Layer Style dialog box and, annoyingly you’ll get a default red border of 3 pixel. (How about making this default to 1 pixel, Adobe!?)

So, change the width to 1 pixel and pick the color of the stroke or border. It’s sometimes nice to make it the same color as either the beginning or end of the gradient. In this case the darker of the two colors.

Finally, we want to give the button a subtle one-pixel highlight on the top, under the border. This can be done by making a one-pixel high selection on a different layer but you can do it within the Layer Style dialog box as well. Click on Inner Shadow on the left-hand side.

Now, usually shadow styles are dark but they can provide glows or highlights. Click on the black rectangle after the Blend Mode drop-down and change the color from black to white. Choose Normal for the Blend Mode (you won’t see white in Multiply). Make sure the Angle is straight up 90º and that the Distance and Size are 1 pixel.

This is really subtle and you can barely see it on this lighter example (the left-hand one of the buttons at the top of this article. But on the darker one it is more noticeable. Either way, this one-pixel highlight at the top of a button gives it a slight 3D effect that will make the visitors love to click on it and your client happy to hire you again!

That concludes the styling for the button, now for the text.

Get the Type Tool (T) from the Tool bar and click on the Photoshop document where you want the text to go. Type your text: “Click me”, in this example.

Use the Options bar to select the font, color and size of the text.

To give the dark text a glow under it and the light text a shadow under it we can choose Drop Shadow from the Layer Styles dialog box.

Again on the left-hand example on the top, we want to give the text a subtle highlight underneath it so it looks like the text is slightly indented into the button. To do this we, change the Blend Mode to Normal and change the color from black to white. Make sure the Angle is straight up 90º and that the Distance and Size are 1 pixel. (For the example on the right, the Blend Mode will be Multiply and the color a very dark blue.)

And that’s how you do it in Photoshop. After your client has approved the design of the buttons you shouldn’t just save the image out as a JPG and source it in the HTML. You should use CSS to style up the element (which may be input or a p class or an a class).

How to style a button in with CSS

Here I will give you the styles, for the button below which is similar to the one up top but with slight smaller text. (If you’re reading this on an RSS feeder, by email or on a scraper site, you won’t see the following button so you best check it out on the website).

Here is the button styled in CSS

Here is the HTML for the text example immediately above. However, most of the time, buttons are marked up with the input tag.

<p class="button"><a href="">Here is the button styled in CSS</a></p>


Before you can start on the CSS you need to go back to the Photoshop document. Zoom in to your button and select with the Rectangular Marquee tool (M) a one-pixel wide selection. The height will be the eventual height of the button. You may like to take the Stroke off for this as it may complicate matters and you will be setting this in the CSS.

Cmd/Ctrl-Shift-C to Copy Merged the sprite and then make a New Document in Photoshop (Cmd/Ctrl-N).

The size of the new document will be the size of the sprite you just copied if you have Preset set to Clipboard.

Paste the 1-pixel wide background gradient into the new document and Save for Web & Devices (Cmd/Ctrl-Opt/Alt-Shift-S) as a fairly good quality JPG to avoid banding.

The other information you want from the Photoshop document of your button visual is the HEX value of the button’s Stroke or border and the HEX value of the text color.

And here’s the CSS.

p.button {
background: url("path/to/1px-wide-background.jpg") repeat-x #C2CBF4;
border: 1px solid #C2CBF4;
border-radius: 5px;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
font-weight: bold;
padding: 5px ;
text-align: center;
font-family: Helvetica, Arial, Tahoma, sans-serif;
font-size: 15px;
font-weight: bold;
line-height: 24px;
width: 350px;
}

p.button a {
text-shadow: 0px 1px 1px white;
color: #4E5FAB;
text-decoration: none;
}


Notice the background has a color as well as a background image (gradient) this is for people who browse without images.

Every button should have a hover state

Every link or button on a web site should change itself visually when the user’s mouse is over it. This gives the user the impression that it is a “live” or “active” area of the screen and therefore will do something if clicked, otherwise it’s just inactive text or imagery.

So make sure you set styles for the hover state.

p.button a:hover {
text-decoration: none;
color: #6E80D0;
text-shadow: 1px 1px 1px #fff;
}

p.button:hover {
border: 1px solid #8b9be4;
}

In this particular example the background gradient of the button doesn’t change on the hover but it should do. You can do this by doubling the height of the background sprite by creating a lighter or darker strip of pixels underneath and changing the background image’s y co-ordinate to show the different pixels.

p.button:hover { background-position: 0 40px; }

Here the background image will be moved up by 40 pixels when hovered over, showing the lighter or darker pixels. 36 pixels being the height of the button.

But I’ll do a proper sprite tutorial on another day!

Other tutorials

I have another tutorial about more bulging, shiny, jelly buttons. Here is one for a cool, shiny, web 2.0 button.

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

Let me know what you think

Any other top tips for web buttons? I would love to hear what you think in the comments down below. Plus, please feel free to vote for this article with a Tweet, a Like or a Plus One!

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.

After having such a positive response from my article about MailChimp Sidebar Widgets I thought I’d write another article about putting an AWeber form on a WordPress site with an e-book as an incentive.

Why do this?

Why email? Email is still one of the most effective marketing tools. It’s personalised, targeted and cheap.

Why AWeber? AWeber is one of the best email management companies. I would say the best, actually. Why? Auto-responders, ease of use, higher delivery rates, built-in A/B split testing features and, unlike MailChimp, they allow you to put affiliate links in emails so you can make more money with AWeber.

Why offer a free e-book as an incentive? People are much more likely to join an email list if they’re getting something in return. So, e-books, MP3s or video courses offered as “lead magnates” serve as a reason to sign up to a list. Once subscribers receive something for free they are much more likely to continue to read subsequent emails.

Video on how to put an AWeber form on a WordPress sidebar with an e-book as an incentive

Here is my video where I take you through the whole process of creating a list at AWeber and adding forms to your website.

What you need to start?

You need to create three pages on your website and an AWeber account. These are the pages:

1. A “Thank you” page. This is the page visitors see after entering their email address and submitting the form. They are not subscribers at this point. The are only officially subscribed after they have clicked a link in an email sent by AWeber. When they will go to this page:
2. A “Thank you for subscribing, here’s your free gift” page. On this page you should put your lead magnate, so add a link to the PDF or MP3 on this page with clear instructions on how to download it (right-click, etc.)
3. An “Already subscribed” page. This page is for subscribers who have tried to subscribe again. They may have missed your free offer last time, want it again or have just forgotten that they’re already subscribed. You would typically put a contact form on this page explaining that the visitor is already subscribed to this list and receiving updates but should contact you if they have any questions. If somebody wants to sign up twice to your list they are probably really interested in what you offer and should therefore be treated well!

Now you are ready to create the form for your website. In order to create a form you need a list.

Creating a new list at AWeber

The first thing you need to do is to create a new list. This is pretty simple. Head over to AWeber, click “My Lists” and then “Create New List” and give it a name. You will probably only need one list per website to start with.

Having clicked the “Create New List” button you will be presented with a form. First of all you need to fill out “Basic Information”, here you will need to enter:

• List Name: Give a memorable name for the list.
• List Description: This is to remind your subscribers why they are subscribed you may want to mention the lead magnate and the great free information that will be sent out to this list. This will be seen on your unsubscribe page so it should emphasise the benefits of staying on the list.
• From Name and Address: This should be as personal as possible. Subscribers should be encouraged to reply to the emails personally and if they see a real name here they will be more likely to engage with the process. I like to make this the main email address from the website rather than a Gmail or Yahoo address.

You are then given an option to receive emails every time someone subscribes to the list. Trust me, you don’t want to fill this out, AWeber provides you with fantastic subscriber reports.

The next stage is “Personalize Your List”, here you can enter:

• Company Name: You can make this the name of the website.
• Website URL: Pretty obvious.
• Email Signature: Again, make this a name of a human being.
• Company logo: Upload a small JPG.

Then you have an option of whether to automatically send updates to Twitter and Facebook of your broadcast emails. You also have an option to fill out some Global Text Snippets which are a convenient way to change information in many messages at once.

Finally, when creating a list you need to fill out the “Confirmed Opt-in” email. This is the email people receive after they have submitted their email address at the site. They need to click a link on this email to confirm that they want to receive emails so it is a great idea to re-write this to remind the potential subscriber of all the benefits of joining the list, including receiving the lead magnate. You can lose a lot of people at this stage so it’s best to give this a bit of thought.

AWeber along with all other reputable email management companies conform to the FTC’s CAN Spam Act. This requires that subscribers need to confirm their address after entering it at your site.

Creating a form at AWeber

Now that your list is finished you need to create a form so that people can sign up to it. Again, this is very simple with AWeber, go to My Forms at the top and click Create New Form, making sure you have the correct list selected at the drop-down menu top left. You can have multiple forms for any one list.

In the Design stage I like to create the simplest looking form and style it up on the site but I’m sure other people will prefer to use some of the templates AWeber has to offer. In this stage you can choose the fields in the form – maybe you would like to collect the names of your subscribers as well as some other information. However, the more information you request, the less sign ups you will get.

After the Design stage comes the Settings stage. Here you enter:

• The form’s name: This is for your benefit so you will maybe like to call the form after where it is situated in the site, ie “Sidebar sign-up form”.
• Thank You page: This is the “Thank you” page you have set up which does NOT have the lead magnate on it as it is the page subscribers see after having entered their email address but before confirmation.
• Already Subscribed page: This is the page we talked about earlier with a contact form explaining to the subscriber that they are already subscribed.

It is better and more professional to provide custom pages for the two pages above but not essential – your subscribers will see the bog-standard AWeber versions of these pages if you don’t.

Publishing the form on your website

The third step of creating a form at AWeber is called Publish. Here I click the first option – “I Will Install My Form”.

You have the choice of copying either a short JavaScript Snippet or a longer bit of Raw HTML to paste into your website. I prefer to take the HTML because you have more control over its style. As you can see in the above video, if you take the HTML you can get rid of the CSS that comes with it (which is long and unnecessary) and style up the elements in the CSS of your site.

Either way, with WordPress you can paste the JavaScript Snippet or the HTML into your theme files, blog posts, pages or into the sidebar Widgets as a Text Widget (as seen in the video example above).

What are we trying to do here?

We are trying to get the maximum number of subscribers possible. And the way to do that is to make signing up to the list and downloading the lead magnate as simple as possible.

It may be a good idea to send a follow up email to your newly-subscribed subscriber thanking them for their interest. This could include a link to the download page even though they were already sent to that page when they subscribed. Covering all bases is the name of the game with online marketing and you should never stop reviewing these processes because the slightest hindrance will lose you sign-ups!

And, as always, I’d love to hear what you think. Do you use AWeber? I know a lot of people do. Have you found the process of creating lists and forms an easy one?

Oh, and make sure you tweet, Facebook Like or vote for this post if you enjoyed 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.

With this in mind I have just written a comprehensive e-book on how to use the powerful free tools of blogging, internet marketing, social media and networking to get more business.

Please click this link to see the sales page for How To Get Clients.

The e-book

Here are the chapter titles of the e-book.

• How to set up a website
• Installing WordPress
• WordPress themes, plugins and customization
• What to do after installing WordPress
• More plugins and WordPress advice
• What to write about in your blog
• Optimize your site for search engines
• How to get links to your website
• How to automate and sync-up social media
• How to create a blog post in WordPress
• Adding images to WordPress posts
• Offering RSS feeds and RSS email subscription
• Creating an email list & an email newsletter
• Making a contact page

You may recognise some of them from the free e-book I offer when you subscribe to my site but each of the chapters that are repeated give at least 50% more information than the free version and there is loads more unique information besides.

I sent it out to a few industry experts to get their reaction and there was a great response. Douglas Bonneville said “Rob’s new eBook, How To Get Clients is simply amazing. Jam packed yet easy to read! Every single bit of good advice I could think of to tell someone either just starting out or already down the path is in there. Let me assure you that Rob covers all the essentials. If you start here and digest everything in this eBook, you’ll save a LOT of time and money. Trust me – just get this book and do what it says. You’ll be all set. You’ll see!”

There are other testimonials on the sales page.

The how and the how much?

This is the first product I have ever sold online and it has been an educational experience.

I created the e-book as an interactive PDF with InDesign and used Clickbank to handle the sales process. The e-book sells for $24.

The background

All of us have spent a few years working for someone else. Now we’re in the exciting part of taking our skills and starting a new business. The amazing thing is that everyone can do this. Not everyone realises what skills they possess.

My particular niche is graphic and web design. I had been using Adobe software such as Photoshop, Illustrator and InDesign whilst doing my work. However, I didn’t realise that I had other skills that would turn out to be just as important. These skills included writing short articles, contributing to forums and online communities, email discussion, researching on the internet, etc.

You can be the most technically gifted person in the world but if you don’t make an effort to present yourself in a marketable way you won’t make a penny while sitting at your computer at home.

Where do you start?

Start with a blog. Some people may think that a blog is too “chatty” or not professional enough but you can make a blog look like a company’s website.

You may want the home page to be a static introduction to the services you provide. You may like an About page with a thumbnail image of your face along with a short biography, emphasising your experience and aptitude.

However, your blog has to be constantly updated with the best quality content that you are able to write. Why? Because your blog pages are going to be the ones that people are going to read.

Trust me. Nobody is interested in your static pages. If you are an accountant and you put a page on the internet saying your an accountant, nobody will contact you. You have to write blog post after blog post and blow people away with your usefulness.

SEO, SM and link building are all very important but first you need to create great content. This is the first and most important rule of getting noticed on the internet and it’s not going to change anytime soon.

What to write about

Write about the skills you already have, and, most importantly, write about the skills you are already acquiring because at the “cutting edge” of what you do will get the most interest online.

The more you write, the more you learn. Creating blog posts teaches you how to create blog posts. If you read them over you learn how to write more successfully. You can see in your Google Analytics which posts are read the most. You can see from Twitter which titles interest people the most.

It won’t take you long before you are bursting with ideas for blog posts. At this stage it is important to keep the information stream steady. Don’t publish all the posts as you write them. Keep a constant rhythm to your posting. Keeping spare posts up your sleeve is a good idea you may need them when you “run dry”.

Who do you write for? Your clients? Not exactly. This is the internet. You need to garner interest from whatever quarter you can. Don’t try to write for everybody. Instead create characters in your mind of people that would be interested in your blog. Don’t worry if they’re not potential clients.

If you are a dress maker, write blog posts about making dresses. If they are good, people will link to them. A potential client will be impressed that you do this. However, if you write blog posts about how amazing you are nobody will read them.

So write about everything that concerns what you do and don’t hold anything back. This will attract traffic to your site and clients to your business.

What else is there?

The ebook has step by step instructions on how to set up WordPress and then optimize your site for search engines and visitors.

It also includes other important and essential steps such as how to get links to your site, how to leverage social media, how to use RSS to your advantage, how to set up an email subscription list, how to create a contact page, and more!

How can I get my hands on the e-book?

Click here to read the sales page for How To Get Clients e-book.

Tell me what you think

Here comes the most important part of this blog post and the reason I am writing this: What do you think?

Is this the right time for me to be selling my first e-book? What do you think of the title of the book, the design and the sales page?

What would make you buy or not buy this book?

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.

For a long time I’ve known that there’s a problem with my website. On one hand I want to attract clients to my business; on the other I want to attract visitors to my blog. Are they necessarily the same market?

If I met someone in an elevator how would I describe RobCubbon.com in 10 seconds?

The history of my site

My main objective when I first registered RobCubbon.com back in 2005 was for it to be a portfolio site to garner web and graphic design work.

I quickly worked out that by installing WordPress and blogging regularly about graphic design that I could get a huge amount of traffic from people searching for graphic design related topics.

All well and good, within two years of blogging I was able to give up the dreaded daily commute and work full time on my design business from home.

The blog became a little obsession of mine. I grew to love posting articles every week, communicating with my visitors and analyzing the site’s statistics to see what was popular and what wasn’t.

In my desire to attract a larger and larger audience I expanded my blog’s subject matter to include articles on internet marketing (blogging, SEO and WordPress) as well as articles on running a graphic design business.

Two different objectives

So the site grew to have a dual purpose. The first objective is to get graphic design clients and the second is to grow the blog’s community of graphic designers and others.

Having followed Derek Halpern and others I was left wondering about my “10 second elevator pitch” and how I would describe my site to others in a matter of a few words.

So I hooked up with Cheryl Pickett who runs a Blog Check Up service. Cheryl is an expert in blogging, content creation and helping business owners such as myself find their niche.

The difference between ‘the site’ and ‘the blog’

So with this in mind Cheryl and I sought to find the soul of my blog.

First of all, Cheryl told me to view the site and the blog as two different things. Allow the home page, the about page, the testimonials and the portfolio page to attract clients and the blog to attract the traffic.

If a potential client comes to the blog to read an article (about creating PDFs, for example) and then goes on to view the portfolio and contacts me – all well and good. But the blog is mostly about creating a community of graphic designers and others who are interested in reading and discussing the process of design and running a business.

The blog can also occasionally widen to take on the allied subjects of online marketing, SEO, social media, etc. But I shouldn’t become too general but to above all help designers and other people with online businesses.

Cheryl was also very useful in identifying the unnecessary areas of the site which were confusing and diluting the message. She pointed out that one of my categories was on giving up smoking. She was absolutely right about that and I have deleted that category.

I am clearer now that my blog is about graphic design, running a graphic design business and an online business.

I have separate blogs about WordPress, SEO, blogging and internet marketing as well as one about giving up smoking.

I will take steps to further crystallize my blog’s description so I can get ready for the 10 second elevator pitch.

What do you think?

One of my many faults is a tendency to be a “jack of all trades” and not to specialize in any particular field.

This is as a result of not wanting to get bored but I know the risks associated with being a generalist – by trying to talk to everybody you can end up addressing no one.

Have you been a visitor to this site for a while or have you just come recently? What do you think about the variety of topics that are addressed here?

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 has never been a better time to start an online business.

Many people ask me what skills and abilities you need to do this. Obviously you need the technical skills necessary to create the product or perform the service you are selling. But that isn’t even half the story.

Here are the skills that I have found to be indispensable:

The ability to write articles

If you ask me to give you one piece of advice that will earn you the most money when starting an online business it would be to blog for business.

The trick is to make the articles as useful as possible because the best SEO for a website is good content. These articles will draw in organic interest in you – some of this interest will be from potential clients.

Everyone can do this. A blog is a great way to find out what works and what doesn’t. If you keep on writing you will improve.

The ability to spell korektli

This may sound obvious but I have found that people will not want to employ someone who makes spelling, grammar or punctuation errors.

The ability to touch type

This is something you don’t hear a lot about but I think it’s an indispensable skill. I’m going to show my age here but I missed the first few matches of the 1990 World Cup to go to evening classes to learn touch typing on an electric typewriter!

You can do this online for free now – so no need to miss important sporting events. Just do a few hours of exercises learning where the keys are so you don’t have to look down at the keyboard when typing. After that it’s practice.

The ability to listen

I know I probably shouldn’t say this but I’m really not the best designer in the world. There, I said it! But I have great clients that come back to me again and again. And the reason for this is that I listen to them properly and give them what they want.

You need to put yourself in the client’s shoes and see things from their point of view. This isn’t only true with graphic design. It’s true with any online business. Put yourself in your client’s, your customer’s or your visitor’s shoes and see your service, your product or your website from their point of view.

The ability to manage client and customer expectations

“Under promise, over deliver.” OK, we’ve heard this one a million times but I try to build this into every project I do and I know it works. Try to surprise the client by giving them something that they didn’t ask for but really appreciate and they’ll keep on coming back to you.

Of course, allied to this is the necessity of keeping your client and yourself in complete agreement of the price and extent of the project at every stage. And you need to have a written record of this.

The ability to cross sell

Cross selling is the practice of selling to established clients or customers. So, when you’re buying from Amazon you will always be offered other relevant items.

This doesn’t only apply to products but I apply this to graphic design services as well. For example, if someone wants website design I will offer them hosting and maintenance.

The ability to contribute to the community

When you are starting an online business it’s easy to get a bit isolated but there is a great solution for this.

Use forums, blog commenting and social media to communicate with other people in your business niche. This means helping people and learning from people. It’s a two way exchange and this is the best way to form partnerships and alliances that will help grow your business.

This is not just online. Contribute face-to-face with local business people as much as you can, as well.

The more you help people; the more people will help you.

The ability to systematize

Systematize – ugly word, beautiful concept.

This means the skill in developing systems in your daily work that can be written down or recorded in order to speed up or outsource the process. There are only so many hours in the day for you to grow your business so your success will be determined by your ability to create systems that can be learned and replicated.

In the business of graphic design people will say: “I can’t do that – every client is different, every design is different – there’s no way I can replicate or outsource design.” Maybe not for the extremely creative aspects of the job but for everything else you can!

The ability to organize your time

Like many business owners, I have never found it difficult to get out of bed in the morning and start working. But, like many business owners, I have found it difficult to stop working!

You have to be able to organize and block off your time to perform certain tasks (many people find 25 minute “Pomodoros” useful). Continually review the important parts of your business machine – what needs to be done now and what needs to be done to speed things up in the future.

Read books

Well, you need to gather information from wherever you can get it but the two books that have been in my mind whilst writing this article are:

• The Seven Habits of Highly Effective People by Stephen Covey
• The E-Myth Revisited: Why Most Small Businesses Don’t Work and What to Do About It by Michael E. Gerber

The ability to take action

Matthew Ogbourne just told me through Google+. All the above are luxuries compared to the core requirement – action.

He’s absolutely right. Yes, in order to start an online business you need action. Just do it!

What about you?

Do you run an online business? Are there any skills you have needed (other than your technical skills) that have surprised you? Let me know in the comments below. And, if you found this article helpful, feel free to hit any of the tweeting, liking or voting buttons below.

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.

Most people will prefer to use sites like Aweber and MailChimp to create and send HTML email newsletters. However some large organisations prefer to do it all themselves. When this is the case you have to write HTML that will show the same newsletter across all browsers and all email clients (including Outlook).

Marking up HTML email is totally different to marking up a website in HTML. Be warned, getting an email to look the same across all clients is actually more difficult than getting a website to look the same across all browsers.

I recently had to re-do an HTML email newsletter for a client as their emails were not displaying properly in Outlook 2007 and Outlook 2010. I ended up completely re-writing the HTML as there are so many elements that don’t work in the Windows XP mail client. The job was a complete nightmare but I was left with HTML that would render the same across all browsers and email clients. Here’s what I learned:

Start correctly

You are better off writing your HTML emails in XHTML 1.0 Transitional. There’s not much point in putting anything else in the <head> of the document but the “Content type” and the title, so here’s the basic structure of your HTML email.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert email subject here</title>
</head>

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<table width="600" cellpadding="0" cellspacing="0" border="0" valign="top" align="center">
<tr>
<td>
<!-- add your content here -->
</td>
</tr>
</table>
</body>
</html>

The above creates an email centered with a 600 pixel width – don’t make them any wider.

Use tables for layout

We’re going back to the nineties here, as you can see above the layout is structured with tables. Use the table tag (<table>) to begin with, then order the rows of the table with the table row tag (<tr>) and then sort the individual cells of the table with the table data tag (<td>). Use rowspan="2" to merge a cell (or a td) over two rows and colspan="2" to merge a cell or a td over two columns.

Use percentages for widths

After you have specified the width of the whole of the email in pixels table width="600" (and notice you only put "600" and not "600px"), specify all other widths of tables or tds as percentages. So use <table width="50%"> or <td width="33%"> to divide up your email into halves and thirds.

Use cellpadding to space text away from the edge of the table.

Always use absolute paths for images

Bring in images like this:

<img src="http://www.website.com/html-email/images/image.gif">

not like this:

<img src="images/image.gif">

Never use padding, margin or floats round images

This will not work in Outlook. Instead you can get an image to go on the left with align="left" and put a “margin” around it so that text doesn’t butt up next to it with vspace and hspace. So this code:

<td width="33%" valign="top" >
<img src="http://www.website.com/html-email/images/image.jpg" height="68" width="108" border="0" hspace="5" vspace="5" align="left">
<p style="font-size:12px; line-height: 14px; font-family:Arial, Helvetica, sans-serif; margin: 0; padding : 0 ; color:#356560;">This text will run around the image and underneath it in all browsers and across all email clients included Outlook 2007 and Outlook 2010.</p>
</td>

Produces this:

It’s a bit annoying that vspace and hspace doesn’t allow you to add space just on the right or just on the bottom but it’s better than no space at all.

Don’t put CSS in the <head>

It will be stripped out by several HTML clients so styles need to be inline like so:

<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000;">This is sans serif, 12 pixel sized, black text</span>

Don’t use background images

You can, but they won’t be seen in Outlook. So whenever you specify a background image for a heading which can be seen by most of your newsletter subscribers, always make sure there is a background color as well so that Outlook subscribers see the same effect.

So, for example this HTML:

<td width="100%" background="http://www.website.com/html-email/images/image.gif" style="background-color: #00c5ca; height: 28px;">
<span style="font-weight: bold; color: #FFFFFF; font-size:14px; line-height: 28px; font-family: Arial, Helvetica, sans-serif;">  Headline to go here
</span>
</td>

will show the background image for most of the newsletter subscribers:

but will show the background color for the newsletter subscribers who use Outlook (because of the background-color: #00c5ca in the inline style):

Validate!

One of the most useful best practices I’ve learned whilst doing HTML email (and websites) is to validate the HTML wherever possible. You can input HTML directly or paste in a link and the W3C Validator will tell you where you’re going wrong. Make sure there aren’t any open tags. Some browsers may do a decent job of displaying invalid HTML pages but Outlook and other email clients won’t be so forgiving.

Don’t get angry, get even

Don’t bang on the table, pull your hair out or write vitriolic attacks agains Microsoft in your Twitter feed like I did – it won’t get you anywhere. Instead have a cup of tea, breathe deeply and affirm “I will beat this. I will do this. I will finish this.”

When in doubt, print it out

If your eyes are squinting at the computer screen, try printing out the HTML (presuming you’re not short of paper or printer ink). When looking at the HTML on paper you can cross off the tab pairs which makes things easier to understand.

Other HTML email “rules”

You can’t do everything in an HTML email that you can do on a webpage. It is important that your client understands this. Here are a few more do’s and don’ts for HTML email:

• No JavaScript
• No CSS shorthand – don’t use “font: 12px/15px Arial, Helvetica” for example, see the example above for the long form of this CSS code
• No CSS hacks
• Use the alt, height, and width parameters with all images
• Obey the CAN SPAM Act, and sleep well

Have you created HTML emails?

How do you do them? I always try to set my clients up with a MailChimp or Aweber account so I don’t have to do this. However, clients often ask for them to be created. Have you ever had to do this? What tips do you have for creating an HTML email newsletter?

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 has never been a better time to start a web design business. Although the western world’s economy is stagnant and demand flat the opportunities for entrepreneurs are enormous. If you have a passion and love for the internet, you can do it.

You don’t need a lot (in fact you just need a laptop, phone, electrical supply and decent internet connection) but here’s what I’ve learned in the last few years.

Business

In order to have a successful web design business you need to attract good clients. Trust me, the attitude of “any client is a good client” will not get you very far. By all means, give the same great service to all clients both big and small, but you will need regular and quality work and you are more likely to get this from quality clients. And “quality clients” are usually – but not always – from quality companies.

Either way, you need to look, talk and act professionally at all times. You will never get anywhere by being “cheap and cheerful”.

• Open your own business bank account with your business’s name. If you set yourself up as a freelance, you’ll earn a freelance wage. The bigger and more professional your company looks, the better it will be for you.
• Design your own logo. I’ve found designing my own logo to be one of the hardest jobs ever but it has to be done. Put this logo everywhere: on your invoices; your contracts; in your email signature.
• Purchase a domain and use it for your website and email address. If you want to be taken seriously you must purchase you own domain (from GoDaddy or NameCheap, for example) and then have an email address which is you@yourdomain.com.
• Build your own website advertising your services. You will need to spend a lot of time on this. I would advocate using WordPress for your business website and use a blog to attract business.

The paint is never dry on a designer’s logo or website. You should be continually looking for ways to improve your website as it is the hub of your brand. If you haven’t started blogging then start now. Write about what you do – it’s a fantastic way to get clients from long tail keyword searches.

How to get clients

Getting clients and establishing a steady work flow is the hardest and most important challenge your web design business will face. Your best clients are your current clients as you will find people will come back to you after you’ve done a good job for them. But, how do you start the ball rolling?

• Attract clients through your website. This is the best way to do it. Work hard on SEO and building links to your website with “web designer” in the anchor text. Make sure all your online activity points back to your website. Nurture your relationships with other designers as well as with potential clients online.
• Get work through social media. To be honest, I have never got much work from Twitter or LinkedIn, however I have found developing relationships on social media with designers and other professionals indispensable in terms of what it’s taught me.
• Meet potential clients offline by joining professional groups. As much as I’ve had great success getting clients online, you can never beat face-to-face interaction. It may take you a while to find out which where your potential clients will be hanging out but the Meetup website can help.
• 3rd party sites. I’ve never been a big fan of these sites and I certainly don’t use them myself but other people do so I will mention a few here. Try PeoplePerHour, oDesk and Elance.

The best network is your network. Most business comes from contacts you already have. But constantly strive to attract potential clients by performing well in the search engines for certain keywords.

You may like to read my survey on how designers work, how they find clients and how they get paid.

Skills

I can’t tell you here how to design a website. You do need technical and creative skills. But, surprisingly, these are NOT the most important skills you need.

• Listening to and understanding clients. The most important skill is your ability to master client relationships. You need to put yourself in the client’s shoes and deliver exactly want the client wants and no more and no less. Lots of designers suffer as they think they know what’s best for the client. The first rule of graphic design is to listen. Don’t ever get carried away with your talent and think that you know everything.
• Understanding the web and UI. The reason you are doing this job is because you have a love of the internet. Make sure you harness that love correctly. Always think of the users as well as the client when you are designing.
• Creativity. You shouldn’t only be creative in your designs to develop your style. You should be creative in your relationships, your marketing and every possible area of your business life. Don’t get stale and always look for fresh challenges.
• Ability to write well for the web. Another skill that is not often mentioned is the ability to touch type and write well for the web. Your clients will thank you if you re-write areas of their website so that they work better and you need to always write good English with correct spelling and grammar in your emails.
• Technical skills. At the very least you will need to master HTML and CSS as well as a graphics program such as Photoshop or Fireworks. HTML shouldn’t take you long to master. CSS will take a little longer. Use Firebug in Firefox and Developer Tools in Chrome and Internet Explorer to give you a start. You may like to progress onto JavaScript, PHP, or whatever you are interested in. Try W3Schools for tutorials. The trick is to keep learning. And not just about website design – it’s about designing email, mobile sites and apps for iPhone, Android and iPad.

Tools

I did a survey recently and discovered some interesting facts about the hardware, software and backup graphic designers use. Certainly everyone’s different. Don’t worry, you don’t have to use Macs but unfortunately most of them use Creative Suite.

• Hardware – The type of computer you get is largely up to you. I’ve been very happy using iMacs for the last few years. I also need a PC for testing. I would urge you to max out your RAM, disc space and broadband connection, but … we all have our budgets!
• Software – Although it is perfectly possible to run a design business with no software at all I wouldn’t recommend it. Most of us use some sort of text editor (Dreamweaver, TextMate), some sort of graphics program (Photoshop) and some sort of FTP client (Filezilla).
• Backup – Not strictly necessary, but incredibly handy. I would advise backing up onsite with an external drive and offsite with something like Dropbox.

Self motivation

Personally, I couldn’t think of anything better than working for yourself at home so I’ve never found motivation a problem.

However, for some people it is and you can learn how to work from home successfully by exercising and organising your time properly.

Collaboration

Since you are working in splendid isolation it’s always great to meet up with other web designers. You can moan about Microsoft together (very therapeutic), exchange jobs and help each other out with bugs and other problems. I have this relationship with Derek Kirk who lives near me in north London. Derek runs a couple of great sites called creative web design and web designers London.

It’s also good to form partnerships with all sorts of professionals and experts. These are great as a sounding board for ideas and to exchange advice and work. Try to network on behalf of your clients as well as on behalf of your other contacts.

Payment

Don’t forget at the end of the day you are running a web design business to get money. Whether you are charging fixed-rate fees or hourly/daily/weekly rates you should be charging at least twice as much as you would earn in a normal job to complete the same task. You will never be able to do web design for 8 hours a day so the charging structure should reflect this.

Make sure the price as well as the nature and extent of a web design job is properly recorded in emails or in a contract. You may like to insist on half the fee upfront with new clients.

Finding and developing your niche

As with most design work you may want to specialise into a certain type of client or a certain type of web work. This may come as a result of your passions or you may be moved in a certain direction by the tide of work that comes your way. Whilst it’s good to specialise you should always be alert to the new developments and opportunities within the industry.

Diversify and outsource

There are many ways to diversify your design business. You can offer your clients hosting, social media packages, email marketing, website maintenance, SEO services, copy writing, etc. you can branch out into a host of different directions. If you are asked to do something by a client it is usually a good idea to say “yes”. This way you can get paid to learn a new skill. Sometimes it may be possible to outsource new services.

You can do it!

I’ve wanted to write this article for ages and I’m very glad I’ve written it. I would really love to see you, the person who is reading this, try to earn money this way because it certainly beats working for somebody else.

You can start anywhere, anytime, anyhow. You just need a website. Even if you have a fulltime job at the moment or if not, you can start this work in your spare time (as I did) and take it from there.

I don’t want to make out that it’s easy. Of course, you have to work hard. But I have been getting paid to do something I really love so it would be great to see other people benefitting from this unique opportunity of our times.

If you have any experiences or you would like some help in this area, please leave a comment down below.

And don’t forget to click one of those nice sharing buttons too!

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.

One of the questions I am most commonly asked by my readers is how do I sell digital products online?

E-commerce sites can be complicated to set up but, thankfully, I can recommend two very cheap and very easy ways to sell digital products online with E-junkie and Clickbank.

Selling digital products with E-junkie

E-junkie pros and cons

• $5/month (free for the first few weeks)
• Product is uploaded to their server and distributed by them
• Money goes direct to you (PayPal)
• Annoying site with Flash
• Create and manage an affiliate program for your product – you have to “manually” pay your affiliates each month
• Multiple payment choices for buyers: PalPal, Google Payout, Credit Cards, etc.
• Unlimited number of products, bandwidth and transactions

E-junkie first came to my attention through Pat Flynn of Smart Passive Income. If a clever chap like him is using this service, it can’t be too bad! It may have a terrible name but it does have a good reputation.

E-junkie set up

I found with E-junkie I could literally set everything up in 5 minutes.

1. Set up a PayPal business account
2. Set up an E-junkie account, giving them your PayPal email address
3. Upload your product and get the button code
4. Paste the code into your site next to the product

Your website visitors will see an e-Junkie “BUY NOW” button which will take them to an external page where they can choose their payment process (Credit Card, PayPal, etc.) and confirm their order.

However you may want to amend the code to show your own purchase button rather than using the generic E-junkie one. If you wish to do this you can. The only important bit of the code you get from E-junkie is the link.

E-junkie integrates through a default business PayPal set up so you should get the money from each sale straightaway. However, I had to manually approve my first sale through PayPal (meaning my first customer had to wait for their product!) I solved this by changing a setting in my PayPal profile but keep an eye out for this.

E-junkie is an extremely popular platform – cheap and featurefull.

Selling digital products with Clickbank

Clickbank pros and cons

• $50 one-off charge (plus they take 7.5% of product price)
• Product remains on your server
• Customers pay Clickbank and then Clickbank pays you
• Ugly site but at least it doesn’t have Flash!
• Create and manage an affiliate program for your product – bigger affiliate market than E-junkie and your affiliate payments are taken care of automatically
• Multiple payment choices for buyers: PalPal, Google Payout, Credit Cards, etc.
• Unlimited number of products and transactions

Clickbank is another long-established, highly recommended option for selling digital products online. It is particularly popular in the info-product market and has a real “Internet Marketing” feel to it. It is the place to go to find information products to sell as an affiliate.

Clickbank set up

Setting up a product for sale for the first time at Clickbank will take you a bit longer than at E-junkie but it really isn’t difficult. Here’s what you need to do:

1. Set up your sales page with the price, the 2 month money back guarantee visible and your contact page link clearly visible. Add this code to your “Buy” button: <a href=”http://ITEM.VENDOR.pay.clickbank.net” target=”cb”>CLICK HERE TO PURCHASE</a> – replace ITEM with the item number of the product (1 if it is your first product) and replace VENDOR with your Clickbank username
2. Set up the thank you page with a link to download the product
3. After setting up an account with Clickbank go to Account Settings > My Products > Add Product and fill in the form
4. Perform a test purchase. Go Account Settings > My Site > Testing Your Products > Edit and you will get some fake Credit Card details in order to make a purchase for which nobody pays!
5. Wait for Clickbank to approve your product

Clickbank will then get back to you within 24 hours to say whether or not the product has been approved. They are really helpful if you have made any errors.

This is only the first time. You don’t have to get your product approved this way for any of the subsequent items you wish to sell.

The money you make is sent to you by check or can be paid direct. You pay a $2.50 processing charge so increase the payment threshold to make sure that doesn’t eat into your profits!

General tips for selling digital products online

With payment gateways, affiliates and other things to consider selling products can be a confusing business. However, it is important to keep things ultra simple for the end user.

• Get other people involved – show your sales page to as many people as possible, persuade friends and family members to buy your product (give them the money) and see what they say
• Buy your own product – this isn’t going to cost you much money (7.5% of the sale price in the case of Clickbank) but it’s well worth it for the piece of mind
• Show currency conversions – typically the products will be for sale in US Dollars and the payment gateways will show conversions to local currencies on checkout. However, it won’t hurt to put some Euro and Pound Sterling conversion estimates on the sales page for your customers. Just make sure they realise they are estimates!

Which is the best way to sell digital products?

It depends on what you’re looking for. If you have an info-product that you are hoping to get affiliates to sell in great numbers then definitely go for Clickbank as they will have greater numbers of potential affiliate partners looking for products.

If you just want to sell a digital product and you’re not too bothered about getting affiliate partners then E-junkie is more simple to set up and provides an excellent service.

Over to you now!

Have you ever sold digital products through a website? Ever used E-junkie or Clickbank? What have your impressions been?

Or are you thinking of doing this for yourself or a client? Was this article useful?

And, tweet me, like me, +1 me! Thanks.

The links to Clickbank and E-junkie sites are affiliate links and I will make a few dollars if you sign up for their services after having clicked them. If you don’t want me to make any money just Google them and I’ll forgive you!

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 best time ever to start and grow your own business. Lack of demand forces businesses to get creative. During the good times when the phone rings off the hook and orders are flooding in, energies are directed towards coping with work flow.

I have found diversification has increased my revenue substantially. The online landscape is constantly changing and clients need a helping hand to negotiate their way.

Graphic designers are incredibly lucky to have so many allied skills and services branching out from the core discipline.

People who start websites will want SEO services. Businesses who are having promotional materials printed will want copy checking, writing and editing services. And if you are at all interested in marketing, then there is social media to negotiate.

Here are some new ways where you can make more money whilst whilst you deliver core design services.

Text editing / Copy checking

Design clients are often busy people. They know what they want to say but they sometimes don’t have the time to say it properly. Very often text supplied by the client can be modified quickly and easily.

This is a service you can provide to any client quite cheaply. An extra pair of eyes can check for spelling and punctuation errors as well as keep a provide a consistent tone to the text. I have found clients to be very happy to pay a little extra for this service.

Writing

Sometimes the customers I work with can’t afford to get their text written by a professional copywriter. When I can see they are struggling with poorly worded copy I will always offer my copywriting services.

If you spend everyday writing you get better at it and I’m a much better writer than I was even 2 years ago. So, write, and keep writing! You will develop skills that your clients will be only too happy to pay for.

SEO

When designing and developing a website for a client, it’s usually sensible to think about SEO right from the get-go.

As always, you’ll need to understand your client’s market and products properly and research what keywords will work best for them and build this into their optimised website. I offer this as part of my basic website package.

Once you know what keywords your client needs to target and which pages are optimised for which subject, you use this information to offer your client an effective link building campaign.

If you would like to outsource link building there are some great low cost companies that will do this for you. Try oDesk and search for link-builders and SEO specialists. You can also find some great deals at Warrior Forum classifieds, BackLinkForum and Fiverr.

Whether you are choosing someone on oDesk or a service on a forum it is essential that you read carefully all the reviews on these sites and only choose those with positive recent comments.

Social media

OK, I know the world doesn’t need any more “social media experts” but you can offer your clients some useful packages. If your client is setting up a new website you could easily offer a social media package that could include:

• Setting up a Twitter profile with background image and colors in keeping with the client’s identity
• Automating some features of the Twitter feed using services like SocialOomph and Dlvr.it
• Creating a Facebook landing page that prompts people to “Like”, sign up to a newsletter or has a jQuery image slider
• Automating your client’s Facebook wall to display their blog posts as soon as they are published by using Networked Blogs or RSS Grafitti apps
• Starting a YouTube channel with color and background image in keeping with their website

Use productivity techniques that you have learned syncing social media for yourself on your clients and they will love you for it!

Offer different types of web service

People are looking beyond the traditional blog being the hub of their online presence. iPhone and Android apps are a huge growth area you can move into. In addition, there are plenty of other website types you can specialise in:

• e-Commerce sites – Although there are some solid WordPress plug-ins you can use for e-Commerce sites, a large shopping cart would probably be better handled by a dedicated shopping CMS like Magento
• Membership sites – Offer your clients the ability to build a membership site with WordPress and WishList Member
• Multi-lingual sites – Give you clients the option of adding a multi-lingual WordPress site with WPML
• Social sites – You can even offer clients their own social network with Buddy Press
• Forums – Forums can be a lot of work to get going but are fantastically easy to set up with phpBB, BBpress, or vBulletin

In addition to offering different types of website you can offer complete domain registration, web hosting and email hosting packages.

• Domain registration – this is a service you can offer your client that will actually save you time. I have sometimes found it very difficult to get a client to change the name servers on a domain. By taking charge of the domain registration using a company like Namecheap you have control over everything
• Web hosting – when you host the client’s website on your own server it is easier to maintain and you can receive almost passive income for hosting and maintenance
• Email hosting – use Google Apps for Business to host your client’s email
• Email marketing – offer email marketing and list building services by using MailChimp and Aweber

There are a host of other internet services you can offer your client within the basic design and development package. Also, you will learn how to provide some of these services by being asked to do them for the first time by a client. As your knowledge and ability increases the more you can offer to clients. This is huge!

Offer packages

Your client sometimes doesn’t want you to do one little task in their big project. There are enormous economies of scale and consistency benefits to be had if one company handles as many things as possible. Be that company! Offer your client complete packages so they receive a portfolio of services at a reasonable price.

Tell us what you do?

Do you run a graphic design business, any other type of online business or do freelance work on the side? How have you diversified to earn extra money? Have you outsourced? Is there another area of business you’d like to move into soon?

Leave your comments underneath – we’ve been having some great conversations here recently. And, if you wish, please Tweet, Facebook Like or Google +1 this post!

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.

WordPress is the best CMS (Content Management System) for business websites. There are many successful business websites that use WordPress, for example Ford, The Wall Street Journal and Sony. WordPress is usually chosen to power a company’s website because

• it creates websites that are well-structured for SEO and can rank highly in search engines
• it can be easily updated by multiple individuals with no knowledge of HTML
• it is the most popular CMS on the planet creating a community of users and developers that can help you out if ever in need

A business site should have a home page that explains the USP of the company in a few words. From this page users can easily navigate to other areas of the site to find out further information about products and services.

Every website should fulfil a purpose. The point of many business websites is to generate leads or get people to contact the business so that they might purchase something.

I try to get business owners to condense their pages in the top navigation down to 5 or 6. These will include, typically, a Home page, an About page, a Blog and a Contact page as you can see below on a site I designed recently for an IT company.

The static pages are the “shop window on the world” that should be endlessly tested, updated and improved. However, the more important pages are in the blog which should include compelling content that prospects will value. This will be the content that draws in traffic and converts visitors into clients.

Here are some tips and techniques that I’ve used for many company’s websites.

Put keywords in the site’s title

In the WordPress administration section go Settings > General and, instead of putting your company’s name (for example, “Harrison and Sons”), put some words about what the company does (for example, “Widget Manufacturers, Harrison and Sons”). This will increase your chances of being found in Google by people searching for “Widget Manufacturers”.

Create a static page for your home page and a separate section for your blog

Still in the WordPress back end, go to Pages > Add New and create a new page. With our example you would maybe entitle that page “Widget Manufacturers, Harrison and Sons” and create an eye-catching and succinct synopsis of what value you give to your clients with links to other pages in the site for further information.

Again, go to Pages > Add New and create a new page with the title “Blog” and publish it.

Then go to Settings > Reading and select your static page (as per our example “Widget Manufacturers, Harrison and Sons”) for the Front Page and select the “Blog” page for Posts Page.

This way visitors to the home page will see a well-presented business website. But the blog will eventually draw in new visitors as fresh content does better in search engines.

Contact page

If getting visitors to contact the company through the website is the main objective of the site, then you should have a clear call-to-action on the Contact page. Mention how contacting your business will result in a quick benefit for the visitor. You may wish to offer a 10 minute free consultation, this would increase the number of contacts.

Offer as many ways to contact you as possible:

• Phone (with international code)
• Mobile
• Contact Form
• Email address

With the email address, don’t just give out your email address or even present it in the mailto: tag. This will attract spam. Instead you can cloak it with this bit of JavaScript which will open your prospect’s email client and start an email with the word “Enquiry” as the subject. This will help you track the effectiveness of this page.

<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>

Replace “rob” and “robcubbon.com” above with your email name and domain. Here is how the above JavaScript appears in the browser:

Always use an email address with the same domain as the company, never use a free email service like Gmail for a business website.

The best techniques to use in business websites

Company websites need to walk the line between being professional enough to attract big businesses and down-to-earth enough to build a community that will comment and promote the site. There are various things you can do to achieve this:

• Turn off comments on pages but keep them on the blog posts
• Have a call-to-action in the sidebar with further reasons for prospect to contact you. For example: “we can either help or be able to recommend other companies for you”
• Other “Hire Us” links in the top navigation bar or in a Hello Bar. These extra calls-to-action should be subtle, well thought out and continuously tested. You shouldn’t put them everywhere and look too desperate!
• Do not have any ads on the site! Particularly not on the home or static pages.
• Use WordPress page templates to get rid of the blog-like sidebar from the home or portfolio pages.
• Social proof. Create a testimonial page including quotes from other companies that have used your services and have positive thing to say.

What about you?

Do you WordPress as a straightforward blogging tool. Or do you get clients to contact you through your WordPress website?

Do you employ any tips or techniques to get prospects to contact you?

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’ve only used a gun on one occasion – the results were catastrophic.

That sentence has nothing to do with this article, its only purpose was to get your attention. And that second sentence’s job was to keep you interested.

Once I have got you to read the headline, I have maybe 2 to 3 seconds to get you to hang around and read the rest of this article.

This is the way of the internet. In his book Don’t Make Me Think, Steve Krug advises us to reduce “noise” on web pages. With less distractions visitors understand the site, feel smarter, and are more likely to return.

And recent experiments at Columbia University show people have poor recall of facts that are available on computers (but enhanced recall of where they are stored). Computers and the internet are changing the nature of our memory and the way we think. And online, at least, we have a shorter attention span.

What does all this mean to you? In a web of trillions of pages and a complex life full of “noise” you need to get yourself heard. So here are some content, usability and life tips to get you started:

Add impact and decrease noise

With everything (not just websites but with emails, documents, presentations, your desk) decrease clutter. Go through your sidebars and headers and ask yourself what is really necessary.

When writing emails to clients reduce everything down to what they need to know. Don’t tell them how hard the job was, tell them you’ve done it.

De-clutter your writing. Do not use a 5-word sentence when a 4-word sentence will do.

Make sure you are creating content that the visitor needs

We all know that the content is all important. But if you’ve been publishing for a while and no-one seems to be listening, you may need to present the content in terms of its usefulness to the user.

Try to establish an emotional need in the visitor for the material you are offering.

Spark curiosity, point out benefits and emphasise the uniqueness of your content.

Be consistent

Try to maintain consistent color schemes in your websites. Use the same color for headlines, the same color for subheads, the same color for links (and make sure they always have a different hover state).

Be consistent in everything you do online. Always maintain the same tone, same avatar, same attention to spelling and grammar (whilst always keeping an open mind about your goals and how to achieve them.)

Blog, comment and tweet consistently. This is more important than quantity. If you can’t maintain the quality, drop the frequency, but make sure you do everything well and consistently. Who would you want to work with, someone who bursts on the scene with a flurry of activity or someone who’s been doing great work for a period of time?

Visualise and illustrate

Glance at the example below. Is it better to present the options with text or buttons? Which will the user react to faster?

Apply this principle elsewhere. Don’t make notes for yourself make mind maps with lines, arrows and circles to represent the relationship between the elements. Illustrate web how-to’s with screenshots.

Divide information down into bite-sized chunks

When writing long documents it has always been important to order the information logically. Online these information chunks need to be visually differentiated.

Reading a European novella on holiday is one thing, combing the internet for information is quite another. Consider the reader when you are presenting text. If your information competes favorably against distractions your visitors will reward you with loyalty.

Simple vs Epic – Simplicity does not mean “dumbing down”

I’m a huge fan of Corbett Barr from Think Traffic. Corbett’s USP is to concentrate on creating great content rather than relying on the latest SEO or SM trick to increase interest in your site. Corbett will encourage you to write epic sh*t – which means to inspire people, change lives and blow people away with your usefulness.

There does seem to be a movement towards creating longer blog posts. For example, another favorite blogger of mine, Glen Allsopp went over the 5,000 word mark with a post on improving conversions. However, if you scan through the post you will see that no paragraphs are longer than 5 lines and the article is continually broken up by images, video, subheads and sub-subheads.

But, epic doesn’t have to mean long. One of the most successful bloggers out there, Seth Godin, usually only writes 200-300 word articles.

Test and experiment

Don’t just imagine what people want – test. There are a number of free tools that can help you do this.

• Google Analytics – Use it to see what your visitors that stay the longest are searching for, what are the most popular pages, which are the most popular paths towards your goals
• Google Website Optimizer – A/B test squeeze pages and sales pages
• Email subject lines – A/B test emails with different subject lines to see which is the phrase your subscribers preferred to open and click on
• Email different posts – Send emails with a few links and see which link is most clicked on
• Try different sidebars and headers – Write a resource page giving away your best information with links your best articles. Add a very visible link to it on your website and see if it’s popular. Change the wording of the link a few weeks later and see which is the most popular way of wording what you do best.
• Google Keyword Research Tool – discover what words are being searched for in your niche
• Use the Redirection plugin for WordPress to test which positions of which links do best
• Use ClickTale and UserFly to evaluate the user experience

This is all about me you

These areas: creating content, imagery, impact, consistency and the ability to test, are ones I’m constantly trying to improve in my online business. I know I just skimmed the surface as to how to do this. But I hope these reminders were as useful to you as they are to me.

I really need to run the credits for this article. Thanks for the inspiration to the two bloggers mentioned in this article: Corbett Barr and Glen Allsopp. I have also been receiving some great advice from Chris Kahler from BloggerITUS.

Further thanks go to my new Google+ friends who contributed to a great discussion on this subject and provided a lot of the ideas here. Apologies if there’s anyone who can’t follow that link but you can always contact me if you want an invite.

And, as always, I’m interested to hear what you think about your ideas of what to focus on as you create better content for your users and better experiences for your clients.

(PS. I’ve never really used a gun before – that was creative license!)

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 is usually better to show a client what a website will look like before the development stage starts. Here are a few tricks for creating website visuals in Photoshop.

Getting started

Create a large Photoshop document, at least 1200 pixels wide by 900 pixels deep (this can be increased later with Canvas Size), RGB at 72 dpi.

I then usually center the design within the 1200 pixels wide canvas by drawing a couple of guides. (Pet peeve: websites that are aligned left with the browser window.) Draw vertical guides by dragging them out from the vertical ruler on the sides of the document. If you can’t see the rulers go Cmd(Mac)/Ctrl(PC)-R.

You can do this by eye, although I usually want the width of the website to be exactly 1024 pixels. Zoom in [Cmd(Mac)/Ctrl(PC)-plus] for greater accuracy. You can view/hide the guides by going Cmd(Mac)/Ctrl(PC)-;.

The above example of the guides on the canvas is viewed at a magnification of 17.5%, obviously you will want to work on your design at 100% magnification. The magnification percentage can always be seen in Photoshop at the top of the document’s window.

Use vectors, Shapes and Smart Objects

When creating squares, rounded corner objects, buttons, navbars, sidebar backgrounds, etc., it is better to use the Shapes from the Tool bar rather that to create them with selections. These are essentially vectors rather than bitmaps so later editing will be easier. If you want to change their color you can click on the layer thumbnail box and select a color with the Color Picker, or add a Layer Style if you want a gradient.

Similarly, when dealing with logos or any graphical element within a website design it is always better to use vectors not raster graphics. So when pasting in your logo from Illustrator, be sure to keep it as a Smart Object as you can see below. Now you will be able to increase and reduce the logo’s size multiple times without worrying about it’s quality. If you enlarge and reduce a bitmap logo you will soon see the quality affected.

Another benefit of Smart Objects in Photoshop is that you can double click their icon in the Layers palette and edit the graphic in Illustrator, once this is saved the Smart Object updates in the Photoshop document. If this Smart Object has been copied and used multiple times in the design (an arrow, an icon, a graphic device) then all instances of this Smart Object will be updated. This is awesome!

Name Layers and Layer Groups to keep everything organized

A web page can easily have over a hundred different elements and you will need to be able to select them and groups of them quickly in order to move them around.

So group all your layers into layer groups of the main areas of the page (header, footer, sidebar, etc.) this will make things easier if the client suddenly says, “can we have the sidebar on the opposite side?”

One little irritation is that inevitably as you work down the page from top to bottom on the document the layers end up stacked the other way round. I haven’t found a way around this yet!

Layer styles for text shadow

We all love layer styles for the ability to add drop shadows, glows, gradients, etc., on to almost anything. It is particularly useful when mimicking the CSS3 text shadow effects in browsers.

For dark text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the Distance and Size to 1 pixel.

For light text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the color from black to white, the Blend Mode to Normal from Mulitply, and the Distance and Size to 1 pixel (see below).

Grab your color with the Eyedropper

To use the Eyedropper tool, simply press the I key and click on the area you want to sample the color from. Then click on the foreground color at the bottom of the Tool bar to open the Color Picker.

You then get a HEX version of the color that you can use in your CSS mark up. Click “Add to Swatches” if you want to easily access this exact color elsewhere in the design.

Presenting a web page design to a client

You’ve finally finished the page and you save it out as a JPG, what do you do? Do you just send the JPG to the client? No! Put it in a web page for the client to look at in a browser so there’s no confusion as to how it looks.

It’s also a good idea to add any hover states or drop-downs in the page so the client knows exactly what they’re getting.

Here is the HTML I use to show a large JPG centered in a webpage:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Home page visual number 1</title>
</head>

<body style=”padding:0; margin:0; background:#fff”>
<div style=”margin: 0 auto; padding:0; height:1900px; text-align:center;”>
<img src=”home-1.jpg”/></div>

</body>
</html>

You have to enter a height on the containing div if the page is very deep, otherwise the client won’t be able to scroll down.

Save it as “home-1.html” along with the JPG in a folder on your website (I use /dev/client-name) and send the link to the client. When the client comes back with comments, just re-save the HTML file as “home-2.html” and don’t forget to change the image name and title. This allows easy reference to earlier versions.

What about you?

What little tricks do you employ when creating the visual look of a website in Photoshop? Or do you use Fireworks or some other tool? Please put your excellent suggestions plus any queries in the comments section down below.

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 regular readers of this site will know, I’m going to be publishing an eBook called How To Get Clients very soon. (Ed. Already published – click here to download full version of How To Get Clients).

The eBook will contain all the techniques I’ve used to set up and run an online company that gets clients from its website.

How To Get Clients – download full version.

Here is a free chapter (actually the first and last chapters) for you to download. Just click on the button above or right click and save the file to your hard disc.

I purposely made this free download as useful as possible and I really hope you get something of value from it.

What’s in the free download?

The first chapter is an introduction into the process of setting up a site, starting with keyword and competition research. There are a few tips about how to create the content that will get visitors to your site and clients beating a path to your door.

I then explain techniques for promoting that content, by automated sharing, guest posting, writing for articles sites, creating online networks, and tips on how to create mutually beneficial relationships with other bloggers in your niche.

There is more information on basic onsite SEO as well as detailing other “must-do” activities offsite to get your company noticed online.

It would be great if you could download these two chapters and let me know what you think of them!

How To Get Clients – download full version.

As you can see, this is a direct download, you don’t need to give an email address or anything. However, it would be fantastic if you could Tweet, Facebook Like or Google +1 this post and / or tell your friends and followers about this free resource.

When will the eBook be available?

I’ll be publishing the eBook next week. (Ed. Already published – click here to download full version of How To Get Clients).

After 6 years (ahem, yes, it has been that long!) blogging, I’m going to ask for money. Not a great deal: US$14 or about £11.22 in pounds sterling. And after a few weeks (I will let you know) I’m going to put the price up to $23.

What do you think? I’d be interested, as always, in some of your great comments about the eBook idea and this free download.

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.