Understanding the Terminology
Advertisement
Before you start working on PSD to HTML conversion, let me introduce you to some of the basic terms that you should be familiar with.
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.
Social Network
Join our social network to get benefit of frequent Lab updates.
Twitter Facebook RSS Feed