Impressive Web

Brief about various Designs

2013-09-10T03:00:00.000-07:00

Maybe just a shorter version:

· Graphic/Visual Design: How it looks

· Information Architecture/Design: How it's organized

· UI Design: How it works before I touch it

· Interaction Design: How it works after I touch it

· Web Design: How it works in a browser

· UX Design: How I feel about it

· Development: Actual coding

first of all lets clarify design and development

design is a conceptual work, production of a concept for a solution, a process of elimination of things that you think, feel and believe do not fit as a solution to your intended goal

development is a production of finalized specification/idea (at least in theory) or something that makes sense and close to what you are looking for (although in many cases it is not like that), basically a conversion of your design/idea into working end product

note that both things can and do in most cases coexist side by side in production of the product

now that this is out of way, visual, web, ux, ui are just sub categories of a design notion, each although based on design principal also have their own sub universes and their own sub rules and sub practices that apply directly to their respective subcategories and in many cases can propagate seemingly from one sub category to another.

from my understanding and what i have learned over the years,
interaction design (none specific to field) - concept/understanding how one/individual interacts with an entity and how to design the process of interaction of that individual with the entity. that entity can be anything you pick it to be, for example your car, or your toaster, web browser and website that you view in a browser.
visual design (none specific to field) - concept/understanding of aesthetic appeal and impact of an entity with which individual interacts/looks at
web design (field specific) - concept/understanding of an idea that is a technology(s) specific and includes aspects of multiple design concepts such as but not limited to: interaction design, visual design, user experience design, user interface design and so on
user experience design (none specific to field) - concept of designing user experience, which in turn includes visual design and interaction design plus the limitations of the field in which such design work is happening
user interface (some what specific to field) - concept of designing an interface through which user can interact with the product, gui in soft/web app or an steering wheel in a car
user interface development (none specific to field) - is a process of converting user interface design concept into functioning interface that creates physical connection between individual and product.

Source: http://stackoverflow.com/questions/1654093/what-is-difference-between-interaction-design-visual-design-web-design-ux-des

Style a Select Box Using Only CSS

2013-09-04T22:29:00.002-07:00

I often have to use a select box when I’m putting together a custom form that requires a drop down list. It took me a while to figure out how to easily style the select box using only CSS since certain parts are browser specific, such as the drop down arrow.

Here is how a select box will look by default:

This is the HTML code:


<select>
   <option>Here is the first option</option>
   <option>The second option</option>
</select>

There are certain elements of a select box that we can style such as the font, border, color, padding and background color:

But that annoying drop down arrow always stays the same. There is no direct way to do style it, but the workaround is pretty simple.

First we need to surround our select box element with a div container:


<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

Next we need to add a bit of CSS to make sure that the elements of the select box are styled a certain way:


.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

We need to make sure that our select box actually spans wider than the surrounding div container so that the default drop down arrow disappears.

This is the new drop down arrow I want to use:

Our div container needs to be styled like so in order for the new arrow to appear where we want it to:


.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border: 1px solid #ccc;
   }

Our select box should now look like this:

Knowing this little workaround will make it a whole lot easier to style your select box exactly how you want it to be styled using nothing but CSS.

Sourece: http://bavotasan.com/2011/style-select-box-using-only-css/

IE Hacks

2013-06-24T00:04:00.001-07:00

IE8 and Below

The key to targeting Internet Explorer 8 and below, with a hack, is to append “\9″ to the end of your style. For example:

body {

color: red; /* all browsers, of course */

color : green\9; /* IE8 and below */

}

It’s important to note that it must be “\9″. Unfortunately you can’t replace this with something along the lines of “\IE”, like I attempted to do so. Even “\8″ won’t work; it must be “\9″.

IE7 and Below

body {

color: red; /* all browsers, of course */

color : green\9; /* IE8 and below */

*color : yellow; /* IE7 and below */

}

IE6

Lastly, we have the underscore hack, which most designers are familiar with by now. Rather than the * symbol, we use the underscore. This will target only Internet Explorer 6.

body {

color: red; /* all browsers, of course */

color : green\9; /* IE8 and below */

*color : yellow; /* IE7 and below */

_color : orange; /* IE6 */

}

How To Create an IE-Only Stylesheet

If you read this blog, there is a 99% chance you've had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can't predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Why use conditional stylesheets?

· You got problems, they need fixin'

· Keeps your code hack-free and valid

· Keeps your main stylesheet clean

· Perfectly acceptable technique, sanctioned by Microsoft

And remember, these conditional tags don't have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.

The Code

This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that's just regular ol' HTML comments. Then between the brackets, "IF" and "IE" should be fairly obvious. The syntax to note is "!" stand for "not", so !IE means "not IE". gt means "greater than", gte means "greater than or equal", lt means "less than", lte means "less than or equal."

Target ALL VERSIONS of IE

<!--[if IE]>

        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />

<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->

        <link rel="stylesheet" type="text/css" href="not-ie.css" />

 <!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>

        <link rel="stylesheet" type="text/css" href="ie7.css">

<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>

        <link rel="stylesheet" type="text/css" href="ie6.css" />

<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>

        <link rel="stylesheet" type="text/css" href="ie5.css" />

<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>

<link rel="stylesheet" type="text/css" href="ie55.css" />

<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>

        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />

<![endif]-->

<!--[if lte IE 6]>

        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />

<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>

        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />

<![endif]-->

<!--[if lte IE 7]>

        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />

<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>

        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />

<![endif]-->

<!--[if lte IE 8]>

        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />

<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>

        <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />

<![endif]-->

<!--[if gte IE 6]>

        <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />

<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>

        <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />

<![endif]-->

<!--[if gte IE 7]>

        <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />

<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>

        <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />

<![endif]-->

<!--[if gte IE 8]>

        <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />

<![endif]-->

Universal IE 6 CSS

Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to server IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.

HTML

<!--[if gte IE 7]>

<![endif]-->

<!--[if lte IE 6]>

<![endif]-->

Hacks

If you must...

IE-6 ONLY

* html #div {

    height: 300px;

IE-7 ONLY

*+html #div {

    height: 300px;

IE-8 ONLY

#div {

  height: 300px\0/;

IE-7 & IE-8

#div {

  height: 300px\9;

NON IE-7 ONLY:

#div {

   _height: 300px;

Hide from IE 6 and LOWER:

#div {

   height/**/: 300px;

html > body #div {

      height: 300px;

Credits

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

UI Design for Business Web Applications

2012-08-06T22:04:00.005-07:00

This article covers the basics of user interface design for business Web applications. While one could apply many approaches, techniques and principles to UI design in general, our focus here will be on business Web applications.

Websites vs. Web Applications

A website is a collection of pages consisting mostly of static content, images and video, with limited interactive functionality (i.e. Except for the contact form and search functionality). The primary role of a website is to inform. Some websites use content management systems to render dynamic content, but their nature is still informative.

CampaignMonitor is powerful email marketing software, while Jeff Sarimento’s website is intended to inform readers about his life and work.

Web applications, on the other hand, are dynamic, interactive systems that help businesses perform business critical tasks and that increase and measure their productivity. Thus, the primary role of a Web application is to perform a function that serves the user’s tasks and according to defined business rules.

Web applications require a higher level of involvement and knowledge of the system on the part of the user. They don’t just stumble upon the application, do their work and bounce off. They use it as a tool to perform critical business tasks in their daily work. In the end, they cannot easily discontinue using the application and switch to another if they don’t like how it’s working, as is the case with websites.

DIFFERENT TYPES OF WEB APPLICATIONS

Business applications range in type from invoicing for freelancers to content management systems to document management systems to banking and financial systems.

We can distinguish between open and closed applications. Open systems are online applications that are easily accessible to anyone who opens an account. Users can access such applications via the Web and can open an account for free or by paying a fee. Closed systems (or line-of-business applications) are usually not accessible outside the company that uses it, and they can be considered “offline” applications (though many systems expose their functionality to business partners via other services or specialized interfaces). Such systems usually run on the company’s local network and are available only to employees.

First, Know Your Users

A successful user interface focuses on users and their tasks. This is key, and too many developers have failed to create a good user experience. As Steve Krug said, “Developers like complexity; they enjoy discovering how something works.”

When identifying your users, keep in mind that clients are not users, and you are not a user.

HOW TO IDENTIFY USERS?

