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.

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.

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.

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.

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

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

How to make a button in Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

How to style a button in with CSS

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

Here is the button styled in CSS

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

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


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

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

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

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

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

And here’s the CSS.

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

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


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

Every button should have a hover state

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

So make sure you set styles for the hover state.

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

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

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

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

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

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

Other tutorials

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

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

Let me know what you think

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

This is an article from Rob Cubbon

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

I’ve only used a gun on one occasion – the results were catastrophic.

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

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

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

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

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

Add impact and decrease noise

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

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

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

Make sure you are creating content that the visitor needs

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

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

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

Be consistent

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

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

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

Visualise and illustrate

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

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

Divide information down into bite-sized chunks

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

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

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

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

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

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

Test and experiment

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

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

This is all about me you

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

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

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

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

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

This is an article from Rob Cubbon

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

The internet is a big space but the world is even bigger. Although English is the most widely used language on the internet at the moment, in less than 5 years it will be Chinese.

We read in our native language, search in our native language and join social groups who use our native language. Also, research suggests that we put more credence into the words we read in our native language.

I recently created a multilingual website for an English School in Goa, India and with WordPress and WordPress Multilingual (WPML) plug-in from ICanLocalize.

Video of a multilingual website with WordPress and WPML plug-in

Here is my video of the front and back end of the multilingual website.

This got me thinking how easy it is to make any sort of website multilingual and roll out the SEO benefits of WordPress into different markets. Here’s how you do it.

Install

First, install WordPress on your web host. Most hosts have good one-click installs these days but if you want to do it manually you can.

Secondly, you need to purchase WordPress Multilingual plug-in from ICanLocalize. Make sure you comply with their minimum requirements. These are quite stringent as you are required to make the WordPress permalink structure to be either the default or /%year%/%monthnum%/%postname%/. And, definitely use a Linux/Unix server rather than a Windows one even though this is not mentioned as one of their requirements.

Then, the plug-in can be downloaded and installed just like any other plug-in.

Set up

Once installed, the plug-in will walk you through an easy process where you choose the default language (in my case, English) and the other languages you intend to translate the site into (which can be added to later). WPML (WordPress Multilingual plug-in) comes with over 40 languages to choose from but you can also add your own language variants.

Finally, you need to add the language switcher which is a drop-down menu for visitors to select their preferred language. This is available as a widget, but I inserted it into the theme using this code: <?php do_action ('icl_language_selector'); ?>.

Entering the translations

I had the links on the top navigation bar listed with the WordPress command <?php wp_list_pages ('sort_column=menu_order&title_li='); ?>. Once this is set up the top navigation bar will change depending on which language is selected.

The administration area for entering the translations is very intuitive – it uses flags to denote the translated pages. There is no need to enter the different languages in every page. If you forget to translate a page it won’t be listed using a WordPress command nor will that language be present in the language switcher when the page is viewed in another language. So, no annoying 404 errors!

If you’re concerned with SEO (who isn’t?), the page and site titles can be translated so you have complete control of the most important areas for keywords.

You can even employ ICanLocalize via the back-end to do your translations for you direct into your site!

You can also translate sidebar areas, widgets, footers and every bit of HTML text in your website. Here is some code I used to identify the different languages with PHP:

<?php if(ICL_LANGUAGE_CODE=='en'){ ?>
...English content here...
<?php } if(ICL_LANGUAGE_CODE=='ja'){ ?>
...Japanese content here...
...etc...
<?php } ?>


Contact forms

If you require a contact form there is a very simple solution. Contact Form 7 plug-in and WPML plug-in are a match made in heaven! Contact Form 7 is translated into around 40 languages. So, once you have Contact Form 7 installed, click “Contact” and “Add New” and you can choose the language of the new contact form.

Here you will get a normal contact form already translated complete with the 15 or so success or error messages (“Your message was sent successfully”; “Invalid email address” etc.) in 40 different languages. So, no need to send the contact page to the translators!

Conclusion

I only tried the multi-lingual plug-in with WordPress pages but didn’t translate posts as this website had no blog but I’m sure the plug-in can handle this just as well.

The support at the WPML forum is OK but expect to wait at least 24 hours for responses. Online WPML can be a little confusing. There is no link to the forum at WPML and no link back to the main site from the forum. Plus there is the ICanLocalize site where you purchase the license. I found the distinctions between these separate online entities unclear.

But don’t let these minor quibbles put you off, the WPML plug-in has been around for a long time and is well-supported. It has only just become a premium plug-in, having been free for years, and the developers are committed and professional.

What about you? Have you ever created a multi-lingual site? Has anyone else had experience using the WordPress Multilingual plug-in?

This is an article from Rob Cubbon

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

“It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way …”

from A Tale of Two Cities by Charles Dickens

