Many of us have been stuck with a website of maybe 900 to 1000 pixels wide which smaller devices would reduce in size. The mobile users would have to constantly zoom in and out to access various parts of the site (read: navigate away from the site never to return!)

Should your website be responsive?

In a word, yes. A web design should respond to a visitor’s needs rather than the other way round.

I know of no other single website tweak that I’ve made in the last 6 years that has meant over 100 more visitors daily:

Is your website responsive to handheld devices?

The simplest way to test a website against different sized screens is to simply re-size your browser’s window and see what happens. Go ahead and narrow the browser window on this website and see the design respond to the width of the browser.

Have a look at this great free tool to test your website’s responsiveness. Yes, “responsiveness” is a word, just not a very nice one.

One of the best responsive websites, in my opinion, is Chris Coyier’s CSS-tricks.com, here it is on that tool:

And here is this website tested with the tool:

If you’re seeing any horizontal scroll bars with your site, you might start thinking about responsive design.

How to make your website responsive

Well, I cheated! I simply installed the Streamline theme by Genesis and tweaked accordingly. I also like the Eleven40 theme which has a much wider design on the monitors that can handle it of, guess, 1140 pixels! These are affiliate links, however there are many free responsive WordPress themes out there.

However, there are a couple of changes necessary to make a website responsive. This isn’t the only way of doing it but it is the best and simplest I’ve come across.

First of all you need to add this to the head to stop the iPhone from scaling the whole website to fit it’s screen.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Other than that it’s a question of adding media queries to your CSS to adapt your website to different sizes of browser window.

CSS media queries

In your CSS you need to change the styles of different elements as they adapt to different widths. This is, strictly speaking, “adaptive design” but I think people are more comfortable with the term “responsive design” so that is what I’m using to describe this process.

This website is 960 pixels wide when viewed on a large monitor. If the site is viewed on a device narrower than 960 pixels the design would be inappropriate, so the first media query we add is for 960px.

The whole website is sitting within a containing div called #wrap.

#wrap { width : 960px; margin: 0 auto; }

This #wrap div, along with many other elements, is set to change as soon as the browser window narrows to less than 960 pixels wide by this media query:

@media only screen and (max-width: 960px) { #wrap { width: 100%; margin: 0; } }

So now the website will squeeze or stretch to fix the width of the browser if it is less than 960 pixels wide.

But you also have to make sure that other elements of the website behave the way you want them to. So, similar to the #wrap div, both the div containing this article (.content-sidebar #content) and the sidebar (.sidebar) have specified widths in the main CSS…

.content-sidebar #content { width: 642px; }
.sidebar { width: 316px; }

… when added together they come to less than 960 pixels – the width of the website – and so appear next to each other. And when the browser is narrower than the width of the website they change to 100% …

@media only screen and (max-width: 960px) { .content-sidebar #content, .sidebar { width: 100%; } }

… so the sidebar (coming after the content area in the HTML) drops underneath the content area when using the portrait iPad, for example.

And there are numerous other changes you can make. For example, once this website is viewed at a width of less than 960 pixels, the logo in the top left moves over to the center and the social media icons top right disappear, the sign up form at the top of the sidebar disappears to avoid too much repetition of this element, and the logo changes to a narrower version for devices not wider than 300 pixels:

@media only screen and (max-width: 300px) { .header-image #title-area { background: url(images/logo-symbol.jpg) no-repeat top center; } }

You can add media queries in at any width, 240px, 320px, 480px, 768px, 960px and 1024px, are the most common. But I was thinking mostly of the portrait tablet width (around 760 pixels) and a portrait smart phone (around 320 pixels).

Images and video

With responsive sites everything has to respond. Getting the images to size to the window is easy, put this in the main CSS:

img { height: auto; max-width: 100%; }

And for the videos, I used a WordPress plugin called FitVids.

What you can do

Making my website responsive was actually ten times less painful than I thought it would be. I’m no hard-headed code geek so if I can do it you certainly can.

I’ll be writing more on this topic soon with a video. Also there are great article here about responsive web design and media queries by Chris Spooner.

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.

Of course, I have always advocated blogging for business by attracting customers through Google searches naturally rather than employing black hat tactics such as purchasing links. However, I do think the game has changed a little and there are reasons why innocent web designers could get caught up in the crossfire between Google and webspam.

The (un)importance of anchor text and URLs

High up in the ranking factors for websites is the amount and quality of the links pointing to the sites. And, following on from this, the anchor text (the text in the link) is also of extreme importance.

<a href="http://robcubbon.com">This is anchor text!</a>

Another of the ranking factors that is important is the keywords that existed in the actual domain name and URLs of the links. So, if you are searching for “blue widgets”, the site www.bluewidgets.com will have an advantage.

Old advice

So, it was for these reasons that I advised web designers to consider purchasing a domain with “web design” in the title. I’ve also said that you should try to get links pointing to your site with “web designer [blank]” (where [blank] is the name of the town or area you live in). I no longer believe this is good advice. Or, at least, I don’t think you should try to manipulate anchor text – however much it might help users!

Web designers were uniquely placed to be able to set anchor text as we could add credits to website footers. For example:

<a href="http://robcubbon.com">Web design by Rob Cubbon</a>

New advice

I now think this is not a good idea. I now think it’s better to build the link with company name. Google have devalued these footer links anyway.

Web design by <a href="http://robcubbon.com">Rob Cubbon</a>

Where it is possible, vary the anchor text in the links that point to your site as much as possible.

This update has only affected 3% of searches so it’s not a big deal. However, I don’t think it hurts to note what practices have been hit in this update. So here’s a list of don’t's:

• Don’t buy links! I know this should be obvious but I thought I’d put it in here anyway!
• Don’t comment spam! Don’t put keywords in where your name should go when commenting on blogs. (If anyone does that here, I delete them. )
• Don’t have lots of links back to your site with the same anchor text! This is what Google has really penalized.

If you’re interested in this there is a great article here by Glenn Gabe on the effect of this Penguin update and what to expect in the future.

Remember what we’re here for

Create content and articles that are useful to the end user rather than written for a search engine. That goes for the content on your sites as well as the content you create on other sites, social networks, web 2.0 sites, everywhere.

We are doing what we’re doing because we love doing it! The most important thing is to create great websites. Always spend more time on creation rather than promotion. And be happy!

What you can do

Take a look in your Google Analytics or web stats package. Can you see a reduction in organic traffic on April 24th? If you can it means you’ve fallen victim to a Penguin attack. Use Open Site Explorer to check the incoming links and their anchor text. See if you can change or kill any inbound links that look spammy.

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.

Cut outs look great. Just do a Google image search for “product” and you’ll see that the advertising industry has cottoned on to this.

So, how do we create these cut outs and get rid of backgrounds in Photoshop? In this video above I give you two ways (although there are many more): an easy way and a hard way.

Cutting out with the Magic Wand tool (W) in Photoshop

The Magic Wand in Photoshop selects a consistently colored area without having to trace an outline. There are a number of tools that do the same thing like the Background Eraser Tool as well as the Magnetic Lasso Tool but I find the Magic Wand better.

In order to control which pixels the Magic Wand selects you change the Tolerance. A Tolerance of zero selects only the most identical pixels to where you have clicked (likely to be a very small part of the image); a higher number for the Tolerance selects parts of the image that are less and less similar to the pixel you clicked on; and a Tolerance of the maximum 255 selects all pixels that are completely different to the pixel you clicked on (the whole image!)

In the case of the above image a Tolerance of 100 was sufficient to select the sky.

Once the background is selected is can be deleted. Or in order to select the giraffe and not the sky or vice versa, inverse the selection (Select > Inverse: Cmd/Ctrl-Shift-I).

You may want to Feather the selection at this point (Select > Modify > Feather… Feature Radius of 1 or 2) which will blur the edges of the cut-out sightly.

Cutting out with the Path tool (P) in Photoshop

Unfortunately, not all images, like our friend the giraffe above, are as easy to cut out. Our other example is of a figure with a differing background which is virtually impossible to select by way of some cool Photoshop trick. In this case you just have to trace round the object manually.

The best way to do this is with Paths which are Bézier curves and defined by mathematical equations (named after Pierre Bézier, mathematician and engineer who developed this method of computer drawing while working for Renault). I really could write a lot about how to use Paths in Photoshop, Illustrator and, indeed InDesign but the best way to learn how to trace with Paths is to teach yourself.

Basically, you click once where you want to start and then click on the next point along and drag to get the curve you want. You then carry on if your next curve is going to “follow on” from the last curve, if not, Option/Alt-click on the end of the Path in order to start again with a straight line.

Above you can see (almost) how I traced around the figure and deleted the background. You may get a better idea of how Paths work by watching the video.

Further advice on cutting out

One mistake I always see people make with cut-outs is to forget to bump up the contrast. The figure or object you’ve cut out may have contrasted well against the background originally but now the backgrounds gone it usually needs a bit more.

What you can do

Are you missing out by not putting enough cut outs into your designs and websites? I’m always trying to use cut outs as much as possible because they are so much more likely to be clicked on. Try to use cut-out images as thumbnails for blog posts. They look so much better.

This is an article from Rob Cubbon

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

There are three main ways you can teach yourself web design.

1. By doing. People learn by actually creating websites.
2. By using online resources. Everyone at some point finds answers online about how to design websites.
3. By reading. This one surprised me. Most designers say they learn web design, in part, by reading books.

So, let’s go through each of these categories to find out how to teach yourself web design.

1. Learning web design by doing

The best way to start to understand web pages is to look how existing websites are put together and build them yourself.

Observe how other websites work

To start off, most web pages on the internet are written, at least in part, in HTML. In order to see the HTML that creates this page you need to “View Source” in the browser you are using. Try going Cmd/Ctrl-U (for Firefox), go Cmd/Ctrl-Alt/Opt-U (for Chrome), and if you’re using Internet Explorer, you really need to ask yourself if web design is the right career path for you.

Try looking through the HTML to see how the different elements on a web page are marked up. You may be able to identify certain tags straightaway. For example <p> is for paragraph, <h1,2,3> are headings, <img> is for an image, etc. You will notice that most of these tags work in pairs to denote the beginning and end of the mark up, for example <p>Text here</p> shows the opening and closing of the paragraph tag with the slash (/) preceding the closing tag. Other tags don’t work in pairs, for example the image tag self closes <img src = "http://robcubbon.com/images/rob.jpg" /> this instructs the browser to display an image with a particular web address as the source (src).

Another thing you might notice from the HTML source is that all HTML pages have similar structure. They all start with a <!DOCTYPE> declaration saying which version of HTML it’s in, followed by an <HTML> declaration, followed by the <head> of the document which is a container of various elements including links to scripts, style sheets, the meta information, etc. After the <head> comes the <body> where the elements of the web page are marked up.

Exercise: Select all the source code of this page into a NotePad (PC) or TextEdit (Mac) document and save it to your computer as “test.html” or something. Open this file in a browser and it should look exactly the same as the online version. Now turn off your connection to the internet and see what the test page looks like. Pretty different, huh? Try to work out why.

Tools of the trade

While you’re doing this, there will be certain tools you’ll need.

• Multiple browsers and smart phones. Try testing your own sites on different browsers and phones (this is where you’ll start a long standing hate affair with Internet Explorer).
• Text editor. You may use the basic NotePad (PC) or TextEdit (Mac), or maybe Coda (Mac) or Dreamweaver – don’t use Dreamweaver in the visual mode, just work on the code, you need to understand how this stuff works under the hood.
• Validator. Validate your web pages with the HTML Validator and the CSS Validator (use a browser plugin like Web Developer for Chrome to call on them quickly).
• Chrome Developer Tools and Firebug for Firefox. These tools help you understand CSS and JavaScript which, if you thought HTML was difficult, do take some understanding.
• Graphics and image editors. Central to web design are image editors like Photoshop or Fireworks. These are quite expensive but there is GIMP plus a host of online image editors if you’re just starting out.

Creating your own static HTML websites

While your understanding of HTML, CSS and JavaScript grows you should be creating static HTML sites, either locally or on a web server. Continuously play with the code to try to do cool things. Try to recreate certain elements in other websites by copying bits of the code.

Although the websites you eventually create are not likely to be made from HTML files, it vital you understand how to create static HTML sites first before you can start using PHP and/or Content Management Systems (CMSs) to create HTML.

Creating your own websites with CMSs

Most websites are created by CMSs – software that can create HTML pages within specified templates. The best ones are WordPress, Joomla and Drupal, but there are a host of lighter, open source CMSs you can experiment with, these will teach you how PHP, and with other CMSs, ASP, are used to piece together websites.

Use MAMP (Mac) or WAMP (Windows) on your computer to run these systems locally so that you can get a good understanding of how they work.

Using image editors

You will need to know how to use Photoshop or something similar. You will need this to create graphics for the site as well as to provide complete visuals of how the site will look when finished to aid the design process.

Get designing

Of course, I haven’t mentioned that the resulting websites will not only have to validate, work, be found by search engines, serve a purpose and be marketed but also … they have to look good.

In order to improve your artistic eye, regularly produce work and then try to better it. Sketch designs on paper then work on them in Photoshop or whatever graphics program you have. Practice will help you become a better designer. I will be recommending more resources later that will help you with design principles.

2. Online resources

When people want answers they go to the internet and “Google it” or search YouTube. Web design is no different. There are many resources that will help you online. First and foremost there is W3 Schools which web designers refer to as the best online self teaching resource, there is also Tizag. Some people recommend Lynda.com although I’ve not used it personally.

Blogs

There are a number of great design blogs out there. There are big ones that can help you like SmashingMagazine, WebDesignerDepot, 1stWebDesigner and the Envato network.

Personally, I get more from the independent web and graphic designers who blog. There are, however, loads that I have learned from over the years so here are just a few and I apologise to any excellent bloggers that I’ve left off the list.

• Chris Colyer‘s CSS Tricks is a great looking responsive website but also has great web design info and tricks
• Veerle Pieters has great Photoshop and Illustrator tutorials on Veerle’s blog
• David Airey is someone I’ve followed for a while on his own eponymous blog, LogoDesignLove and IdentityDesigned. David is interested in the overarching identity of organisations amongst other things.
• Chris Spooner has taught me a lot with tutorials at his blog at SpoonGraphics and plus information and inspiration at Line25
• Fabio Sasso‘s wonderfully designed site Abduzeedo offers great inspiration and weirdness.
• Nick La‘s N.Design Studio and WebDesignerWall have some fantastic information and great inspiration.

Please feel free to add your favorite design blogs in the comments below.

Forums

When you are bashing your head against a brick wall forums are great places to get answers. Post a description of your issue and the web address and very often someone will get back to you with a solution. Here are some of my favorite forums.

I like Estetica Design Forum, DesignForums.co.uk, and Designer’s Talk. There’s Digital Point and Sitepoint for more wider ranging queries, the WordPress forum is excellent and there’s the Warrior Forum for internet marketing.

3. Books

Many web designers maintain that good old-fashioned physical books have helped teach them web design. Here are a few of my favorites and some others that have been recommended to me. The links are Amazon.com affiliate links.

• Build Your Own Website The Right Way Using HTML & CSS 3th (third) edition by Ian Lloyd is a Sitepoint book I read years ago. It really helped me at the time as it focuses on web design best practices. Make sure you buy an up-to-date edition (at the moment the third edition which includes a lot on HTML5).
• CSS: The Missing Manual by David Sawyer McFarland includes explanations, examples, and step-by-step tutorials. This book is especially recommended as it gives you the background to CSS and includes a lot about CSS3.
• The Principles of Beautiful Web Design, 2nd Edition by Jason Beaird, maintains that design is a skill that can be learned and teaches you the fundamental principles of design.
• Color Design Workbook: A Real World Guide to Using Color in Graphic Design by AdamsMorioka (editor) provides the vital information necessary to apply color creatively and effectively to design work.
• Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug an instant classic on web usability, loaded with insights and practical advice.
• Getting Real: The smarter, faster, easier way to build a successful web application by 37 Signals may be about creating web applications not sites, but it has such a marvellous way of simplifying web processes that I found it such a useful read.
• Digging into WordPress by Chris Coyier & Jeff Starr comes highly recommended as the great WordPress book. Available as a PDF version (handy for copying code) as well as a physical version.

There are many more books I could have included especially about design theory. If you have any suggestions of books that have helped you with web design, please let us know about them in the comments.

What you can do

Many designers maintain that failure is actually the best teacher. So get out there and design websites! When, as undoubtedly will happen, you come across a brick wall, you can use some of the online resources here to help you. And, when you can’t look at the computer screen any more, you can read a book about it!

I would love to hear your suggestions of web design resources and tips for teaching yourself here in the comments. Plus, ask me here if there’s anything you’re stuck on at the moment.

And you can download my e-book on how to run your own design business.

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.

But wait! Before you reach for your phone, look at the designer’s website to see if (s)he has done similar work to what you want doing first. That done, here are some questions to ask:

1. Have you done this type of work before?

Even though you know this designer’s work, it’s a good idea to ask them this question anyway. A designer may have created the type of website you’re looking to build, but have they worked in your particular niche before? That would be a useful talking point.

Ask for samples of work that may be particularly pertinent to your project. Most designers will have work that isn’t in their portfolio but may be much more relevant to you.

2. What processes will you use?

What steps and stages are involved in the design? How many revisions? You should be able to get firm answers to this sort of question. Avoid anyone who is completely vague about this.

3. How long will it take?

Although the answer to this question will generally depend on you, the client, the designer should be able to give you a rough estimate of the amount of time to complete all the stages that were elicited in the previous question.

You should not only want to know how long the project will take but also if the designer has the time to do it.

4. How much is it going to cost?

There are many different ways to charge for design work. Smaller jobs maybe charged by the hour. Whereas designers may prefer to give an estimated fee for larger projects.

If given a fixed fee also ask for the hourly rate and see how they compare.

5. Are we going to have a contract?

Most designers will prefer to draw up a contract for new clients. The contract should benefit both parties as it will specify the various stages and deliverables of the project as well as the payment deadlines.

There may be clauses in the contract to stipulate what happens if the project is stopped before completion as well as information on who retains copyright or ownership of the designs. Which brings me on to my next question…

6. Who will own the copyright?

Typically, the designer will retain the copyright to any work unless it is signed over to the client in the contract. Most designers will be happy to do this.

Legal tussles can ensue as a result of lack of contract and copyright agreement but they are extremely rare. The most important thing is communication, and this brings me on to my next question…

7. Do you understand the purpose of this project?

Many clients will say what they want without explaining why they want it. It is essential that a web designer, for example, understands the purpose of the website. Otherwise they’re just making it look pretty – and that’s not design.

8. Can you meet in person?

It is always better to talk face-to-face rather than on the phone but the designer’s time is precious. Make an effort to meet the designer near or at their place and buy them a coffee.

Try to find out their core values as a designer and see if they resonate with what you’re trying to build.

9. What’s your gut instinct?

At the end of the day we are human beings and we make decisions emotionally. Sometimes rightly; sometimes wrongly. But, usually, it’s better to go with your heart than with your head when hiring designers.

What can you do?

Remember to do your homework when hiring designers:

• Research their websites and previous work to see if they may be a good fit for you
• Think through the project to decide what you need and why you need it
• Communicate the above to the designer in an email before the conversation

And, designers, make sure you have good answers for the above.

Thanks go to Cheryl Picket on Google+ and the In-House Designers group on LinkedIn for ideas.

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 references to Spam (a brand of tinned ham: SPiced hAM, hence SPAM) become increasingly repetitive and eventually take over the entire menu and so perfectly describe the unsolicited bulk messages we all know and hate.

On watching this skit again for the first time in many years, I marvel over how wonderfully absurd it is! Not only for the preponderance of spam in a menu, where it can be present two or three times in the same dish. That’s sort of weird. But also, the couple are seen levitating into and out of their chairs at the beginning and end of the sketch and there are Vikings in a café in 1970s London!

This got me thinking, what would the modern day equivalent of the Spam sketch be? Not just the absurdity of it but the lack of seriousness in the presentation – where would you find that nowadays?

I couldn’t come up with an answer. And then something struck me about the modern consumption of media.

The rise of the WWW

I witnessed the mass-adoption of the internet both in professional and domestic settings. When I first started to use the internet I was awestruck by the potential. Knowledge and information went from being hard to come by to being overwhelming, almost overnight.

The internet in the 1990s was a very different animal. It was amateur and quirky – stuff could be difficult to find but then, when you did find it, you felt so special.

It was in these days that the internet, literally, changed my life. It lead to an interest in NLP, Buddhism and meditation; meeting new friends; learning new guitar chords; it facilitated travel; helped me stay still; introduced me to new music, authors, ideas …

The rise of Google

Then one day I found out about this search engine that seemed to get slightly better results than Yahoo! Amazingly, the reason I started to use Google over its search rivals was because its minimal home page loaded quicker – that tells you all you need to know about 28.8k dial-up modems!

As its search results improved, so did Google’s ubiquity on the web. It was around this time that I started creating websites.

• I learned that page titles were important and that they should describe the article’s content rather than being humorous or flippant.
• I learned that my websites should be relevant to one niche so I resisted to the urge to talk about personal development issues on this blog and stuck to design and marketing.
• I learned how to structure and mark-up content in the way that Google wanted.
• I learned to follow and interact with other players in my niche so as to create an authorship profile that informed Google that I was interested in design and marketing and nothing else.

Well, I sometimes think I was a little too quick to get into bed with the dominant search engine of the time.

The problem with Google

Google loves relevance. Google wants one website to link to another in a logical way. A link from one blog to another is worth more if they are in the same niche than if they are not.

Google’s position is understandable. They have their bottom line. Everything they do must be seen against this backdrop.

But human beings aren’t computers. They are confusing, emotional and chaotic. One day they might want to write and great blog post on Search Engine Optimization, the next day they may want to indulge themselves by posting up videos of progressive rock groups.

But, bloggers don’t do that anymore. Compulsive, irrelevant and off-the-wall creativity is avoided because we want people to visit our sites and we think it pays to get in Google’s good books.

What you can do

Don’t listen to me, for one! But don’t be a slave to Google, either. Don’t worry too much about relevance. Be human and show your instantaneous, chaotic and complicated side.

Here’s a picture of a savoy cabbage for no other reason than it’s a very nice vegetable.

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 just published my second e-book Running A Web Design Business.

How to run a web design business from home

It’s not easy to explain everything I’ve learned in the last few years but here are some main tips:

• The first thing and last thing you need to concentrate on is your site. You need to work on your main site almost everyday. The site needs a great looking portfolio. With a portfolio less is more, in my opinion – better to show 5 or 6 really great examples of your work than many average ones.
• You also need to create a blog. You will get much more work through a great blog than with a fantastic looking portfolio. Because a good blog will bring in targeted traffic to your site, whereas a fantastic portfolio will only interest a very few people – and most of them will be other web designers!
• Once you start getting clients you need to be able to sort the wheat from the chaff. Concentrate on well-paying high quality clients so you can bring in recurring revenue and avoid wasting time on people with small budgets.
• Encourage your clients to use email so you have a record of everything. Detail exactly the expected scope and remuneration of a project so that both parties know what is happening and benefit from the execution of the job.
• Expand into offering greater services for your clients only when you are sure you can perform them. And make sure you are charging the premium rates for these services as they are being completed to the highest standard: compete in terms of quality; never compete on price.
• Specialise into areas you enjoy and create systems and packages of services you can supply to multiple clients. Document and iterate these systems as much as you can as this will save you time and facilitate outsourcing.

Why did I write the e-book?

As always, I was getting a lot of emails from folks who wanted to set up their own design business and had questions about it, and from people who had started a business but wanted to expand. The questions lead to emails, the emails lead to blog posts, the blog posts lead to an e-book.

Sounds simple. Although the whole process took a little less than a year!

So, what’s in the e-book?

Everything you’ll need to know to set up and run and web design company. Wait, that’s a bit of a boast! Let me explain.

A few years ago I was commuting on an underground train to do very menial work in boring offices. In fact, my sense of professional self-worth was very low.

Now, I’ve been working from home for the last three years making money from my own clients designing websites.

I’m not going to say it was easy. But it isn’t prohibitively difficult either. You can do it!

You need hardware, software, back-up; you’ll need to start a proper company with accounts; you’ll need to find clients – not just any clients but the quality clients that are going to give you repeat business; you’ll need to bill them properly and the right amount; you’ll need to know what to tell a client and what not to tell a client; you’ll need to know how to diversify and specialize; and a lot more besides.

Also, I surveyed over 35 independent designers to ask them their take on getting clients, billing, equipment, etc., so that I was sure what worked for me, worked for others as well. The results are in the e-book.

Here’s the video from the sales page – I’d be interested to hear what you think.

Feedback from those who’ve bought it

I have been absolutely delighted by the feedback that I’ve got about the e-book so far. One of my subscribers, Tia Azulay, wrote to me to say:

“I’ve just bought and read your book and I wanted to say thank you! It covers several things that I know already, but many of which I haven’t put into practice yet, and I’m so grateful for the nudge to focus on them again. It also contains really useful links.

However, the best thing about it is that it is feels enabling and empowering – the honesty and joy of your own journey in design really shines through and it has re-energized me.”

And another subscriber, Edward Craig, said:

“I have been in the website design and hosting business for over ten years and in the first 10-minutes with your book I was shocked at how many things I’d missed.”

I’m really grateful for all the positive messages.

How well is it selling?

So far I have only offered it at a discounted price to my subscribers and it has been selling much better than my last e-book How To Get Clients. I will publish all the sales figures on or around July 1st – the half year point that I have set passive income targets for.

Why is it selling better? Possibly because this is more specific to web design business owners and How To Get Clients was more general, I don’t know. Both e-books are the same number of words, the same price point and of the same high quality (in my humble opinion!)

What do you think?

Is this a good idea for a premium e-book? Do you think I’m wrong to be asking for money for this?

What would prompt you to buy this or is there anything that would ward you off purchasing it?

I’m always keen to hear your comments about this, and everything else!

This is an article from Rob Cubbon

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

I have a challenge for you: perform one of these five minute tasks now. If you hit a road block, leave a comment here and I’ll help you. These little marketing tasks (some for beginners; others for “experts”) only take a few minutes to finish and just seem more complicated than they are.

Set up WordPress

If you don’t yet have a self-hosted WordPress site: Shame on you, you should! (Only joking!) But seriously, the world’s most effective way to market your business can be set up in 5 minutes.

• Purchase a domain name at GoDaddy (affiliate link)
• Get some hosting at Hostgator (affiliate link)
• Install WordPress manually (advised); or through a one-click installation (not advised but OK)

The above is the best piece of online business advice – no exaggeration! This may take slightly longer than 5 minutes if you’re doing a manual install for the first time.

If you already have a self-hosted WordPress website: then set up a WordPress.com site! You can use this WordPress.com site as a “feeder site” to provide links for your main sites. WordPress.com is great for experimenting. Plus you can test out new features before they’re rolled out to the WordPress.org platform!

Set up your Gravatar

One of the most important features of increasing awareness of your business online is having a universally recognised “face” to the business. So, no matter where you are, be it YouTube, Twitter, Facebook, blog comments, etc., always have the same smiling, happy profile pic accompanying your output.

I would rather use a face than a logo. People are more likely to recognise a face than remember a name so this is very useful to your brand. Go to Gravatar and set up your profile. In five minutes most of your blog comments will have the same image next to them.

YouTube

If you don’t have a YouTube account: Set one up. Try to get a username that is the same as your website domain or brand name as possible. This will take you less than 5 minutes.

If you do have a YouTube account: Customize your YouTube channel. Make use of the links in the sidebar (add as many as possible – you can even link to different pages in the same site!) Make sure there is a link back to your site on the first line of the descriptions of the videos.

Twitter

If you don’t have a Twitter account: Set one up. Try to get a username that is the same as your website domain or brand name as possible (yes, I copied that from the above paragraph, glad you’re paying attention!) For God’s sake, at least change the profile photo from that boring default egg image. Write a decent description with a link to your site.

If you do have a Twitter account: Customize your Twitter profile with a background image that is in keeping with your brand and shows your web address and other important information.

Facebook

If you don’t have a Facebook account: You are the last person in the world not to have one. Set one up.

If you don’t have a Facebook page: You must get a Facebook page for your brand, website or business. Go to http://www.facebook.com/pages/ and Create Page. Follow the directions in this video (3 minutes 10 seconds – even less than our 5 minute rule!)

The above video also shows you how to put a Like Box on your WordPress website’s sidebar. This will slowly increase your fan base as the weeks go by and then if you regularly, manually post to your Facebook page you’ll see a steady stream of engaged traffic coming to your site from Facebook.

If you do have a Facebook page(s): Then ready them for the timeline changes and the end of this month (March 2012). Pat Flynn gives a complete Facebook page guide to show you want to do and Louise Myers tells us how to create custom tab images for the Facebook timeline. Just 5 minutes, honest!

Google+

OMG, is it me, or does Google+ seem so boring nowadays? Pinterest is piquing our interest but Google+ is Google so we’ve got to go along with it. I can guarantee that each of these five minute marketing tasks will help your business but, I’ve got to be honest, I haven’t seen any benefit from Google+ at all! I was very positive about it initially but recently I haven’t been feeling it.

If you don’t have a Google+ account: Get one.

If you don’t have a Google+ Page: You can set up a Google+ Page and add a Google+ badge to the sidebar – similar to the Like Box for Facebook. Again, I haven’t seen any benefit in doing this so far but, this is Google, so if you have good social signals from their network is probably going to be beneficial.

Set up Google Authorship

This is more important than Google+: Sort out your Google Authorship.

This does take a bit of doing, but once you have set this up correctly (and it is just about possible to do it in 5 minutes), your face will appear in the Google search results. The benefits of this are obvious, it’ll draw people’s eye to your link in the search results meaning more traffic. It’ll also mean further recognition of your brand.

General Social Media

The whole point of these five minute tasks is to work effectively so you save time instead of wasting time on tasks that have little benefit. Unfortunately the rise of social media has made business owners prone to doing just that.

We all know you need to engage with Twitter, Google+, Facebook, YouTube and LinkedIn for these sites to become effective tools. But we simply don’t have the time to do this.

But, even if you don’t have hours to spend on Facebook, at least make it easy for others to share your pages on social media. Do you have your social media buttons in the best places to enable sharing? Spend five minutes looking at this. Move them around or change the plugin you use and see if you get a different response.

Advanced social media

With the help of Melbourne Designer Andrew Keir, I have recently changed my Tweet, Like, Google+, LinkedIn and StumbleUpon buttons from plugin to hard code. This has meant I’ve been able to do two things:

• My Twitter button now recommends you follow me if you don’t already (this really increases your Twitter followers)
• With a bit of extra code I can now track Tweets, Facebook Likes and more with Google Analytics

Only do the above if you’re happy adding code to your theme but it only takes five minutes and the results are awesome!

Google Webmaster Tools

You must add all your sites on Google Webmaster Tools. All you have to do is prove you have access to the site by uploading a file to the site’s root.

You’ll get the following from Google Webmaster Tools:

• Search Query Impressions vs. Clicks will show you your average position for a search term and how many impressions vs. clicks you get. So you can work out which terms are more relevant to your audience so that greater work on these terms will result in more targeted traffic.
• Incoming Links to Your Site will show you which sites link to you the most.
• The Keywords section will tell you what Google thinks your site is about.
• The Malware section will hopefully tell you that your site is virus-free, if not, do something about it now!
• The Crawl Errors section is very useful as it will show up any broken links on your site which you can fix to improve user experience.
• Be sure to notify Google of your Sitemap here as you can see how many pages in the sitemap are indexed (hopefully most of them).
• And more!

It’s always worth spending five minutes in Google Webmaster Tools, keeping an eye on your site’s performance and its SEO footprint.

Mailing list

Lastly, you’re not really doing marketing properly if you haven’t got a mailing list. And I know a lot of you procrastinate terribly with this all-important task.

But it is possible to set up a MailChimp mailing list and sign up form in five minutes. Alternatively you can set up an Aweber list and sign up form with an incentive.

What you can do

There should be some tasks above for beginner online business-owners as well as those who’ve been at it for years. Pick one task and complete it in five minutes! I would love to hear which task you picked and how you got on.

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 children we are told that we are worthless until we are taught properly and then we can be let out into the world. Then after education we, most likely, find ourselves working in an organisation for a very modest wage. At this point we have a value put on our time – and it’s extremely low.

But it’s not the real value. It is only a proportion of the value that the organisation and others place on that work. Your hourly rate at a creative company could be charged tenfold to the client.

So why don’t you charge higher prices to the client?

Fear

Fear is single most important factor that is holding us back.

• We don’t give our ideas an airing from fear of being laughed at
• We don’t follow our dreams from fear of failure
• We don’t ask for higher rates from fear of losing work, being laughed at, and failure!

Fear stop us from getting to where we want to be.

Also, there is a self-depreciating devil within most of us – a feeling that “higher rates and a higher levels of success are not for me“. We think that the real triumphs are for other people.

What to do about it

I am a great believer that design companies should diversify their business in order give their clients an all-round service.

But if you are worried that your clients may not require this you could offer them a choice

These prices don’t include domain name registration, hosting, maintenance or off-site SEO.

The above is a good example of how to give your clients choice when it comes to charging. The descriptions for the various services need to be fleshed out according to the client’s needs. But in each of the three above cases you can be sure that you can provide a valuable service to the client while getting paid your true worth.

Other important points about charging

• Always have an end in sight: In each of the three examples above there is a specific task which, when delivered according to the client’s expectations, will be the conclusion of the job.
• Charging: If it is a new client, I would usually charge 50% before and 50% after the task has been completed. Clients should pay within a week of invoicing.
• Over deliver: I usually give my clients a free complimentary copy of my premium e-book which will help them with blogging, SEO, social media and driving traffic and interest to their new website.
• Contracts: Try to keep the contract light but make sure it covers the basics (remember to include that you have the the right to bill pro rata for work completed in the unusual case of early termination).
• Do everything by email: Other than the contract, be sure to keep everything on email so you can refer to it later. Some jobs can grow from the original brief and, when this happens, it’s essential you can refer to something written down in order to ensure you will get paid fairly.
• Set a fixed price: Set the fixed price according to a “nightmare scenario” of how the job could progress. Make sure all the deliverables are agreed and written down. If the job proceeds swimmingly you could always offer your client money back.

Recently I surveyed over 35 online business owners about charging and billing and these were my findings: how graphic designers get paid.

What you can do

Do you perform a service that can be charged out to multiple clients? If so, write down details of service packages that can be provided, similar to the “bronze”, “silver” and “gold” packages in the table above. And then think of the price it would be considering the “nightmare scenario” of how the job could progress. The benefit of writing down these packages is that they can easily be copied and pasted to potential clients when you get enquiries.

More info about how graphic designers charge clients and make their money in my e-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.

The site has great design and UI. It’s responsive and looks great on desktops, laptops, tablets and phones. And, what I really like, it’s all about the images.

I have a love/hate relationship with social media. I have tried to automate and sync social media in order to take some of the leg-work out of it.

I know, I know. You need to personally engage on social media channels to be successful – comment, engage, share and make friends! But if you do that on Facebook, Twitter, Google+, YouTube, LinkedIn, Pinterest, etc., you’d quite simply have no time for anything else!

Pinterest, at the moment, offers us the chance to promote our work, webpages and sites in a relatively straightforward manner that is not so time consuming, remembering, of course, to promote the work of others as well.

So, what sort of images work in Pinterest? And how can we create some of our own to drive interest from the female-friendly social network?

1. Beautiful and sumptuous imagery

Of course, everyone loves beautiful images. And although beauty maybe subjective, most of us agree on true beauty. When your eye scans the Pinterest boards sometimes it’s the heart-stoppingly sumptuous image that really catches the eye.

2. Cut outs

Cut outs, ie. shapes on a white background, are particularly eye catching in a world of rectangular and square images. The brain can process shapes more quickly than photos and Pinterest is all about speed of appreciation.

3. Montages

Create montages in Photoshop or online graphics editors to marry two or more photos together.

Montages are not only eye-catching but they are also your creation and therefore unique.

4. Humor

Add comedy to your images by, for example, adding a speech bubble to a famous face (see photo of Putin above). These types of image do well in Facebook and Google+ as well as in Pinterest.

5. Text

When all else fails just type into an image, put it in a post and share it. If the message is pertinent and if the typography is creative, it’ll bring you re-pins, likes and traffic.

Here’s one I saw the other day:

The best place to hide a dead body is page two of Google

Fun and clever.

6. Countries / Maps / Flags

I did the above image for a client while illustrating an article about the increasing amount of Chinese investment in Africa. The image proved extremely popular in Pinterest as well as on other social media. The juxtaposition of iconic shapes (country borders, maps, flags, logos, icons) work very well to capture visual interest.

7. Upright / Portrait images

Pinterest boards show images 190 pixels wide but, unlike any other social network that I can think of, it shows the whole image regardless of it’s height. So, vertical images will be bigger than the more common horizontal images. So, upright images will grab more Pinterest screen real estate.

8. Infographics

Infographics fit neatly into the portrait format I’m talking about as they tend to be long, thin and upright. They can also be read on desktop screens as well as handheld devices. This format works particularly well on Pinterest

What you can do

Are you in a niche that will work well on Pinterest? Sign up to Pinterest (you’ll only have to wait a day or so) and start creating a few boards. Make sure the images are eye-catching and mix your own content in with others.

And follow me on Pinterest, goddammit!

This is an article from Rob Cubbon

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

So, what do you do? Purchase a Hostgator Reseller Account (affiliate link), charge your clients, sit back and watch the money come in? Right? Wrong!

I’ve been offering hosting services to my clients for years and this is NOT an easy way of making passive income. However, with the right systems, contracts, pricing and billing in place, it can be a mutually beneficial operation for you and your client.

Choose the right host

As you will be reselling the servers of an existing host you must choose a long-established host with a great reputation. Personally, I use one shared host to resell from: the Hostgator Reseller Account and one VPS host: Dreamhost VPS (both affiliate links). My shared hosting packages are cheaper as the hosting can be slower although, with Hostgator, I haven’t had many problems.

Read my articles on the best shared hosts for WordPress and best VPS for WordPress for other reliable hosts whose services you can resell.

Once you have the hosting set up it is extremely important that you put one of your own websites on the host you are reselling. See how you get on with this host. If you are using WordPress, see how it handles WordPress, plugins, caching, etc. If you are using this host adequately yourself you can then sell their hosting services.

Be clear to your client about the service you are offering

Remember, if something goes wrong with the hosting, you will be expected to put it right. Potential pitfalls can be avoided by perfect prior communication and hosting best practices.

Here are some of the many lessons I’ve learned while providing hosting services to clients:

• Downtime. All hosts have downtime and it’s important that your clients realise this. Thankfully, most downtime last for a few minutes but it’s important to choose a good host with good support so that you supply information about the downtime if it occurs. Use Pingdom to monitor this.
• Scale. A set amount of disc space and bandwidth should be discussed and agreed upon.
• Email. Use Google Apps for Business to route the email. You can charge a set-up fee for this and make sure your client understands that there will be ongoing fees if they exceed the 7.5 GB storage ceiling or require more than 10 email accounts.
• Maintenance. Bundle in your website maintenance with the hosting fees. It is in your interest to keep backing up and updating WordPress installs and plugins. If this is all done regularly there will be less problems. If you leave this to the client, it might not get done.
• Termination. Tell the client that they can terminate the contract or agreement at any time. But if this happens, either they arrange for the site to be moved or they pay for you to do so. Liaising with another host and moving a website can be a time-consuming process.

Domain name registration

I usually prefer the client to arrange the domain name registration but, if they prefer me to do this, I will.

Pricing and Charging

The price should be charged monthly or annually and should be paid by the client in advance, preferably via automatic transfer.

You should charge the client at least double what you are paying the host. So, if the reseller hosting costs you $30/month, you should charge the client at least $60/month for hosting and maintenance. This is regardless of how many other clients you have on the same server.

What you can do

Put together a plan for potential clients and what you could offer them. Remember to set the price with the worst case scenario in mind. Always use a hosting service that you have had lots of experience with. Find out more about how to run your own web design business from home in my e-book.

Do you resell hosting services for your clients? What are your experiences? I’d love to hear about them 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.

Images can be improved by increasing contrast, increasing saturation, cropping and by employing a host of other Photoshop tricks.

Increasing contrast

Increasing the contrast of an image means to make the lighter parts of a picture brighter and the darker areas more dark.

There are many ways to increase the contrast of an image in Photoshop – you can go Image > Adjustments > Brightness/Contrast… for example. However, I always like to use Curves as they give you more control. So, go Image > Adjustments > Curves… (Cmd/Ctrl-M).

With Curves you can quickly click the “Auto” button which will apply an automatic color correction. This may well improve your image’s contrast in one hit. But you can further adjust an image’s contrast by creating an “S” bend with the curve:

Here you can have more control over the image as you can lighten or darken specific mid-tones of the picture.

Bumping up the saturation

One very “cheap and cheerful” way of improving pictures in Photoshop is to simply increase the saturation. Go Image > Adjustments > Hue/Saturation…

As in the image above, I like to increase the saturation of images a little bit to make them “jump out” of the page at you. Of course, whether you use this technique will depend on the photo. It’s not generally used with photos of people

Cropping

Cropping photos really is an art. When you crop an image you can hone in on the focus of the picture more. You can also take out distracting or irrelevant elements. Cropping can also be used to “straighten up” an image (see video).

To crop in Photoshop you can either use the Crop Tool (C) from the Tool Bar and click and drag. Or, as in the video, you can use the Free Transform Tool (Cmd/Ctrl-M) and distort the layer within the frame.

Cropping has the added benefit of really pissing off photographers!

Adding a blue sky

Many landscape photographs can be improved by adding some blue to the sky – even if the sky is cloudy!

To do this in Photoshop first you need to create a new layer (Cmd/Ctrl-Opt/Alt-Shift-N). Then run a gradient down from the top of blue or black to transparent and then play around with the layer’s opacity and blend mode in the Layers palette.

You can see this in the above video or here is an older video I made about how to make a deeper, bluer sky in Photoshop.

Blurring

Some of the above effects really depend on the type of image you are transforming. For example, increasing saturation, contrast and sharpness as well as adding a blue sky are more likely to work with landscape photography. However, if you are dealing with portrait photography, blurring can be particularly useful.

If you are trying to get rid of blemishes on skin you may like to try Filter > Blur > Surface Blur… But go easy, you may like to add this to a duplicate layer and alter the opacity of the layer so that the results aren’t too much.

There are many other ways you can turn bad portrait photos into beautiful images.

What you can do

All photos can be improved upon somehow. Try to use images creatively as possible and always be thinking of ways to improve them. Try not to use them “as is”.

Remember, you don’t have to have Photoshop to do this. 99% of the above effects can be achieved at Pixlr and Photoshop Express.

And, what about you? What do you do your images and graphics to improve them?

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.

Keyword research and competitor analysis

Don’t stop reading just because it’s a boring subheading!!! This is actually very exciting, because you can find out how many people search for particular phrases on Google! I was amazed when I discovered this, but maybe that’s just me. Watch this video:

The above video shows you how to use Google’s keyword tool and SEOquake to find the best phrases to attract the most visitors. What do you think of the new video intro? Cheesy, eh?

The Google keyword tool

When it comes to SEO, the first thing you need to do is keyword research. This is an absolutely essential stage in the early lifecycle of an online business.

Don’t just guess what people are looking for – research it! Use the Google Adwords Keyword Tool to tell you how many people make certain searches every month.

This tool can help you analyse the demand for your products or services. Also, this tool can tell you the exact words your potential customers are using to search for businesses like yours.

So, in the example of the video, let’s say I’m a web designer in London, I should see how many searches are being made every month for those exact words.

As you can see from the image below, the exact words “web designer london” are searched for 880 times every month in Google. I’m always amazed by how accurate these results are! You can guarantee that there will be around 880 people searching for “web designer London” this March, this April, this May… etc.

How do I know how accurate this is? Because, if you hit the top spot you can guarantee about 30%-60% of that traffic, and when that happens the same amount of traffic comes in every month – almost as regularly as clockwork! (Of course, not if it’s a seasonal search term like “halloween costumes”.)

So, now that you understand exactly how powerful this tool is, there are some Google Keyword Tool tips:

• Always use [Exact] Match Type, not Broad (annoyingly the default) nor “Phrase”
• Choose the country you’re interested in for the Local Monthly Searches, otherwise just look at Global Monthly Searches
• Look for the “low hanging fruit”, monthly visitors in between 250 and 1250 (or ideally between 500 and 1000) because they have a decent search volume and are unlikely to have high competition
• Whilst looking at the suggestions for other keywords, you can order them by number of searches by clicking on the top of the search columns

Now that you, hopefully, have a few keyword ideas to target, it’s time to checkout the competition.

Keyword competitor analysis

The first thing you need to do, if you haven’t already, is to download the SEOquake add-on for Firefox. I would add here that I personally don’t use it on my main browser. This is because it does slow browsing down while it gets all the juicy information. After installing it go Tools > SEOquake > Preferences > and cut down the number of Parameters it shows – this’ll speed things up.

Look for the first parameter – the Google PageRank. If you’re looking down the top ten Google results and you see a load of PageRanks of 2′s, 1′s and 0′s, then bingo! You’ve got a keyphrase you can target!

Please be aware that Google PageRank isn’t the be-all-and-end-all measurement of the importance of pages. Try to look at other parameters such as how many links competitors’ sites have going into them. And, some results will be there because their on-page SEO is better for that particular search. This isn’t an exact science, but it’ll give you a good start when analysing your main competitors online.

You are looking for two things: first, a decent number of monthly searches with the Google Keyword Tool, and second, nice easy competition.

If you have found a few keyphrases you’d like to target you can move onto the next stage.

On page SEO

If you want your home page to get to the top of Google for “web designer London” then you have to optimize that page for the words “web designer London”.

You can do this by adding the phrase to the heading, title, first paragraph and body text of the page. More about on-page optimization in WordPress here.

Build links to the page with the keywords in the anchor text

Of course, we all know the value of getting links to our site. But when targeting certain keyphrases, it’s necessary to get some of those links pointing to you with the keywords in the anchor text. Like this (where “web designer London” is our targeted keyphrase):

<a href="http://robcubbon.com">web designer London</a>

But, don’t over do this! Don’t get hundreds of links pointing to your site with the same anchor text as that looks unnatural. Mix up the wording of the anchor text and be sure to include links with anchor text “click here” and “find out more about”. Include links with the domain as the anchor text. Link to the internal pages not just the home page. With new sites be especially careful not to “over-optimize” both the on-page and off-page SEO.

The above has been re-written to accommodate the changes made in April 24th to Google’s algorithm, call “Penguin”. This advice still holds out but avoid building too many links and make them look “natural” in terms of anchor text.

How to get links? Well, there’s a big topic! Here’s an article with some WordPress and SEO Tips to Get Links and Google Traffic.

Blogging, Relationships and Content Marketing

Obviously I can’t cover all the good practices needed in content creation and link building in this one post. I would always advise anyone with a website to start a WordPress blog as it is good marketing for your brand. Set up WordPress with SEO in mind. Make you sure write your blog posts in an SEO-friendly manner.

Form relationships with other bloggers in your niche. Help them promote their posts and they will help you promote yours.

All this blogging activity together with the above targeting strategy will pull in massive long tail search traffic connected to your target keywords.

I should mention at this point that good content will get you good links and good search engine rankings. It’s the ultimate technique that pretty much trumps all of the above!

You can do it!

Do you have a set of keywords you target for your home page? If you don’t, head over to the Google Keyword Tool to find some low hanging fruit!

Are you aware of your competition? If not, get the SEOquake add-on and check out the competition on a search term that describes your business. Can you beat ‘em? If so optimize the page and build some links to it. It’s surprisingly easy – just a few good links can make a lot of difference. But don’t over-egg the pudding. Find out more about how to get great clients for your business in my e-book.

Now, this is a thorny subject and I’m bound to have rubbed some SEO-types up the wrong way. So, I would love to hear you opinions in the comments. Be nice! Oh, and vote for the article if you liked 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.

If you are reading this on my blog you’ll notice 7 beautiful grayed out social media icons on the right side of the header which turn into full technicolor when hovered over.

I seem to be getting more and more traffic from these various social media avenues so it makes sense to fill up that empty space with them – even though I’ve always had them in the sidebar.

Think speed!

As you will already know, Google takes loading speeds into account when ranking pages. Also, I hate waiting for sites to load. So I wanted to create these header buttons with a minimum amount of HTML, CSS and, more importantly, HTTP requests.

Here I have 7 social media icon images and all of them have rollover states. That means there could potentially be 14 HTTP requests for images just for these little buttons. The images themselves maybe small but it’s the separate requests to get the images that can severely increase page load.

So how do we cut down those image requests? Simple, by creating one big image.

Say hello to my best friend – the image sprite

Here is the image sprite I used to create the social media buttons and their hover states:

As you can see a sprite is one big image that can be shifted around to only display parts of it at particular times. Here each button is 32 pixels by 32 pixels. They are put right next to each other so that there is no space in between – this makes it easier later on when you do the CSS positioning.

HTML for the social media buttons

As I’m using the Genesis theme for WordPress (that’s an affiliate link), I enter the HTML into a text header widget.

Here is the HTML:

<div id="head-soc">
<ul>
<li id="g"><a href="">Google+</a></li>
<li id="rss"><a href="">RSS Feed</a> </li>
<li id="sub"><a href="">Subscribe</a></li>
<li id="fb"><a href="">Facebook</a></li>
<li id="twit"><a href="">Twitter</a></li>
<li id="li"><a href="">LinkedIn</a></li>
<li id="youtube"><a href="">YouTube</a></li>
</ul>
</div>

As you can see that is just a simple HTML list for each social media item and each list element has it’s own ID (this is for the CSS positioning). I’ve taken the links and the titles out so you can see what’s going on.

CSS for the social media buttons

And now here comes the clever bit.

#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(images/social-media.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}

As you can see, the CSS imports the image “social-media.gif” just the once and then alters the position of the image within the 32 pixel square space to show the correct button.

Social media buttons in the header

So why am I putting them in the header when they’ve always been in the sidebar? I’ve learned through testing websites over the last few years that being obvious works: a big button is much more likely to be clicked than a small one.

When I find a good website, I usually look for the Twitter link. If I really like what they’re doing I’ll sign up for newsletters. If I can’t see where to do this within one second, I’ll leave, maybe never to return!

So, I’ll hopefully get more followers on these social sites – I’ll let you know if I do or I don’t.

Finally here is the list of buttons. Why don’t you join me in one of these places?

• Google+ This is the social network which has the greatest trajectory for improvement. Google rules the search engines so it’s going to try to push this social network as far as it can. I write quite a lot here, contribute to discussions, arrange hangouts and post my latest blog posts
• RSS Feed You can subscribe to all my blog posts by a feed-reader such as Google Reader
• Subscribe Here you can subscribe to my newsletter and get a free copy of my e-book “How to Market Yourself Online”
• Facebook This is really coming along, we’re having great discussions and I post my latest posts here as well
• Twitter Here I tweet out my latest stuff plus all the stuff I read everywhere. I can tweet up to 10 times a day!
• LinkedIn This is my LinkedIn profile. But I love LinkedIn Groups and I have one called Niche Site Marketing
• YouTube This contains about 50 tutorial videos about web design and internet marketing – more to come here soon!

What do you think?

Do you have social media links in your sidebar or header? How did you create them? What do you think of mine? Are they the right shape and in the best position?

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 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. Read more about what you can to do get more clients in my book “How To Get Clients”.

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.

Find out more about how to get great clients in my e-book How To Get Clients.

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.

Read more about running your own design business from home in my e-book “Running a Web Design Business.

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.