Web Design Concept

A single website for All types of Internet User: Progressive Enhancement

2016-12-06T21:11:00.001-08:00

Progressive enhancement is about building robust products and being paranoid about availability. It is about asking “if” a lot. That starts even before you think about your interface.

1. What is progressive enhancement?

Progressive enhancement means building the interface of a website or application in layers. If the user’s browser only supports HTML they get content and forms. If the user’s browser also supports styles and fonts the application looks better. If it can run JavaScript the user gains extra interactions. Only the core HTML though is required in order to meet users’ basic needs.

Obviously there are many places where JavaScript could be seen to be a requirement. It’s hard to imagine intensive web applications like games and online office suites working without JavaScript. Even in these cases though there are possibilities to use progressive enhancement to benefit the user.

2. The Past: Progressive Enhancement is Born

Progressive enhancement has been around since at least 2003. Back then, the web was still transitioning to using CSS instead of table-based layouts. JavaScript was an untamed beast, with exciting power but unpredictable behavior. Progressive enhancement provided an approach that allowed web professionals to deliver content everywhere and still take advantage of newer features where possible.

It was during this time that the idea of web “applications” started to become popularized (although nothing actually changed, they’re still just websites). The demand for dynamic pages connected to databases couldn’t be met with JavaScript alone, so server-side application programming became paramount. In a framework like Ruby on Rails, HTML is constructed on the server and then delivered to the client. When you visit a friend’s profile on a social network, for example, the server uses a “profile” template and fills in the blanks (like the person’s name, photo, and so forth). Even with the advent of AJAX towards the middle of the decade, server-side programming still dutifully took requests and delivered the necessary data.

3. Markup progressive enhancement

Web technologies and standards have this concept at their very core. Take for example the img element in HTML:

<img src="threelayers.png" 
     alt="Three layers of separation 
          - HTML(structure), 
          CSS(presentation) 
          and JavaScript(behaviour)">

By adding an alt attribute with a sensible description you now know what this image is supposed to tell you. If it can be loaded and displayed, then you get a beautiful experience. If not, browsers display this text. People who can’t see the image at all also get this text explanation. Search engines got something to index. Everybody wins.

<h1>My experience in camp</h1>

This is a heading. It is read out as that to assistive technology, and screen readers for example allow users to jump from heading to heading without having to listen to the text in between. By applying CSS, we can turn this into an image, we can rotate it, we can colour it. If the CSS can not be loaded, we still get a heading and the browser renders the text larger and bold as it has a default style sheet associated with it.

4. XHTML had to die, HTML5 took its place

When XHTML was the cool thing, the big outcry was that it breaks the web. XHTML meant we delivered HTML as XML. This meant that any HTML syntax error – an unclosed tag, an unencoded ampersand, a non-closed quote meant the end user got an error message instead of the thing they came for. Even worse, they got some cryptic error message instead.

HTML5 parsers are forgiving. Errors happen silently and the browser tries to fix them for you. This was considered necessary to stop the web from breaking. It was considered bad form to punish our users for our mistakes.

If you don’t progressively enhance your solutions, you do the same thing. Any small error will result in an interface that is stuck. It is up to you to include error handling, timeout handling, user interaction like right-click -> open in new tab and many other things.

This is what progressive enhancement protects us and our users from. Instead of creating a solution and hoping things work out, we create solutions that have a safety-belt. Things can not break horribly, because we planned for them.

Why don’t we do that? Because it is more work in the first place. However, this is just intelligent design. You measure twice, and cut once. You plan for a door to be wide enough for a wheelchair and a person. You have a set of stairs to reach the next floor when the lift is broken. Or – even better – you have an escalator, that, when broken, just becomes a set of stairs.

Of course I want us to build beautiful, interactive and exciting experiences. However, a lot of the criticism of progressive enhancement doesn’t take into consideration that nothing stops you from doing that. You just have to think more about the journey to reach the final product. And that means more work for the developer. But it is very important work, and every time I did this, I ended up with a smaller, more robust and more beautiful end product.

By applying progressive enhancement to our product plan we deliver a lot of different products along the way. Each working for a different environment, and yet each being the same code base. Each working for a certain environment without us having to specifically test for it. All by turning our assumptions into an if statement. In the long run, you save that way, as you do not have to maintain various products for different environments.

We continuously sacrifice robustness of our products for developer convenience. We’re not the ones using our products. It doesn’t make sense to save time and effort for us when the final product fails to deliver because of a single error.

