The only thing you can predict about the future is that it’s unpredictable, of course, but it’s still fun to do and it doesn’t stop articles appearing in various media outlets at the start of the year talking about what’s going to be big in the coming twelve months. And this one is no different. Of course, I wouldn’t dare assume that Star Trek Tricorders will be available in all mobile phones by the year, but given the current state of play with the Internet, maybe there are some trends in Web technology that can be spotted and will grow, hitting critical mass in the coming year. Here, we look at five such possible trends.

CSS3 & HTML5

The next evolutionary hop in the standard for styles and cascade has been around for a little while but could take off this year, along with HTML5.

Much lauded as the ‘Flash killer’, HTML5 is also an evolutionary hop in web standards, upgrading HTML to take into account current trends in web use, perhaps the most obvious being the built-in video element, which helps do away with the need of Flash video on a website. Flash tends to be one of those things that traditionally some developers love, some developers hate, and most end users couldn’t care less about. At least, not until the prevalence of mobile web access and the success Apple’s iPhone and iPad, because neither mobile web browsers or Apple like Flash much.

One of the great things about HTML5 is that, once fully supported across the web, it will allow to embed and playback audio and video content without the need of plugins, which makes it ideal for the mobile web.

Mobile Web

This is just as well, because the mobile web is going to get bigger. Or should that be the web is going to get smaller as mobile web browsers and apps start to become the default way to consume content? I don’t know about you, but I couldn’t tell you the last time I logged in to Twitters website, using 3rd party API’s and apps instead.

As mobiles become more powerful, and less like phones and more like mobile computers, this is a trend that is bound to continue. As Wi-Fi and wireless signals of greater bandwidth get rolled out, streaming content to mobile devices is bound to continue as well. It’s already possible to stream music, films and TV shows to mobile devices, and soon games will go the same way.

Game Streaming

Games on PCs and mobiles are nothing new, but have always been limited by the hardware. Anyone serious about their computer games has always had to pay a fortune for the hardware that is powerful enough to run their game(s) of choice – the processing power of Sony’s PlayStation 3 is legendary.

But with cloud computing becoming more popular and more people streaming music and film rather than ‘owning’ the media, games services are opening up and going the same way. It is now possible to sign up to game streaming services for a monthly fee and play whatever game you like no matter what your computer hardware is or how powerful it is. With all the games processing being done on the server, all you need is a decent internet connection to keep lag to a minimum.

Such services are sure to become popular with gamers if they can access the same game from their home PC, laptop, tablet and mobile phone, and not having to splash out on new, more powerful hardware every couple of years or so to be able to play the latest games.

IPv6

With an ever greater number of devices becoming permanently connected to the internet IP addresses are running out. In fact the last set of addresses was allocated by ICANN in 2011. Hence IPv6 being created. Using hexadecimal numbering this network addressing system means that there are billions upon billions of possible addresses – 2128 compared to IPv4’s 232 – so every person on the planet could have several device permanently attached to the web and there would still be loads of addresses available. Some companies are rolling out this system now and 2012 could see it hit critical mass.

‘The Children are our Future’

In January 2012 the UK government announced that it was to overhaul the teaching of computing in schools. Combined with Raspberry Pi, the £16 computer, going into its first production run, we could soon see children enjoying computer programming again. It might not be the same as those giddy days of the 1980’s when children spent hours in front of ZX64’s and Commodore 64’s, but anything that means learning about IT is less about how to use MS Office and more about building web pages and simple algorithms for animations and game AI’s is sure to help the future of technology spring forward.

Maybe the next innovation won’t come from some angel-investor backed team of post-grad’s on the Silicon roundabout but a couple of twelve year olds in their bedroom. I hope so; kids have better imaginations.

Mozilla’s aggressive rollouts are mainly down to the people at Google Inc. running their popular Chrome browser at version 15. It’s crazy that Chrome has been around half as long as Firefox, yet is more than twice as high regarding current version numbers.

The guys at Mozilla obviously see this as an issue and have incorporated a new policy of releasing versions quicker than you can say ‘Checking for Updates…’ The last 3 major releases have been within 4 months of each other. The first 3 versions were each around 2 years apart. Quite a change in tact.

Not that version numbers really matter that much, I mean, just because your version is higher than the competitions doesn’t mean you’ve got a superior product. Right? However, Mozilla obviously think Google have a psychological advantage over the regular user.

