Friday, 17 May 2013

Atypical Visitors: How Not to Turn Them Away


Not every visitor interacts with your blog in the same way. Some people use non-standard browsers to read your content. Others may not be able to understand English. And, of course, not all of your visitors are human. By failing to consider these atypical visitors in your design, your blog may be turning them off before they’ve even had a chance to hear what you have to say. Here are a few atypical visitors you may want to consider, and how you can design to accommodate them.

Disabled Users

Some of the visitors to your blog may be blind, deaf, or otherwise impaired. It’s important not to alienate them by providing your content in a purely visual or auditory format, or by making your site impossible to navigate from a keyboard.
Here are a few tips. If you use images, make sure to provide descriptive alt text. If you do podcasts, consider offering transcripts. And, if you use script-based navigation (e.g., Flash or JavaScript), make sure your site can still be browsed with scripting disabled.
By making sure your blog can be enjoyed through a screen reader, with the sound turned off, and without using a mouse, you’ll be on the right track to endearing yourself to your disabled visitors. To learn more, check out the US government’s guidelines for Section 508 compliance.

Search Engine Spiders

As Matt Cutts mentioned a few weeks ago, search engine spiders are a lot like visually-impaired users. They can only interpret the textual elements of your blog outside of its visual context and have difficulty following complex script-based navigation. Of course, unless you want marginal search engine placement, you’ll want to make sure they can read and navigate your blog as effectively as possible.
As with disabled users, good alt text is key to giving search engine spiders an understanding of your visual media. To allow spiders to properly crawl your blog, it’s also a good idea to provide a sitemap containing text links to every page. By placing a link to this sitemap in the common footer, search engine spiders will be able to reach every page on your blog from every other page, regardless of how your standard navigation is set up.

The Fonts Paradise: dafont.com

So the other day I was talking with my designer about a logo, and he recommended me to go to dafont.com, choose one font, and report back to him. Believe it or not I had never came across this site before.


dafont.png
It is nothing less than the fonts paradise. They have over 7,000 fonts available for download, most in PC and MAC versions. You can search for fonts based on style (e.g., fancy, techno, gothic, basic) or even browse among the Top 100 fonts on their database.

Add an Email Subscription Form Below Your Posts



It is a logical thing after all. Often times visitors will come to your site via search engines or via referral links, and they will just read the article they are looking for and move on (probably missing the RSS icons you have on the header or on top of the sidebar). If you place a message at the bottom of each post, encouraging visitors to subscribe, you might capture their attention and convince them to grab your feed.
What about email subscription forms though? Could they work as efficiently on the bottom of single posts? I had a feeling that they could, and I decided to test it out on my blogs. The results were pretty amazing.

The Numbers Without the Form

The first thing I did was to write down the numbers that Feedburner provides. I basically tracked the number of email subscribers on my three blogs, for four consecutive Mondays (four weeks were used because that was the longest period that I could obtain the breakdown for email subscribers).

Uncoverr.com

A Resource for Web Designers and Developers

Test Your Typography on FontTester.com

Optimizing the typography on your site is very important, because it affects how easily visitors will be able to read your content. I just came across a neat little tool you can use to do just that. It is calledFontTester.com.


The site basically let’s you tweak and compare blocks text. You can use a single, double or triple column layout, and tweak each one independently. Among other things you’ll be able to change the:
  • font
  • font size
  • font color
  • line height
  • letter spacing
  • word spacing
If you haven’t touched your typography in a while, or if you believe you could improve things a bit, while not use this Friday to do that? Once you find a combination that suits your website well you can copy and paste the CSS code.

How to Find Free Pictures for Your Blog


Adding visual interest in the form of images is a widely-used method for attracting readers to blog articles. If you’re holding back from spicing up your blog for fear of cost or (gasp) copyright infringement, here’s some advice to get you informed and comfortable with posting images:

Get to Know the Terminology