Identifying users can be done using several techniques, such as user interviews, business stakeholder interviews and the “shadowing” method of observation. Interviews can give you answers to questions about the users’ knowledge of the system and computers in general, while shadowing can yield more detailed information about how users perform tasks and what errors they make. The method is called shadowing because the observer is like a shadow, watching and noting the steps a user takes.

If you don’t have access to real users—either because you don’t have permission or are designed for open application—you can use personas, a tool to help identify users. Personas are a representation of real users, including their habits, goals and motivation. Because certain information about users is often identified through business analysis, you can make use of it to create personas. If you are not familiar with the tool, a comic by Brad Colbow will help.

Task analysis helps identify what tasks users perform in their jobs, how they do them, how long they take and what errors they make. Sometimes clients will be using an old version of the application that you are designing to replace. Make use of that old system and watch how users use it. Understanding their tasks and challenges will be easier that way.

Regardless of who your users are, one thing is certain: in most cases, you will have to consider both novices and experts. Novice users should be enabled to learn as fast as possible, while expert users should be enabled to perform their tasks extremely efficiently. This may mean creating separate interfaces. But in many cases you will be able to accommodate both types of users in the same interface through various techniques, such as progressive disclosure.

Such research is usually done by business analysts. But if no one else is responsible for it, you should do it. Once you have the necessary information, you can begin with design.

Design Process

You can follow one of any number of processes in designing the user interface. You might already have one. However, I would suggest that you consider the Agile approach. Why, you ask? Well, because for users (and clients), the user interface is the product. The bottom line is that they don’t care about your sketches or about fantastic back ends or powerful servers. All they want to see is the user interface.

So, how does Agile help? It helps through its key principle: the iterative approach. Each iteration consists of all of the phases defined by your process. This means that at the end of the first iteration, you will have a product that can be tested, a prototype.

SKETCHING

Sketching is a powerful way to explore ideas. The goal is to arrive at the solution by sketching out different concepts. In “Sketching User Experience” book, sketches are fast to create and easy to dispose of, which is why they are so powerful.

Are sketches the same as wireframes? Well, the differences can be blurry, but I would say no. Wireframes don’t capture rough ideas but rather develop them.

Once you get the “right” sketches, or at least the one that you think are right, you can create more detailed wireframes or go straight to creating interactive prototypes.

PROTOTYPING

The next step in the process is to create prototypes that will simulate the real application. A prototype can contain one or more features (or all of them), but it actually does nothing. It merely simulates the behavior of a real application, and users will feel that they are actually doing something. Prototypes may contain some functionality if needed (such as complex calculations).

Because the nature of a prototype done in HTML is temporary—its purpose, after all, is to test ideas—don’t bother with the code; just make it work with minimal bugs. You will throw it away anyway. You can also use specialized prototyping software such as Axure. Some people even prototype in PowerPoint.

TESTING

Prototypes are useless unless you test them. This is not rocket science. People like Jakob Nielsen and Steve Krug support so-called “discount usability testing,” which is cheap and fast and yields valuable insight into your design decisions. You will use this information as the basis of another iteration of sketching, prototyping and testing. Do this at least until major issues have been fixed. We all know that software projects are tight on time and budget, so to be more efficient, test early and test often.

Design Principles

There are many design principles, but there doesn’t seem to be a general consensus on definitive ones. So, we’ll go through design principles more informally, leaving out strict definitions.

NO ONE LIKES SURPRISES

Probably the key factors in a good UI are consistency and familiarity. A user interface should be consistent across all parts of the application, from navigation to color to terminology. This is known as internal consistency. But a user interface should also be consistent within its context, such as the operating system or other applications in its group or family. A typical example is the applications in the Microsoft Office family. This is called external consistency.

A good approach to consistency is to define user interface guidelines for each project or for a group of projects. These should guide the decisions you make for all of the details. This will not only maintain consistency but also serve as documentation to help team members better understand your decisions.

Although a simple example, SprinklePenny achieves consistency and familiarity across the application.

Consistent user interfaces have a shorter learning curve, because users will recognize parts of the system and be able to fall back on prior experience. But familiarity is sometimes confused with consistency. Familiar user interfaces draw on concepts from the users’ previous experiences and use appropriate metaphors. Folders, for example, are a well-known metaphor for file organization, and they have replaced “directories,” which were used previously in command-line operating systems. In short, speak the language of your users.

A common belief among business owners is that a great user interface should look like a Microsoft Office product, especially Outlook. I won’t go into explaining how pointless this is. Rather, I will offer alternative advice: defend the user-centric approach, and explain why creating an application for employees, clients and partners (i.e. Their users) is so important.

All the same, most businesses are unique, as are their work processes. For example, two businesses from the same branch could have significantly different processes, forcing you to go beyond what is familiar and start to innovate. This part of the design process can be very interesting, although you have to be careful in how far you go with innovation.

USERS SHOULD BE ABLE TO BE EFFICIENT

Without a doubt, users should be able to be efficient when using business applications. This is what they are paid for, and this is what managers expect from the application. User interfaces should allow users to be efficient and should focus them on completing tasks in the easiest and fastest way. But this is not always the case. There is an opinion, or at least practice, among developers that says the user interface should be as complex as the back end system. No matter how ridiculous this sounds, the problem is real and might give you a headache. This is one reason why good communication and collaboration between developers is a must.

Users are efficient when they focus on a particular task. As mentioned, task analysis can help you identify tasks and determine how users perform them. If tasks are long, accelerate them by breaking them up into smaller units. You can also increase efficiency by providing keyboard support and shortcuts. Think how inefficient it is for a user to have to switch back and forth between mouse and keyboard. In some cases, you will be designing for users who are accustomed to working on command-line operating systems and the applications made for them. They will be keen to have keyboard support. One suggestion: when defining keyboard shortcuts, keep them consistent with those of common applications. For example, Ctrl + S should always save, and so on.

Efficiency can also be enhanced through personalization. Users who can personalize an environment will learn it faster and, more importantly, will be more confident using it. Personalization can be done in many ways: choosing widgets for the dashboard; defining shortcut options and favorites; changing the order of elements; etc.

Pay attention to accessibility. Although many assume that accessibility doesn’t matter in Web applications, it certainly does. Treat the application as if it was a public website.

A Web application also has to be efficient in the speed with which it processes information. So, consider heavy interactions that result from partial renderings and AJAX requests.

HELP!

An interface should provide meaningful feedback that describes the state of the system to users. If an error occurs, users should be notified and informed of ways to recover. If an operation is in progress, users should be notified about the progress.

We can go even further and declare that user interfaces should prevent users from making errors. This principle, called forgiveness, can be followed with confirmation dialogs, undo options, forgiving formats and more. Forgiveness makes it safe to explore the interface, decreases the learning curve and increases overall satisfaction.

Because of the complexity of business Web applications, you would also need to provide a comprehensive help system. This can be done with inline help, a support database, a knowledge base and guided tours (which mix video, images and text).

CAN’T GET NO SATISFACTION

Satisfaction is a subjective term that refers to how pleasant an interface is to use. Every design principle we have described here affects satisfaction. And a few more principles are worth mentioning here.

Simplicity is a basic principle of UI design. The simpler a user interface, the easier it is to use. But keeping user interfaces for business applications simple is a challenge because the apps often have a lot of functionality. The key is to balance functionality and simplicity. Restraint is one of the most efficient ways to achieve this balance: i.e. Finding the simplest way to solve a problem.

BuildWith.me has a simple and effective user interface, without sacrificing aesthetics.

Aesthetics, though subjective and somewhat arbitrary, play an important role in overall satisfaction. Users respond positively to pleasing user interfaces, sometimes even overlooking missing functionality. But you’re not creating a work of art. One of the best articles that explains aesthetics is In Defense of Eye Candy.

In the end, users will be spending a lot of time in front of a business application, and no matter how usable, consistent or forgiving the interface is, satisfaction will be critical in determining how good the user interface is.

Essential Components Of Web Applications

Every Web application is unique, but many of them contain common features. Although the implementation of any one of these features will vary, let’s look at the basic concept of the three most common ones.

WEB FORMS

Forms in general are important to Web applications. But as Luke Wroblewski says in his Web Form Design book, “No one likes filling in forms.” That includes sign-up forms, including business applications with dozens of fields.

Minimize the frustration of filling in forms. Provide inline validation and good feedback. Use defaults when possible. Don’t forget about novice users. Use wizards to help them complete tasks faster, or use progressive disclosure to hide advanced (or infrequently used) features.

MASTER-DETAIL VIEWS

