Category Archives: design makes a difference

Want to know another way to put images into your post?

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Over Easter I tried to help a blogger from the States with placing images into her posts.

At first it was simply telling her she couldn’t cut and paste images from another source and place them amongst her text. All images that go into your posts need to become part of your blog first. They need to be given their own identity within the blog, properly saved to get their own URL, and a position within the blog’s space in the internet, which is called the server.

Even my logo has its special place within my blog. I am able to bring it up each time because I have stored it in the media gallery, which you can access by clicking on the image icon above the writing post area. This is the first way of bringing an image correctly into your blog, to place in your post and amongst your other images to use again.

As this poor blogger couldn’t do this (there seemed to be something preventing her from uploading images into her blog’s server), all I could do was to recommend asking help from the WordPress.org forums. I hope one of the technicians provided the answer, such as turning off the plugins first or typing in a special code into the Settings area.

FileZilla

Puzzling over this, I realised there is another way to put images into the server and then into the posts, by-passing the media icon and gallery. This is only possible if you have access to the FTP of your blog, and I use an application called FileZilla for this purpose.

FileZilla reveals the contents within the blog’s server. There are quite a lot of files that go towards making a blog happen properly. If you know your way around, within ‘public_html’ you will find a file called ‘images’ where you can upload your pictures. This will give each picture its own very simple URL, such as yourblog’sURL/imagename.jpg, without any extra files or dates clogging it up.

You can upload your pictures by simply dragging them into that file (once you’ve opened it up in FileZilla) or via the uploading mechanism recommended by your FTP provider. Be careful about naming your images, so you can access them later when there are a lot of other pictures stored there, even though they are placed in time-sequence.

The only problem is that you won’t be able to see them in your media gallery, so make sure they are the exact size you need, and you have a record of the image names (and make sure these are absolutely correct) to save you having to search them out in FileZilla later.

And now you go to your post-content page, place your cursor where you want your picture to go, click on the media icon, and now select ‘From URL’ instead of ‘From Computer’:

Make sure the Image radio button is checked.

The URL field is where you type in yourblog’sURL/imagename.jpg, which is why it needs to be exactly correct, or it won’t match with what’s uploaded into your server. WordPress will let you know if it is correct with a green tick or not with a red cross.

The ‘title’ field is marked as required (shown by the red asterisk) to show a yellow tag when moused over. Ideally the ‘alternate text’ field should also be required (you can use the same description) so that the search engines can read your images, as well as partially sighted visitors.

The rest of the menu is pretty standard, except for the ‘link image to’ field. This is where you can link your picture to another webpage or an email address (by adding mailto: immediately before the email address) like my logo. This is particularly useful if you have created a button image as a call to action.

Once you have confirmed by clicking ‘Insert into Post’, your picture should appear as you desire. Happy blogging!

Sidebar imagery sets blogs apart

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

There is a design agency I keep an eye on. I like them because they are distinctly visual (I suppose design agencies are supposed to be), but it is the myriad of colours and the way they use images that attracts my attention.

This is not confined to just their graphics on paper, but online too. Their style is distinctive, and may not suit everybody, but simplicity combined with complexity is tastefully intertwined, and they have found a way to put this concept onto their websites and blogs they also design for.

If you are into NLP, you will know that people understand and process things in different ways. Some respond visually, others to words and the rest to sounds. A blog can use all these to put its messages across. By using all of these media, there is a better chance of capturing the attention of more potential followers and customers.

A WordPress.org blogsite allows you to do virtually anything you like on your sidebars. You could go down the usual route and add in conventional widgets which are mainly text-based, or you could go out on a limb and create linked images. This is particularly apt if your main subject lends itself to a visual presence, and each image is specifically designed to look ‘clickable’ (three-dimensional, enticing and understandable), so your visitors could end up have far more fun exploring your site than an ordinary blog. After all, isn’t that what you want them to do?

Having images on your sidebars linking to various areas of your website should be in addition to the navigation bar, because there will always be people who prefer using that method to enter a site (reference NLP) and won’t understand the concept of clickable pictures. Don’t discriminate people who are wired differently from you, they all have to be accommodated if you are going to make your website succeed.

How clean is your theme?

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