New Concept of attractive web design : Parallax

2016-12-06T03:32:00.000-08:00

The beginning of parallax

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances. Even if that sounds a bit formal, it is the definition of parallax and it was used for the first time in 2D video games where the background images would move slower than the foreground images.

What Is Parallax Scrolling?

Parallax scrolling is a visual effect that mimics depth by making the foreground and background elements on a Web page scroll at different speeds. This effect was popularized by video games in which the foreground elements moved at a much faster pace than background scenes, making them seem to pop off the screen. This effect made imagery feel less flat and more three dimensional.
In Web design, parallax scrolling has a similar effect: as a user scrolls down a page, the images in the background move more slowly than the content in the foreground. This gives the page depth.

When Is Parallax Scrolling Effective?

Parallax scrolling is useful for quickly capturing visitors’ attention. If you want to wow your audience, no other design trick quite compares with parallax. Plus, parallax scrolling is very effective in guided storytelling. For example, you can use the parallax effect to help sell your product or service by guiding users through a scrolling story or guide.

I am not like conventional teacher. I always believe in workshop. Book knowledge is only 20% and the other 80% is in-hand knowledge.
So don't waste much time to read article and just drive into the practical classes. Please check the below link for hands-on tutorial. It's simple and perfect for beginner.

Simple Parallax Scrolling Tutorial

Hope it will help you people to start learning a new concept..Follow this blog to get updated about design stuff.

CSS4 features: new concept of web design

2013-07-03T23:19:00.000-07:00

Still we are learning and implementing CSS3.In the mean time a new CSS version CSS4 come into the picture.
Now this is in a conceptual stage. And in the near future it can make web developer's life easy.
Today I will tell about some beautiful feature of CSS4.

1. THE “PARENT” SELECTOR

Now for selecting parent of an element we need to use javascript or query or other languages. But now we can do that using CSS.

$ul li: hover
{
background-color: #fff;
}

Using the above, when hovering a list element, the whole unordered list will be somehow highlighted by adding a white background to it.
This property is very much helpful in case of fieldset element. Because in User input from we can change the color of the input row according to the mouse position.

2. Matches-Any pseudo-class

The : matches () CSS4 selector is the standardized version of Mozilla’s : -moz-any () pseudo class. This matches can group many elements to gather and implement the OOPs concept in CSS.
The syntax is like below.

: matches (section, nav, article, aside) h2
{
font-size: 14px;
}

Using this CSS the all h2 elements under section, nav, article and aside tag become font-size 14px.
This tag makes CSS file small and compact.

3.Location Pseudo-Classes - :any-link and :local-link

These pseudo-classes will be used for location-based elements. The :any-link pseudo-class is used for general links, while :local-link is used to identify links targeted within the same host (as opposed to external href's).

So if we like to style the link element according to their redirect position then this tag is the only choice for us.

#nav a:local-link {
color:blue;
}

#nav a:local-link {
color:red;
}

Using this style element all the link which redirect to different domain become red color and the link's which stay in the same domain become blue.

4.Linguistic Pseudo-Class - :dir

:dir Pseudo-Class idenfy left-to-right and right-to-left text display and you can give your custom style according to that.
the CSS like below

div: dir (ltr) {font-size: 12px;}
div: dir (rtl) {font-size: 14px;}

Using this CSS all languages which are left-to-right(like English,Spanish,German) becomes font size 12px and the languages which are right-to-left(like Arabic) become font size 14px.

5.Other Usefull pseudo-classes of CSS4

:valid / :invalid
:default
:enabled / :disabled
:checked
:indeterminate
:in-range / :out-of-range
:required / :optional
:read-only / :write-only

Those above classes are self-explanatory.Still I write a small description about those.

:valid / :invalid - it will check an input it valid or not.And style the element according to that.
:enabled / :disabled - Style element according to their state.If they enable then its design according to the :enable style or it will design as :disabled.
:checked - it will style the element when a checkbox or radio button is checked.
:indeterminate - it's a special state of the element.Like there is a progress bar.And I did not did not get the grogress information about that element.Then that state is called as indeterminate.And it will design using :indeterminate in CSS4.
:in-range / :out-of-range - if I restrict user to input data between a range then we can style the element as :in-range and :out-of-range to show different style betwwen valid and invalid input.
:required / :optional - this style differentiat between mandatory and optional data.
:read-only / :write-only - this can give different style to read-only field and read-write field.