Unless explicitly noted, any image you find on the internet could be copyrighted, which means you could be held liable for copyright infringement. Are you up for taking that chance? Those of us who prefer to stay legal will typically be looking for images with some form of a Creative Commons license. This license is less restrictive than the traditional “all rights reserved” copyright (to varying degrees). Here’s a breakdown of the terms, acronyms, and icons associated with them, according to creativecommons.org:
Attribution: CC BY
Allows you to distribute, tweak, and/or build upon the original image for personal or commercial purposes, provided that you credit the creator.
Attribution-NoDerivs: CC BY-ND
Allows you to distribute the image “unchanged and in whole” for commercial and non-commercial purposes, provided that you credit the creator.
Attribution-ShareAlike: CC BY-SA
Allows you to tweak and build upon the original image for commercial and non-commercial purposes, provided that you credit the creator. Any new art you create based on the original image will carry the same license and be available for commercial use by others.
Attribution-NonCommercial: CC BY-NC
Allows you to tweak or build upon the image non-commercial purposes, provided that you credit the creator. Any new art you create will not carry the same license as the original image, but still must be used for non-commercial purposes only.
Attribution-NonCommercial-ShareAlike: CC BY-NC-SA
Allows you to tweak and build upon the original photo for non-commercial reasons only, provided that you credit the creator.
Attribution-NonCommercial-NoDerivs: CCBY-NC-ND
Allows you to share the image, unchanged, for non-commercial purposes only provided that you credit the author. This is the most limited license.

Image Borrowing Best Practices

Each image released under creative commons likely has one of the above licenses or some variation of it. To be on the safe side, you should always check the license agreement to make sure you aren’t violating anything. It may take some time at first, but as you become more familiar with the licenses, you’ll know where to look to determine the facts more quickly.
Not all free images require a credit to the image creator; many images on stock photography site Stock.xchng don’t ask for attribution, but their standard license does request that you “take the time to comment on and rate the Image you downloaded and do your best to show the work you created with the Image to the photographer.” Whether you’re crediting the image author or simply letting them know how the photo was used, it really is a small price to pay for a free, quality, and legal image.

Where to Find Free, Quality Images

Some of the best places to find free stock images:
This site describes itself as a “license-specific photo search engine.” It searches many of the popular free stock photo sources and allows you restrict results based on a variety of parameters, including account requirement, shape, resolution, and license.
This social image-sharing site has gained a reputation for harboring high-quality free photos. Search through the Creative Commons section or use the advanced search feature to specify a search within the Creative Commons-licensed content, plus you can identify whether you’re looking for content that can be edited or used commercially.
As discussed earlier, there are plenty of images on this site with more lax licensing that doesn’t require attribution. However, you’ve got to watch out for the much higher quality, payment-requiring iStockphoto thumbnails that get posted alongside the free stock.xchng results.
If you’re just looking for something small, stock photography site 123rf offers many of its small-sized (think 400px at the longest side) images for free. Just search their free images section, found under the Stock Photography header on the home page (or by clicking their link above).
Of course, if there’s a searching need, Google has a tool for it. Within their existing image search, Google added a usage rights parameter to their advanced image search. Here, you can specify whether the image should carry a license that allows reuse, commercial use, and/or modification.

One Final Thought

Now that you’re equipped to find images legally and without charge, here’s one last consideration: why not try creating your own images? Original photography and graphics can add value to your blog and make it appear more personal. While stock photos are a great option, especially in a pinch, don’t rule out the idea of adding non-canned images to your next post. Challenge yourself to come up with your own pictures depicting your product, service, or company; and guess what? It’s license-free!

Google’s Page Speed Service Wanna Make The Web Faster


How would you like to have Google grab all your site files, host them on a Google server, optimize the loading time with several tweaks, and then allow your visitors to visit your site directly on Google’s servers all around the world?
I sure wouldn’t mind (except maybe for the aspect of losing control).
The good news is that soon this will be possible, as Google just announced a new service called Page Speed Service. According to the announcement post:
The service is being offered to some beta testers right now, and soon it will be available for all web publishers. Right now what you can do is to run asimulation here to see how much your website would gain from Google’s service. In my case it wasn’t a huge boost. The “Page Load Time”, which is the main metric, improved by 19%.
If you like the results and to become a beta tester, though, you can apply using a link on the official announcement post (I linked to it above).


How To Keep Your Brand Consistency As A Blogger


A brand is way more than your logo and slogan. The overall style that defines you as a blogger can tell people to expect this and that from you. People tend to like what they recognize. We give trust to things that all to something familiar. If you make it easy for anybody to perceive who you are and you stick to that persona you’ll surely make a good impression in the long haul.
To state it upfront: diversity is undeniably good when you are a blogger. You can settle upon a wide range of topics to write about, you get to revamp the site from time to time and explore new ways to express yourself on the social media. A brand’s life is more relaxed in the blogosphere than, for instance, in the B2C world where each product has to create strong recognition in order to sell. We all know that.
However, what I am going to say (in the next 200 words or so) is just this: once you have defined your own style, stray from it no more so that you’ll earn readers’ trust and build a loyal fan base.

Clean your blog’s appearance