I took the plunge and changed my theme again – but how many of you have noticed?

The theme experts will know exactly where to look – and I hope they will approve – but the whole idea was to make improvements to the insides of my theme, and ultimately my blog’s performance, by having a major ‘deep clean’.

Setting up a WordPress.org blog isn’t majorly expensive if you do it yourself (though hiring a web-designer to do it for you may be), but apart from the costs of hosting there doesn’t seem to be many more demands on your budget. Plugins and other applications are free (many suggest you make donations) and so are a very large quantity of themes. If you know a bit of HTML and PHP you could go into the CSS and make necessary changes – but only if you have the knowledge and necessary know-how.

But sometimes this false economy can create problems that you may not be aware of. You may be very proud of your free theme and how you have changed it. I know, I was! For many months I stood back and admired my blog’s theme, it’s purple boxes and mouse-changing coloured links. That is, until some very kind blogging benefactor pointed out the defects…

There is no such thing as a free lunch. My free theme had lots of unseen code behind it clogging up my search engine optimisation. Even my stats plugin wouldn’t work properly, and I had to rely on Google Analytics to monitor my blog’s performance (not that there is anything wrong with that, but it is only one side of understanding traffic and connectivity). Apparently he could see the ‘blockage’ with his software and advised me to purchase a paid-for theme. Only then would I have a ‘clean’ theme with no restrictions, freeing up my visibility on the web with a view to increasing my audience and blog awareness.

For a while I resisted. I was envisaging going back to freelancing and I had to save up for the fees of a diploma in digital marketing course I am starting next month (I believe in continued self-development). But all that time my poor blog was grinding to a halt under so much blogging code-crud and overbearing pressure I’m surprised it was working at all.

But last week I bit the bullet and bought a Headway theme. It was a bit of a financial shock, but I’m glad I did it. The day I transferred it onto my blog and started to develop my design, I received 208 hits! Amazing! I knew that was the case because my blog stats started to work again – a definitely worthwhile reason to have installed it. The result, after a lot of trial and error (I do like a challenge), hasn’t made much difference visually (I had no intentions of doing so), but the performance value has rocketed!

So now I will wallow in my improved blogging situation and keep you monitored of the differences it will make – and it will be in ideal time to work on my SEO to see what makes a difference and what does not.

WordPress is both easy and difficult

Fairy Blog Mother: blogging help

Fairy Blog Mother

Whether you find using WordPress easy or difficult, it does depend what you’re using it for and what kind you have.

I have mentioned before that WordPress have made blogging as easy as possible, and certainly the CMS (content management system) has been programmed for effortless use. The areas that you regularly use, for example, to write a post or create a new page, are designed for efficiency and straightforwardness, especially once you’ve start using it regularly, and if you are familiar with Word, you can easily adapt to WordPress.

WordPress.com is particularly focused on providing a free-hosted blog with the minimum of fuss. All you need to do is sign up, confirm your username, choose your template and start blogging. Everything is pre-programmed so you don’t need to worry about anything technical, and you can create a really good blog within a surprisingly short time-period.

WordPress.org is where the fun really starts. Here you have been given full access to the world of blogging, and you can add or subtract as much as you like from your blog. Not only is HTML accepted and works properly, which is necessary for advertising, installing sign-up forms or pasting up other promotional gadgetry, you have the opportunity to adapt your themes to suit your ideas, corporate image or preferences.

If you have the know-how, here you can pop into your CSS to change the colours of your design and links, create new banners and place images into your sidebars to promote your business, books or whatever, choose from thousands of plugins to improve the performance of your blog – in fact the more you learn about blogging, the more you can add stuff to your blog to make it do something amazing!

And if you find all of this too difficult, hire someone that knows this technical stuff, because once they’ve finished your blog will be fantastic! And as the process of writing posts and creating pages is the same as WordPress.com, it is as easy as falling off a log to post regularly, keep your readers happy, interact with them daily, encourage comments and feedback and persuade more subscribers to join your RSS feed so they can keep up-to-date with everything that you do!

How to make pictures look better

Fairy Blog Mother: blogging help

Fairy Blog Mother

