Welcome Text

  The life of a designer is a life of fight: fight against the ugliness.

Thursday, 24 January 2013

HTML5 Offline Web Applications: How to make website run offline

HTML5 Offline Website :

Today I am going to discuss about a magic of HTML5.Can you ever imagine that your website is running offline i.e without internet connection. You are thinking that I am joking with you. But now it's possible to make a website run offline using HTML5 application cache. If you can give 15 min to read this blog,then I assure you that you can create offline application.

The application cache is controlled by a plain text file called a manifest, which contains a list of resources to be stored for using when there is no network connection. The list can also define the conditions for caching, such as which pages should never be cached and even what to show the user when he follows a link to an  uncached  page.

If the user goes offline but has visited the site while online, the cached resources will be loaded so the user can still view the site in a limited form. By carefully considering the contents of your manifest file, you can offer a suitable web experience to a disconnected user.

I don't like much more theory so let us come to the point and follow the step to create your first offline application.

Step - 1(Define the manifest file)

Define the manifest file in your page HTML so the browser understand this website have a offline application cache file.

<HTML manifest="/cache.manifest">

Step – 2 (Set  content type)

Your cache manifest file can be located anywhere on your web server, but it must be served with the content type text/cache-manifest.
Then the question may arise how to define the content type.

For Apache-based web server, you can probably just put an AddType directive in the .htaccess file at the root of your web directory:

AddType text/cache-manifest .manifest

For IIS7 server you can define content type using web.config file.

<?xml version="1.0" encoding="UTF-8"?>
           <remove fileExtension=".manifest" />
           <mimeMap fileExtension=".manifest" mimeType="text/cache-manifest"/>

From these two steps now your browser can know that you have an offline application cache and browser can access that file.
But nothing is stored yet.

Step - 3 (Creating a Manifest File)

The first line of every cache manifest file is:


Let’s start with an example of a full manifest file.I will discuss each of the part below.

# This is a comment



/ /offline.html


So it have mainly 4 sections.

1.Comment section - 

The comment section is for write the version number of the manifest file. It's not only for your reference but also it has a great impact. I will discuss that later.

2.CACHE Section -

 The CACHE section is considered the default — i.e., if no section heading has been defined, the browser will assume this is the CACHE section. Beneath this heading, you can list URIs to resources you want the browser to download and cache for offline use, including URIs hosted externally.