When it comes to the design of your website, every detail should make a harmonious statement. Choose an assembly of no more than maybe 2-3 matching fonts (Kernest can help you combine them aesthetically). Decide the class parameters for links and set some unitary rules over when to use bold and italic in the body of the articles.
Images and color palettes used on the site also need to be coherent all together. And the core element, your logo, should be nothing less than wonderful. It’s a good idea to hire a designer on this, to be sure the graphics will be distinctive and appealing. If you’re on a tight budget, 99designs can be a great alternative.

8 Key Tips for Building Successful Website


1. Content (Useful, informative, free, and easy to understand)

If you offer well written, original, easy to understand information, spiced up with good imagery, the chances of getting quality links, social media exposure and high spots in SERPs are bigger. The whole point of the Internet is finding useful, relevant, free information. Everything is about information. If you’re able to convey it in a manner that stands out from the crowd you’re automatically step ahead from the others in the pool.

2. Basic SEO

I vouch for the fact that you don’t have to be a SEO expert to rank your site high on Google search. Just several things to remember here:
  • include meta title tags,
  • optimal and natural usage of keywords,
  • provide good link bait article titles,
  • simple navigation through out the site,
  • proper usage of H1, H2 and H3 tags,
  • include sitemap,
  • use Google Webmaster Tools and Google Analytics to gain insight on what works and what’s not,
  • use robots.txt file,
  • proper permalink structure,
  • avoid duplicate content (CMS issue),
  • use canonical tags.
  • read the Google SEO Starter Guide (PDF).

3. Design

You want more eyeballs on your website, and you want them to stick with it more often. Except offering quality content you’ll need some good graphics for your site. Number one tip: If you’re serious about your site don’t use free, generic template. I would go even further. Don’t use paid template that is available online for others to buy. Pay someone to design a unique website for you. It doesn’t need to be jaw dropping and very expensive. A simple, pretty enough, and unique look would be good for starters.

Top Typography Tips For WordPress


Typography is often a neglected aspect of web design. There are numerous sites around the Web with wonderful content that is badly presented and difficult to read. For sites that tend to be heavy on textual content, like blogs, readability and typographical elegance should be of prime concern.
If you’re using a good-quality theme, the typography will, for the most part, be taken care of, but, should you want to tinker with your type, go beyond the basics, or are a perfectionist when it comes to getting proportions and line spacing just right, there are some great resources available.

Typography for Dummies

We’re not going to go deeply into the nuances of typographic design here; it’s a complex subject, but there are a few basic principles, which, if followed, will almost always have a pleasing result.
1. Keep it Simple
Too many typefaces on the same page will not look good. A basic rule of thumb is to stick to two typefaces – one for the headings, and one for the body text. Of course, you can use more should you choose, but as you add typefaces the difficulty of achieving a cohesive appearance increases. Some typefaces just do not belong together, and the more typefaces, the greater the chance they will clash. So, unless you’re an expert, it’s generally smarter to stick with two.
2. Use Serif and Sans Serif typefaces in Combination
The classic arrangement is to use a Sans Serif font for headings, and a Serif font for the main text, but it can also be done the other way around.
3. Correct Contrast and Color
Ensure that there is sufficient contrast between type and background. It may sound like common sense, but a primary cause of websites looking bad is that the foreground and background color have either too much contrast (black on white), too little (light gray on slightly darker grey), or combine poorly with each other (red on dark blue).
4. Maintain a Proper Hierarchy of Headings
This helps with both appearance and SEO. Headings give a web page structure and help the reader’s eye to easily navigate the page.
The WordPress Typography Plugin allows users to tweak and swap the fonts on their site to their heart’s content. It works across themes and is compatible with Google Fonts, Cufon fonts, and standard fonts. Fonts are managed according to their CSS selectors, and features include font replacement with nearly 300 fonts available, font color selection, size, line height, letter spacing, text transforms and many other aspects. It is probably the most comprehensive typography management tool available for WordPress.
Pull quotes are a great way of highlighting parts of your text, and can give blog articles a magazine-like appearance. The plugin adds a button to the WordPress HTML and rich text editors so that writers can quickly include pull quotes in their content.
Getting hyphenation right is not straightforward, but doing it poorly, especially on a page of justified text can leave pages with odd gaps in the text. Hyphenator uses a Javascript hyphenation engine to properly wrap and break lines on the client side, which means it can account for different displays.
Ensuring that code is displayed properly in WordPress posts and pages can be vexatious. WP Code Highlight allows users to display properly formatted and highlighted code snippets in their text.
Of course, this is only a selection of the available typographic plugins available for WordPress. Feel free to give a shout out to your favorites in the comments or add some typography advice of your own.
Graeme works as an inbound marketer for Nexcess, a leading provider of Magento and WordPress hosting.