At this rate Mozilla will continue to catch Chrome in the numbers stake. But it’s a risky game to be playing. With every release has to come something significant enough for users to want to upgrade. You can’t just sell it on some minor enhancements and bug fixes. The reduction in time between rollouts will also result in reduced testing time. Which affects us all as end users.

It’s clear that Mozilla is all about targeting new users with their new strategy. But regular users of the browser are updating so often it’s likely they’ll decide to ignore new versions. With the hassle of broken plugins, broken websites and changes in functionality, who really wants to be updating their web browser every 2 months?

It all points to Mozilla feeling slightly insecure. Rather than spending time sorting out the memory issues and other inherent bugs, they’d rather play catch up with Google. Firefox was brought out in 2004 4 years earlier than Chrome which didn’t release until 2008. According to the stats, Chrome is the 3rd most popular browser (as of July 2011) having around 22.00% worldwide usage and Firefox is the 2nd most popular (as of August 2011), with around a 30% worldwide base.

Mozilla are obviously coming a bit tetchy about Chrome’s rapid rise. It’s fast and clear interface is appealing to regular users. It’s got the major name behind it. It supports extensions and many web developers have access to some excellent tools available for development, design and SEO.

Firefox has a loyal user base but the change in it’s release schedule sends out warning signals. Chrome certainly has the money and brains behind it to be top dog. With the release of Googles own social networking service in the shape of Google+, Chrome can incorporate tight integration into it and if it becomes as successful as Google anticipates, it may be another reason for Mozilla users to jump ship.

It’s clear the next year or so is an important time for Mozilla. Let’s just hope the next few version releases finally sort out the memory issues. After all, who cares if we’re running Version 103.298 if all it does is crash when you have more than 2 tabs open.

As with most solutions, a CMS presents further problems; most commonly, performance issues. Here’s a few ways to mitigate these issues and ensure your website loads quickly. There are a lot of guides on how to specifically speed up certain CMS platforms but I’ve taken a step back and provided solutions for general CMS optimisation problems.

1. Page caching

If you are running a site that serves thousands of visitors then these database queries, however much you have optimised them in step 1, are going to be intensive. It’s going to be a hit on your bandwidth (which could increase costs) and also slows down your site.

Solution. Page caching. When a page is first retrieved it is stored (cached) as a static page (e.g. HTML) and then further visitors will be served that static page. No database calls means the site is back on par with the speed of static sites. If you edit the content of the page in the CMS then the cache will be cleared so visitors still receive a up-to-date version of the site and not a cached one.

2. Clever coding

If you analyse a CMS template/theme you will see that there can be up to 20 database calls on a page. Whether this be the title of the page, the date an article was posted or the location of a stylesheet. The reasons why they are dynamic in the first place is to provide flexibility, often provided through options pages.

Solution. Have a look through your website. Are there any settings that are never going to change? If so you can hardcode these into your themes so they do not require an extra database hit, which in turn will load the pages quicker. Do you need the footer text to be driven by a text field on the options page? Probably not.

3. Using a Content Delivery Network (CDN)

Using a CDN such as Amazon Cloudfront is undeniably a way to speed any website up. When a request for a file (such as an image) is requested it is served by the CDN from the Amazon storage system (Amazon S3). Not only do you have the benefit of having your image stored on a more powerful server (Amazon S3) but whilst you are being served the image you can also be served the rest of the site simultaneous. It’s not only file sizes that are the problem but the amount of requests made on a server.

4. Optimise the database

Installing plugins not clearing up afterwards can cause problems. The larger the database the more the longer the search queries.

Optimise your database by clearing out tables and data that are not needed. If you’re searching through 10,000 entries, rather than 20,000 this will speed things up considerably.

5. Broken links

A user’s browser might spend time looking for that JavaScript or CSS file that doesn’t exist, or an image that has been deleted. It will retry a certain amount of times and it’s the times of, and in between, those requests that can increase the page load speeds.

Analyse your code and get to know it. Make sure that if the page has tried to load an image and if it hasn’t investigate as to why. Using Pingdom Tool you can check how long it’s taking to load a file and it ‘greys out’ the ones that it can’t find. Those are the ones that need your attention.

The premise is simple: Google +1 allows users to recommend links to “friends, contacts and others on the web”. This can be either from search results pages or directly from a website.

By clicking a +1 button you are voting for a website or giving it your approval. On first glance this may look pretty much the same idea as the Facebook ‘Like’ button, but its affects could be much wider reaching.

Google released this video to introduce the +1 button:

http://www.youtube.com/watch?v=4RyY2-ofP4g

Google Plus 1 in Search Results