The economy is barely recovering. Here in the UK there was an actual contraction of the economy in the last quarter of 2010. However, like Dickens’ description of late eighteenth century revolutionary Europe, this period remains paradoxically promising for those of us who have turned our backs on corporate structures and elected instead to work on our small business at home.

You notice I said “work on” our businesses, not “work at” our businesses – because that’s the point.

Why you should grow your business

It is even more important than it usually is to expand and systematize your small business. Here are some reasons:

• As a designer, for example,  you are only capable of earning so much money per hour. We get tired, we get sick – dare I say it – one day, we’ll get old. We need to find ways of accruing income separately from hours worked. Systematizing work will enable you to explain to partners and freelancers more effectively what you do and what to expect.
• Market structures tend towards an oligopoly. I mean – all sectors of industry are eventually controlled by a few (3, 4, 5, 6, 7-ish) key players. Look at the banking, energy, manufacturing and retail industries! Some of the few exceptions to this rule are sectors like internet marketing and web design. It’s no coincidence that all the opportunities for small players are online – the internet is in it’s infancy and there’s lots up for grabs. Already internet search and advertising has defaulted to an oligopoly. It’s time to move fast before the big boys swallow us up!
• So while there’s a threat from up above; there’s problems down below. There are job boards, contest sites, crowdsourcing and people willing to work for free. Sure, if you’re experienced this form of competition won’t harm you. But it is a growing phenomenon and you should arm yourself against it.

If you want to grow your business you have three options:

1. You get lucky (not going to happen)
2. You invent some original and revolutionary product or service (possible but unlikely)
3. Take what you already have, perfect it, enhance it and expand it in every way you can (do this!)

How to grow your design business

Wealth is most often linked with exclusive ownership or control. You may make a living with someone’s idea or product, but you stand a much better chance with your own. If your product saves the client time, then you can make a fortune.

Listen to your customers – first and foremost

As a website designer/developer you may start out by supplying HTML and CSS files for someone else to create a site with. This way you are just a small cog in a larger machine.

But, maybe there’s more you can do? I have found again and again that clients would rather I do as much as possible. So a small design job can become much bigger with domain name registration, web hosting, website maintenance and email all coming into play.

So, I have prepared “packages” or, more accurately, produced whole systems of web marketing that clients can purchase in one go. Added to these packages are further annual fees for website and email hosting and maintenance.

The benefits of offering these packages are many but there are two main ones:

• The client gets peace of mind that their web presence will be professionally designed, developed and maintained with all the various benefits (on site optimization, analytics, speed) clearly itemized.
• The designer/developer gets the benefit of annual fees coming in plus the website in a safe, optimized and monitored environment keeping the chances of problems or downtime down to a minimum.

People will pay a premium price for a service that takes away hard work and confusion.

Here are some ideas of one design and marketing package that could be offered to a client:

• Logo and identity design.
• Business stationery: 500 business cards, letterheads, compliment slips printed and delivered).
• Website and blog designed, developed and hosted.
• Social media: Twitter, Facebook and YouTube accounts set up and profile pages designed to fit in with identity.
• SEO: on site optimization plus review of search engine indexing and performance.
• Mailing list: Aweber mailing list set up and email template designed.
• Email set up.

Make sure you like it

Are you interested in offering these extra services? Or are you only interested in website design and that’s it? Personally, the whole area of marketing really interests me so I’m happy offering these services. But, if you only like creating beautiful websites, maybe this isn’t for you.

One thing’s for sure – don’t concentrate on just making money. Concentrate on delivering a better product or service. You’ll never win competing on price … so go for quality!

Conclusion

As I’ve said, I know this isn’t for everybody. What about you? Are you expanding or specializing? Have you any further ideas for other services a web designer can offer?

This is an article from Rob Cubbon

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

This is a guest post from Bailey Digger about the realities of web design in challenging economic times.

Some jobs are recession-proof while others suffer more when the economy is bad. Web design is not an essential service but there are several reasons why it can be considered recession-proof:

• Web designers can seek work in related fields. You can find openings in print media, advertising agencies and many other organizations where design plays a role.
• When businesses are not doing well, they look for ways to boost their income and popularity, and the best way to do this is by paying attention to their websites. Web usage continues to increase, irrespective of the recession. So web designers are going to be in demand to design new sites or tweak existing ones.
• Organizations are moving to the web anyway as it offers significant advantages to customers – they don’t have to waste time or money in getting to and from retail outlets. So web designers are sought after to create the shopping sites.
• Web designers that know how to manage entire projects are always in demand, no matter how the economy is doing. So, think of branching out and doing much more than just web design; when you’re a designer of many talents, it’s easier to find a job when the going gets tough.

According to the BLS, the job outlook for graphic designers is expected to grow 13 percent, and even though the competition is expected to be fierce, web designers and animation experts have the most opportunities. So if you love anything to do with design, have a creative mind and want to work as a web designer, it makes sense to choose a degree in graphic design so that you have options in economic downturns. When you’re multi-faceted and hold more than one skill, you can switch between graphic and web design, and find jobs in any field related to design.

