Category Archives: design makes a difference

Magic Moment: Creating an easily viewable gallery

Blog tuitionThis post is for all your bloggers out there who deal with pictures or photographs in your businesses. You will, of course, be fully aware how brilliant blogs are at displaying your wonderful images, and I expect your blogs are bursting at the seams showing off your sumptuous fare.

There are many plugins available to create a gallery in your blog, professionally providing a slide show or a fancy fanfare of imagery. But I find these moving applications a bit annoying, and anyway, once a picture has gone by you won’t see it again until it comes around the next time.

So I wanted to work out another way of showcasing to potential clients without any complicated technical stuff, and it works simply on WordPress’s existing ‘Library’ in your ‘Media’ section, located through the left sidebar while you are in ‘admin’ mode.

Attachment Display SettingsThis is where WordPress stores all the pictures you’ve used in your posts and pages, ready to be used again whenever you need them. Each image is given its own URL, which you can use in many ways to display throughout your blog, for example, in a text or image widget in the sidebar.

So, why not take advantage of this to display your images? You could upload a large version of your perfect picture (suitably watermarked to preserve your copyright) into the gallery. Once published, when somebody clicks on the picture they will be able to view it in its own personal page (click on any image to see what I mean).

Edit Image IconIf you can’t display this picture in its original size, you could resize it before you paste it in your gallery page. When you upload your picture, the Attachment Display Settings menu will provide the option to paste it as the thumbnail size if this is applicable.

Otherwise you will need to resize it when it is in situ. The picture’s editing menu is reached by clicking on the image in ‘edit mode’ to show the editing icons in the top left corner. Click on the mountain icon to access the edit menus, and then select ‘Advanced Settings’ in the tabs above.

100% sized image60% sized image

You can resize your picture by by selecting the desired percentage in the sidebar, as shown above, or by changing the number of pixels.

Reduced Size Image

Remember you only need to change one dimension, as WordPress will calculate the other for you.

Reduced Size Image

Now you can display your pictures as icons that can be clicked on to show the picture in its true dimensions and detail in its own page. As these pages are created automatically, there is no extra work for you, but there is the inconvenience that you cannot edit these pages to include navigation or a call to action to further your business, and the visitor will have to click on the ‘back’ button to return to your website.

Matching up a WordPress.com blog

Blog designThere is a small drawback to creating a WordPress.com blog to accompany your existing website. Even though there are over 200 themes available, if you want to keep the costs down it’s advisable to choose a free theme and adapt it as best as you can.

This isn’t as difficult as you think, as long as you are able to see the bigger picture. I usually have about five themes in the back of my mind that I know what can be done with them, and bring them out one by one to try and adapt them to suit the client’s needs.

Here’s the result of my latest project. I wasn’t able to exactly recreate the blog to match the website, but the owner was very pleased with the result.

Here’s the website:

Working Numbers website

And its accompanying blog:

Working Numbers blog

Now I know they’re not identical, but they’re close enough to recognise they belong to each other. Using a WordPress.com blog will enable the owner to start her blogging career, which she will be able to continue to promote her business and draw in more traffic and potential customers.

Should you have a stand-alone blog?

Design, Build and Enhance your blogAs I said in my previous post, back in the old days blogs and websites used different kinds of programming platforms, and were therefore considered totally separate identities.

Therefore for those up-and-coming digital marketers who realised the potential of blogs for business, it was necessary to create a blog sitting alongside your website.

But with the development of CMS and the birth of the blogsite (a blog that has become a website, and therefore already has a blog incorporated within it), there was no need to have a separate blog.

Nevertheless not all websites are made with CMS such as WordPress, which is, of course, a blogging platform. There are still some die-hard programmers who prefer to build websites using coding language or another form of website design package. And in this case a WordPress.com blog would be an ideal solution, free, easy to set up and use, and requires next to no specialist knowledge to create or maintain.

But there is the problem of making your blog look like your website, or as close to it as possible. This is in spite of WordPress.com providing its users with over 200 themes (or templates) to improve the blog’s presentation and look, none of them will match your website exactly. So the art is to recognise an existing theme that has potential and can be adapted to resemble what you are looking for as closely as possible.

Here is an example of what I mean – first the website:

Sew Different Website

and the WordPress.com blog made to go alongside it:

Sew Different Blog

It’s not the same, but it’s not far off!

So back to the question in the headline – a separate blog will work if there is regular content with suitable contextual links back to the website, whereas a blogsite won’t require these links because it is already part of the website. Both will work better with excellent search engine optimisation and plenty of fantastic posted material, and although the WordPress.com will have WordPress behind it to help with its indexing, a blogsite suitably armed bristling with SEO plugins and other helpful applications will probably perform better.

But don’t let that put you off creating a separate blog, as it would be far worse if you had no blog at all!

The beauty of blogs over websites

Design, Build and Enhance your blogBack in the old days, blogs and websites were different animals. They used different web-programming and systems, and the concept of turning a blog into a website (or blogsite) wasn’t even considered.

But technology improved, and blogs started to promote that they had pages, and that these pages could be used for more interesting things other than About Us.