6.New Properties for Borders

Some new properties for borders are introduced in CSS4. The most obvious one is a border-corner-shape, which allows values curve | bevel | scoop | notch. In addition, there are updates on border-images.

7.New cursor values

CSS4 define three new cursor values.They are -
a) auto-hide - being added to WebKit as -webkit-auto-hide.
b) grab - supported by Mozilla as -moz-grab
c) grabbing - supported by Mozilla as -moz-grabbing

8.Touch-action

The touch-action CSS property determines whether touch input may trigger default behavior supplied by the user agent. This includes, but is not limited to, behaviors such as panning or zooming.
When a user touches an element, that element's touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming. The touch behavior is then performed on the nearest ancestor element that is capable of that behavior, unless an intermediate ancestor element specifies that the behavior is not permitted.

Syntax :
-ms-touch-action: auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]

for more details view
http://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx

How to Support CSS3 in IE and other IE Related Tips.

2013-05-01T02:58:00.002-07:00

The main problem of use CSS3 in website is IE6 to IE8 does not support CSS3 property.But now I will give some tips so that CSS3 will work fine in IE browsers.

TIP 1 : (Support CSS3 in IE)

Go to this website and download the package. (www.css3pie.com)

Here is a small example to quickly apply css3 border-radius properties,

Add the PIE.htc in the css folder,Apply the following styles to your class.

CSS3 and IE

.rounded-corners {

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

behavior: url(css/PIE.htc);

}

After the inclusion of this behaviour property CSS3 tags will work on IE6, IE7, IE8.

For more details you can visit www.css3pie.com for detailed examplesand documentation.

TIP 2: (Support Rounded Corner in IE )

We can include a java script file for rounded corner support in IE.The javascript file name is curvycorners.js .

This javascript file will work for those browsers which are not supporting 'border-radius' and will automatically make the divs rounded corner.

Example of the CSS is

#Rounded_Corner {

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

But to make it working in IE, you have to include 'curvycorners.js' file in your html page.

TIP 3: (Support Blink text in IE)

IE don't support <blink> tag,Javascript function blink() or text-decoration:blink.

So it's very difficult to add blink text in IE browser.

But I am shareing some tips for add blink text in IE browser.For that you have to add a javascript inside of head tag and then write the text inside of <blink> markup.

Code :

Add the following javascript inside head tag.

function Blink() {

var blink = document.all.tags("blink");

for (var count=0; count<blink.length; count++)

blink[count].style.visibility = blink[count].style.visibility == "" ? "hidden" : ""

}

function BlinkStart() {

if (document.all)

setInterval("Blink()",500)//The speed of the blink is 500

}

And in HTML we have write text inside a blink markup.Like -

<blink>This text will blink.</blink>

If we want we want to change the blink markup to anything else.For that in javascript we have write that tag name.Like

var blink = document.all.tags("yourTagName");

Then in HTML

<yourTagName>This text will blink.</yourTagName>

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

HTML5 Local Storage – Complete Guide Tutorial

2013-02-15T12:34:00.001-08:00

TYPES OF WEB STORAGE

Web Storage is a new HTML5 API offering important benefits over traditional cookies. Although the specification is still in W3C draft status, already all major browsers support it.

This means you can start using the API’s sessionStorage and localStorage objects and enjoy their benefits.

Introduction

localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser not per computer.

The Limitations of Cookies

First, there were cookies. They have been a huge driving factor for the Web since the early days. In both a good and a bad way.

For example, cookies allow us to login automatically to sites we use frequently, such as Gmail and Facebook.

On the other hand, with cookies, our search and browsing history can be tracked andour privacy is a concern.

Another problem with cookies is that they have data-capacity limitations. The data storage limit of cookies in many web browsers is about 4 KB per cookie, based on a deprecated 1997 specification recommending a minimum of 4096 bytes per cookie.

Although most browsers allow 30 to 50 cookies, so if you exceed the 4 KB limit of one cookie you could create another one, this is still a real limitation.

This is why developers usually only store user and/or session identifiers in cookies, and then use server-side databases to store and get the rest of the user data.

Additionally, an often-overlooked side effect of cookies is that they are always sent with every HTTP request (usually even for images) resulting in more data being sent over the wire.

Web Storage and its Advantages

Web Storage picks up where cookies left off. The strength of Web Storage is in at least two things.

First, ease of use for web developers: It has a simple API to get and set key/value pairs (we will get more into this below).

