I am a long time Smashing Magazine fan. They dish out some quality contents all the time and they are constantly improving. But recently they have been a little bit too cluttered with ads for my taste. So when I saw this post on their site I couldn’t stop laughing to myself.

How ironic is it, that a design blog with an opinion piece on why web designers shouldn’t use Ad blockers and yet the site is flooded with ads and has zero content above the fold? This is a full screen on a Macbook, obviously you will get more screen-space on a larger screen, but not much really.

You can also read my opinion on ad-blockers, which seem to be a hot topic now that Safari comes with readability (called reader) integrated into the browser.

I am a big fan of Readability, a simple bookmarklet that removes all forms of distractions from the content that you are reading and presents them in a plain, pre-defined, form that is easier for everyone to read. I like readability so much that I added it in every single blog posts here at GeekTechnica so that you can read the content in a simple form with just one click. Ideally I would love to make this site less distracting and remove all the ads from all pages, but removing ads is not an option and making the site less distracting is an on going process (expect some changes in layout in coming months). Instead we give readers an option to remove all ads and read content with less distraction with a single click.

With the new Readability update Arc90 goes one step further by removing distracting links within the content and convert them in to hyperlinks. They were inspired by Nick Carr’s interesting blog post about how distractions on online contents (including hyperlinks within contents) are changing our brains in the way we consume online information.

“Links are wonderful conveniences, as we all know (from clicking on them compulsively day in and day out). But they’re also distractions. Sometimes, they’re big distractions – we click on a link, then another, then another, and pretty soon we’ve forgotten what we’d started out to do or to read. Other times, they’re tiny distractions, little textual gnats buzzing around your head. Even if you don’t click on a link, your eyes notice it, and your frontal cortex has to fire up a bunch of neurons to decide whether to click or not. You may not notice the little extra cognitive load placed on your brain, but it’s there and it matters. People who read hypertext comprehend and learn less, studies show, than those who read the same material in printed form. The more links in a piece of writing, the bigger the hit on comprehension.”

As an veracious reader of online contents, I can appreciate Nick Carr’s acute observation and Arc90′s motivation in to converting hyperlinks in to footnotes. So if you are reading this blog post on your feed and don’t know what I am talking about, definitely check out the post on the site and click on the "Readability" button. Its will convert contents in to a reader friendly format.

For  the lazy among you, here is how a blog post under Readability will look like:

The only thing that was stopping me from making a full migration to Chrome was the excellent Firefox web developer’s add-on Firebug. Any decent web designer/developer will tell how powerful and time saver Firebug is. Webkit powered browser’s like Safari and Chrome also comes with a built-in web developer’s tool called Web Inspector, which is decent but lacks a lot of great features available with Firebug.

With the recent Web Inspector update, available on webkit nightlies, they just might have one-upped firebug with some great new features. Since both Chrome and Safari runs on webkit, its only a matter of time before this becomes officially available to your webkit powered browser, in the meantime you can use the nightlies to get a taste of the new Web Inspector.

Some of the new features includes:

- Editing Element and Style Properties.
- Custom CSS Rules and Selector
- CSS Color Representations
- DOM Storage
- Keyboard Shortcuts
- View Cookies information
- Event Listeners
- Syntax Highlighting
- Debugging Ajax

Get a complete list of new features here.

Apple has always been a leading innovator in terms of hardware design and OS improvements. Now they are leading the way by embracing next generation web technology by being one of the few websites to implement html5 video tags on a production website.

If you go to apple.com with a webkit powered browser (Safari/Chrome in Mac or Windows) and play some of the new videos promoting the new iMac and Magic Mouse, the videos are played using html 5 video tag. When you try to play the same video using IE or Firefox the QuickTime video player kicks. Even though the latest Firefox browser support html5 video tags, its implementation is limited to Ogg Theora, the video files on apple.com are MP4.

The video player using html5 tags under webkit browser looks very much like QuickTime X shipped with Snow Leopard. With non-webkit browser the video player buttons are distinctively different, as shown below:

Under Webkit Powered Browser (Chrome/Safari):

Non-Webkit Browser using QuickTime player:

You can find out more about other interesting html 5 developments including the video tags here.

