Web Development

Sunday, June 22, 2014

HTML - Stylesheets and Scripts placement

Place stylesheets inside <head> , if possible. Combine & minimize the files to reduce request numbers. Ideally, there should be only one or two stylesheets.

Example:

<head>

...

...

</head>

Reasons:

Avoid the “content flickering”, if the stylesheets are loaded after the DOM is ready, the content will be repainted, causing the flickering.

Read more:
http://en.wikipedia.org/wiki/Flash_of_unstyled_content

Place scripts right before </body>, if possible. Avoid placing JavaScript codes in HTML files, keep codes clean separated. Combine & minify the files too, same as stylesheets.

Example:

<body>

...

</body>

Reasons:

Prevent the scripts from stopping the content to parse. So the page won’t choke on the big JavaScript files.

Read more:

For .NET projects, http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Ideal outcome

<!DOCTYPE html>

<html class="" lang="">

<head>

...

</head>

<body>

...

</body>

</html>

Friday, June 20, 2014

HTML head - Meta:Viewport

Terms:

Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.

Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.

CSS pixel: The unit used for page layout controlled by the viewport. Pixel dimensions in styles such as width: 100px are specified in CSS pixels. The ratio of CSS pixels to device independent pixels is the page's scale factor, or zoom. (in terms of CSS pixels, which are, a relative length unit. 1 CSS pixel can consist of multiple device pixels)

Viewport is not yet part of the W3C or WHATWG standard, it was originally invented by Apple for the iPhone.

Now it’s a de facto standard(standard in fact). You will use it when facing main stream mobile devices, which means all iOS & Android & Windows Phone devices.

Codes above defines a responsive viewport, first part instructs the page to match the screen’s width in device independent pixels; second part instructs the browser to establish a 1:1 relationship between CSS pixel and device independent pixels.

Read more:
https://developers.google.com/speed/docs/insights/ConfigureViewport
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
http://www.quirksmode.org/mobile/metaviewport/
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
http://viewportsizes.com/ (Viewport sizes quick search)

Thursday, June 19, 2014

HTML head - Meta:Charset and Meta:X-UA-Compatible

Meta:Charset

Always place it as the first line inside <head>

Example:

<head>

...

Reasons:
Ensure everything after this declaration being decoded correctly. Ensure this declaration falls in the first 1024 bytes of the document.

Read more:
http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset1024

Meta:X-UA-Compatible

IE8, IE9, IE10 allows you to control document compatibility modes, so you can instruct the browser to render webpages in the same way as older browser versions.

The X-UA-Compatible header isn't case sensitive.

It must appear in the header of the webpage (the HEAD section) before all other elements except for the <title> element and other <meta> elements.

A web server can also be configured to specify the X-UA-Compatible header. If a web server specifies the header and the header also appears within the content of a webpage, the header in the webpage takes precedence over the one specified by the server.

Read more:

http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

By using one of these values above, you're restricting the webpage to the standards mode of the corresponding version of Internet Explorer. (Always standard mode, despite !DOCTYPE value)

In many cases, this means you're limiting Internet Explorer to the features supported by that version.

With these settings above, the page is displayed either in the standards mode corresponding to the version you specified or it's displayed in IE5 (Quirks) mode. (Standard or quirks mode, depends on !DOCTYPE value)

This is functionally equivalent to using the . It places Internet Explorer into the highest supported document mode. Why use this again?

Prevents incorrect header information from the server breaks the pages.
It hides the compatibility view button from IE, reduce the chance that a user add the site into the list of compatibility view accidentally.

Use of Modernizr.js

In HTML we are having lot of ways to apply cool technologies, Modernizr.js is used to make your life easy by conditional JavaScript and CSS.

Here is a simple example of usage of Modernizr.js, If you are trying to execute a HTML 5 tag with older browsers like IE7, if the browser didn't support the HTML5, DOM may not understand your code. But using Modernizr.js you can execute the HTML5 code with older browsers.

Example usage:

<head>

...

...

Advantages
Supplementary to conditional class names, used for feature detection.

Disadvantages
Introduced a script in the will slow down the page more or less.

Read more:
http://modernizr.com/

Advanced HTML Structuring - !DOCTYPE

!DOCTYPE

Despite old existing sites, only the !DOCTYPE declaration is allowed for new sites.

Example: <!DOCTYPE html>

Do not use any legacy !DOCTYPE any more, codes below are part of those.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Without a !DOCTYPE, IE9 and earlier versions display webpages in IE5(Quirks) mode. Also, if there is anything precedes the !DOCTYPE, for example, a comment.

Read more:
http://en.wikipedia.org/wiki/Quirks_mode (Quirks mode)
http://blog.whatwg.org/tag/doctype (Current standard)
http://www.w3.org/QA/2002/04/valid-dtd-list.html (Deprecated doctypes)

Tuesday, June 17, 2014

HTML5: How to detect browser and write css

Before HTML5 found, we normally used to detect the browser type in certain ways. We use javascript function to identify the browser version and bind some defined element to the HTML DOM and apply CSS based on created element.

Traditional approach:
<body class="js created element with browser version (ie8 bodyclass) ">

We call CSS as follows
.ie8 .bodyclass{background-color:#00ff00;}

But as now we have new technology to directly identify the browser and apply CSS, it is pretty straight forward and easy to use. When it comes to DOM manipulation the time is very short and faster approach.

HTML5 approach:

Here is the way to detect the browser version and apply CSS

<!DOCTYPE html>


 <html class=no-js lang=en> 

We can easily track or identify the browser version using above HTML, so we can apply relevant styles using CSS for required browser type.

.lt-ie8 .bodyclass{background-color:#00ff00;}
.lt-ie9 .bodyclass{background-color:#ffff00;}

Website usability program

These days website usability become main concern in usage of web development,
What does mean website usability?
It is simple to understand, website usability means that a website how easy to use by a normal and minimal IT user,

Whenever we develop a website, we must consider the fact how a user will easily navigate the pages and how user friendly for them, without making the site more complicated to use. For an example we need to have a proper structure in the layout, we must follow a standard navigation.

There is also another main concern about disabled users, we must also support to develop the website for accessibility users,

Learn more about accessibility from following link
http://realwebdeveloper.blogspot.com/2014/02/web-accessibility-basic-idea-for-web.html