This is the technique of showing data in two separate but related views. One view shows a list of items, while the other shows details of the selected item. Master-detail views can be implemented across multiple pages or on individual ones.

DASHBOARDS

Many Web applications have dashboards. A dashboard is a view of the most important information needed to take action and make decisions. It is confined to a single page and is usually the starting point of an application. Dashboards are important because they enable users to access information and take action without having to dig through the application.

Xero shows a user’s most important financial information (e.g. bank accounts and credit cards) in its dashboard, making it easy for users to quickly see the status of their financial data.

HEAVY USE OF TABLES

Because Web applications typically deal with large quantities of data that are easily accessible and sortable, tables are unavoidable. But this is not a bad thing. In fact, tables were made for this purpose. Don’t confuse this with table-less layouts. Effective tables are easily readable. So, in most cases you will need a meaningful header, an optimal number of columns, pagination, alternating row colors, proper column alignment, sorting and filtering capabilities and much more.

Tables can also be interactive, meaning they can generate additional info and even modify the data they contain.

PulseApp is a good example of how tables can be used to efficiently present and manipulate complex data.

REPORTS

Most businesses work with some kind of reports. Printed reports are usually required, so pay attention to the design of reports. Printed (or exported) reports are usually simplified versions of online reports, optimized for monochrome printers.

FreshBooks has printing, PDF exporting and “Send to email” features. It also shows a print preview.

Don’t Forget UI Design Patterns

We’re so used to hearing and talking about UI design patterns that we sometimes forget about them! UI design patterns are helpful for designing user interfaces. The important thing is to consider them early on in the design process, ideally at the sketching stage. Because patterns often solve common problems, the right pattern can facilitate the user’s familiarity with an interface and increase the speed at which they learn it.

Case Study: Online Banking Application

To take an example from the real world, I will briefly explain the process of designing the user interface for one small bank’s online banking system. The team I worked with was hired to improve the system. The main reason for the redesign was that, according to management, “users complained and many stopped using it.”

After only a couple of hours spent with actual users, the main problems were uncovered. Information about accounts and credit cards was buried in poor navigation. Understanding how much money users were spending and the state of their accounts and credit cards was also hard. The application, however, was obvious to bank employees; they were familiar with the terminology and could interpret the numbers in the application perfectly well.

Give the tight deadlines, we followed the process I have described, and we partially succeeded. Despite the short time, the major problems were so obvious that we clearly understood our main task and how to go about it. We created a dashboard that provided clear information on the state of all accounts and credit cards. With this new navigation, finding information became easier. Reports were easier to understand, and several new features were implemented.

Although we made only a few changes, the changes affected critical user tasks and resulted in significant improvements to the overall experience.

Final Thoughts

Designing user interfaces for business Web applications is a challenging job that is full of compromises. You have to make compromises between client and user needs; business requirements and users; novice and expert users; functionality and simplicity. It requires a solid understanding of users and their tasks, as well as of UI design principles and patterns. Despite the difficulties, the job is interesting, and you learn many new things on each project that influence the way you design websites.

While this article reflects some well-known concepts and things I have learned from designing business applications over the years, I look forward to hearing your experiences and stories.

Author: Janko Jovanovic

Credits: http://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/

Domain & Industry Centric Solutions

2012-08-05T22:28:00.003-07:00

1) In computing and telecommunication in general, a domain is a sphere of knowledge identified by a name. Typically, the knowledge is a collection of facts about some program entities or a number of network points or addresses.

2) On the Internet, a domain consists of a set of network addresses. This domain is organized in levels. The top level identifies geographic or purpose commonality (for example, the nation that the domain covers or a category such as "commercial"). The second level identifies a unique place within the top level domain and is, in fact, equivalent to a unique address on the Internet (an IP address). Lower levels of domain may also be used.

Strictly speaking, in the Internet's domain name system (DNS), a domain is a name with which name server records are associated that describe subdomains or host. For example, "whatis.com" could be a domain with records for "www.whatis.com" and "www1.whatis.com," and so forth.

3) In Windows NT and Windows 2000, a domain is a set of network resources (applications, printers, and so forth) for a group of users. The user need only to log in to the domain to gain access to the resources, which may be located on a number of different servers in the network.

Industry Centric Solutions

Clients today want practical and logical solutions that can be implemented without many hassles. Every industry throws up a different set of challenges, and as our clients’ IT solution providers we ensure that our solutions work for them. Industry orientation, therefore, comes to us as a natural choice as our focus has always been on helping our clients see their investments in IT pay off.
It is our constant endeavor to upgrade the quality of our solutions by enhancing our functional understanding of the focus industries. Our industry experts keep abreast with the latest trends in these industries, and are involved in all the stages of the projects, including the initial system studies and solution design.
Our emphasis on delivering total value through a combination of industry knowledge and technology is summed up in the following solution methodology:
Detailed understanding and pro-active recommendations for industry-specific challenges
Developing industry-specific solution frameworks targeted at clients' unique needs
Involvement of experienced cross-functional consultants that interpret technical know-how in the context of the industry
Use of pre-engineered components to reduce the time, cost and risk associated with solution implementations
» Banking and Financial Services
» Education and E-learning
» Insurance
» Gaming
» Healthcare
» Utilities
» Pharmaceuticals and Life Science
» Construction
» Retail & Logistics
» Telecom

How to use CSS @font-face

2012-05-09T04:30:00.002-07:00

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.

Some browsers support @font-face, some do not.

The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

How do i use @font-face

The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features.

Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc).

@font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}

Then just use it like any other font in any other style rule.

p {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

@FONT-FACE GENERATOR

http://www.fontsquirrel.com/fontface/generator

Use this link for generating @font-facehttp://www.fontsquirrel.com/fontface/generator

Cufón Font Replacement

2012-05-01T22:59:00.001-07:00

Cufon is defined as “fast text replacement with canvas and VML”. It also claims to be a worthy alternative to sIFR – which is, to those who are not familiar – stands for Scalable Inman Flash Replacement. sIFR is the technology used by web designers to replace dynamic text with non-web safe fonts. Although sIFR has done an okay job with text replacement – it has proven to be quite tricky to set up. I’ve used sIFR in a few projects in the past and do admit that it is not the easiest thing to get going. On top of that – sIFR seems a bit buggy, as well as slows down page loads. These are serious consequences to consider for the price of using a unique font for your pages.

So I went ahead and tried Cufon. To my amazement, the following steps is all that it takes to fully “Cufonize” your web pages. *Forgive the use of the term “cufonize” – it may sound funny, but after you try these steps, you too will “cufonize” your pages.

Step 1: Get Cufon

The first thing you need is to download the core javascript file which is responsible for the rendering of your custom font inside your HTML. Head on to http://cufon.shoqolate.com/generate/ and right click the “Download” tab – choose “Save Link As…” Save cufon-yui.js into a local directory in your machine.

Step 2: Generate your Font

On the same page at http://cufon.shoqolate.com/generate/ – click on the “Regular typeface” field – and browse to your desired font in your local machine.

The rest of the upload fields are optional. I left all of them default for the sake of making this tutorial short. Just make sure – you are using a font that is legit to use, check off the EULAs and the Terms of Agreement. Click on the “Let’s Do This” Button at the very end of that page.

This should generate a custom font javascript code for you – depending on your font choice. In my case, I picked something very un-extraordinary: Gigi.TTF – which produced a file named Gigi_400.font.js.

Go ahead and save this file in the same directory where you saved the core Cufon-yui.js file and we’re ready to build your page:

Step 3: Cufonize your Page

All you really need to do from this point is to link to these javascript files in the head section of your HTML. Also make sure that cufon-yui.js is called before the font.js file:

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript"  src="Gigi_400.font.js"></script>

To begin the replacement process – create a custom script like below:

<script type="text/javascript">  
    Cufon.replace('h3, p');
</script>

The above script is telling the cufon to replace all H3 and P tags to our custom font.

Note that if you want to target specific elements in your page the same way you assign CSS classes and Ids, you have to use a framework such as jQuery that’ll let you do such a thing. To download jQuery, go to http://docs.jquery.com/Downloading_jQuery. Make sure you link to this file BEFORE the core cufon-yui.js in your header.

With the jQuery library in place, now you can select more specific elements in your page (hashtags for IDs and periods for classes). See example code below:

<script type="text/javascript">  
    Cufon.replace('h3#convert-me, p#convert-me-too');
</script>

The above code will Cufonize only the h3 tags with the id of “convert-me”, and p tags with the id of “convert-me-too”.

Conclusion:

That’s basically it! That’s all it takes for you to use any font you like in your web pages. What I like best about Cufon is that it’s quick and it works. You will also find that general CSS properties such as color, size and positioning still applies on the transformed font. To find out more about the specifics of Cufon styling – see http://wiki.github.com/sorccu/cufon/styling.

Much respect to the people who created Cufon. I’m sure this marks a new trend in web typography. To the folks at Woothemes: keep pushing the boundaries – your work is pure inspiration to web artists everywhere.

Credits: http://fearlessflyer.com/2009/10/cufonize-your-pages-how-to-add-cufon-to-your-web-design/

Form Validation Using JavaScript

2012-04-30T05:21:00.001-07:00

Form Validation:

· First name * - should alphabetic (a-z or A-Z) , no special character

· Last name * - should alphabetic (a-z or A-Z) , no special character

· DOB * (should have option to select date from date picker )

· Email * - Standard email validation with domain name checking (com, net, org,in )

· Gender

· Address (Alpha numeric and special characters. except - $,% ,^,*,!)

· ZIP code (Only 6 digit numeric value)

· Mobile number * (Only 10 digit numeric value)

· Upload photo

· Additional information - Paragraph text / not more than 500 characters

HTML

<html>
<head>
<title>WebCheatSheet - JavaScript Tutorial</title>
<script language="javascript" type="text/javascript" src="datetimepicker.js">

//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com

</script>
<script language="javascript" type="text/javascript">
function validateFormOnSubmit(theForm) {
var reason = "";

reason += validateFirstname(theForm.firstname);
reason += validateLastname(theForm.lastname);
reason += validateEmail(theForm.email);
reason += validatePhone(theForm.phone);
reason += validateEmpty(theForm.from);
reason += validateDOB(theForm.dob);
reason += validatezipcode(theForm.zipcode);
reason += validateInfo(theForm.info);

if (reason != "") {
alert("Some fields need correction." + reason);

return false;
}

return true;
}

function validateEmpty(fld) {
var error = "";
var ichars = "$% ^*!";

if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error="\n";
document.getElementById('address_err').style.visibility='visible';
document.getElementById('address_err').value="The required field has not been filled in.";
} else if(1)
{
for (var i = 0; i < fld.value.length; i++) {
if (ichars.indexOf(fld.value.charAt(i)) != -1) {
document.getElementById('address_err').style.visibility='visible';
document.getElementById('address_err').value="The required field has Special Char.";
error="\t";
}
}
}
else {
fld.style.background = 'White';
document.getElementById('address_err').style.visibility='hidden';

}
return error;
}