Some clever-clogs started to create pages in their blogs saying all sorts of stuff, and gradually it dawned on people that creating and using pages in a blog was a lot easier to do than on an ordinary website.

For example, whenever something is changed in CMS (content management systems) that is present in all the pages, for example adding a page link into the navigation bar, then by simply creating and publishing a page automatically changed the navigation bar on all the pages at the same time!

How cool is that? No more going into each page separately and laboriously changing each element one at a time. (This is something I had to do with my Dreamweaver website whenever I created a new page and wanted to incorporate its link into the navigation bar that was on every page. It took me hours!)

This was such a time-saver for simple websites. Sidebar changes were automatically corrected on every page. Pages were easily edited and then published. It was so easy to paste a picture into a post and still be able to find it in the images gallery to use it in other posts or pages later. Writing in a page was as simple as writing a post, as the same principles were used, and the process was like writing in Word with similar editing buttons.

Blogging platforms advanced so that presentation and design was improved. Soon it was possible for almost anyone to make their blog look better without having to know copious amounts of HTML or whatever. Web-designers took advantage of this and created templates and themes to advertise their skills, as well as increasing the ever-changing blogging looks on offer. Blogs started to look fun, professional, very variable and certainly not at all ordinary.

And so the blogsite was born. And now the question arises: why do people bother with the old website design programmes when CMS appears to be so wonderful?

Well, there were restrictions to blogs that the old-fashioned way of producing a website could overcome. But these problems are fast being solved, such as being able to create new sidebars in different pages, which I have had fun doing in this blog’s new make-over. Even for those who want to have fantastic whizz-bang websites that do everything for you, then sophisticated usage of CMS can be adapted, as long as you can find a web-developer who knows how.

So how long will it be before CMS completely takes over in the website development world?

Helping you with problem solving

Design, Build and Enhance your blogThe Fairy Blog Mother has always been a sucker for helping people. It is, after all, the main reason why this blog was set up, to provide assistance to bloggers in distress.

As technology has advanced, I have had to keep up with the times. I have learned to adapt and incorporate new ideas, concepts and processes. It is vital to keep abreast of what is new, as falling behind is not a good idea in today’s blogging world.

Therefore whenever a problem is presented by one of my readers, I do my utmost to solve it for them. Sometimes it’s easy, as I’ve already worked it out before, and it’s just a matter of finding the appropriate post and presenting it appropriately, or dredging my knowledge to impart it within an email.

Sometimes there are problems that require thinking, research and working it out. These can be quite enjoyable, especially when the solution is found and shared with the requester. There is nothing more satisfactory than seeing a blog function properly again, or a design problem solved to improve visitor experience. It gives me a special glow to know a business is able to continue correctly and profitably once more.

For example, a business owner requested how he could have different navigation within his sidebars on particular pages in his website. The solution was to use the Headway theme which allows different sidebars on chosen pages, with menu widgets for secondary navigation. I had to wade in to create an appropriate additional menu that restricted which pages were shown in the main navigation bar, against the ones revealed in each sidebar, to provide the desired visitors’ journey through the website.

Another problem solved was the matter of pretty permalinks and understanding where you can create child pages. It is important for your website to have easy-to-use permalinks (URLs for each page) that make sense and are memorable for the visitor. The settings need to be changed to create suitable permalinks, and child pages cannot be allocated to the homepage, or the permalink will contain /sample-page/ within it. Using menu widgets will regulate which pages are shown in the main navigation, and which pages can be hidden from view or shown elsewhere.

All this may sound complicated, partly because it is difficult to ‘view’ or understand what is described, but rest assured, if there is a problem with the design element of your blog, ask the Fairy Blog Mother and I will do all I can to find the answer.

What is online value proposition and how does it affect me?

Design, Build and Enhance your blogI’ve set myself a new task for September. I’m going to transform this website through online value proposition.

This is a tall order for a blog that is set in its ways. It has grown organically resulting in a lop-sided structure, requiring more sections to balance it out. This means the navigation will require a total overhaul, with internal menus for better visitor journeys that enhance user experience.

Each section needs prominent promotion, strategically positioned to attract attention. Web interaction studies have shown that a visitor’s eye travels over the screen in the shape of an F: straight across the top and down the left side, with perhaps a bit of a stray across the middle. Therefore it’s vital where the important web elements are placed to encourage a good response, suitably linked to landing pages carefully written in a persuasive style primed to cover all emotions and desires.

Websites require a method to maintain visitor interaction. Blogs are notoriously bad at doing this, as blog posts are naturally read and then abandoned. Even with added digital hooks such as the Yet Another Related Posts plugin which automatically creates a selection of relevant post links after the content, visitors will need coaxing and cajoling into venture further into the site.

It is important to understand your visitors. This blog may have a varied intake, so hopefully the posts will continue to appeal to all, but each section will focus on a particular segment, with unique messaging that resonates with their needs, aspirations and interests. Gathered feedback will enable me to improve the products and information I provide, making Fairy Blog Mother more efficient in helping bloggers succeed.