Every single resource that you want to cache explicitly should be listed here, right down to the last image. The browser is not aware of a resource unless you provide the full path to it. This means you can’t use wildcards. If you list /images/* as a resource, the browser will request that URI as if you typed it into your address bar.

But don’t run off and store URIs for every single page on your site into your manifest. When a user visits a page that points to the manifest file, that page will also be cached. This means that if you want to allow users access to pages they’ve already viewed, just make those pages point to the manifest file and the browser will cache them appropriately.

3.FALLBACK Section - 

There is one more type of section in a cache manifest file: a fallback section. In a fallback section, you can define substitutions for online resources that, for whatever reason, can’t be cached or weren’t cached successfully. The HTML5 specification offers this clever example of using a fallback section:

/ /offline.html

Now look at the fallback section. The fallback section in this cache manifest only has a single line. The first part of the line (before the space) is not a URL. It’s really a URL pattern. The single character (/) will match any page on your site, not just the home page. When you try to visit a page while you’re offline, your browser will look for it in the appcache. If your browser finds the page in the app-cache (because you visited it while online, and the page was implicitly added to the app-cache at that time), then your browser will display the cached copy of the page. If your browser doesn’t find the page in the app-cache, instead of displaying an error message, it will display the page /offline.html, as specified in the second half of that line in the fallback section.

4.NETWORK Section -

 Finally, we have the NETWORK section, used to tell the browser explicitly which resources are only available while online. By default, this uses the asterisk * symbol, meaning all resources that are not cached will require a connection. Alternatively we can whitelist specific url prefixes, like all the avatars if we wish.



You can explicitly define resources not to cache by providing a list of URIs — essentially a whitelist of online-only assets.



So now registration.php and payment.php page shown to the user only when they are online and those pages are never store in appcache.

Now your offline application is ready but I'll discuss some question and their respective answers to make this topic more clear.

1.What will happened if I add/remove/modify one or more file names in the cache or other section of Manifest file ?

Answer: If we change any thing in the Manifest file then the browser again remove all the files from cache and again download all the files in appcache.
When we request for a page at first browser check the Manifest file. If there is no change then it does nothing but if there is any change then the browser again download all the files from server.

2.What will happened if I didn't change the Manifest file but change the files which are mention in the Manifest file?

Answer: This is a very interesting question. If we didn't change the Manifest file then browser doesn’t understand any change and it will not fetch the file from server to render.

But as I change the file content so it's not reflecting my change in browser. To solve this problem concept of "Comment Section" has to be introduced.
In that section we mention a version number of Manifest file. So if we wanna change any pages which are listed in the Manifest file then we have to just change the version number.
So now when browser check the Manifest file it observes the change and load the content of the manifest file again from server. So our problem is solved. Change will reflect to the browser.. :)

3.What will happen if I write one of the file path wrongly in Manifest file or one of the resource fails to download properly?

Answer:  if even a single resource listed in your cache manifest file fails to download properly, the entire process of caching your offline web application will fail. Your browser will fire the error event, but there is no indication of what the actual problem was. This can make debugging offline web applications even more frustrating than usual.

4.Now the main question: which browsers are supporting HTML5 offline application feature?

Answer: The AppCache feature is supported by almost all modern browsers, such as Firefox, Chrome and Safari. Unfortunately, Internet Explorer 9 does not support this feature.

Thanks for reading this blog.Hope you enjoy it.Follow this blog to get updated about design stuff.

Wednesday, 16 January 2013

How to make website faster

The most important thing of a website is it's load time. Because if a user click on a URL and it take too long time to render then the user get bored and close the site,it's happen with everyone. But we focus most of our time for functional and UI developments. So our all efforts waste if user got bore by the loading time and didn't open out website.
Now I will discuss about some basic tips for making your website fast and it's very easy, just need some care when developing a website.
1.Minimise HTTP Requests :
About 70-80% of the end user response time is spent on HTTP Requests. So it's very much important to minimise http requests.
Each unique object in a web page requires a round trip to the server, that is, an HTTP request and a reply. So we need to remove all the unnecessary objects from the page for less http requests and make our site faster. Some other very easy way to minimise http request describe below :-
a)Combine CSS styleif we have more than one css file included in the page then we need more than one http request to load the style element.So we can combine all the css style to a single external file then only one http request is needed to load the style element of the page.

b)Use Image map instead of separate imageA web page contain lots of small and medium size images.So if we have total 20 images in our web-page then 20 http requests generate to load the images.
But if we combine all the 20 images into a single image and use the image-position attribute to show the particular part of the image then only one http request need to load the all images.
c)Convert graphical text to styled text - generally we used graphical text for header or menu item styles. But we use css text instead of graphical text it will be a good process to reduce http request.
And it's no need to say that remove all unnecessary and duplicate calls from your website.. :)

You can check HTTP request by using firebug.The picture is given below

2.Use Inline Image :
Often we keep all images in a folder and call specific image from the page every time when need. But we can use Inline Images for small and medium size images. It save time and make our site faster. This is called 'Data URL'.

Data URLs use the following syntax:

Let we have a image and we want to embed that to HTML document. Then at first we need to convert that image to inline image. There are many online free tools for converting image to Inline image then use that inline image to the src tag of the image.
The image tag look like

<img width="7" height="7" title="delete_image" alt="delete image" src="data:image/gif;base64,R0lGODlhBwAHAHAAACH5BAEAAPwALAAAAAAHAAcAhwAAAAAAMwAAZgAAmQAAzAAA/wArAAArMwArZgArmQArzAAr/wBVAABVMwBVZgBVmQBVzABV/wCAAACAMwCAZgCAmQCAzACA/wCqAACqMwCqZgCqmQCqzACq/wDVAADVMwDVZgDVmQDVzADV/wD/AAD/MwD/ZgD/mQD==" />

Online Free tool is:

you can get more details from:
3.Use Content Delivery Network(CDN) :
In previous days one website run from one server and all it's content located from that same server. But now the expectation of the end user increase and we need more fast site. So now we need to distribute the files and load across multiple systems.
For cost reason it's not possible to use own CDN for start-up companies and private website. But the big companies like yahoo, google, facebook use their own CDN.
For the private and start-up companies, there are a number of free CDNs offered by Google, Microsoft, Yahoo and other large web organisations. For example, few people host their own videos when YouTube and Vimeo offer amazing free services. Similarly, if you require jQuery, you can load it on any page using:
you can get more details of CDN from

4.Gzip Components :
The components of your web page came to the browser from the server through the http requests. So bigger the file size it took longer time to download in browser. So if we Gzip all the server components then the size of the components reduce and it took less time to download and render in the browser.

Now the question may come how we Gzip the components

For IIS server we need to follow the following steps described in the TechNet document

and for Apache server we need to add the following code to the .htaccess file

# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

After you've saved your .htaccess file, test your site again in GTmetrix.com to make sure it has been properly compressed and also analyze the performance of your website.
5.Put Stylesheets at the Top and jquery at bottom :
Always need to put style sheets at the top of the page before scripts and other html object elements. Because in that case which part of the page render ,that render with proper alignment and style. That is very important specially for the slow internet user or the page with lot's of heavy components.
For jquery we need to add the bottom of the page. Because at first the user need to see the components of the page. So it's completely all right if the jquery effect come little bit late to the web-page.
But some exceptional case may happened when we add html elements using jquery or add some handler to page. I will discuss about these conditions later.
The structure of page should be

<meta http-equiv=”Content-Type” content=”text/html” charset=UTF-8”>
<title>title of the page</title>
<link href=”css/style.css” rel=”stylesheet” media=”all” >

<script type=”text/javascript” src=”js/jquery.js”></script>
6.Add Cache-Control Headers :
Cache-Control plays a vital role in terms of the speed of the website.
If we save the static data in the Cache then it will take very less time to render when your return to that web-page.

Read the details of Cache-Control from
7.Use External CSS and Jquery Files :
For faster response we need to use external javascript and css files. Because in that case only once the files are loaded and cached in the browser.
for other pages to be render we don't need to generate any http request to server for style or script elements.
Also it decrease the size of the html file so it look less time to download from server and render quickly in browser.
But it also have some exception.Like if my home page is very simple and not same with the other pages of my site. And the other pages contains lots of jquery,css effects.
Then if we use external css and jquery at the time of load the home page. Then it took very long time to render first time and we need to remember that more than 60% user click our site with no cache in browser.
So in that case if we use inline or page level css in home page and use post-load components to load the external files for other pages will be a good practise.
we can use a settimeout function in this case in the bottom document.ready function to load the external css and jquery for other pages. So our home page will render first and when the browser is idle then it call the server to load the external css and jquery.
8.Put defer attribute in script :
In HTML, the script element allows developer to include dynamic script in their documents. The defer attribute is Boolean attribute that indicates how the script should be executed. If the defer attribute is present, then the script is executed when the page has finished parsing.

Example :
//do stuff (runs first)
<script defer="defer">
//do stuff, but defer it (runs last)
//do more stuff (runs second)

So now we can define script any where in the page but with defer attribute we can ensure that the script will execute at the last.Is that not interesting?
9.Remove Duplicate Scripts :
It sound very funny that remove duplicate script. You may thing that way I add duplicate script in my page.
A review of the ten top U.S. web sites shows that two of them contain a duplicate script. I think the main reason behind it that if we add the script in page label then it may possible that we add the same script in the two separate page.
But when if your visit both of the page then he find one duplicate script because script is cache in the browser.
Another reason I can say if I add script in master page. But in any child page it didn't work properly then for quick fix may we add a script file to that page.
The solution of this problem includes all the script file in master page and no separate script file included in page label.

An alternative in PHP would be to create a function called insert Script.
<?php insertScript("menu.js") ?>
10.No 404(Element or Page not found) in the page :
If http request goes to the server for requesting some component and the element not present in that particular position then 404 error happened. It is totally unnecessary and will slow down the user experience without any benefit.
So we need to ensure that there no 404's in the page. We can check that using firebug in the browser.
11.Use GET Request in Ajax call :
We use ajax request from the page to get content load faster to the page. As ajax is asynchronous then it loads faster.
But POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it's best to use GET, which only takes one TCP packet to send.
Again there are lot's of controversy like from GET have a fixed URL length and it less safe than post.
So we need to use the post in those exceptional condition where data size large or data is very sensitive .But for other cases we can use GET instead of POST request.
12.Splitting components and increase parallel downloads :
Splitting components allows you to maximise parallel downloads. Because in general from each domain we can download 2 resource parallels. So if we use 2 domain then we can download 4 resources parallels. So,it's increase the download speed of the resources and reduce the time of render website.
But we need to remember that adding domain increase the DNS time. So the most efficient to add 2-4 domains. If we add more than 4 domains then it will increase DNS time and makes the process of rendering slow.

For more details you can see the flowing link
13.Minimise the Number of iframes :
Iframes allow an HTML document to be inserted in the parent document. It's important to understand how iframes work so they can be used effectively.

<iframe> pros:
Helps with slow third-party content like badges and ads
Security sandbox
Download scripts in parallel

<iframe> cons:
Costly even if blank
Blocks page onload
14.Not Scale Images in HTML :
Often we find that we scale images in HTML because the image size may be bigger.

<img src="image.jpg" alt="example Image" height="20" width="20" />

So in this case we scale the image size 20x20 from the HTML image element. It's increase the render time of the web page.
The best practice is scale the actual image size to 20x20 and then use that image in web-page.
15.Make favicon.ico Small and Cacheable :
We request for favicon.ico image each and every time even if we don't find the actual page in the domain.. :)
Need to make the favicon.ico image small and importantly cache the image in the server. So that the image need not to be requested every time.
16.Split article into multiple pages :
If we have a very long article with lot's of images and jquery files. Then better to split that article in many pages with the next page link.
So it will reduce the render time for each page.
17.Avoid empty image tag :
This is a common problem of website. Many time we have html image tag with empty src tag. This may occur for many reasons like:

In Html
<img src="" />

In Javascript
var img = new Image();
img.src = "";
If we planing to assign image source attribute from the server but it didn't assign correctly.
<img src="$imageUrl" >

So,It make unnecessary traffic to the server and slows down website dramatically.

For more information check:
18.Reduce cookie size :
HTTP Cookies are very important for website. We use cookies for authentication and personalisation. Information of cookies exchange in the header of http request. So it's very necessary to reduce the size of cookies.
For that we can follow following rules -
a)Eliminate unnecessary cookies.
b)Keep cookie sizes as low as possible to minimise the impact on the user response time.
c)Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time.
d)Setting cookies at the appropriate domain level so other sub-domains are not affected.
There are some more points which we need to remember when creating or hosting websites. Those are -
19.Cache the ajax.
20.Reduce number of DOM elements if possible.
21.Use Cookie free domain for the components to be hosted.
22.For adding style sheet use over @import.
23.Optimise Images for getting a faster response.

After follow those steps you can measure the performance of your websites using various free online tools.

Thanks for reading this blog.Hope you enjoy it.Follow this blog to get updated about design stuff.