Secondly, the amount of space it provides: the specs default the disk space quota decision to the user agent (i.e. the web browser developers) and most of them offer no less than 5 or 10 MB to be stored per domain. This means we can store more than just basic user/session info on the client-side: user preference settings, localization data, temporary offline storage for batching server writes and much more.

The data being stored can be accessed using JavaScript, which gives you the ability to leverage client-side scripting to do many things that have traditionally involved server-side programming and relational databases.

How to Check the browser support for local storage

if (Modernizr.localstorage) {

// window.localStorage is available!

} else {

// no native support for HTML5 storage :(

}

Browser version to Support localstorage

As you might expect with any HTML 5 specification older browsers versions and browser with Javascript turned off do not allow this method. The good news is that all modern browsers support it and will continue to do so. The following browsers support HTML 5 Web Storage:

Internet Explorer 8+

FireFox 3.5+

Chrome 4+

Safari 4+

Opera 10.5+

iOS 2+

Webkit 2+

localStorage and JSON

localStorage is a simple key/value pair database that allows you to store around 5MB of data per domain. Because it doesn't natively support the storage of JSON objects we will need to serialise our data to store it and deserialise it when we want to use it. Here's how we get and set our data in localStorage.

// Store

localStorage.setItem('key', JSON.stringify( value ));

// Fetch

value= JSON.parse( localStorage.getItem('key'));

Primary Methods of localStorage

localStorage.clear()

localStorage.getItem( key )

localStorage.removeItem( key )

localStorage.setItem( key, value )

Coding using HTML5localStorage

Now lets get into some code. Where localStorage differs from cookies or sessionStorage is that the data stored in localStorage is still there even after the browser is closed and is shared across multiple windows. You don’t have to worry about a user deleting the cookies and all their data. A quick note; because of my love for jQuery, I will be using jQuery when using localStorage. However, jQuery is not required to do any of this, I just like how clean it makes everything look. First lets see a simple example of using localStorage.

localStorage.setItem("name", "Amit!"); //saves to the database, key/value

document.write(localStorage.getItem("name")); //Amit!

localStorage.removeItem("name"); //deletes the matching item from the database

Can’t get much easier then that. Line 1 saves a new entry in the local database with the key of ‘name’ and the value of ‘Amit!’. That pair is now stored in your browsers database. Line 2 gets the item from the database with the key of ‘name’. In this case would then return ‘Amit!’. In line 3 we remove the item from the database. Due to browser specific quotas you would want to check for exceptions so you would change line 1 above to the following.