Instant recognition is required about what this website will provide, which will distinguish it from its competitors and encourage better visitor participation. This is enhanced by increased SEO and traffic driving activities, careful rewriting of content and provision of alternative media such as imagery, webinars, video, comment boxes and social sharing connections. Fairy Blog Mother’s related social media platforms will supplement her campaigns and projects, providing an alternative for information, interaction and entertainment.

Recognition is combined with a clear marketing focus. Fairy Blog Mother has created a series of blogging courses designed to help non-technical people learn how to blog. The difference is that these will be focusing on ordinary, everyday language, with any jargon fully explained. Past users have told me that they appreciate the highly visual format, combined with reassuring ‘afterwards’ screen-shots that show what happens after a button has been pressed or a link has been clicked on. The courses will be delivered in variable formats, adapted to suit all needs, and will be enhanced by a webinar and offline workshop programme.

Communication plays a large factor if I am to give my customers exactly what they require. My community of Fairy Blog Mother helpers are encouraged to comment, provide feedback, interact and participate within my new ventures. There will be incentives and special products created for the steadfast fans that follow me through thick and thin.

And last but not least are the blog posts. After all, this is a blog as well as an educational resource. This is the main way I communicate to you, whether you know me or not, so it is important to keep churning out the free material I’m willing to share. And I hope you will share, comment and collaborate back in return.

Don’t get stuck in default

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

When WordPress is first uploaded, either by WordPress for the .com version, or by you for a .org blog, you will be issued with the default theme.

This is generally the Twenty Ten theme, which actually is a very good basic theme to start with, as it has many adaptable features to make it look better.

TwentyTen themeIt has a nice big banner, to which you can easily upload one with your corporate design, with a navigation bar under it, a single sidebar on the right with plenty of widgets to occupy it, and plenty of space for your posts.

But the trouble is, being the default theme, leaving it unaltered does shout out that you don’t know what you’re doing with your blog.

And since blog design is important if you want to give a good impression to your readers, and especially as it’s very easy to change your theme, it’s not a good thing to leave it in the same state as when it was created.

Here’s a blog I recently had fun changing its theme:

Design Differential blog

As it is a WordPress.com blog, I didn’t have to do much to the theme, just to add in the banner and put some widgets into the sidebar and footer space.

WordPress.com has over 120 themes available to download, and if you host your own blog with WordPress.org then there’s literally thousands! Most of them are free and very easy to upload and activate, and if you are blessed with knowing HTML and PHP, then the world is your oyster!

For WordPress.com users, just go to ‘Appearance’ in the left sidebar, and click on ‘Themes’, and wade through the examples until you find one you like. Selecting is made simpler by using the filter system. There is also a mechanism for previewing what your blog would look like before you ‘activate’ your chosen theme.

Then once in place you check what options are available to you under ‘Appearance’, such as the ‘Header’ and ‘Background’ links, and experiment to create your desired effect.

Populate your sidebars with appropriate widgets, upload a picture of yourself and add it to the ‘Gravatar’ widget to show off the blog’s author, and then get blogging!

And if you want to have me change your blog’s theme and enhance it with some well placed widgets, then you only have to ask (click on my logo to send me an email).

No picture ideas? Why not doodle?

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Continuing on my theme for picture blogs to overcome the fear of writing, I heard on BBC Breakfast News today about Doodlemum.

This is a brilliant blog! Blogging is an excellent pastime for mums, but unfortunately some can become a bit monotonous as they try to describe their daily lives. But this mum, Angie Stevens, expresses herself and her family through her doodles.

Actually I think they’re a bit more than just doodles, some have described them as sketches, but I think they’re full blown illustrations. Free, easy, immediately understandable, they instantly tell a story of the chaos of her family life: humorous, distressing, frustrating, exhausting – all mums will relate to these beautiful drawings.

There isn’t much text, just a quick explanation of what the story is about (if one is needed), perfect for a superb picture blog. You must go take a look!

On a more serious note, Angie has said she is looking for an illustration contract for picture books – I can’t think of a much better way to do this than to get your picture blog to go viral and being on TV to capture the attention of publishers and authors.

Magic Moment: Make sure your pictures are suitable #1

Fairy Blog Mother: blogging help

Click my logo to ask me a question!

Following on from the previous post about using pictures instead of words in your post, it is important to make sure your pictures have been suitably prepared for your blog. So here is the first of a series of Magic Moments to make sure they are.

Resolution greatly affects an image and how it performs on a website. This is determined by the number of dots per inch (dpi) across the page. There is a vast difference in dpi between web-images and photographs suitable for print, and a lot of digital cameras will provide pictures with high resolution that is not suitable for websites.

Therefore it is important your pictures have the correct resolution so it is not too large for the website to download. A normal web-ready picture is between 72 dpi to 96 dpi – anything larger than that will be delayed in appearing on your page, or may even be rejected by WordPress if it is too large.

Picture pixels and resolutionsResolution affects the number of pixels of an image, as a smaller resolution will result in a smaller picture. I know that the ultimate width for my pictures on this blog is 18cm, which is 510 pixels in 72 dpi, and anything larger will overhang into the sidebars. You will also find out the appropriate width for other sizes of pictures that have wrapped text around them.

You can adapt your pictures using appropriate software that provides you with this information, such as Photoshop Elements.

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!