Let’s have a look at the other features that can help you decide should you upgrade to HTML5 today or not?

More meaningful markup + Added SEO Benefits: HTML5 have added few new elements in the quiver of HTML elements, these elements like header, section, nav, footer adds extra meaning to your markup. Screen readers and search engines can now better understand the various areas of your webpage, which helps in determining the importance of content. For example, a heading of article have more importance then a heading of footer, and with help of new HTML5 elements search engines can now understand which part of your web page is an article and which is a footer.

New APIs: The term APIs sounds more like a programming related term, but HTML5 has added a number of APIs which can be controlled with help of JavaScript to add life to your web applications. For example, you can now have accessible charts created on runtime in a HTML5 canvas with help of new canvas API. Or you can make your application available offline with HTML5’s storage API. There are much more like Drag & Drop, Geolocation, Audio, and Video, etc.

Mobile Support: One of the most exciting things about using HTML5 is that it is supported by all major Web Browsers too, that means if your markup is coded nicely it will work on all latest mobile phones. The Palm Pre, iPhone and the Google Android phone all have browsers that support HTML5.

Did this article helped you in taking a decision to upgrade your web pages to HTML5 today, or do you still have any other thoughts in mind? Share your thoughts with us, and we shall be happy to assist you in upgrading your web pages to HTML5 or clearing any doubts (if you still have them).

Value

• border-image-source - The path to the image to be used as a border
• border-image-slice -The inward offsets of the image-border
• border-image-width - The widths of the image-border
• border-image-outset - The amount by which the border image area extends beyond the border box
• border-image-repeat - Whether the image-border should be repeated, rounded or stretched

Example

div
{-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;}


Technical Specifications

Browser compatibility chart

	5.5	6.0	7.0	8.0
	1.0	1.5	2.0	3.0	3.5
	9.2	9.5	10.0
	1.3	2.0	3.1	4.0
	2.0
	Full Support
	Partial Support (Buggy)
	No Support

Note: No versions of Internet Explorer (including IE8) support the property value “inherit”.

Another important aspect before you dive into the code, is to understand the project requirements accurately, and clarifying any doubts before you start writing code.

Sometimes, design files provided by clients are self explanatory, and these include the required additional information that a programmer needs. However some times, programmer needs to clarify certain things from the client. It is always a good idea to educate your client on how to prepare a PSD for HTML, but you need to check the provided design file before continuing to code.

The following checklist covers most common points that needs clarification; however these may vary in design to design.

1. Page Width: The typically used layout width is 960px or 980px. Sometimes designers create wider layouts, or add some effects like shadow that increases the page width. You must measure the width of layout and if you find that it will generate a horizontal scroll on page, you should update the client and confirm how you should proceed.
2. Rollovers: The hyperlinks and navigation areas usually require a rollover effect. If it is not provided in the design file, you should ask the client if rollover effect is required.
3. JavaScript Functionality: If you feel that any particular part requires JavaScript functionality like carousal, tabs, accordion, etc. you must clarify its functionality from client Any changes requested by client later can add to your coding efforts.
4. Custom form elements: The form elements look different in almost all browsers. These days, designers commonly create custom form designs, so that it matches with design, and look identical in all browsers. But sometimes client want to use default form elements even if they are designed by the designer, because custom designs are sometime confusing for non technical users of website, and are not recommended by usability testers. Discuss it with your client if needed.
5. Non system fonts: The designers have a tendency to use stylish fonts, to add beauty and creativity in the design. These designer fonts (commonly known as non system fonts) are not supported by browsers by default. There are many methods available to use these fonts in the webpage for example cufon, sifr, google fonts, @font-face, etc. You should inform your client about these options, and agree on a preferred method of implementing such fonts.
6. Special effects on text or images: Sometime designers add special effect on text like drop shadow, glow, etc. Many of these effects can be created with use of CSS3, but it is not completely supported by browsers till date. As an alternate option, you can use images for such text. Discuss it with your client about both options, and agree on a preferred method to implement it.
7. Anti-aliasing methods applied on text: Designers normally add anti-aliasing methods like smooth, crisp, etc. on text to make it look nicer in Photoshop. But this effect cannot be achieved by CSS. Discuss it with your client about the same, if required.
8. Blending mode for layers: sometimes designers use blending modes like multiply, color burn, etc. to achieve a particular effect in Photoshop. If you need to use the layer with blending mode applied as a transparent image, it is normally not possible to achieve the same effect as shown in Photoshop. Discuss it with your client, if any such layer is found in design.
9. Rasterized layers: Sometimes designers rasterize all layers, including text in Photoshop file. In such case you need to check if you can still use the layers comfortably. If not, you should ask your client for a proper PSD file. Even if everything is fine in PSD, it is obviously a tedious task to re-write all content in the PSD. In this case, you can use dummy text, and update the client about it.
10. Hidden layers: Sometimes there are hidden layers of layer groups in the PSD files. You should check all layers and find if there are any hidden layers that you need to activate and code. If in doubt, you can obviously ask your client for the same.
11. Misaligned areas in design: Sometimes new designers do not take care about the alignment of different sections properly. I have seen that even experienced designers leave some areas misaligned by few pixels, though by mistake. You can use guide lines to check the alignment of sections, and if any misaligned sections are found, you can ask the client about the same, to confirm whether it is intentional or a design mistake.
12. Require use of transparent images in PNG-24 format: The transparent PNG images are not supported by IE6 and older browsers. Even with help of IE specific filter available to add this support, many effects cannot be recreated on web page. You should check the design for need of transparent images and possibilities of their implementation, and inform the client accordingly.
13. CSS3 feature that is not supported in a browser: As CSS3 is gaining popularity, you still need to use browser specific prefixes to add most of the new properties. Also these new properties are not supported by IE till version 8. If your client wants you to use CSS3, or you suggest him the same to achieve a particular effect, it is a good practice to talk about it with your client.
14. Non repeatable background image: Sometimes designers create beautiful effects in page backgrounds, but they forgot to ensure that these backgrounds can be repeated if screen resolution is bigger than the background image created. In this case background images look broken, and it impacts the overall beauty of website. If you find such background used in the design, you must ask your client what to do with the background.
15. Videos, Google Map, Flash banner, etc.: Usually there are places created for Videos, Google Map, and Flash Banner etc. in the designs. Clarify with you client whether you need to add any functionality for these, or just use an placeholder image which can be replaced later.
16. Any other issues: While checking PSD file, you may find any other issue that is not mentioned in the above list, or you may get confused about how to code a particular part. Make sure about what you are going to ask your client; otherwise you can lose your client’s confidence in you.