Work on HTML 5 started in 2004 and even after 5 years of work we are no where close to having a final draft. According to the co-editor of HTML 5, Ian Hickson, we might have to wait till 2022 for the final proposed draft of HTML 5. But thats no reason to be discouraged, HTML 5 will be a major improvement over previous markup so changes are likely to come in small increments. Since the release of the first draft in 2008, most major browsers (yes including IE8) implemented some of the features proposed in this draft and it is already generating a lot of interest from developers. Today we will look at 5 of these exciting HTML 5 features and its implementation.

1) Web Workers: Think of it as Hyper-Threading for web browsers. Separate background threads are used to do processing without effecting the performance of a webpage. This can be very useful for web applications which relies on heavy scripts to perform functions (among other things). Firefox 3.5b has the best implementation of this proposed features. Opera and Safari also supports some elements of this feature.

You can try out the in-video motion with Web Workers on Firefox 3.5 or calculate prime numbers with Web Workers, with Safari 4 and FF 3.5

                                             Web Workers in action (well its in the background)

2) Video Element: My favorite HTML 5 features yet. You can embed video without having to rely on third-party proprietary plug-ins or codec. You can embed video code with the same amount of ease as you now embed an image with the ability to manipulate videos and built-in video controls among other things.

Try it out yourself (works only on FF 3.5).

                                                 Billy: Burn IE with FIRE! (video rotation)

3) Canvas: Canvas element lets you render graphics and images on the fly. An excellent implementation of this element was done by the developers of Mozilla lab project Bespin. Which is an extensible Web Code Editor using Canvas (among other things). You need to register to try out Bespin. You can see a much simpler implementation of canvas with this drawing board (works with FF 3.5 – Chrome – Opera). All done without having to rely on plug-in, the possibilities are endless.

                                              My Drawing-fu. Photoshop has nothing on me!

4) Application caches: The ability to store web apps like email locally and access it without having to connect to the internet or install an external client like Outlook or Thunderbird. Google gears, which helps you access Gmail offline, is an implementation of HTML 5 specifications for Applications Cache (and much more). If you use Google Gears than you are using already using this feature. You can try out an online demonstration of this feature in the form of sticky notes here, which saves information to your local DB. Works on Safari 4 and Chrome, FF 3.5 is a bit buggy on this demo.

 
                                                                   My Sticky Art

5) Geolocation: This API defines location information with high-level interface (GPS) associated with the device hosting the API. Sources of location information includes Global Positioning System (GPS) and network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. Yes, a big brother feature, but it can only be used if the user gives the application permission to use the information. You can try it online here. (FF 3.5b)

                                                                  Where is Waldo? 

Conclusion: So do we have to wait till 2022 to enjoy everything that HTML 5 has to offer?

Well, Yes and No.

No, because most popular browser already supports most of the features proposed on the first draft. Opera and FF are notoriously pro-active when it comes to implementing these features first. Google Chrome, though a new comer, has vested interest to implement these features as soon as possible (and have been very impressive so far) because one of the co-editors of HTML 5 is a Google employee and Google depends on the successful & quick implementation of these features for the growth of their online business. IE8 is also being good so far in implementing some of these features considering its past efforts (or lack of).

Yes, because HTML 5 is a major improvement over previous markup. An improvement that is likely to stay on for a long time. There has been a huge internet growth since HTML 4.01, so design – implementation – adoption by developers and co-ordination with all the major online players is no small task. While most of us will get to enjoy the adoption of some of these great features, a total widespread implementation is likely to take few years as the proposed features evolves over time. All these features listed here are not final by any means. They might not even be the same when the final draft rolls out.

Step 1) Create an Account:  Having an S3 account will help :). You should know that if you already have an account with Amazon you can use it to sign up for S3. You will need Credit card or a Bank Account to sign up. Unfortunately they don’t accept PayPal. After you register your account and verify your email, you will need to create a “Secret Access Key”. Its important that you do not share your “Access Key ID” and “Secret Access Key” with anyone under any circumstances. Others can use this information to store files in you S3 account without your knowledge and cost you unwanted bills from your account.

Step 2) Create a Bucket: Amazon S3 uses “bucket” to work as folders. You need to create a bucket with a unique name. I use Firefox add-on S3Fox to access, edit and manage my buckets. You will need to edit your bucket’s ACL to let everyone have read access so that they can view static files (like images) that you will be hosting at S3.