function validateInfo(fld) {
var error = "";

if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error="\n";
document.getElementById('info_err').style.visibility='visible';
document.getElementById('info_err').value="The required field has not been filled in.";
} else if ( fld.value.length > 500 )
{
//fld.value = field.value.substring( 0, 9 );
document.getElementById('info_err').style.visibility='visible';
document.getElementById('info_err').value="The required field can only be 500 characters in length.";

}else {
fld.style.background = 'White';
document.getElementById('info_err').style.visibility='visible';

}
return error;
}

function validateDOB(fld) {
var error = "";
var today=new Date();
by=fld.value;
var year=Number(by.substr(6,5));
var age=today.getFullYear()-year;
if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error="\n";
document.getElementById('dob_err').style.visibility='visible';
document.getElementById('dob_err').value="The required field has not been filled in.";

} else if((age<20)||(age>35))
{
fld.style.background = 'Yellow';
error="\n";
document.getElementById('dob_err').style.visibility='visible';
document.getElementById('dob_err').value="Age should be 20 years to 35years.";
}

else {
fld.style.background = 'White';
document.getElementById('dob_err').style.visibility='hidden';
}
return error;
}

function validateFirstname(fld) {
var error = "";
re = /^[A-Za-z]+$/;

if (fld.value == "") {
fld.style.background = 'Yellow';
error="\t";
document.getElementById('firstname_err').style.visibility='visible';
document.getElementById('firstname_err').value="You didn't enter a firstname.";

} else if(re.test(fld.value))
{
fld.style.background = 'White';
document.getElementById('firstname_err').style.visibility='hidden';

}
else
{
document.getElementById('firstname_err').style.visibility='visible';
document.getElementById('firstname_err').value="First Name contains illegal characters.";
}
return error;
}

function validateLastname(fld) {
var error = "";
re = /^[A-Za-z]+$/;

if (fld.value == "") {
fld.style.background = 'Yellow';
error="\t";
document.getElementById('lastname_err').style.visibility='visible';
document.getElementById('lastname_err').value="You didn't enter a lastname.";

} else if(re.test(fld.value))
{
fld.style.background = 'White';
document.getElementById('lastname_err').style.visibility='hidden';
}
else
{
document.getElementById('lastname_err').style.visibility='visible';
error="\t";
document.getElementById('lastname_err').value="Last Name contains illegal characters.";
}
return error;
}

function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}

function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\<\>\,\;\:\\\"\[\]]/ ;

if (fld.value == "") {
fld.style.background = 'Yellow';
document.getElementById('email_err').style.visibility='visible';
error="\t";
document.getElementById('email_err').value="You didn't enter an email address";

} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = 'Yellow';
document.getElementById('email_err').style.visibility='visible';
error="\t";
document.getElementById('email_err').value="Please enter a valid email address.";
} else if (fld.value.match(illegalChars)) {
fld.style.background = 'Yellow';
error="\t";
document.getElementById('email_err').style.visibility='visible';
document.getElementById('email_err').value="The email address contains illegal characters.";
} else {
fld.style.background = 'White';
document.getElementById('email_err').style.visibility='hidden';
}
return error;
}
function validatePhone(fld) {
var error = "";
var stripped = fld.value.replace(/[\.\-\ ]/g, '');

if (fld.value == "") {
document.getElementById('phone_err').style.visibility='visible';
error="\t";
document.getElementById('phone_err').value="You didn't enter a phone number.";
fld.style.background = 'Yellow';
} else if (isNaN(parseInt(stripped))) {
document.getElementById('phone_err').style.visibility='visible';
error="\t";
document.getElementById('phone_err').value="The phone number contains illegal characters.";
fld.style.background = 'Yellow';
} else if (!(stripped.length == 10)) {
document.getElementById('phone_err').style.visibility='visible';
error="\t";
document.getElementById('phone_err').value="The phone number is the wrong length.";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
document.getElementById('phone_err').style.visibility='hidden';
}
return error;
}

function validatezipcode(fld) {
var error = "";

var stripped = fld.value.replace(/[\.\-\ ]/g, '');

if (fld.value == "") {

document.getElementById('zipcode_err').style.visibility='visible';
error="\t";
document.getElementById('zipcode_err').value="You didn't enter a zipcode.";
fld.style.background = 'Yellow';
} else if (isNaN(parseInt(stripped))) {
document.getElementById('zipcode_err').style.visibility='visible';
error="\n";
document.getElementById('zipcode_err').value="Zip code contains illegal characters.";
fld.style.background = 'Yellow';
} else if (!(stripped.length == 6)) {
document.getElementById('zipcode_err').style.visibility='visible';error="\n";
document.getElementById('zipcode_err').value="Zipcode is the wrong length.";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
document.getElementById('zipcode_err').style.visibility='hidden';
}
return error;
}

</script>
</head>
<body>

<form name="demo" onSubmit="return validateFormOnSubmit(this)" action="http://www.google.com">

<table summary="Demonstration form">
<tbody>
<tr>
<td><label for="firstname">First name:</label></td>
<td><input name="firstname" size="35" maxlength="50" type="text"></td>
<td><label>
<input name="firstname_err" type="text" disabled id="firstname_err" style="visibility:hidden; border:0; color:red;" size="100">
</label></td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td><input name="lastname" size="35" maxlength="50" type="text"></td>
<td><input name="lastname_err" type="text" disabled id="lastname_err" style="visibility:hidden; border:0; color:red;" size="100"></td>
</tr>
<tr>
<td>DOB:</td>
<td>
<input name="dob" type="Text" id="demo1" size="25" maxlength="25" readonly="readonly"><a href="javascript:NewCal('demo1','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
<span class="descriptions">pick a date..</span>
</td>
<td><input name="dob_err" type="text" disabled id="dob_err" style="visibility:hidden; border:0; color:red;" size="100"></td>