When a Google user searches while logged into their public account, a small grey +1 button appears next to each search result. When one of these buttons is clicked it turns blue. This indicates that the user has recommended the link, or +1’d it.

A record of all the links that a Google user has recommended appears in the new +1 tab of their Google account. These links can be set to either public or private. If set to public, people in that user’s social circle can see that they have recommended the link.

Google Plus 1 on Web Pages

It is also possible to add a +1 button directly to a web page, in much the same way as you would a Facebook ‘Like’ button or a Twitter ‘Tweet’ button. This button allows visitors to recommend a link directly from the web page itself.

Google has now launched a page to generate the code for a +1 buttons.

Google Plus 1 and the Social Circle

A user’s social circle is comprised of direct connections through their Google account and products such as Gmail, Google Talk, Contacts, Reader, Buzz and so on. It also contains connections through third party networks such as Twitter and Flickr.

A link that a someone recommends is visible to connected people in their social circle. Similarly, the links that connected people in the social circle recommend are visible to the person themselves.

So, for example, if 25 people have recommended a link, including 3 connections (friends x, y and z) from a person’s social circle, they would see something like:

25 people have +1′d this site including friend x, y and z.

How Google +1 could affect Click-Through Rate

Logically, links in search engine results pages (SERPs) with a good number of +1 recommendations are likely to experience an increased click-through rate (CTR). On the basis that something popular is likely to be higher quality/more interesting/more relevant than something that is not, high numbers of +1’s are likely to influence the links that searchers click.

More importantly, if a friend of someone searching Google has recommended something, it is likely to carry even greater significance in influencing the link that the searcher will click on.

For example, someone searching for a restaurant to visit will see that one of their friends has recommended a particular restaurant. This restaurant may not be in the top position in the search engine rankings, but because the person trusts the opinion and judgement of their friend, they will be more likely to click through to that restaurant’s website.

How Google +1 could affect SEO

Google has already done a lot of work on social SEO. This is becoming more and more visible in search results through the higher positions given to links shared by people in the social circle of the searcher.

For example, if I search for blog posts about eCommerce, Google displays a recent article written by someone in my social circle right at the top of the search results.

It’s a fair bet that friend’s +1’s will have a similar effect on search results.

Google +1’s influence may end up being wider than the social circle, though. According to Google…

“Your +1′s can help friends, contacts, and others on the web find the best stuff when they search.”

The “and others” part of this statement gives an indication that the number of +1’s may contribute to Google’s search algorithm.

Currently Google measures the relevance of content using metrics such as bounce rate, i.e. the proportion of users who leave a website without viewing more than one page. Having +1 recommendations become one of these metrics would give webmasters even more of an incentive to provide relevant and engaging content in order to keep visitors on their website.

Is Google +1 open to abuse?

If and when Google +1 is shown to have influence over search engine rankings, even for users not signed into Google accounts, there’s little doubt that there will be people looking to short-cut the system.

We can probably expect to see the same SEO companies that offer to sell thousands of backlinks, directory submissions and Twitter retweets offering to do something similar with Google +1 recommendations. The nature of Google accounts and the amount of information that Google holds about it’s users may make this difficult, however.

With such a wide range of services available through a Google account, it won’t take much for Google to work out which accounts are spam and which are genuine. For example, Google will be able to tell the difference between an account that is only used to +1 hundreds of links each week and an account that regularly logs into Gmail, YouTube, etc. and +1′s a few links per week.

In a similar way to how links shared on Twitter are given weighting based on the perceived ‘authority’ of a user’s Twitter account, Google may attempt to place greater significance on recommendations by certain users.

Will it Catch On?

The short answer is that it’s difficult to say at this point. Google hasn’t always had the most successes with it’s social services – Buzz for example.

It’s also slightly unclear as to how Google expects the +1 button to be used on search results pages. Are users supposed to +1 a link without visiting it or are they supposed to visit a link then return to the search results to give their recommendation? The +1 on-page button may go some way to answer these questions.

There’s also the feeling that it’s yet another thing to sign up for and use in an already crowded area.

Google has taken this into consideration, though, which is why displaying recommendations in search results could be the thing that makes +1 a success. The recommendations are there at the exact time a user needs them.

Let’s compare this to the Facebook ‘Like’ button…

If someone goes to a restaurant and ‘Likes’ it on Facebook, their friends will see the recommendation but over the following days and weeks will forget all about it.