I hope you found this list useful; you can keep it as a quick checklist with you if required. If you feel I have missed any point in the list, please let me know so that I can update the list, and it will benefit others too.

This article will help you better understand the market standards, and commonly used terms in this domain.

Pixel perfect layout

Designers loves the layouts they create, and they want web pages to match with original design in all web browsers. This process of matching the layouts from PSD with Browsers is commonly known as “pixel perfect layout”. We ensure it by taking a screenshot from browser and overlapping it on original design, with little transparency. In this way, the differences are clearly visible in both original layout and screenshot taken from browser. And the programmer can fix the differences with their coding skills.

Though there are various tools available to help in this process, these tools have many limitations. I would suggest that doing it manually is the best process so far.

W3C Validation

World Wide Web Consortium (W3C) is the international standards organization that has the responsibility to create and update many languages related to Web. HTML, XHTML, and CSS are part of W3C’s responsibilities.

They have created validation tools so that one can easily confirm that webpages are coded with proper web standards.

W3C Markup Validation Service: http://validator.w3.org/
W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/

Page Speed optimization

How fast a webpage loads into web browser, depends on various factors such as:
- Data transfer speed provided by ISP
- Size (in bytes) of webpage and its related files, like CSS, JS, Images, etc.
- Round trips between server and client to fetch the required data

The first point mentioned in above list cannot obviously be controlled by web developer; however, rest of the points can be ensured by good programming skills.

The technique to reduce the file sizes includes, optimizing images for fast loading, using sprite images with help of CSS (also known as CSS Sprites), using proper inheritance in CSS so that minimum code is used to achieve the desired results, and few others.

All these topics need individual articles and I shall try to cover all these differently, since they deserve their own attention.

Semantic coding / Search Engine Compatibility

HTML tags have their own meaning when used in a document. For example, the p tag denotes to a paragraph, and em tag means that text should be emphasized or it has  extra importance. Using proper tags in HTML documents is known as semantic coding.

Semantic coding is a very important factor because Search Engines and Screen Readers understand your page with help of html tags used to wrap the content. For example, searching engines consider the content within opening and closing address tag as an address.

There are some other technologies that add additional details to the content for search engines and screen readers. Some of commonly known technologies are Microformats, and RDFa. Again, I shall try to cover these in separate and independent articles.

Accessibility

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

W3C has created Web Content Accessibility Guidelines (WCAG) as an initiative to create guidelines for adding accessibility for websites.Many countries understood the need of accessibility and they have created laws related to accessibility for websites.

W3C has also created WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) as guidelines for Rich Internet Applications.

Print CSS

Users may want to print your webpage on paper, may be to read it later sometime, or to keep a copy of the content handy with them. For whatever reason, you as a programmer, need to always remember the difference between a web pages and a paper.