</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input name="email" size="35" maxlength="30" type="text"></td>
<td><input name="email_err" type="text" disabled id="email_err" style="visibility:hidden; border:0; color:red;" size="100"></td>
</tr>
<tr>
<td>Gender:</td>
<td><label for="gender">
<input name="gender" type="radio" value="Male" checked>
Male
<input type="radio" name="gender" value="Female">
Female</label></td>
<td></td>
</tr>
<tr>
<td>
<label for="from">Address:</label></td>
<td><textarea name="from" cols="35"></textarea></td>
<td><input name="address_err" type="text" disabled id="address_err" style="visibility:hidden; border:0; color:red;" size="100"></td>
</tr>

<tr>
<td>
<label for="zipcode">Zip Code:</label></td>
<td><input name="zipcode" size="6" maxlength="6" type="text"></td>
<td><input name="zipcode_err" type="text" disabled id="zipcode_err" style="visibility:hidden; border:0; color:red;" size="100"></td>
</tr>

<tr>
<td><label for="phone">Mobile number:</label></td>
<td><input name="phone" size="10" maxlength="10" type="text"></td>
<td><input name="phone_err" type="text" disabled id="phone_err" style="visibility:hidden; border:0; color:red;" size="100"></td>
</tr>

<tr>
<td><label for="photo">Upload Photo:</label></td>
<td><input name="photo" size="35" maxlength="25" type="file" accept="image/*"></td>
<td><input name="photo_err" type="text" disabled id="photo_err" style="visibility:hidden; border:0; color:red;" size="100"></td>
</tr>

<tr>
<td><label for="info">Additional Information:</label></td>
<td><textarea name="info" cols="35" maxlength="500" ></textarea></td>
<td><input name="info_err" type="text" disabled id="info_err" style="visibility:hidden; border:0; color:red;" size="100"></td>
</tr>

<tr>
<td> </td>
<td><input name="Submit" value="Send" type="submit" ></td>

</tr>
</tbody>
</table>
</form>
</body>
</html>

datetimepicker.js

//Javascript name: My Date Time Picker
//Date created: 16-Nov-2003 23:19
//Scripter: TengYong Ng
//Website: http://www.rainforestnet.com
//Copyright (c) 2003 TengYong Ng
//FileName: DateTimePicker.js
//Version: 0.8
//Contact: contact@rainforestnet.com
// Note: Permission given to use this script in ANY kind of applications if
// header lines are left unchanged.

//Global variables
var winCal;
var dtToday=new Date();
var Cal;
var docCal;
var MonthName=["January", "February", "March", "April", "May", "June","July",
"August", "September", "October", "November", "December"];
var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var exDateTime;//Existing Date and Time

//Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window
var WindowTitle ="DateTime Picker";//Date Time Picker title.
var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24

var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
var ShowMonthYear=true;//Show Month and Year in Calendar header.
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
var WeekHeadColor="#0099CC";//Background Color in Week header.
var SundayColor="#6699FF";//Background color of Sunday.
var SaturdayColor="#CCCCFF";//Background color of Saturday.
var WeekDayColor="white";//Background color of weekdays.
var FontColor="blue";//color of font in Calendar day cell.
var TodayColor="#FFFF33";//Background color of today.
var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
var YrSelColor="#cc0033";//color of font of Year selector.
var ThemeBg="";//Background image of Calendar window.
//end Configurable parameters
//end Global variable

function NewCal(pCtrl,pFormat,pShowTime,pTimeMode)
{
Cal=new Calendar(dtToday);
if ((pShowTime!=null) && (pShowTime))
{
Cal.ShowTime=true;
if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24')))
{
TimeMode=pTimeMode;
}
}
if (pCtrl!=null)
Cal.Ctrl=pCtrl;
if (pFormat!=null)
Cal.Format=pFormat.toUpperCase();

exDateTime=document.getElementById(pCtrl).value;
if (exDateTime!="")//Parse Date String
{
var Sp1;//Index of Date Separator 1
var Sp2;//Index of Date Separator 2
var tSp1;//Index of Time Separator 1
var tSp1;//Index of Time Separator 2
var strMonth;
var strDate;
var strYear;
var intMonth;
var YearPattern;
var strHour;
var strMinute;
var strSecond;
//parse month
Sp1=exDateTime.indexOf(DateSeparator,0)
Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1));

if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY"))
{
strMonth=exDateTime.substring(Sp1+1,Sp2);
strDate=exDateTime.substring(0,Sp1);
}
else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))
{
strMonth=exDateTime.substring(0,Sp1);
strDate=exDateTime.substring(Sp1+1,Sp2);
}
if (isNaN(strMonth))
intMonth=Cal.GetMonthIndex(strMonth);
else
intMonth=parseInt(strMonth,10)-1;
if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12))
Cal.Month=intMonth;
//end parse month
//parse Date
if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1))
Cal.Date=strDate;
//end parse Date
//parse year
strYear=exDateTime.substring(Sp2+1,Sp2+5);
YearPattern=/^\d{4}$/;
if (YearPattern.test(strYear))
Cal.Year=parseInt(strYear,10);
//end parse year
//parse time
if (Cal.ShowTime==true)
{
tSp1=exDateTime.indexOf(":",0)
tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1));
strHour=exDateTime.substring(tSp1,(tSp1)-2);
Cal.SetHour(strHour);
strMinute=exDateTime.substring(tSp1+1,tSp2);
Cal.SetMinute(strMinute);
strSecond=exDateTime.substring(tSp2+1,tSp2+3);
Cal.SetSecond(strSecond);
}
}
winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height=245,resizable=0,top="+cnTop+",left="+cnLeft);
docCal=winCal.document;
RenderCal();
}

function RenderCal()
{
var vCalHeader;
var vCalData;
var vCalTime;
var i;
var j;
var SelectStr;
var vDayCount=0;
var vFirstDay;

docCal.open();
docCal.writeln("<html><head><title>"+WindowTitle+"</title>");
docCal.writeln("<script>var winMain=window.opener;</script>");
docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");

vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align=\"center\" valign=\"top\">\n";
//Month Selector
vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n";
vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";
for (i=0;i<12;i++)
{
if (i==Cal.Month)
SelectStr="Selected";
else
SelectStr="";
vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";
}
vCalHeader+="</select></td>";
//Year selector
vCalHeader+="\n<td align='right'><a href=\"javascript:winMain.Cal.DecYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\"><</font></b></a><font face=\"Verdana\" color=\""+YrSelColor+"\" size=2><b> "+Cal.Year+" </b></font><a href=\"javascript:winMain.Cal.IncYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\">></font></b></a></td></tr></table></td>\n";
vCalHeader+="</tr>";
//Calendar header shows Month and Year
if (ShowMonthYear)
vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName(ShowLongMonth)+" "+Cal.Year+"</b></font></td></tr>\n";
//Week day header
vCalHeader+="<tr bgcolor="+WeekHeadColor+">";
for (i=0;i<7;i++)
{
vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";
}
vCalHeader+="</tr>";
docCal.write(vCalHeader);

//Calendar detail
CalDate=new Date(Cal.Year,Cal.Month);
CalDate.setDate(1);
vFirstDay=CalDate.getDay();
vCalData="<tr>";
for (i=0;i<vFirstDay;i++)
{
vCalData=vCalData+GenCell();
vDayCount=vDayCount+1;
}
for (j=1;j<=Cal.GetMonDays();j++)
{
var strCell;
vDayCount=vDayCount+1;
if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))
strCell=GenCell(j,true,TodayColor);//Highlight today's date
else
{
if (j==Cal.Date)
{
strCell=GenCell(j,true,SelDateColor);
}
else
{
if (vDayCount%7==0)
strCell=GenCell(j,false,SaturdayColor);
else if ((vDayCount+6)%7==0)
strCell=GenCell(j,false,SundayColor);
else
strCell=GenCell(j,null,WeekDayColor);
}
}
vCalData=vCalData+strCell;

if((vDayCount%7==0)&&(j<Cal.GetMonDays()))
{
vCalData=vCalData+"</tr>\n<tr>";
}
}
docCal.writeln(vCalData);
//Time picker
if (Cal.ShowTime)
{
var showHour;
showHour=Cal.getShowHour();
vCalTime="<tr>\n<td colspan='7' align='center'>";
vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">";
vCalTime+=" : ";
vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">";
vCalTime+=" : ";
vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">";
if (TimeMode==12)
{
var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";
var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";

vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";
vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";
vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";
vCalTime+="</select>";
}
vCalTime+="\n</td>\n</tr>";
docCal.write(vCalTime);
}
//end time picker
docCal.writeln("\n</table>");
docCal.writeln("</form></body></html>");
docCal.close();
}