This guest post is contributed by Bailey Digger, she writes on the topic of web design degree programs . She welcomes your comments at her email: baileydigger189(@)gmail(.)com.

Thank you, Bailey. Speaking as a freelancer that does web and print design, I have definitely seen a shift to the web since this recession took hold. Although how much of this shift was due to the recession is debatable.

Web designers (and all sorts of creative professionals) are now being hit by the recession as well as by competition from job boards, contests, crowdsourcing and spec work. Bailey is right when she says we need to get creative with our businesses – offering multiple services (web design, SEO and SM) and marketing these products effectively.

Finally, I couldn’t agree more with Bailey that people with skills prosper. You’re nothing without skills – work on them throughout your professional life!

Conclusion

As ever, I’m always fascinated to hear your thoughts on this subject. Are you a designer who has felt the force of the recession? What are the best ways to deal with 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.

I often get quote requests for websites. The requests vary greatly. Some will be for small sites; some large sites. Some will want a logo; others won’t. Some will have a website already they want to improve; others will want a brand new one.

However, I often write the same answers to client requests. Over the years, I’ve kept what I have written and constantly reviewed it so that new requests can be answered with a quick copy and paste!

Here is an example of what I tend to write to potential clients about a fairly standard website set up:

Main website email

Thank you for your enquiry. I will definitely be able to help you design and build your website. Here is what will be included in the package:

• The ability to add, edit and delete content You will be able to create pages, insert images and edit content through an intuitive administration area.
• SEO Your site’s code will be optimized for search engines.
• Get the right URLs Your site’s URLs will always include real words separated by hyphens (for example: http://www.your-site.com/contact-us/).
• Sitemap I will create an XML sitemap which is a widely adopted search engine standard that helps search engine robots crawl your site. Your sitemap will also be submitted at Google Webmaster Tools to ensure that your site is properly indexed. Other search engines will also be notified.
• www or non-www You can choose whether your site will have a www or non-www web address.
• Follow web standards Your site will be written with standards compliant code wherever possible.
• Mobile friendly Your site will have a special mobile version when viewed by a handheld device.
• Speed Your site will be created with the smallest and fewest number of files as well as caching devices to ensure minimum loading times.
• Visitor statistics You will have the ability to continually monitor your site’s visitors, how they reached the site, their geographical location, how many pages they viewed, etc.
• Social networking and bookmarking buttons I will enable your visitors to easily vote for your pages on various social bookmarking and networking sites, eg. Twitter, Digg or Facebook.
• Contact page I will create a contact page with a form which, when filled out, will be sent direct to your email.

Obviously the bullet points can be rearranged depending on the client request.

Education

Creating a new website for a client can be a process of educating the client on what works and doesn’t work on the World Wide Web. For example, some people may want a few static pages put up and then hope for the best. I try to explain that the internet is a living and evolving organism and, as such, your website would be better off living and evolving as well.

I always try to persuade my clients to write regular content. I don’t specifically mention the word “blog” if they haven’t mentioned it first. For some reason, I find clients can be initially resistant to the idea of a blog. So, until they “get it” I always try to reserve an area of the website for constantly updated content.

Similarly, I found that clients always came back to me to ask me to set up an email list for them. So now I always try to pre-empt this by persuading them to start one immediately.

I like to use WordPress as a CMS as I believe it provides the client with a intuitive back-end to manage the site as well as a coherent structure and good SEO “out of the box”. If I need to introduce the client to WordPress, I say the following:

WordPress is a robust and feature-full web publishing platform with a focus on aesthetics, web standards and usability.

It’s easy to use. There is excellent support documentation and forums because, literally, millions of people use it. It’s database driven so you can transport it to another CMS if you really want to. Anyone can edit a WordPress site (with a username and password) from anywhere in the world.

WordPress, as it says on it’s homepage, is both free and priceless at the same time.

I usually do a google for “WordPress websites” or look on the WordPress showcase to get some links to WordPress sites that the client may like.

Design

I like to show the client a Photoshop visual of the site before starting the development stage. Here is how I explain this:

I will first present a visual of how I expect the home page to look. You will be able to make comments and suggestions on this visual which will be amended and agreed upon. The design of other pages can also be finalized through this process if you wish.

I used to say that the visual stage should never take more than 4/5 rounds but now I don’t believe this is necessary.

I send the visuals to the client as links to a web pages presenting the image and the page title. I find this better for the client to actually see the pages in a browser rather than just sending a JPG in an email.

Conclusion

I hope this may help other web designers and developers as well as anyone who want a website designed and developed. If you are a designer or a developer, do you have similar processes? Do you have any other tricks for client communication in this instance?

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.

Google estimates there are over 1 trillion (as in 1,000,000,000,000) unique web pages on the web and there are an estimated 7.3 million new ones added every day – but don’t let these figures overwhelm you, you found me. My website was set up with only a few dollars and a bit of common sense. And, if I can create a valuable online resource from nothing, so can you!

Websites need authority and reputation and that is built up over months and years. So every second you spend thinking about creating a website is an authority-gathering second wasted.

Do it now!

It is almost impossible to make “bad” or “wrong” decisions with websites as they can be corrected. 

On the web, content is separated from design. So if you think you have made a mistake with the look of the site, it is possible to change it without touching the content. The content can be held in a database which can be moved from webserver to webserver, from web address to web address, from Content Management System to Content Management System. 

1. Purpose/Niche & Keyword research

The first thing you must decide upon (or, most likely, you have decided already) is it’s purpose. What do you want your website to do for its visitors and what do you want its visitors to do with the website?

For any website to succeed, it is critical to know the audience and the means to reach them. However, even if you think you know your website’s purpose and audience, research is a must! Get yourself over to Google Keyword Research, and key in the words you would use to describe the website’s purpose or niche. Here you will find how many times a month these words are used in Google searches and suggestions for other terms you could use.

Say you want to build a website about “nicotine cessation” – you will find that these keywords have 2,000 searches on Google every month but that “giving up smoking” has 500,000! Five seconds of keyword research has made your new website 250 times more easy to find!

These keywords should now be put in titles, headings, subtitles and various other places in your website. And, if possible, in the web address…

2. Register URL / Web address

Your website URL (Uniform Resource Locator) is web address of your website that starts with http-colon-slash-slash. Try to put keywords in it, while keeping it as short and as memorable as possible. A keyword rich URL is a bonus for any website. It’ll help boost ranking in the search engine results pages.

But what of the extension or TLD (Top Level Domain)? Most people will prefer a .com. But what if you can’t get it? The new kid on the TLD block is .co. “With industry-leading technology, enhanced security and unprecedented rights protection mechanisms – .CO is poised to become the world’s next premier web address” so say GoDaddy who would like to sell a lot of them as they cost more!

Or will your website fare better with a geographic TLD which will invoke an association with a particular area or country, like to co.uk or co.nz?

Other extensions have a meaning. The .net extension is supposedly for websites solely related to the internet, .biz is intended for businesses. Similarly, .org is for non-profits.

Once you have decided on your domain name you must register it. Try GoDaddy, who are usually the cheapest or, in the UK, 123-Reg.

Don’t use GoDaddy for hosting – I have heard some terrible stories about them!

However, I wouldn’t spend hours and hours trying to think of the perfect web address. Visitors don’t get annoyed typing a long URL into their browser because they won’t have to do that. 99% of the time people arrive at your website through links.

3. Get a host

To the uninitiated, choosing a host may be even more daunting than choosing a website address name. You need to consider the server software (IIS or Apache), hosting package (shared, VPS, dedicated or cloud) as well as performance and support.

Personally, I like to create my sites with WordPress so I prefer an Apache server. As for the hosting package, shared servers are the cheapest and slowest, dedicated more expensive and fast with VPS (Virtual Private Server) somewhere in between. If you want your website operating on multiple connected servers, a scalable and cost-efficient answer could be a “cloud” hosting package although maybe only for the more technically proficient.

You should be looking at around $7/month for shared hosting, about double that for VPS. Dedicated hosts can charge from $100/month upwards.

Here are some hosts that I have found to be amongst the very best for reliability, performance and support. Most are large companies, I’ve had bad experiences with smaller hosts.

Good starter hosts with the cheapest shared servers and the best reputations are: Justhost and Bluehost (who do a VPS package).

You can choose between shared, VPS and dedicated at Hostgator, A2 Hosting and Liquid Web.

Great cloud hosting packages can be found at Rackspace and VPS.net.

I’m running this site on a VPS at Dreamhost. I’m happy with their support, the quality of the hosting and their prices are the most competitive (you can see what’s important to me!)

Once you have set up a hosting account, you will need to return to your domain name registrar’s website and and fill in the NameServers (usually one primary and one secondary) given to you by your host. More on how to set up a website here.

Don’t worry about deciding on a host, if you don’t like one you can simply move to another one. The process of moving a website from one host to another is at first a painful one but it will teach you valuable lessons about web maintenance!

4. Design your site and create your content!

You’ll notice I put these two vital tasks in the same step. Why? Because, although I come from a design background, it’s not vitally important to get the design right straightaway. OK, it would be great if you do, but the design of a site can be changed or tweaked at a later date.

On the internet, content is king. You could spend months and months on the most beautiful website design but it won’t do you any good if no one comes to see your site. It is the content (the words) that are indexed by Google and are shared through social networks. And, as I said earlier, websites need a bit of time to build a reputation, so get your content out there as soon as possible, you can always write more or change it later.

The process of creating your websites content and design will be different for everybody. Personally, I usually use WordPress as a Content Management System. If you don’t believe you have the time to be able to do this yourself and you want to hire professionals, I would advise you to only use people that have worked together before – not two or more strangers.

Conclusion

The process is not as complicated as it looks. The most important thing is to get started as you will make mistakes and incorrect decisions along the way, but that’s what teaches you the most important lessons.

Has this been a help for any of you who are thinking about creating a website for the first time? And, for those who have done this before, have I missed any important detail out.

This is an article from Rob Cubbon

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

6 years ago I was typesetting company reports, trying not to look at the clock to see how soon I could go home. Now I work from home and every time I look at the clock I marvel at how quickly time passes! I have managed to cross-over from being a print designer and artworker to running an online design and marketing business.

It was difficult at first, putting my ruler and pantone swatches against the screen and thinking that JavaScript was some sort of Indonesian font, but I realized that some principles of design remain constant through print and web and it’s not as difficult as it looks.

Here are some of the secrets of learning web design

First of all, don’t make the same mistake I did and use Dreamweaver as a WYSIWYG design tool like QuarkXpress or InDesign! You’re going to have to learn some code.

HTML, the mark-up language that is the bare bones of all web pages, can be mastered in only a few hours. It’s very probable you already know some of it. CSS (which can be included in HTML files but is ideally a separate file) will take longer to learn but is necessary for the designer to know.

The best way to learn the various technologies associated with web design is to find web sites that you like and view the code to see how it’s done.

• In Firefox go View > Page Source
• In Google Chrome View > Developer > View Source
• In Internet Explorer go Page > View Source

Within the HTML you will see absolute and relative paths to other files, for example, the style sheet may be http://www.website.com/css/styles.css or an image may be http://www.website.com/image/company-logo.jpg. Follow these paths to find everything you can about the different elements of a website. This will help you to make them yourself.

Another techniques that will help you learn HTML and CSS is viewing the Developer Tools in Chrome or Internet Explorer and in Firefox using the Firebug extension. While in Developer Tools or the Firebug panel, select on the cursor (an arrow or a magnifying glass) and with that click on a web page element and the code affecting it will show up.

You can make HTML and CSS changes and see them live on the web page. These tools will also show you which CSS selectors affect an element and which are overrided.

Images should be 72 dpi and in RGB not CMYK

Most computer monitors display at 72 pixels per inch – so a 72 pixels high image will be roughly one inch tall. In Photoshop, all web images should be 72 dpi and in the RGB color mode (unless Grayscale). Images viewed at 100% in Photoshop will be the same size on the web page. However the colors will all look different from monitor to monitor. Use the Color Picker in Photoshop to get the hexadecimal values of colors.

Use File > Save for Web & Devices… or Edit > Copy Merged to export your web images. For file types, use:

• GIFs for graphics (maybe only a few tones of the same color)
• JPGs for normal photographs (like a headshot)
• PNGs if you want transparency (GIFs have transparency but only PNGs offer degrees of transparency – but don’t start dancing a jig of delight yet, you’ll need a hack to get them to work in Internet Explorer 5.5 and 6)

Think of space in terms of pixels and percentages not millimetres and inches! The content area of a website shouldn’t be much wider than about 1000 pixels. An HTML email really shouldn’t be wider than 600 pixels.

When designing or laying out web pages in Photoshop, try to use as many Vector Smart Objects as possible as they can be scaled, skewed and colored and will never lose their quality.

Think of type in terms of pixels, percentages and ems not points

For text you can use only a few core web fonts. There are ways of getting around this but that’s for another day. Maybe you’re only OK with the following:

• Arial
• Avant Garde
• Courier
• Georgia
• Times New Roman
• Trebuchet MS
• Verdana

But you can choose fonts to use if the one you want is unavailable. So a CSS declaration such as font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; means: “if the computer reading this webpage doesn’t have a lovely Helvetica Neue, please use an ordinary Helvetica, otherwise Arial, and if they don’t have any Helveticas or Arials then just use any old sans-serif font – there’s no hope for them!”

No need to bother about hyphenation, widows, orphans, legs of copy – they don’t exist here. This is the web, baby! (If you really want to get rid of a widow – on a heading perhaps – use a non-breaking space ( ) between the last two words.)

Resources

The best way to learn web design is to … design web pages. Challenge yourself – each time you create a new website. Otherwise you can:

• Try Google (obvious, I know, but … )
• Ask a question at SitePoint or Digital Point forums. If you have researched the query adequately and explained it simply, then 99 times out of 100 someone will provide you with a solution. There are many other excellent design forums as well that can be a great help: Estetica Design Forum, DesignersTalk, Web Designer Forum, to name but a few. (If you’re interested in link juice Digital Point is dofollow for forum signatures!)
• Use online browser rendering services like Adobe’s BrowserLab and BrowserShots. BrowserShots has more browser choice but it’s painfully slow. Use IETester on a PC to test different versions of Internet Explorer – it’s crashy but it does the job.
• Use these sites to validate the HTML and CSS
• Read books. I found this book very useful: Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition by Ian Lloyd
• Get up, make a cup of tea, tear your hair out and shout expletives – it won’t make any difference but it might make you feel better

Above all, don’t worry! Web design is sometime fiendishly tricky but strangely satisfying. And, if I can do it; anyone can.

Conclusion

Are you a convert from print design who has mastered the art of creating websites? What were the most confusing aspects of web design initially? Or, if you are just starting out, let me know if this has helped you at all.

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 to Win Friends and Influence People is one of the bestselling self-help books ever published. Written by Dale Carnegie in 1937, it has sold 15 million copies.

“[Dale Carnegie] changed my life”
Warren Buffett, one of the world’s wealthiest people and most generous philanthropist of all time.

The book isn’t about how to be popular like a prom king/queen, how to cajole people to do things against their will or about how to play the office game of trampling on certain people to get to the top.

It is more about looking at life from the perspective of other people. But what can a book like this, written over 70 years ago, tell us about internet marketing? The answer is a great deal.

The book has 30 core principles. Here are a few of them and their possible application in the world of web…

Don’t criticize or condemn

If you see someone has made a mistake in a blog or a forum, don’t wade in and lambast the person with annoying words like “fail” and “idiot”. If you really feel they would benefit from the correct information, why not PM them or email them. They don’t want to appear stupid in front of their peers and it won’t benefit you if they do either.

Don’t complain

Don’t complain to clients, don’t complain to co-workers – don’t even complain to yourself under your breath or even in your thoughts! Complaining is negative energy which breeds negativity.

Give honest and sincere appreciation

Isn’t that what I’m always saying about social media and blog commenting? If a blog post you have read is helpful don’t just say “Nice post”. If you sincerely congratulate the blogger for their hard work and explain how it helped you honestly, your appreciation will be gratefully accepted.

Arouse in the other person an eager want

Carnegie talks a lot about seeing things from the other person’s point of view. And allied to this is internet marketing’s holy grail: make people see value in what you have. How do you do that? Put yourself in someone else’s shoes. What could arouse desire to make you click that link?

Be a good listener. Encourage others to talk about themselves.

I love to talk about myself. It’s the only subject I’m expert on. This is a great advice for people wanting to get responses from the leaders/heroes/rock stars in their niche. Do you want to get an internet celebrity to write for you? Send them an email with 5 questions about them. It’ll take them 5 minutes to write, they won’t have to do any research and I bet 9 times out of 10 you’ll get a favorable response.

The only way to get the best of an argument is to avoid it

Dale Carnegie used to love an argument. In fact, he had wanted to write a book about how to argue successfully until one day he realized that you can’t.

He realized that he had changed his mind. So have I. I can remember holding convictions in the past that I now believe not to be true. So what makes us change our minds? We do. No one in the history of the world has ever changed their mind as a result of an argument. Period. And, if anyone disagrees with me, I’ll argue with them!

Seriously, arguing is a waste of time. If you lose, you lose. If you win, you lose. The other person will still believe they’re right and will resent you forever.

Read pages and pages of flame wars on a forum. Do they teach you anything? Sure a healthy disagreement within a discussion is natural. But an argument online descends into people accusing each other of saying things they didn’t really say and reaching for dictionary definitions and Wikipedia entries to justify themselves.

Arguing wastes time, saps energy and diverts you from your goals.

Show respect for other people’s opinions, never say, “you’re wrong”

Remember, if two partners agree on everything, one of them is unnecessary. Of course, there are going to be differences of opinion and it’s good that there are. But be diplomatic with other people’s opinions. Show them you understand why they hold that differing opinion and then move on.

If you are wrong, admit it quickly and emphatically

We all make mistakes. But sometimes our biggest mistakes are not being brave enough to admit them in time. Someone who admits their mistakes garners respect.

Photo by ShelleyS

Little known fact

Author Dale Carnegie changed the spelling of his last name from “Carnagey” to Carnegie in 1922, at a time when Andrew Carnegie (the hugely wealthy industrialist and philanthropist) was a widely revered and recognized name. Dale Carnegie was able to fill out New York’s iconic Carnegie Hall for lectures. So he lectured in the hall that bears his own name – marketing genius!

What about you?

Have you ever read this hugely influential book? What other advice have you gathered from self-help literature that has helped you in 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.

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

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

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

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

1. Web developer tools and Firebug

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

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

2. WordPress.org as blogging software

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

3. Hosts

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

4. Ensure cross browser consistency

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

*{margin:0;padding:0}

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

5. Test

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

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

6. Validate

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

7. Use JavaScript not Flash

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

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

8. SEO

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

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

9. Speed and compression

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

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

10. Picking colors and adding space

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

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

Extras

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

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

And what about you?

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

This is an article from Rob Cubbon

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

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

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

A Virtual Private Server is a physical computer partitioned into multiple servers each with running its own operating system.

Here are the most recommended VPS hosts for WordPress

I contacted hundreds of WordPress experts to ask them about their experiences and recommendations for VPS hosts. Speed, reliability, ease of use and quality of support were considered in the following recommendations.

A2 hosting

Inexpensive and their support comes highly recommended. 256 MB (burstable to 512MB) RAM, 10 GB storage, 300GB monthly bandwidth for $14/month. Other packages are similarly competitive. You can get cPanel with much higher specs for $50/month with the super Managed VPS Packages. 99.9% uptime guarantee.

Sign up to A2 VPS hosting here.

Dreamhost

Reasonably priced, good support, fantastic recommendations. This is my choice! RAM starts at 300MB, unlimited space and bandwidth. Dreamhost have their own award-winning user’s control panel. Prices start at $15/month. You can change your resource levels on the fly… no reboot needed!

Use IWANTADISCOUNT7 as a coupon code to get 50% off your first month if you sign up to Dreamhost.

VPS.net

This is all on the cloud – and affordable. Their experts will move your site to VPS.net for no charge. By default everything is command line; cPanel is an extra. 5GB disk space, 250GB network transfer, for an average 25k visitors for £13 per month (first month £1). 25GB disk space, 500GB network transfer for an average 125k visitors for £40 per month. Their users were extremely complimentary.

Sign up with VPS.net here.

Used by famous WordPress SEO blogger Joost de Valk (Yoast).

Rackspace

Their users had nothing but good things to say about Rackspace. Cloud Sites™ runs on a series of clusters so it has redundancy and protection built in. When you upload your site or web based application, multiple instances of it run so that even if an entire server goes down your site stays up and running. They have their own cloud control panel proprietary GUI to navigate you through the clouds. Cloud Sites™ start at $149/month.

Sign up with Rackspace here.

Used by the famous tech blogger Robert Scoble, who is an employee of the company. Your site will be super fast here.

Liquidweb

Their VPS plans start at $60/month and include cPanel as well as root access, 384MB RAM, 20GB storage, 400GB bandwidth, 4 IP addresses. Their VPS packages support 100 percent network uptime, VPS monitoring and a 30 minute support response guarantee.

Use Liquidweb hosting here.

VPS hosting can be the happy halfway house

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

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

To command line or to control panel?

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

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

VPS hosting in the cloud or Standard VPS hosting?

Cloud computing is run on multiple of servers whereas on standard VPS hosting your site will sit on only one computer with associated backups. For this reason there is usually less or no downtime with cloud based services.

Conclusion

Deciding on a VPS host for WordPress is no easy business. There are many things to consider. Above all make sure you pick a host that other WordPressers recommend.

Use the following criteria to decide:

• RAM: 500MB RAM would be OK for a WordPress site that gets on average 400 visitors a day.
• CPU
• Band Width and Disc Space
• Server Software: if you want to use cPanel you may have to pay extra or maybe your favorite server software isn’t available
• Quality of Support
• Reputation

If you have any other recommendations or questions be sure to make them known in the comments section!

Shared hosting for WordPress

Alternatively, if you find these prices too expensive for you your can try shared hosting for 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.

If you are either just starting out as a blogger with a self-hosted WordPress blog or you are frustrated by your current host – here is a list of the best WordPress shared hosting companies as voted for by WordPress experts.

Shared web hosting is a service where many websites reside on one web server connected to the internet. It is generally the most economical option for hosting, as many people share the overall cost of server maintenance.

Recommended shared hosting for WordPress websites

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

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

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

Bluehost

The general consensus seems to be that Bluehost is inexpensive and has many powerful tools but support is maybe where it lacks the most. BlueHost is one of the 20 largest web hosts, collectively hosting well over 450000 domains with its sister company, HostMonster. I’ve used BlueHost for years and it is astonishingly fast for a shared host and I can highly recommend them.

Sign up with Bluehost here.

Hostgator

The company was founded in 2002 by Chairman Brent Oxley, who started the company from his dorm room at university. With over two million domains, HostGator hosts approximately 1% of the world’s internet traffic. They came up many times in our survey as being a reliable host.

Sign up with Hostgator here.

Dreamhost

Reasonably priced, good support, fantastic recommendations. Unlimited space and bandwidth. Dreamhost don’t have cPanel but they do have their own award-winning user’s control panel.

Sign up with Dreamhost here.

What not to do!

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

WordPress and Shared Hosting

As the internet becomes the preferred method of communication for businesses worldwide, the tool of creating and publishing the content is of increasing importance. WordPress is used by millions to deliver news, messages and articles to the world. It has become not only the blogger’s weapon of choice but also a hugely popular Content Management System.

Learning how to use WordPress is easy. All you have to do is to login, add a new article and either write in WordPress, or copy and paste from your favorite word processor. But WordPress hosting is not for every web service.

WordPress requires high standards from the web hosting provider which is why you should take a lot of time to discover the best hosts. But first here’s a description of shared hosting and why it might be for you.

A shared hosting account is cheaper and easier to maintain than a more expensive dedicated or VPS account. It’s considered typical for budget or entry-level hosting services but people can run successful websites for years on shared hosting. It can supply sufficient disk space, bandwidth and functionality for personal, hobby or small-business websites.

Disadvantages of shared hosting

However, being the cheapest package, it has its disadvantages. Firstly, it usually has a reduced level of security as you are sharing the server with several other websites. Shared hosting also has limited resources causing speed issues at both the back and front ends of your site.

Many individuals on the same server can lead to issues with blacklisting on email. I would recommend everyone route email through Google Apps for Business for this reason.

Remember, with WordPress to choose a host running Linux and preferably running Apache, using the Apache mod_rewrite.

Conclusion

I learnt a huge amount from doing this survey. However, I decided to turn my back on shared hosting for this site and went for a Virtual Private Server (VPS). My next post will be about the VPS hosts for 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 got a call from a potential client the other day and he asked me a very simple question.

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

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

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

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

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

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

WordPress

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

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

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

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

This is an article from Rob Cubbon

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

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

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

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

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

Body text size and line spacing

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

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

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

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

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

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

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

Paragraph spacing

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

p { margin-bottom: 10px }

Include sub-headings in your blog posts

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

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

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

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

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

Make your text scannable

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

Insert images

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

Conclusion

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

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

This is an article from Rob Cubbon

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

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

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

Usability

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

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

Less confusion, time and money

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

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

Better SEO

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

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

Ignore the nay-sayers

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

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

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

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

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

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

It’s never too late to learn!

This is an article from Rob Cubbon

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

What sort of website to you want to create?

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

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

What sort of functionality do you want?

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

Now search again for your web designer / developer

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

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

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

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

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

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

What do I look for?

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

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

Conclusion

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

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

This is an article from Rob Cubbon

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

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

Why did I do this?

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

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

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

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

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

OK, so how do you get a copy?

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

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

So, here’s the link:

This is an article from Rob Cubbon

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

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

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

Adding an image with text above and below

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

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

Adding an image with text flowing around

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

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

Alt text

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

Image size

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

Finally…

If you want to write a caption you may.

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

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

Put this code in your theme’s CSS:

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

.alignleft {
float: left;
}

.alignright {
float: right;
}

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

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

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

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

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

This is an article from Rob Cubbon

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

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

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

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

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

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

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

Now your button should look like this:

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

The web designer’s secret penultimate pixels!

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

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

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

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

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

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

Other web button tutorials

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

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

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

This is an article from Rob Cubbon

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

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

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

Create your Avatar

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

Connect your social bookmarking sites to tweet your faves

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

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

Tweet your latest blog posts and blog your latest tweets

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

Publish videos and photos and tweet them

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

Sync up your LinkedIn and Facebook status with your Twitter feed

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

URL shorteners

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

Conclusion

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

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

This is an article from Rob Cubbon

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

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

How to publish your email address online without getting spam

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

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

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

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

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

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

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

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

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

Contact form

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

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

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

Should I include my telephone number and address online?

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

How to design your contact page

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

This is an article from Rob Cubbon

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

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

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

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

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

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

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

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

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

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

The benefit of cloud commuting

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

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

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

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

The disadvantage of cloud commuting

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

Cloud commuting and graphic design

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

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

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

This is an article from Rob Cubbon

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

What is RSS?

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

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

How to set up a Feedburner feed

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

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

Install the FeedBurner plugin

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

WordPress settings

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

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

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

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

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

Design your posts so they look great as an email

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

Advertise the RSS feed and email subscription on your website

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

What’s the benefit of RSS and email subscription?

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

This is an article from Rob Cubbon

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

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

The future is on the internet not in print?

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

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

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

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

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

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

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

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

So where does this leave the freelance graphic designer?

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

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

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

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

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

This is an article from Rob Cubbon

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

What are email blacklists?

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

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

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

Are you on an email blacklist?

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

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

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

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

Use Gmail to send and receive mail from the blacklisted address

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

Forward all your mail to your Gmail account

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

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

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

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

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

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

This is an article from Rob Cubbon

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

Simple and interactive image slideshow fader with JavaScript

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

How to use it

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

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

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

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

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

Other JavaScript resources on the web

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

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

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

This is an article from Rob Cubbon

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