try {

localStorage.setItem("name", "Amit!"); //saves to the database, "key", "value"

} catch (e) {

if (e == QUOTA_EXCEEDED_ERR) {

alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error

}

You might also want to check to see if the users browser even supports localStorage and if it doesn’t we can warn them. Now the code above would look like this:

if (!Modernizr.localstorage )// or you can check like this typeof(localStorage) == 'undefined' )

{

alert('Your browser does not support HTML5 localStorage. Try upgrading.');

} else {

try {

localStorage.setItem("name", "Amit!"); //saves to the database, "key", "value"

} catch (e) {

if (e == QUOTA_EXCEEDED_ERR) {

alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error

}

document.write(localStorage.getItem("name")); //Amit!

localStorage.removeItem("name"); //deletes the matching item from the database

}

How to check local storage key-value using firebug tools

1.Press F12 or open your browser firebug.

2.Go to the DOM tab

3.scroll down to and expand localStorage

4.Expand the localStoragetab.Now you can see all the key-value saved in the localStorage.

5.right click item you wish to delete or edit and do whatever you want.

If your using Safari or Chrome then you have a much better option. You are able to view these databases directly in the developer tools. Opening the Developer Tools you will notice the last item is Databases, clicking this will show you all databases, localStorage and sessionStorage info.

Practical uses of localstorage

Now we know about the local storage. But the main question is where we’ll use this. The answer of this question is not universal and it depends upon the requirements and type of projects.I can give you some example where localstorage can be useful.

1. In multipage registration form you can store partial data in the localstorage. When user click on the submit button then you will take the value from localstorage and save it in database.

It will decrease the number of server call and unwanted entry in the database to make your application faster.

2. In shopping cart you can use local storage. You can store the shopping cart items in the localstorage first. When the user checkout the shopping cart then you will save the important data in the database. This will also decrease the number of server call and unwanted entry in the database to make your application faster.

3. In the previous article I’ve already discussed about the offline application in HTML5 and localstorage will play a key role in that aspect. When web application is offline we can store all the data in localstorage and when application becomes online we can store those data from localstorage to database.

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

HTML5 Offline Web Applications: How to make website run offline

2013-01-24T03:59:00.000-08:00

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.

<!DOCTYPE HTML>

<HTML manifest="/cache.manifest">

<body>

...

</body>

</HTML>

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"?>

<configuration>

<system.webServer>

<staticContent>

<remove fileExtension=".manifest" />

<mimeMap fileExtension=".manifest" mimeType="text/cache-manifest"/>

</staticContent>

</system.webServer>

</configuration>

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:

CACHE MANIFEST

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

CACHE MANIFEST

# This is a comment

CACHE:

/css/style.css

/js/jquery.js

/img/logo.png

http://abc.com/stylesheet.css

FALLBACK:

/ /offline.html

NETWORK:

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.

CACHE MANIFEST

/css/style.css

/js/jquery.js

/img/logo.png

http://abc.com/stylesheet.css

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:

CACHE MANIFEST

FALLBACK:

/ /offline.html

NETWORK:

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.

CACHE MANIFEST

NETWORK:

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

CACHE MANIFEST

NETWORK:

registration.php

payment.php

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.

How to make website faster

2013-01-16T08:49:00.000-08:00

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 style – if 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 image – A 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:
data:[mimetype][;base64],[data]

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:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

you can get more details from:
http://dataurl.net

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
http://en.wikipedia.org/wiki/Content_delivery_network

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
http://technet.microsoft.com/en-us/library/cc771003%28WS.10%29.aspx

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

<html>
<head>
<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” >
</head>
<body>
…............

<script type=”text/javascript” src=”js/jquery.js”></script>
</body>
</html>

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
http://www.mnot.net/cache_docs/

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 :
<script>
//do stuff (runs first)
</script>
<script defer="defer">
//do stuff, but defer it (runs last)
</script>
<script>
//do more stuff (runs second)
</script>

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
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

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
Non-semantic

14.Not Scale Images in HTML :

Often we find that we scale images in HTML because the image size may be bigger.

Like
<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:
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

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.

Like
http://www.webpagetest.org/
http://gtmetrix.com/
http://whichloadsfaster.com/

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

Introduction to Media Queries (Step1 of RWD)

2012-09-26T02:39:00.000-07:00

What is media queries?

CSS2 allows you to specify stylesheet for specific media type such as screen or print.

Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets.

For example, it's been common practice for years to use a separate style sheet for printing web pages by specifying media="print" . Media queries take this idea to the next level by allowing designers to target styles based on a number of device properties, such as screen width, orientation, and so on.

Need of media queries ?

The rapid spread of mobile devices has turned the world of web design upside down. Users no longer view web content only on traditional desktop systems, but are increasingly using smartphones, tablets, and other devices with a wide range of dimensions. The challenge for web designers is to ensure that their websites look good not only on a big screen, but also on a tiny phone and everything in between.

Example of media queries uses :

1.Max Width

a)use in css file

@media screen and (max-width: 500px) {
  .className {
     background: #FFFFFF;
   }
 }

b)use saparate css file for the devices whose width within 500px.

2.Min Width

a)use in css file

@media screen and (min-width: 500px) {
  .className {
     background: #FFFFFF;
   }
 }

b)use saparate css file for the devices whose width within 500px.

3.Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 500px and 800px.

@media screen and (min-width: 500px) and (max-width: 800px) {
       .className {
          background: #FFFFFF;
          }
     }

4.Device Width

This is the most important and usefull things.Because the different device has different width.So we can use different css files for different device using the Device Width property.

@media screen and (max-device-width: 600px) {
         .className {
             background: #FFFFFF;
          }
    }

Now for I give some example of particular divice.Like -

For iPhone 4

For iPhone 5

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {

/* iPhone 5 or iPod Touch 5th generation */

}

For iPad

In next blog I will discuss about more tools and techniques of responsive web design.Follow this blog to get updated about design stuff.

Responsive Web Design (RWD) :

2012-09-21T02:26:00.000-07:00

What is responsive design?

Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

In practical sciario, The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this (if you’ll excuse the pun) the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.

Example of responsive design :

Need of responsive design?

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions.

In next blog I will discuss about the various tools and techniques of responsive web design.Follow this blog to get updated about design stuff.