function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
{
var PValue;
var PCellStr;
var vColor;
var vHLstr1;//HighLight string
var vHlstr2;
var vTimeStr;

if (pValue==null)
PValue="";
else
PValue=pValue;

if (pColor!=null)
vColor="bgcolor=\""+pColor+"\"";
else
vColor="";
if ((pHighLight!=null)&&(pHighLight))
{vHLstr1="color='red'><b>";vHLstr2="</b>";}
else
{vHLstr1=">";vHLstr2="";}

if (Cal.ShowTime)
{
vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";
if (TimeMode==12)
vTimeStr+="+' '+winMain.Cal.AMorPM";
}
else
vTimeStr="";
PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";
return PCellStr;
}

function Calendar(pDate,pCtrl)
{
//Properties
this.Date=pDate.getDate();//selected date
this.Month=pDate.getMonth();//selected month number
this.Year=pDate.getFullYear();//selected year in 4 digits
this.Hours=pDate.getHours();

if (pDate.getMinutes()<10)
this.Minutes="0"+pDate.getMinutes();
else
this.Minutes=pDate.getMinutes();

if (pDate.getSeconds()<10)
this.Seconds="0"+pDate.getSeconds();
else
this.Seconds=pDate.getSeconds();

this.MyWindow=winCal;
this.Ctrl=pCtrl;
this.Format="ddMMyyyy";
this.Separator=DateSeparator;
this.ShowTime=false;
if (pDate.getHours()<12)
this.AMorPM="AM";
else
this.AMorPM="PM";
}

function GetMonthIndex(shortMonthName)
{
for (i=0;i<12;i++)
{
if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
{ return i;}
}
}
Calendar.prototype.GetMonthIndex=GetMonthIndex;

function IncYear()
{ Cal.Year++;}
Calendar.prototype.IncYear=IncYear;

function DecYear()
{ Cal.Year--;}
Calendar.prototype.DecYear=DecYear;

function SwitchMth(intMth)
{ Cal.Month=intMth;}
Calendar.prototype.SwitchMth=SwitchMth;

function SetHour(intHour)
{
var MaxHour;
var MinHour;
if (TimeMode==24)
{ MaxHour=23;MinHour=0}
else if (TimeMode==12)
{ MaxHour=12;MinHour=1}
else
alert("TimeMode can only be 12 or 24");
var HourExp=new RegExp("^\\d\\d$");
if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour))
{
if ((TimeMode==12) && (Cal.AMorPM=="PM"))
{
if (parseInt(intHour,10)==12)
Cal.Hours=12;
else
Cal.Hours=parseInt(intHour,10)+12;
}
else if ((TimeMode==12) && (Cal.AMorPM=="AM"))
{
if (intHour==12)
intHour-=12;
Cal.Hours=parseInt(intHour,10);
}
else if (TimeMode==24)
Cal.Hours=parseInt(intHour,10);
}
}
Calendar.prototype.SetHour=SetHour;

function SetMinute(intMin)
{
var MinExp=new RegExp("^\\d\\d$");
if (MinExp.test(intMin) && (intMin<60))
Cal.Minutes=intMin;
}
Calendar.prototype.SetMinute=SetMinute;

function SetSecond(intSec)
{
var SecExp=new RegExp("^\\d\\d$");
if (SecExp.test(intSec) && (intSec<60))
Cal.Seconds=intSec;
}
Calendar.prototype.SetSecond=SetSecond;

function SetAmPm(pvalue)
{
this.AMorPM=pvalue;
if (pvalue=="PM")
{
this.Hours=(parseInt(this.Hours,10))+12;
if (this.Hours==24)
this.Hours=12;
}
else if (pvalue=="AM")
this.Hours-=12;
}
Calendar.prototype.SetAmPm=SetAmPm;

function getShowHour()
{
var finalHour;
if (TimeMode==12)
{
if (parseInt(this.Hours,10)==0)
{
this.AMorPM="AM";
finalHour=parseInt(this.Hours,10)+12;
}
else if (parseInt(this.Hours,10)==12)
{
this.AMorPM="PM";
finalHour=12;
}
else if (this.Hours>12)
{
this.AMorPM="PM";
if ((this.Hours-12)<10)
finalHour="0"+((parseInt(this.Hours,10))-12);
else
finalHour=parseInt(this.Hours,10)-12;
}
else
{
this.AMorPM="AM";
if (this.Hours<10)
finalHour="0"+parseInt(this.Hours,10);
else
finalHour=this.Hours;
}
}
else if (TimeMode==24)
{
if (this.Hours<10)
finalHour="0"+parseInt(this.Hours,10);
else
finalHour=this.Hours;
}
return finalHour;
}
Calendar.prototype.getShowHour=getShowHour;

function GetMonthName(IsLong)
{
var Month=MonthName[this.Month];
if (IsLong)
return Month;
else
return Month.substr(0,3);
}
Calendar.prototype.GetMonthName=GetMonthName;

function GetMonDays()//Get number of days in a month
{
var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (this.IsLeapYear())
{
DaysInMonth[1]=29;
}
return DaysInMonth[this.Month];
}
Calendar.prototype.GetMonDays=GetMonDays;

function IsLeapYear()
{
if ((this.Year%4)==0)
{
if ((this.Year%100==0) && (this.Year%400)!=0)
{
return false;
}
else
{
return true;
}
}
else
{
return false;
}
}
Calendar.prototype.IsLeapYear=IsLeapYear;

function FormatDate(pDate)
{
if (this.Format.toUpperCase()=="DDMMYYYY")
return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);
else if (this.Format.toUpperCase()=="DDMMMYYYY")
return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
else if (this.Format.toUpperCase()=="MMDDYYYY")
return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);
else if (this.Format.toUpperCase()=="MMMDDYYYY")
return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);
}
Calendar.prototype.FormatDate=FormatDate;

- download

Center Div Horizontally and Vertically

2012-04-16T21:41:00.001-07:00

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Center Div Horizontally and Vertically</title>
<style>
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color:#3CC;
}
</style>
</head>

<body>
<div class="center"></div>
</body>
</html>

Dabblet | An interactive CSS playground

2012-04-12T23:21:00.003-07:00

Dabblet, created by Lea Verou, is an “interactive playground” for trying out snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code, and you can save your work in Github gists, embed it into other websites or share it with others.

Like jsFiddle and JSBin, this is a tool for experimenting right in the browser with live results. Dabblet’s focus on HTML and CSS makes it an excellent tool for beginners and anyone curious about testing things like the latest HTML5 tags and CSS3 styles.

Overall, it’s a surprisingly seamless experience to work back and forth from HTML to CSS in the Web app. You simply start by playing the with the style, and then click the “HTML & Result” tab in the upper right-hand corner to add your HTML.

As you will see, editing in either space updates both, making it a nice primer for external style sheets (for anyone that’s just starting out). Also, you can play with different view modes and save your full page results for viewing later.

While actual site development is best suited for a text editor or a coding environment like Coda, this is perfect for messing with code on the fly, whenever and wherever.

➤ Dabblet

Credits: http://thenextweb.com/dd/2012/02/16/dabblet-is-an-interactive-playground-for-quickly-testing-css-html-code/

Parallax Scrolling: An Introduction

2012-04-11T23:08:00.000-07:00

Anyone who has played, watched friends play, or briefly saw video games that were released in the 80’s and 90’s is familiar with parallax scrolling.

Think of games like Mario Bros, Streets of Rage, Kung Fu, Turtles in Time, or the original parallax scrolling game, Moon Patrol. Parallax scrolling is when there are multiple layers of images all moving at different speeds, causing a 2D image to have a 3D-like effect.

Why am I talking about retro video games on a web development site? Well, the simple answer could easily be because they’re awesome, but that’s not why. Parallax scrolling is a cool design concept that is making its way in to the web design world. Nike were one of the first to use this technique with great success when they hired marketing giants Weiden and Kennedy to develop their original site for Nike Better World. The Nike Better World site has since been updated and replaced with a new one, however there is another site that is quite similar, Activate sports drink.

You’ll notice as you scroll down the page that there are several different elements of the site that are all moving at different speeds. Let’s take the page in our image above as an example. As you scroll down through this page you’ve got blue dots in the far background that are slightly blurred, these appear to be moving at the same rate as the scroll bar. You then have a grouping of blue dots that are more in focus and in the foreground that are moving slightly faster than the scrollbar. Faster than those dots is the text, “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” as well as the main “Products” header for the page. Finally there are images of the products themselves, smaller, more out of focus ones towards the background and larger, in focus ones in the foreground. The background product images are moving at about the same speed as the text, while the foreground product images are moving faster than the text. This is parallax scrolling at its best, various layers of images stacked on top of each other, all moving at different rates and giving a 2D visual a 3D effect.

