Saturday, 21 January 2012

What You Need to Know About HTML 5

HTML stands for Hypertext Markup Language, and it is the most common language used to create web pages. The basic HTML structure is composed of tags, but you can also embed images, videos, and load scripts from other languages (e.g., Javascript) inside pages.

You probably already knew that. What you might not know is that currently we are using the fourth revision of HTML, called HTML 4.01, and that the next revision, called HTML 5.0, will completely change the web development segment.

Here are some major game changers that we’ll see with HTML 5:

The elements will be more aligned with modern web design practices. Some of the new tags include <header>,<nav>,<aside> and <footer>.
The DOCTYPE was simplified to <!DOCTYPE html>.
You will be able to embed audio and video directly in the HTML code and without the need for external plugins. The two new elements for that are <audio> and <video>.
New APIs (application programming interfaces) will be included. This will enable developers to add drag-n-drop features, document editing, drawing and so on.

Cool stuff right? Unfortunately we can’t say for sure when HTML 5 will be adopted. The first public working draft with the HTML 5 specifications was published January of 2008. The last one was published in August of this year, and you can read it on the W3.org website.

Major browsers are gradually incorporating HTML 5 specs, but it might be a while before they are fully compatible and before developers start using the language. If you want to test it, both Firefox 3.1 and Safari 3.1 should have support for some features. You can go to youtube.com/html5 to see a demo page built with HTML 5.

Reduce Your Bounce Rate In One Second

So, how do you get visitors to spend more time on your site and reduce your bounce rate, without spending more than one second trying to do it?

It’s simple.

First of all get inside the control panel of your website (e.g., WordPress admin dashboard, or the equivalent on the software you are using). Now go to the section where you can tweak your CSS and other design aspects (in WordPress this is under the “Appearance” menu). Now find the line controlling the font size on your site, and increase it. That is it!

There are many case studies around the web where people used A/B testing to find how they could reduce the bounce rate, and increasing the font size works on most situations.

Just consider that the population in most developed countries is getting older and older, and that more and more people need to stare at a computer screen all day long for professional reasons (meaning our eyes are getting tired).

Then combine that with larger screen resolutions (where you have more pixels on the screen, but the actual appearance of the graphics gets smaller) and you get web visitors who would love to find a big large font on your site, so that they can read your awesome content comfortably.

And yes, I did increase the font on Daily Blog Tips a couple of months ago. It used to be 12, now it’s 13, and the bounce rate improved slightly

How To Start A Blog For Free

Learning to blog is fun and easy, and it doesn’t even have to cost a cent. In this post I’m going to show you how to start a blog for free (maybe you don’t need this info, but I am sure you know someone who does).

One of the great things about blogging is that anyone can do it and the barrier to entry is nill, nought, zip, zilch assuming that you have or have access to a computer with an internet connection. I don’t know many people without a computer that don’t have an internet connection. Blogging is as easy as playing with Lego.

I have always been the creative type. When I was younger I used to love playing with my Lego, I was totally awesome at it and could build models on the back of the boxes without any instructions. I even built a whole Lego land from scratch it was huge.

When I grew up and got my own PC I discovered web design. Back when I first got on the net blogs and blogging never existed so I would build my web sites from scratch. My first web site was horrible. Then blogging came along, it took off like a rocket and soon the net was soon littered with blogs. It didn’t take long before blogs became a great alternative source of information besides magazines, newspapers and other media outlets.

What I have learned over the years is that building a blog is pretty easy. You don’t need to be a designer or know how to code (although it does help if you can design and code) because building a blog is like building a Lego model.

How is building a blog like building a Lego model? Lego models are made up of lots of little Lego parts that fit together to make a model, you can even buy individual bricks and elements to build your own model. A blog is like a Lego model except that the themes, posts, pictures, plugins and widgets etc… are the building blocks. Although you still have to know how to put those blocks together and combine elements to build a good blog. And blogging is free, Lego is really expensive these days!

Anyone can play with Lego and build things without any knowledge but it doesn’t mean that they can or will build anything really cool. Blogging is the same, you can take a theme and build a blog but that doesn’t mean it’s going to be any good. I have seen plenty of good themes totally murdered by bad design choices, cheesy useless plugins, ugly colour schemes that make my eyes bleed.

When you first install WordPress you get a pretty plain default theme, themes are like a Lego base plate that you build things on top of. Plugins, widgets, and posts are the building blocks for your chosen theme.

Like Lego blogs, plugins, themes & widgets come with instructions but the instructions wont instruct you on building a great blog they will only tell you how to use the theme, plugin, widget or what ever it is. You will have to teach yourself how to build a good blog. There are plenty of blogging resources out there to read and learn from. Reading alone isn’t going to make you a good blogger, you will have to get your hands dirty.

Your first blog probably isn’t going to be the best and you will make mistakes but don’t let that stop you because you won’t learn without making mistakes or building bad blogs. Mistakes are good but only if you learn from them. Unless you learn from your mistakes then you are doomed to repeat your past mistakes like ground hog day until you learn from them.

I have built plenty of web sites and blogs, I have also made a lot of mistakes and bad design choices but I have learned from my mistakes and become a better designer. I still have a bunch of web sites, backups of old blogs and mock-ups of web sites that never got built sitting on my hard drive. If I were to look at some of them now I would cringe, one thing that I would see is that my designs and web sites got progressively better.

So you have decided that you want to blog, and you have chosen WordPressgreat choice! You have two options. Do you drop some cash on a domain name (so you can have www.yourblogname.com) and a web host so you can have full control over your blog? Or do you go with WordPress.com which is free but will get you stuck with www.yourblogname.wordpress.com and very little control over your blog?

The choice is basically WordPress.com vs. WordPress.org, one costs money the other doesn’t, one offers full control over your blog the other offers next to no control.

Neither of those options sound appealing? No money? No problems. There is a third option if you want full control over your blog but have no money to drop on a domain and web hosting. There are many free hosting plans out there. Just Google “free web hosting” and you’ll find them. Although there are a few things to be aware of.

The host needs to support PHP version 5.2.4 or greater and MySQL version 5.0 or greater. What you will get is generally listed under “Features”, “What you’ll get”, “Spesifications” just have a poke around any decent free web host will list what they offer
If you choose to find your own free hosting be aware that some free web hosts will require that you let them put advertisements on your site, there are some free hosts that don’t require you to advertise so check carefully before signing up.
There is one trade off, because you are using free hosting you will get stuck with whatever URL they choose to let you have, usually it’s just a sub domain like www.yourblogname.zymichost.com, or www.yourblogname.freeaspwebhosting.org. Although it’s an acceptable trade off for having full control over your blog.

If you are starting a blog for the first time, want a personal blog and don’t care if the URL doesn’t look that professional or just want to learn before you drop some hard earned cash on a domain name and hosting this is a great way to get started. If you start a blog get lucky and it becomes popular you can always buy a domain some better web hosting and move your blog to your new host.

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:

Page Speed Service is an online service that automatically speeds up loading of your web pages. To use the service, you need to sign up and point your site’s DNS entry to Google. Page Speed Service fetches content from your servers, rewrites your pages by applying web performance best practices, and serves them to end users via Google’s servers across the globe. Your users will continue to access your site just as they did before, only with faster load times. Now you don’t have to worry about concatenating CSS, compressing images, caching, gzipping resources or other web performance best practices.

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).

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 called FontTester.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: 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: 1. Everystockphoto 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. 2. Flickr’s Creative Commons Search 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. 3. Stock.xchng 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. 4. 123rf 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). 5. Google Creative Commons Image Search 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!