Contrary to a webpage, paper has limited width and height. Also, paper has its own limitations such as you cannot add hyperlinks on paper, or you cannot have interactions added using JavaScript.

Fortunately, CSS have some specific properties to address these issues, and also allow writing media specific CSS code. Usually a separate CSS files is created to handle the CSS code related to print media, this file is typically known as “Print CSS”.

Cross Browser Compatibility

This is somewhat similar to Pixel Perfect Layout that I have described above. There are many web browsers available to the users for free, and they can choose a browser they like. Also there may be differences in versions of browsers, most commonly known example of version differences is Internet Explorer because unlike other browsers it do not offer an automatic update.

All browser vendors have their own way to implement the CSS properties, so there can be significant differences in how your webpage looks and/or behaves in different browsers.

Cross Browser Compatibility means that developer will ensure that webpage will look and behave identical (almost) in all major web browsers.

Conclusion

I have tried to cover the most commonly used terminology and features that are regularly used by UI developers. However there are many more terms and features, some of them are related to above mentioned aspects and few others may be altogether different. I will try to cover some of them in future articles. You can suggest me if you want me to write about any particular term, or if you think i have missed an important term in the above list.

Use of these software’s for web designing depends on the designers’ preferences, however the term PSD to HTML has gained such a popularity that it is used by many corporate houses to address HTML conversion of all file formats.

About PSD to HTML Conversion Guide

I had originally planned to write a book on the topic, but when I started planning the structure, I realized that this topic is very vast and is evolving fast. Also, I was more excited  to share it with audiences and openly discuss different topics and sub-topics with industry experts, and to learn their views.

So now, I have started compiling my thoughts and knowledge in the form of a series of articles combined under the category named “PSD to HTML Conversion Guide”.

Table of Contents

I am working on the articles, and since there are no monetary benefits involved (directly at least), I am only spending my free time here. So the process may be a bit slow, however the objective is to share the knowledge. I will keep updating the table of content below, as soon as I post a new article in the series.

1. Introduction to PSD to HTML Conversion
2. Understanding the Terminology
3. Understanding Project Requirements

Please Share

If you find these articles useful, please share them with your colleagues friends, and in your community, via social media (such as facebook, LinkedIn, twitter). Also let me know your views, so that I stay encouraged enough to keep writing.

Value

Color values can be defined in Hexadecimal, Decimal and keyword (color name) formats, The initial value for color depends on user agent.

Example

body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}

<h1>This is heading 1</h1>
<p>This will an ordinary paragraph. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This will a paragraph with class="ex". This text is blue.</p>


Technical Specifications

Browser compatibility chart

	5.5	6.0	7.0	8.0
	1.0	1.5	2.0	3.0	3.5
	9.2	9.5	10.0
	1.3	2.0	3.1	4.0
	2.0
	Full Support
	Partial Support (Buggy)
	No Support

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Value

• Normal - Same as ’400′.
• Bold - Same as ’700′.
• Bolder - Specifies the next weight that is assigned to a font that is darker than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value was ’900′, in which case the resulting weight is also ’900′.
• Lighter - Specifies the next weight that is assigned to a font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighter numerical value (and the font remains unchanged), unless the inherited value was ’100′, in which case the resulting weight is also ’100′.
• 100 to 900 - These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor.
• Inherit

Example

p {font-weight: 900}
<p>CSS font-weight</p>


Technical Specifications

Browser compatibility chart

	5.5	6.0	7.0	8.0
	1.0	1.5	2.0	3.0	3.5
	9.2	9.5	10.0
	1.3	2.0	3.1	4.0
	2.0
	Full Support
	Partial Support (Buggy)
	No Support

Note: No versions of Internet Explorer (including IE8) support the property value “inherit”.

Italic and Oblique properties both result in an ‘italic-like’ appearance, but some font families require the use of the ‘oblique’ value instead of ‘italic’.

Value

• Normal - Specifies a font that is classified as ‘normal’ in the UA’s font database.
• Italic - Specifies a font that is classified as ‘oblique’ in the UA’s font database. Fonts with Oblique, Slanted, or Incline in their names will typically be labeled ‘oblique’ in the font database. A font that is labeled ‘oblique’ in the UA’s font database may actually have been generated by electronically slanting a normal font.
• Oblique - Specifies a font that is classified as ‘italic’ in the UA’s font database, or, if that is not available, one labeled ‘oblique’. Fonts with Italic, Cursive, or Kursiv in their names will typically be labeled ‘italic’.
• Inherit

Example

.text { font-family: times, serif; font-size:14pt; font-style:italic; }
<p class="text">Sample text formatted with CSS in a separate stylesheet.</p>


Technical Specifications