Parallax scrolling is not solely restricted to things moving vertically, or in straight lines for that matter. Leave it to Nintendo to be the ones providing us with an excellent example of this. Flashing back to the early nays of original Nintendo, our characters typically moved horizontally across the screen from left to right and not vertically down our screen from top to bottom like we were when scrolling through the Activate site above. Take a trip through MarkioKart Wii and let’s talk about some of the cool things going on here.

The first thing you’ll notice is like I just pointed out about the early days of Nintendo, the site scrolls horizontally across the screen and not vertically. Sure, that’s cool, but it’s also not that new of a concept either. You’ll notice the parallax effect with Yoshi and shells in the background, Mario and Luigi in the foreground and the main content all moving at different speeds. But once you scroll between the highlights page and the attack page you’re no longer moving in a perfectly horizontal line any more. Same goes for the transition from the rediscover and SNES pages. The images not only maintain their different rates of horizontal movement, but now they change direction and go vertically as well.

It’s also worth noting that utilizing a parallax scrolling effect in your site does not have to limit you to a faux-3D effect. German design firm Webseitenfactory is a testament to that as they utilize some parallax scrolling effects to help bring their site to life with various icons moving, growing, and shrinking as you scroll through their site.

Parallax scrolling can also help you spice up a site that doesn’t necessarily require all that much content. What if all your site required was a mission statement, or about us section, and some contact info? Chances are you could do that in a single page and given the right circumstances you may be able to make that single-page website look nice, but will it be memorable and stay in peoples minds? Probably not. But what if you just add some parallax scrolling to it, like the folks at Spring / Summer did?

My first impression was, “Oh, this site looks nice.” But then once I began to scroll down it immediately became, “Whoa, this site is cool!” Just adding a simple effect like that can mean all the difference between being complimented and being remembered.

Parallax scrolling is a nice trick to have up your sleeve. Whether you’re looking to build a complex, multi-page website, or a simple single-page web presence, be sure to check back as I begin my tutorial on how to develop a parallax scrolling website.

Credits: http://www.developerdrive.com/2012/04/parallax-scrolling-an-introduction/

Ultimate CSS Gradient Generator

2012-04-10T03:30:00.002-07:00

A powerful Photoshop-like CSS gradient editor from ColorZilla.

Ultimate CSS Gradient Generator by Alex Sirota is the first CSS3 gradient generator that actually brings Photoshop’s gradient creating user interface to the web. A recommended bookmark for web developers.

10 Useful jQuery Plugins for Images

2012-04-10T02:49:00.001-07:00

We all know and love jQuery for its flexibility and many uses. But some of the most impressive jQuery applications are those that involve images. It really can allow you to do some useful stuff and even add a “wow” factor to your project. So here we’ve rounded up 10 jQuery plugins to help you display images in your next project.

Slides

Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination.

Face Detection

Face Detection is an impressive plugin that does just what its name suggests. It detects faces in photos.

AviaSlider

AviaSlider is a jQuery slideshow plugin with unique transition effects.

Fullscreenr

So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image? This plugin does that.

Slidy

jQuery Slidy is a plugin that generates a customizable transitions automatically.

MobilyNotes

MobilyNotes is lightweight (2KB) jQuery plugin that shows your images or other html content in a stacked format.

jQuery Easy Slides

Easy Slides is an extremely easy to use plugin for making slideshows. It also has the advantage of being fairly light weight, with both Javascript and CSS weighing in at just under 2.1kb.

Booklet

Booklet is a jQuery plugin for displaying images and more in a book format with a turning page effect.

MobilySelect

MobilySelect is jQuery plugin (2kB) that replaces one collection of items with another.

Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.

Credits: http://webdesignledger.com/freebies/10-useful-jquery-plugins-for-images

5 Online free CSS Menu Genrator

2012-04-09T01:35:00.001-07:00

CSS Portal
Over 30 menus to choose from, this css menu generator will make it a breeze to create your new menu.

CSS Menu Builder
CSS Menu Builder contains 300+ horizontal menus, 700+ vertical menus combinations and breadcrumb menus that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.

IzzyMenu
Create professional looking CSS menus for your Website as easy as never before! Build your cool menu online, without writing a single line of code!

What is IzzyMenu - it’s easy to use, Online Menu Builder, which allows you to build your CSS & DHTML menu in minutes. Choose from dozens ready styles or create your own menu style. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

Pure CSS Menu
Simple and easy Online menu creator. very easy to understand and nice interface. they also provide some ready menu template, you have to just edit text and link.

CSS menu maker
CSS menu maker provide custom CSS menus without having to know all the complicated HTML and CSS. If you are a more experienced web developer they provide the sources code for all CSS menus so that you can download, tweak, and integrate as much as you want.

Using Fonts for Icons…

2012-04-05T04:31:00.005-07:00

Icons are inseparable part of a GUI (graphical user interfaces) design. We are downloading, buying and creating icons for ages. Using Fonts for Icons is a good idea, I'm telling you.
Icon Fonts are Awesome:

Because you can easily change the size
Because you can easily change the color
Because you can easily shadow their shape
Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs.
Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever.
You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper..

Click to the image and download the font:

Google Vs Facebook

2012-04-04T23:00:00.002-07:00

	Google	Facebook
CEO	Larry Page	Mark Zuckerberg
Annual net income	$9.7 billion	$668 million
Annual revenue	$38 billion	$3.7 billion
Social networking users	Plus-100 million	845 million
Advertising revenue	$36.5 billion	$3.2 billion
Employees	32,500	3,200

Credits: http://timesofindia.indiatimes.com/itslideshow/12534047.cms

Make the Footer Stick to the Bottom of a Page

2012-04-04T03:58:00.001-07:00

There are several ways to make a footer stick to the bottom of a page using CSS. But until now, they've used long and messy hacks or a lot of extra HTML markup; this method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS.

<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2012</p>
</div>
</body>
</html>

Credits: http://userinterfacedesigns.blogspot.in

What is HTML 5 ?

2012-04-03T21:20:00.001-07:00

HTML 5 is the latest version of HTML and XHTML, the core markup language of www (world wide web). HTML 5 is being supported by all latest browsers. If you know HTML programming lanugage, things would be very clear to you. HTML 5 incorporates new api’s , new syntax, codes and tags in addition to the old ones. With HTML 5, the need of adobe flash player to play website-embedded videos could be eliminated. HTMl 5 adds to offline storage and use of websites more efficiently. HTML 5 would manage RIA (Rich Internet Applications) efficiently and without the need to use third party browser plugins.

Basic differences between HTML4 and HTML5

· HTML4 supports the ‘tag soup’ i.e. the ability to inscribe malformed code and get them accurately on the document. But there are no written rules or guidelines for doing this. This implies that malformed documents are to be tested on various browsers.

· To tackle this issue, HTML5 is being developed in such a way so that the developers need not waste their time and efforts in creating an error free web page.

· Unlike its predecessor, HTML5 also includes many new tags and also new names for older tags with extra features like: local storage wherein a lot of information can be stored, JS-based hacks or Flash, validation form etc. so as to make the applications easy for the developers and speedier for the users.

Differences from HTML 4.01/XHTML 1.x

The following is a cursory list of differences and some specific examples.

· New parsing rules oriented towards flexible parsing and compatibility; not based on SGML

· Ability to use inline SVG and MathML in text/html

· New elements – section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, hgroup

· New types of form controls – dates and times, email, url, search

· New attributes – ping (on a and area), charset (on meta), async (on script)

· Global attributes (that can be applied for every element) – id, tabindex, hidden, data-* (custom data attributes)

· Forms will get support for PUT and DELETE methods too instead of just GET and POST (see Representational State Transfer for use cases)

· Deprecated elements dropped – center, font, strike, frameset

As there is still interest in publishing a snapshot of HTML5, the W3C is still working on that (in conjunction with the WHATWG).

Online Free Flash Decompiler Tool

2012-04-02T21:45:00.001-07:00

Flash Probe - Online Free Flash Decompiler Tool.
Flash Probe is a free online tool that can parse flash files and display text and images found within. The tool will create HTML versions of your flash websites.

10 Simple & Beautiful Login Page

2012-04-02T04:27:00.002-07:00