If someone recommends the same restaurant with Google +1 then, several weeks down the line, when one of their friends is searching for a restaurant to go to, the recommendation will show up in their search results. This is great in theory but would require the searcher to be signed into their Google account. Although it is speculation as to the percentage of people who are logged into their Google account when they search, the number isn’t thought to be very high.

Summary

It will certainly be interesting to see if +1 catches on. What could be most significant, however, is how Google uses the information from recommendations to influence search results outside the social circle.

The +1 button could mean a shift in SEO that places greater significance on content. To take advantage of this, it would be up to webmasters to produce content that visitors will want to recommend.

Google’s algorithm may change but the overall aims remain the same – content is king.

CSS3 Improvements

CSS3 is simply an evolution of the well-known styles and cascade of traditional CSS.  It introduces several new features, including new properties, selectors, and pseudo-classes.  This facilitates setting up layouts quickly and efficiently.  Most of the basic rules concern typography, background colors, etc.

• The @font-face feature will let you easily add custom fonts.  You can do this by uploading the font file to your server, linking to a CSS file, or creating a font family.
• Use the Multiple Columns feature to divide your text into columns.  You have the option to choose the number of columns, column width, column spacing, and column separators.
• The Multiple Backgrounds feature allows you to place multiple backgrounds on any element.
• With the Border Image feature, you can replace any element’s border with a specified image.
• The Box-Shadow feature provides for easy creation of inner and outer drop shadows on any element.  You can specify values for color, offset, and blur.

HTML5 Improvements

HTML5 is the next generation of HTML.  It has been designed to facilitate the search engines’ navigation and categorization of a website.  The main attraction of HTML5 is its simplified, built-in video element.  It also introduces offline storage capability for offline use of web applications and new design tools that allow easier creation of websites.  HTML5 generally looks like old-fashioned HTML.  However, there are a few key changes to be aware of.

• Including a doctype in HTML5 is not necessary, but some older browsers may need to have it included. Only one doctype is needed: <!DOCTYPE HTML>.  This simply notifies the browser of the existence of an HTML document.
• The Canvas tag allows developers to create two-dimensional images and graphics directly within the element.  This eliminates the need to use separate software for image creation.
• The Content Editable tag is a new element that will let your users edit any text that you place within the tag.  This tag can be written as (ul contenteditable=true).
• The Application Cache element supports caching of web pages and apps for use offline.
• HTML5, once it is fully supported, will allow you to embed and playback audio and video without the use of any plugin.  This will be extremely useful in relation to mobile devices, which are currently unable to access Flash or similar media content.

HTML5 and CSS3 can be used in conjunction with technologies such as JavaScript to improve the speed, format, and style of any web page.  Due to their advanced features and improved elements, these two languages are poised to transform the way we create and use the Internet.

1. Tattoos By Neal

2. Woody Wide Web

3. Delostrelecke Tvrze Adam

4. One-Nyne Design

5. Lab (1.0) – HTML5 Theme

6. CatCubed

A couple of weeks ago I was happily browsing the Internet when my Firefox browser crashed. I thought “no big deal” and re-opened my browser but to my despair, my Web Developer Toolbar had disappeared, leaving a very thin bar where the toolbar should have been.

This problem can occur when a browser (with the Web Developer Toolbar enabled) crashes or sometimes when the browser is updated.

I tried disabling and enabling the plugin, restarting my browser and even deleting the add-on and re-installing it, none of which solved the problem.

The solution is actually very simple:

1. Right-click where the toolbar should be.
2. Select Customize… (this will activate a pop-up).
3. In the pop-up click on the Restart Default Set button.

This will return your Web Developer Toolbar back to where it belongs.

If your Web Developer Toolbar is now only showing icons and you would like for it to show text as well the icons, go to the main menu at the top of the browser and select:

1. Tools -> Web Developer -> Options -> Options… (this will activate a pop-up).
2. In the middle of the pop-up window there is a drop-down menu labelled ‘Display Toolbar with‘, Change this setting to ‘Icons & Text‘*.

*If the drop-down is already set to ‘Icons & Text‘, change it to ‘Icons‘, click the OK button and then carry out the two steps above and it will sort itself out.

Web Developer Toolbar

Web Developer Toolbar is a fantastic tool which every web designer / developer should not be without. It allows you to toggle between many different settings quickly and easily, such settings include: disabling and enabling the cache for your browser, disabling cookies, JavaScript, images etc.

If you are a web designer or developer you will more than likely already have this add-on but if you don’t or you are new to the world of web design/development, get it now!

You can download the Web Developer Toolbar for both Firefox and Chrome from ChrisPederick.com (the developer’s website).