In my last post you learned how to put a picture into a post. But there’s a lot more to pictures than you think, how they are positioned, creating padding around them, making them readable for the search engines – even understanding how to prepare your pictures beforehand.

When I started working for my boss and her newsletter provider, I was astounded how her staff struggled to prepare the pictures so they were suitable to be inserted. Her newsletter system was very particular, and could only cope with jpegs that were below 30MB, and the software available to use was Paint, which didn’t even work on my computer!

It took me a while to persuade my boss to buy Photoshop Elements, but once purchased, transforming pictures became a doddle. I taught my colleagues about dots per square inch, and that 72dpi is the most suitable for the web. I showed them how to crop a picture to show the best subject matter, how to reduce it in size without distortion, and how to to save it within the required size-frame. I even showed them how to collect images from different sources and convert them into jpegs so they could be used appropriately.

Suddenly the newsletters started to brighten up, look more interesting and attract more attention. And the same can be for your blog.

Click on your newly inserted picture, and you’ll get these icons:

It’s obvious that the red circle on the right means delete, but if you want to edit your picture, click on the left icon and you’ll get this menu:

Here you can change the alignment of your picture, whether it is placed left, right or centre within the page (from where you place your cursor) and the text will be automatically wrapped around it. (If this doesn’t work, which might be the case in some WordPress.org blogs, then you’ll need to add in a caption because then the image will be placed in a caption box which the text can wrap around.) If you don’t need to worry about your picture’s alignment, leave it as ‘None’.

I explained about alternative text in my previous email: alt tags describe the pictures for the benefit of the search engines who can’t read images, so use appropriate and relevant keywords, and for blind people whose computers read the alt tags.

Below that you can see the picture’s special URL, which will link to the picture’s allocated page within your blog. But you can edit that field to any other URL destination, internal or external to your blog, or to your email by typing ‘mailto:’ immediately before your email address.

If you’re happy with these changes, click on ‘Update’.

However, there is an ‘Advanced Settings’ tab at the top:

Here you can change the size of your picture to whatever you want. A tip: change either the width or the height, and then leave or make the other field blank, WordPress will adjust the picture accordingly without distorting it.

I use the image properties for creating ‘padding’ around my pictures. (This isn’t necessary if you have a caption, as padding is automatically created for your caption box.) Padding is the white space in between the picture and the text, preventing them from jutting against each other, and using this can make a big difference when presenting your pictures. I generally put anything from 5 to 10 in the boxes (vertical and horizontal), but you can experiment to what suits you.

The border box obviously provides a border for your picture, but be lenient – use between 1 to 3 unless you want to make a statement!

Again, once you’ve finished editing your picture, click on the ‘Update’ button.

So to sum up, make sure your picture is the correct size, is 72 dots per square inch, is aligned within your text, has alt text added to it, has a link added behind it, and has appropriate padding for ‘breathing space’ within the text. Then you’ll see a difference between professional picture placing and those that don’t know…

How to add a more tag to your post

Fairy Blog Mother: blogging help

Fairy Blog Mother

The more tag is a little gimmick that you can add onto your posts. It is a link that allows the reader to continue reading the remainder of the post on another page.

It is particularly useful for keeping your posts tidy, especially if your blog has the newsroll on its first page, and your posts have a tendency to be very long. Some people don’t mind showing all of their long posts, whereas others might want only to present only a taster paragraph with a more tag after it, as a link to the rest of the post which is housed on its permalinked page allocated to it by WordPress.

Here is a fancy example of a more tag from my other blog:

But WordPress.com provide a nice simple example for you to use (see the example at the bottom of this post). This is how you add in a more tag: first go to your Dashboard (via http://BlogURL/wp-login.php and than add in your username and password):

Click on ‘Posts >Add New’ to bring up the post editing page:

Type in all of your post. Remember that your first paragraph, or however much you want to be seen before the more tag, should be enticing and informative to encourage your readers to click on. If you are too ambiguous or cryptic, then the opportunity might be lost – give them a reason to want to read more, even with a call to action!

Next place your cursor immediately after the paragraph you want to be visible from your blog page, and click on the more tag icon:

This is where you’ll find the more tag icon:

And automatically the more tag will be inserted (it looks like a line with the word ‘more’ on the right):

Don’t forget to leave a return-space after the more tag, or your paragraphs will be bunched up. Once you’ve finished writing your post, then you can publish by clicking the ‘Publish’ button:

Then to view your more tag, visit your blog by clicking on the name of your blog at the top:

And there is the ‘Read the rest of this entry’ link after your introductory paragraph. Click on it to go to the permalinked page to read the remainder of your post:

Enjoy using more tags in your blog!

My blogging design dilemma

Fairy Blog Mother: blogging help

Fairy Blog Mother

In case you haven’t realised it, this theme has been doctored by me. It was originally a horrible pink (and the one I used before this was a hideous green), which certainly would not have done for a purple lady like me!

refers to WP.org

So I learned how to change the code (CSS) to the colour I liked. At first it was difficult, took ages and I made many mistakes, but I learned a lot and now I can change a theme to almost anything I like, even its dimensions and other juicy bits, and add on my graphics to make the theme my own. Also I can make changes whenever I want to (watch out, I’ve plenty of ideas for the future)!

Of course it helps to have a good base to start from, as so many themes out there on offer are certainly not to my taste, or don’t contain the attributes I deem necessary for a blog. So I look for a decent banner, well placed sidebars, copious body, simple navigation and as plain a background as possible.

One of the things I love doing is changing the theme of other blogs (check out what I did for Tom Pick)! It is so satisfying to make a good job out of a bad one, and this delight also extends to adapting a basic design into something the other person desires, expects or looks for. This is what I do for my boss when I design WordPress blogsites for her clients: I have chosen four basic blogging themes which I can change to almost anything the client wants.

But why do I have a dilemma? This is because I have been introduced to some WordPress themes that allow anybody to change them to whatever they want, without having to understand HTML, CSS or whatever. OK, you have to pay for them, but that also would be the case if you got me to redesign your theme, and it might even work out less expensive.

These themes have been cleverly developed so that all the blogger has to do is to select a basic layout, click on some buttons to activate changes, add in colour hexcodes for beautification, drag and drop attributes into an appropriate position, and experiment with lots of specially created gadgets and widgets to get the effect they want. A perfect system for geeks and non-techies alike.

But would you get that personal touch? Would it involve specially designed imagery that makes all the difference? Would your new theme stand out above your competitors or set you apart from all the other blogs out there? How important is it for you to have something truly you could call your own?

Really I shouldn’t be pressurised by this competition, because the people who would go for these themes prefer uniformity, rigidity and a sense of sameness, and perhaps like controlling something for themselves, rather than getting their theme redone for them, valuing design, individuality and a sense of something special.

How to take away the comment boxes from your blog’s pages

Fairy Blog Mother: blogging help

Fairy Blog Mother

The fact that there are always default comment boxes in new pages has always bothered me, why are they there? Surely only posts should have comment boxes?

I suppose WordPress thought it would be good to have the possibility of commenting on a page’s content, but really it’s a pain as it looks terrible and most pages are created not to encourage comments – best leave that concept for the posts!

But now I have learned how to ‘turn them off’ in WordPress.com (and for technical folk how in WordPress.org) and as it’s so easy to do in the ‘free’ WordPress version, here’s how:

First, let’s look at a homepage with a comment box:

Now really you don’t want a comment box on your homepage, as it looks wrong. So let’s remove it. First, go to the Dashboard (see How to access a blog):

Go to ‘Pages’ in the left sidebar and click on ‘Pages’ below it:

When you mouse over the ‘Homepage’ link you’ll get an option called ‘Quick Edit’. Click on that:

Look for where it says ‘Allow Comments’ on the right side under ‘Default Template’ and click on it to turn it off:

Don’t forget to click ‘Update’. You’ll go back to the ‘Pages’ menu:

Click on ‘View’ to see your new Homepage:

There, doesn’t that look better without a comment box!

Now repeat the process for all the other pages where you don’t want a comment box, and enjoy a comment-box-on-pages-free blog!

Which is better, left or right?

Fairy Blog Mother: blogging help

Fairy Blog Mother

I spent most of last Saturday messing about with a new theme for this blog. I wanted to see what it would be like to have the two sidebars on the left rather than on the right.

So I found a suitable theme (there aren’t many around with two left-hand sidebars) and set to work to change it to suit what I wanted. The original was far too thin, with narrow sidebars and an extremely deep banner, not to mention red rather than purple (a mere discrepancy easily overcome). I even redesigned my promotional squares to fit into the most left sidebar and was prepared to rearrange the widgets to fit.

But when I ‘previewed’ the new theme after I had loaded it up into FileZilla, I was disappointed. To me it seemed all wrong for a blog to have its sidebars in the most prominent position, with the posts placed secondary. The posts are the blog, so they should take centre stage, as these are the main thing people want to see and read. They shouldn’t be distracted by the sidebars, even if they are stuffed full of interesting and relevant content (as mine usually are).

So let’s take a look.  The first picture is the theme I have at present (January 2011) with the sidebars on the right:

And below it is the alternative theme with its left sidebars:

Looking at it now I could easily reduce the depth of the banner and even swap over the image and words to reflect the repositioning of the sidebars, but I’m still not sure whether that would make it better.

The reason for my dilemma is that blogging gurus declare how much more appropriate it is to have your sidebars on the left, especially if they contain call to actions such as subscription sign up forms and links to relevant information elsewhere (both inside the site or externally).

If your blog, website or blogsite has been created purely as a medium to promote the content of your sidebars, then yes I would agree. But an ordinary blog should concentrate solely on its posts, as that is what blogging is all about, communicating the written word to its audience without distractions and superfluous material getting in the way.

What do you think about this? Let me know through the comment box below –

Does your website have clickability?

Fairy Blog Mother: blogging help

Fairy Blog Mother

I was recently requested to create a blogsite with ‘clickability’. Even if it isn’t a real word (I’m sure I read it somewhere) I immediately knew what this meant.

I learned about clickability from a fantastic book called ‘Don’t make me think’ by Steve Krug, which had me transfixed from cover to cover. It’s all about using psychology to get the website visitor to perform the required action, and it is how the visitor reacts that contributes towards successful optimisation and function of the webpage.

I use a website that offers excellent WordPress themes (templates) with left hand sidebars. This is important as we, in the Western world, naturally read from left to right, so the most important elements of your website should be placed on the left: sign up forms, subscription requests, notices that require attention – in fact any kind of call to action, even if it is a link to your latest post or new page. Interestingly I’ve just spent the weekend investigating a theme with two left sidebars, but have decided against installing it permanently as I prefer this theme!

The next clickability element is the button that requires clicking. A flat image, even if it says ‘click here’, will not be as enticing as a raised or three-dimensional graphic. The button has to look like it will click when you press it with your mouse, even if it doesn’t make a noise, and clever web-designers can programme their buttons so that they transform to a ‘clicked’ image once the visitor has done the deed.

But even flat images can trigger clickability. There are lots of pre-designed icon websites you can use to create your buttons, and I searched through them to find images that matched my blogsite owner’s requirements, as we have become preconditioned to click on such images, these simplified and sparsely drawn graphics that convey meaning without words, almost universally uniform throughout the internet.

Even so, I am reminded of a website whose graphics did not bring any results. Nine beautifully positioned images of ‘products of the month’ showed hardly any interest from visitors when scrutinised through Google Analytics. So where did they click? Well, the poor things had a hard time searching for something that seemed clickable, as the main links were hidden inside the banner, and the sidebar’s links were thinly disguised as ordinary text. Only 50% of visitors gained access to the remainder of the site because the sidebar links matched their search requirements, and even though the site’s creator expected his ‘product images’ to be examined, there was no real reason or enticement to encourage such investigations.

Sometimes it is important to state the obvious if you want a reaction. One site I reviewed contained a lot of information ‘below the fold’, that is the area of the webpage that can only be accessed by scrolling down. As most of this material was necessary, I wondered how many visitors bothered to search to the bottom (remember, visitors usually use an average of 3 seconds to make up their minds about your website when they first visit), resulting in a lost opportunity. All that was needed was some buttons that highlighted the content that wasn’t visible, with anchor links to automatically jump to the corresponding area. If they had been clickable enough, the full purpose of the webpage would have been delivered.