Browser compatibility chart

	5.5	6.0	7.0	8.0
	1.0	1.5	2.0	3.0	3.5
	9.2	9.5	10.0
	1.3	2.0	3.1	4.0
	2.0
	Full Support
	Partial Support (Buggy)
	No Support

Note: No versions of Internet Explorer (including IE8) support the property value “inherit”.

This encouraged me to try and create this effect in CSS, and it could prove to be a lifesaver for all. I tried and came up with a solution, which works in all browsers (Yes it works in IE too, not very nicely however).

Before we dive into the code, take a look at the demo page, to get an idea of what we are going to build here.

Following screenshot is taken from Firefox:

Getting started:

To follow along, you need to create an HTML page, a CSS file, and few images. You can also download the source files of my demo page.

I have named my files index.html, style.css, and images are placed in a folder named images.

HTML Code

<div class="image-block">
   <img src="images/book1.jpg" alt="" />
   <div class="reflection">
      <img src="images/book1.jpg" alt="" />
      <div class="overlay"></div>
   </div>
</div>

Each image requires an extra block which contains a copy of the image for reflection and a div with class "overlay" that we will use for adding fading gradient.

I have grouped both image and div into a container div with class "reflection". Let’s call this reflection block for referring it.

Now both original image and reflection block is wrapped into a div with class "image-block". Let’s call this image block. You can have any numbers of image blocks in your code if required, and that’s why I have used classes for CSS instead if IDs.

Ok, this code is simple enough to understand (I guess), so let’s move on to CSS.

CSS Code

.image-block { width:78px; margin:0px 10px; float:left; }
.reflection { position:relative; }
.reflection img {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
    filter: flipv; opacity:0.20;
    filter: alpha(opacity='20');
}
.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px;
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}

Let’s go through the code step by step.

 .image-block { width:78px; margin:0px 10px; float:left; } 

I have added width to image block equal to the width of image, and by doing so, the reflection div will automatically move down, as it will not have space for second image.

Now we have two images as shown in image below

Next I have added position relative to the reflection block. This will add the positioning coordinates for its child elements with position absolute.

  .reflection { position:relative; } 

Now we have our stage ready, so let’s begin the magic with CSS3

.reflection img {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
    filter: flipv;
    opacity:0.20;
    filter: alpha(opacity='20');
}

This block of CSS code uses CSS3 and IE filters to flip the image vertically and add transparency to the image.

Because transform property is not completely implemented by all browsers, we need to add browser prefixes to make it working in each browser engine.

We have used transform: scaleY(-1); to simply flip the image vertically. Same effect can be achieved in Internet Explorer by adding filter: flipv;

Last 2 lines opacity:0.20; and filter: alpha(opacity='20'); adds transparency to the image.

Following image shows, what we have achieved so far:

Now we only need to add a gradient to add fading effect to the image, we have CSS3 gradients handy for this.

Some facts about CSS3 gradients:

• CSS3 Gradient property is implemented differently in all browsers.
• CSS3 Gradient property is not supported by IE including IE9.
• Gradient in CSS is only supported on background images.

.overlay { position:absolute; top:0px; left:0px; width:78px; height:120px;
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}

Because CSS3 gradient property is only supported on background images, we cannot add it directly on our reflection image.

I have added a div with class "overlay" for this purpose. I have positioned this div above reflection image, with position absolute. And added a width and height equaling to image.

At last I have added CSS3 gradient property to this overlay div, which has added a fading effect to the image.

Following is the end result.

This works fine in all browsers, except internet explorer.

Microsoft has provided a gradient filter, but it does not provide the ability to add a start and end point for gradient, like CSS3 gradient property.

Following is the result in Internet Explorer after adding the gradient filter.

As an idea, you can play with heights of reflection div and overlay div to cut the image and improve the effect in Internet Explorer. I am still looking for a better solution for Internet Explorer.

Please let me know if you any suggestions for improvement of this effect, or share the links if you use this effect in your projects.

I’m looking forward to your comments and thank you so much for reading!

Note: This feature is NOT new in CSS3; it was originally proposed in CSS2.

Value

• h-shadow -Specifies the position of the horizontal shadow. Negative values are allowed.
• v-shadow -Specifies the position of the vertical shadow. Negative values are allowed.
• blur -The blur distance
• color -The color of the shadow. Look at CSS Color Values for a complete list of possible color values

Example

p { text-shadow: #6374AB 20px -12px 2px; }


Technical Specifications

Browser compatibility chart

	5.5	6.0	7.0	8.0
	1.0	1.5	2.0	3.0	3.5
	9.2	9.5	10.0
	1.3	2.0	3.1	4.0
	2.0
	Full Support
	Partial Support (Buggy)
	No Support

Note: Safari up to and including version 4 and Chrome versions up to and including 3 don’t support multiple shadows.