Step 3) Create a CNAME: You should create (though not necessary) a CNAME to link your S3 bucket to a better looking subdomain instead of the usual “foo.mydomain.com.s3.amazonaws.com”, you might want to make it look like “foo.mydomain.com” (the name of the bucket). I am using Slicehost, so this is how I created a CNAME from slicemanager:

Type: CNAME
Name: foo
Data: foo.mydomain.com.s3.amazonaws.com. (yes there is a dot at the end)

Step 4) Install Amazon S3 WordPress Plugin: Amazon S3 Plugin for WordPress seamlessly integrates amazon S3 to your wordpress blog, so when you upload an image using your built in wordpress editor, it also uploads a copy to your S3 account. This plugin configuration is self-explanatory, you will need your “Access Key ID”, “Secret Access Key” and the bucket you want to use to store images.

Conclusion: Amazon S3 is a powerful storage service and this is just a small example of what you can do with it. It is important to have proper safeguards and stop direct hotlinking to static files using htaccess.

When we first sat down to start designing this site we had one priority over everything else. Speed. Not only do we hate slow loading websites, we believe in simplistic designs and are crazy about optimizing websites to the extreme. Though  most of these tips can be applied for any websites, we will be focusing on wordpress tips.

What is a good page loading time?

Before we start optimizing the site we wanted to know what will be a good loading time to aim for. So we tested some of the most popular websites for speed with the help of pingdom tools.

 
With 1.3 sec page loading time SM was the fastest site on a wordpress install. Considering the fact that SM is a high traffic – image heavy site, this number makes it even more impressive. The average speed was just over 5 sec, which was also our target and we thought was a good speed.

1) Install PHP opcode cacher:

Opcode cacher works by caching compiled PHP scripts instead of parsing it on each request. This is specially helpful for CMS like wordpress that depend heavily on PHP. Our personal favorites are xcache, APC and eAccelerator.

2) Use CDN:

There is only so much speed optimization you can do on your server side and with good design practice. If your web server is located in USA and someone from the other side of the world tries to access your webpage he will likely see speed issues. Nowadays Amazon S3 is the coolest thing to use for static file offloading and strictly speaking S3 server do not provide the best solution when it comes to speed, because S3 is not really a CDN its a Cloud hosting service. There are a number of very well known CDN out there, but for small sites we recommend cachefly and steadyoffload (which we are using).

3) Optimize your image using smushit:

If your website depends heavily on images, consider using smushit for image optimization. It uses format specific image optimization tools to squeeze every last bit out of your image without compromising their look or quality. There are other similar services but we prefer them because they have a wordpress plugin which optimizes your images for you.

4) Replace images with CSS:

While we can take advantage of CDN and smishit services to load images faster, consider replacing images altogether with CSS when possible. A lot of websites use image for static background and borders which can be easily replaced with CSS. We think, for best performance, the only image a site design should use is the Logo. Images within content are not part of the design process.

5) Use <ifame> to load advertisement scripts:

We all hate iframe, but when it comes to loading JavaScripts for advertisement – iframe can be a blessing. A large part of a side loading time gets wasted on adscripts, so we put the script on a separate html and load it from an iframe, in this way the site doesn’t have to wait for the adscript to load. Read more about it in this thread. You should consult with your Ad provider to see if this is against their TOS. To the best of my knowledge this is ok to do with Googleads and many popular websites use this trick for a faster load time.

   1: <body onload="javascript:window.adFrame.location.href='adScript.html';">

6) Combine CSS and JavaScript files:

By combining CSS and JavaScript files you will make your site load faster because this will reduce the number of HTTP calls that needs to be made in order to load a webpage. Check out this nice tutorial on how to do this using PHP. This might not be practical solution for a site that used plugins that are frequently updated, but this trick significantly increases your load time.

7) Minify CSS and JavaScript:

Minification removes tabs, space and comments from the code to reduce file size. Check out WP minify plugin, this will not only compress your CSS and JS but also combine and cache them, also check out php-speedy plugin which does the same thing, but has some minor bugs. We were able to cutoff 2 sec from our loading time using this plugin.

Conclusion:

In the end, we were able to cut down our page load time from 6.6 sec to 2.5 sec, which we think is a pretty decent speed. There are several thing we can do to optimize the site further but we don’t think at this point a user will see any difference even if we can shave off .5 sec more. You will notice that we didn’t recommend wp super-cache, not because we don’t like it, but  PHP opcode already does the job for us. What optimization tricks do you guys use? Feel free to share.