Interface Design Inspiration | 10 Simple & Beautiful Login Page

This post is a part for ImpressiveWeb blog’s interface design inspiration series, the series which focuses on inspiration on graphic user interface designs that will help you in enhancing your interface design skills.

While designing a login form/page a lot doubts will arise, For example, should it be login, log in or sign in? How should the forgot password link be written? What about including a cancel button? Should it be keep me signed in or remember me on this computer? Should the layout be horizontal or vertical?, should login be a separate page or light window kind of approach – to help you in that, Here I’ve collected 10 beautiful login interface designs, to get inspired and to find out a best solution that suits your need.

CssRound : the rounded corner Css3 generator

2012-04-02T02:11:00.001-07:00

Cssround creates a text page with rounded corner in 10 seconds.

You can use 2 tools : The css3 rounded corner generator (supported by most of recent browsers) and The css & images rounded corner generator (supported by all browsers)

The main difference is the number of options (the css3 generator got many more options(more customizable) than the image generator)

Credit: http://cssround.com/

For Rounded Corners in IE:

Please visit this site: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

CSS 3 Cheat Sheet

2012-04-02T01:57:00.003-07:00

CSS 3 Cheat Sheet (PDF)

This is printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.(Download *pdf)

Credits: Smashing Magazine

Responsive Web Design

2012-04-02T00:16:00.000-07:00

It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Websites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Core Concepts

Three key technical features are at the heart of responsive web design:

Media queries and media query listeners
A flexible grid-based layout that uses relative sizing
Flexible images and media, through dynamic resizing or CSS

Truly responsive web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Media Queries

Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />

That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.

Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

There are three ways to implement media queries:

Use the @import rule to import style rules from other style sheets:
@import url(style600min.css) screen and (min-width: 600px);
Put media queries directly in the style sheet, as shown below.

#nav
    {
        float: right;
    }
        #nav ul
        {
            list-style: none;
        }
    @media screen and (min-width: 400px) and (orientation: portrait)
        {
            #nav li
            {
                float: right;
                margin: 0 0 0 .5em;
                border:1px solid #000000;
            }
        }
    @media screen and (min-width: 800px)
        {
            #nav
            {
                width: 200px;
            }
                #nav li
                {
                    float: left;
                    margin: 0 0 0 .5em;
                    border: none;
                }
        }

Include a query in a linked style sheet’s media attribute:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />

Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.

The following images present an example of a responsive web design approach that uses media queries.

Figure 1 and Figure 2 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 3 shows the same responsive site on a Windows Phone, also with Internet Explorer 9.

Figure 1 Navigation Appears on the Left

Figure 2 In an 800×600 Resized Window, Navigation Switches to the Top

Figure 3 The Same Site on a Windows Phone

If you’re looking for some great examples of responsive web design that take full advantage of media queries, thehttp://mediaqueri.es/ enthusiast site can be addictive, as Figure 4 shows.

Figure 4 A Collection of Sites That Use Media Queries

Media Query Listeners

Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered.

Today, Firefox and the Internet Explorer 10 Platform Preview implement media query listeners; you can see the demo “CSS3 Media Queries & Media Query Listeners” on the IE Test Drive.

A Word about the Viewport

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen.

So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

<meta name="viewport" content="width=device-width">

Other viewport settings include maximum-zoom and initial-scale.

Flexible Grids

A flexible grid-based layout is one of the cornerstones of responsive design. The term “grid” is used rather freely and doesn’t imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing.

By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:

target ÷ context = result

Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24 ÷ 16 = 1.5

This results in the following CSS style:

h1{
    font-size: 1.5em;
}

Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for “H1 a” is:

12 ÷ 24 = 0.5

And the CSS style is:

h1 a{
    font-size: 0.5em;
}

You can also use percentages. The calculation algorithm is the same; you just end up with percentages.

Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System orFluid 960 Grid System (a fluid version of 960 Grid System). Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.

CSS3 Grid Layout

The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an “Editor’s Draft.” It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content.

Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications.

How does the Grid work? You start by setting the display block to ‘grid’. (You need to use CSS vendor prefixes because this is not yet a CSS3 recommendation. Right now, only Internet Explorer 10 Platform Preview supports the spec, so you’ll see the CSS vendor prefix -ms- used here.) Let’s look at three examples of how you can set up different views depending on screen size. Media queries are used to apply different grid styles depending on the screen width.

In the first example, the HTML for defining the content consists of one header and three different blocks of text.

<div id="mygrid">
    <header id="myheader">
        <h1>Hello world</h1>
    </header>
    <div id="block1">
        <h2>Lorem Ipsum section 1</h2>
        <p>
            Phasellus venenatis sem vel velit tincidunt tincidunt.
              Curabitur gravida, ante sit amet [... ...]
        </p>
    </div>
    <div id="block2">
        <h2>Lorem Ipsum section 2</h2>
        <p>
        Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
        Suspendisse [... ...].
        </p>
    </div>
    <div id="block3">
        <h2>Lorem Ipsum section 3</h2>
        <ul>
            <li>Curabitur ultrices tristique purus, sed pellentesque
               magna scelerisque ut.</li>
            <li>[... ...] </li>
        </ul>
    </div>
</div>

You start by laying out the blocks of content under each other so that the content fits smartphones.

@media only screen and (max-width : 480px) {
    #mygrid {
        display: -ms-grid;
        margin: 3px;
        -ms-grid-columns: 100%; /*one column taking full width */
        -ms-grid-rows: 70px auto auto auto; /*4 rows */
    }
    #myheader {
       -ms-grid-row: 1;
       -ms-grid-column: 1;
    }
    #block1 {
        -ms-grid-row: 2; /*place into row 2 / column 1*/
        -ms-grid-column: 1;
    }
    #block2 {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    #block3 {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }
}

You can add background colors as shown in Figure 5 to make it clearer that you’re working with grid items.

Figure 5 Blocks of Content with Background Colors

In the second example, a media query applies styles defined for screen sizes greater than 481 pixels—anything wider than a typical smartphone. You can use the Grid to define two columns and move the blocks into desired positions, as below. The results are shown in Figure 6.

@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 — just because we can*/
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
        -ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction of available space*/
        margin: 5px;
    }
    #myheader {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        background-color: #EEB215;
    }
    #block1 {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
        background-color: #B2B0B0;
    }
    #block2 {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
        background-color: #726E6E;
    }
    #block3 {
        -ms-grid-row: 2; /*block 3 can go into row 2*/
        -ms-grid-column: 4;
         background-color: #515050;
    }
}

Figure 6 A New Layout with Two Adjacent Columns

The third grid sample displays on screen widths greater than 1220 pixels. You define a grid with a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10-pixel columns in between. The results are shown in Figure 7.

@media only screen and (min-width: 1220px) {
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
        -ms-grid-rows: 100px 1fr;
        margin: 5px;
    }
    #myheader {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        background-color: #EEB215;
    }
    #block1 {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        background-color: #B2B0B0;
    }
    #block2 {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
        background-color: #726E6E;
    }
    #block3 {
        -ms-grid-row: 2;
        -ms-grid-column: 5;
        background-color: #515050;
    }
}

Figure 7 Three Side-by-Side Columns with a Spanning Header

The Grid specification is a welcome addition for implementing responsive web designs.

Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Websites.

Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change.

The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.

Flexible Images and Media

The final aspect of responsive web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.

Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.

img, object {
    max-width: 100%;
}

An alternative to scaling images is cropping them with CSS. For example, applying overflow:hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.

Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor’s mobile bandwidth because you don’t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image—or even no image at all. Folks in the web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive web design evolves and becomes the basis for many quality Websites.

Legacy Browsers

What about older browsers that don’t support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.

css3-mediaqueries.js by Wouter van der Graaf: code.google.com/p/css3-mediaqueries-js/
Response.js: github.com/scottjehl/Respond
Fluid images: unstoppablerobotninja.com/entry/fluid-images/

In Closing

Jumping on the responsive web design wagon isn’t something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.

Responsive web design is in its early stages. Web designers will continue to offer different opinions and recommend directions related to whether to build for mobile first, how to fit these decisions into the design process, whether to slice up the comps into all the different screen sizes, and so forth. And as more and more screen sizes and form factors arrive, the conversation will continue.

HTML and CSS standards are evolving to help web designers deal with these issues. It’s clear that some form of responsive web design will be used to meet the challenges, and it’s equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.

Credits: Sitepoint.com (http://www.sitepoint.com/responsive-web-design/#fbid=YI3_mDJwURO)