An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off, with semi-transparent images, doesn’t hide text from screen-readers or search engines, and provides fallback for IE 6 and IE 7.

Known support: Firefox 1.5+, Safari 3+, Chrome 3+, Opera 9+, IE 8+

http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/

Another CSS image replacement technique

A new image replacement technique was recently added to the HTML5 Boilerplate project. This post explains how it works and how it compares to alternative image replacement techniques.

Here’s the CSS behind the recent update to the image replacement helper class in HTML5 Boilerplate. It has also made its way into the Compass framework.

http://nicolasgallagher.com/another-css-image-replacement-technique/

CSS Image Replacement Museum

The full collection of the CSS image replacement techniques

http://css-tricks.com/examples/ImageReplacement/

But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation.

http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003.

Still, the CSS sprite hasn’t truly found its way into the everyday toolkit of the common Web developer. While the theory behind CSS sprites is easy enough and its advantages are clear, they still prove to be too bothersome to implement, especially when time is short and deadlines are looming. Barriers exist to be breached, though, and we’re not going to let a couple of tiny bumps in the road spoil the greater perks of the CSS sprite.

http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects

http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-CSS-sprites-techniques-tools-and-tutorials/

http://www.smashingmagazine.com/2012/04/03/drop-caps-historical-use-and-current-best-practices/

http://wp.smashingmagazine.com/2012/03/22/useful-wordpress-tools-themes-plugins/

Wondering what features you need to look for when choosing CSS frameworks!!!The main features one needs to look for a good CSS framework are:

1. The foremost feature for any CSS framework is that it should have a clean grid structure.
2. The framework should have a very small size.
3. It should quickly add to the development time.
4. Last but not the least any framework turns out to be good if it has proper tutorials and documentation on the usage of it so that you get to know the fundamentals on the framework you are going to use.

CSS Frameworks can turn out to be of great help or as well may lead to serious hindrances. Let us have a look at both ends of it.

Positive Facets of CSS Frameworks:

• They render symmetrical and clean layouts.
• Help in rapid web development
• Offer cross browser functionality
• Use of CSS Frameworks indulges consistency in your code.

Negative Facets of CSS Frameworks:

• It gives the web designer lack of freedom as the designers are locked into a very narrow approach of developing.
• Use of Extra code for multiple layout scenarios
• Last but not the least forced semantic modifications also add to one of its disadvantages.

In accordance with various web designers, CSS frameworks ten to be a limiting factor as they feel that CSS frameworks compel them to change their web design so as to be on par with the CSS framework. Nevertheless, as any coin has two sides-the positive and negative; same is the case with CSS Frameworks. Having looked at the negative aspect of using CSS Framework we can look out in a positive way with the fact being that there are loads of CSS Frameworks out of which you choose the best one that fits your web designing requirement based upon the project.

The standard CSS Frameworks make use of grids to help the web designer in designing the web layout whereas there are other frameworks which throw light on the use of typography leaving layout to the discretion of web designer. The major advantage of using CSS frameworks during web development is that they help the designers save time as they do not have to start from scratch.

In this piece of writing we will go through an overview of the most excellent CSS Grid Frameworks which will help you save your time efficiently.

YAML: – www.yaml.de

YAML which is abbreviated as “Yet another Multicolumn Layout” is among one of the topmost CSS Frameworks that helps the designer in creating layouts that are easily accessible, flexible and floatable. This framework offers various patterns for web designing such as typography, forms, micro formats, and maximum approachability. This framework enables compliance with various web standards. The base of design layouts can be created very easily with the use of YAML builder. This framework has been tested on various browsing platforms and is compatible with the most of the modern web browsers such as Mozilla Firefox, Google Chrome, Internet Explorer, Opera and Safari.

Let us have a look at the important features of YAML:

• YAML has very slim framework core say approximately 4.6kB.
• YAML framework is well equipped with CSS3 and HTML version 5.
• It allows minimized typography for all the standard elements.
• Name spacing feature of this framework avoids any kind of conflicts.
• It has supple forms toolkit in addition to various theme support.

LESS FRAMEWORK – lessframework.com/

This framework is mainly used for designing adaptive sites on the web. This framework consists of four layouts and three sets of typography presets which are all dependent on a single grid. The four layouts of the LESS FRAMEWORK are mentioned below:

• Mobile Layout: This layout has three columns at 320 pixels and has princely outer margins which allow the layout to breathe. This layout is most commonly used for iPod Touches, iPhones, iPads and all other latest mobile gadgets.
• Wide Mobile Layout: This layout has five columns at 480 pixels and inherits the features of both mobile layout and the default layout there thereby coding can be done rapidly and easily. This layout is most commonly used for large mobile handsets in landscape orientation.
• Default Layout: This layout consists of ten columns at 992 pixels and can be as per the Golden ratio i.e. six columns which is ideal width for any pattern of long form of text. This layout is majorly used for laptops, notebooks, desktops and tablets in landscape orientation.
• Tablet Layout: This layout consists of eight columns at 768 pixels and is just the best and ideal for reading the text when you are using six column wide texts.

GOLDEN GRID – code.google.com/p/the-golden-grid/

Golden Grid system is mainly used for responsive web design. This system makes use of 6/12 grids and its width is approximately 970 pixels. Golden grid framework is very less in size say less than 1kB. It is a folding grid system that divides the entire screen into eighteen equal columns. Of the eighteen columns only sixteen columns are sued for design and the other two are used as outer margins. Based on the requirement, a designer can fold these sixteen columns as four columns for standard mobile devices or into eight columns if using for tablet sized screens. In this way, the Golden Grid System covers varying screen sizes from 240 pixels to 2560 pixels.

There are several other CSS Grid frameworks which can be used based on your project requirement namely Blueprint CSS, 1KB CSS Grid, Elements, SenCSS (Sensible Standards CSS Framework), Sparkl and so forth.

With the advance in technology, Smartphone’s have become one of the major medium for accessing the web for online shopping, net banking, ticket booking and so forth. In order to accommodate this technological advancement and the growing trend of Smart phones, all the organizations & entrepreneurs are developing user friendly versions of their websites as a result of which the WordPress Plug-ins are also evolving day by day.

Wondering what a WordPress Plug-in is!!! They are nothing but simple tools which can enhance the functionality of any WordPress blog. Plug-ins allows us to add new features to the WordPress blog that don’t come by default with the standard installation. There are rich varieties of available Plug-ins for WordPress in the WordPress community and not to be surprised that new plug-ins are evolving day by day with the advance in technology.

One of the obvious reasons as to why WordPress is gaining popularity is because of the fact that one can select from thousands of plug-ins the WordPress community has to offer free of cost. As we know that cost is one of the reasons web developers would be concerned of, there are several WordPress plug-ins which come free of cost and are definitely a boon for small scale organization. These plug-ins help the organizations earn larger returns at a lesser production cost. In order to drive more innovation one can opt for the premium features of the plug-ins & make use of premium themes at a very nominal cost.

Based on the above discussion on the cost of plug-ins, WordPress plug-ins can be majorly categorized into two types: Freely Available Plug-ins & Premium Plug-ins. Premium plug-in is exclusively available on the company’s websites through their own marketplace or via their shopping cart. One has to pay extra to avail premium plug-ins and to be precise the premium plug-ins are more than the worth you pay for. Premium plug-ins render you added functionalities such as creating clone WordPress installations, code tweaking and so on. Free Plug-ins is generally available as a complete package in the WordPress plug-in directory and one can search for these plug-ins based on any specific criteria and keywords

Are you worrying about installing WordPress Plug-ins??
One can by and large install a WordPress plug-in through the plug-in admin section in WordPress or they can be automatically installed by means of the plug-ins directory provided by WordPress. There are several other ways as well for installing the WordPress plug-ins such as uploading form the back end of WordPress or through FTP. To begin with, just go into the Plugins region surrounded by your WordPress admin section, and opt for “add new”. One should experiment with wide varieties of plug-ins WordPress has to offer so as to get a grasp of the wonderful & dazzling functionality that comes with WordPress.

One common method of installing the WordPress Plug-ins is shown below:

Sub Panels – Installed, Add New, Editor

Installed – The Plug-in installed Sub Panel allows us to view the Plug-ins that are downloaded. Admin can choose which Plug-in needs to be activated on the site.

Add New – We can add new Plug-ins to the site through this sub panel.

Editor – Each Plug-in will have a source code. Using the Editor Sub panel these source codes can be modified.

With the use of plug-ins, WordPress can be totally transformed into an individual separate system. For instance, there are several premium membership site & shopping cart plug-ins that will help you in transforming your blog into a complete free membership website. Few of the plug-ins will renovate into a sales letter consisting of the payment portal and some of the other plug-ins will present with added simple functionalities such as creating backup files for security, admin extension, cloning of WordPress installation, social media links and so forth.

With a drift in technology the plug-ins are totally integrated with mobile power. The WordPress organization has developed a special toolkit that helps the developers in mobilizing the websites developed under this platform. This toolkit is popularly known as the WordPress Mobile Pack. This toolkit consists of mobile switcher, a mobile admin panel, several custom color schemes, a mobile theme, mobile ad widget, et cetera. WordPress Mobile Pack is tested for flexibility and it is found that it is compatible on almost all the common mobile operating systems.

Let us have a brief overview of the seven basic WordPress Plug-ins that are essential for any website:

Spam Free

As we know that comment spam is one of the major problems bloggers have been facing since the inception of blogging technology. This plug-in helps you make your blog free from comment spam that arrives from bots. If you want your blog or website to be spam free then this plug-in is a must use for it. Plugin Page

Google Analytics for WordPress

With the use of this plug-in you can link your Google Analytics account automatically to your blog or website. This plug-in basically allows you to include Google Analytics JavaScript to every web page on your weblog without making any changes to your standard template. Google Analytics for WordPress Plugin is a highly configurable plug-in with the help of which you can track downloads from your website, mailto: links & outbound links. You can as well analyze 404 errors with the use of this plug-in. Plugin Page

Global Translator

It is free & open source plug-in that helps you reach lot of new users as it translates your blog into 48 different languages and makes your blog popular among people of various regions. Generally, the number of translations that you can make use of with this plug-in will be decided based upon the translation engine you chose and your blog language. Plugin Page

All in One SEO Pack

This plugin gives you out of the box features by automatically optimizing your WordPress blog through search engine optimization techniques. This is the only WordPress plug in that provides SEO integrations for all the WordPress E-Commerce sites.Plugin Page

WP-Optimize

WP-Optimize is a WordPress 2.9++ database cleanup and optimization tool. It doesn’t require PhpMyAdmin to optimize your database tables. It allows you to remove post revisions, comments in the spam queue, un-approved comments within few clicks. Plugin Page

WordPress Mobile Pack

The WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress site and blog. It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about. Plugin Page

W3 Total Cache

If you want your website to load faster in that case installation of this plug-in is highly recommended for your site.W3 Total Cache plug-in stores the static version of any website rather than processing the huge PHP scripts of WordPress thereby requiring less processing time by the CPU.W3 Total Cache plug-in can be setup with ease. To conclude with we can say that the WordPress Plug-ins will evolve day by day with the advent technology all over the world as the developers will have to present a website to the users that is more user-friendly and improvised in terms of performance. Plugin Page

Are you new to web design?
Don’t know what latest technology or approach to follow to attract traffic to your website?

With the increase in number of users accessing the Web through Smartphone’s, one common question that comes into the mind of web designers is: what is the width they need to use when designing new websites? Though the question is very simple but there is no one single answer for this question. The reason being, there are several wide range of devices such as Smartphone’s, iPhones, Tablets, laptops, desktops, etc available in the market through which people seem to access web these days and all these devices are available in varying screen sizes from very tiny to large 27 inches desktop screen size.

To fit in the need of accessing the web from various devices in a user friendly manner, Responsive Web Design has gained popularity. The first question that comes to any novel user is what responsive web design is. It is just a simple web methodology which makes your website respond or react to different environments in a different manner i.e. it makes your website compatible with any device and any platform. Responsive approach is not merely one single approach to be followed rather it is but moreover it is just an awareness of various devices and screen resolutions available in the market and implementing the design technique that will give the website a good look and feel environment from whichever device it is accessed. For example: Coupling CSS Media Queries with Fluid Web design in order to make it accessible to extreme resolution is also a good responsive approach.

Fluid- Responsive Web Designing approach is implemented and designed in such a way that the site responds based on the behavior of users. This approach takes various factors into consideration before responding such as the screen resolution, the environment, and the platform on which it is being used (OS) & the orientation of the web users. You can find various web design templates that will be used for developing a user friendly responsive site. This approach is implemented by making use of CSS Media Queries and Images by incorporating flexible & adaptable grids & layouts.

The below image just gives an example of how a website looks on different screen sizes when it uses a responsive design approach .This image illustrates how the website responds automatically when a user switches form desktop->laptop-> iPad->Smartphone. Making use of this approach will eliminate the pain of web designers as they have to design only one single website for every possible Web enabled gadget available in the market.

In accordance with the expert reviews from responsive web designers, it is a known fact that the images used on your website should be extremely flexible and your website should make use of fluid grids & media queries which will help you in getting through different contexts and views. The above listed things comprise to be the fundamental components of responsive web designing and you should keep these components in mind whenever you are creating web designing templates.

If you want to start up with responsive web designing, in that case following the below mentioned tips will be of great help for novel responsive web designers.

MEDIA QUERIES:

These queries are helpful in determining various factors like the color, screen resolution, orientation, etc. They are purely dependent on the window size of any web browser. Media queries can be compared to conditional comments which have the ability to identify the type of device being used, show up various layouts and after that develop its physical features.

These queries usually consist of expressions that are used for checking the conditions of any specific media feature and a media type. A media query is nothing but a simple logical expression that either results in true or false.

For example: The gadget is exposed to various queries like: Is the screen resolution less than four hundred eighty (480) pixels?

Now if this evaluates to true then the required .css files will be loaded for a screen resolution with smaller size such as a Smartphone. If it evaluates to false in that case the link would merely be ignored.

In order to manage Media Queries, two important plug-ins are required namely the standard jQuery plug-in and the plug-in named css3-mediaqueries.js. Css3-mediaqueries.js is the latest plug-in and can be used on various browsers like Mozilla Firefox, Safari, and Internet Explorer v5 whereas jQuery plug-in is a little older which supports very few media queries such as min-width & max-width.

FLEXIBLE GRID:

In order to create a flexible web design one needs to define own parameters for various objects such as containers, columns & spacing in the code .One can make use of the classic CSS class which already exists but it is always recommended to create your own grid so as to make your design more flexible and effective. By working on your self -defined parameters you can specify appropriate space alignment size, specify percentages for the layouts as the units of measurement, get rid of the pixels & convert pixels to em’s. With the help of flexible grids the units of measurement become relative. Nevertheless that does not imply that one can ignore pixels completely because if you work with digital image editors, pixels are considered to be the sole unit of measurement.

FLEXIBLE IMAGES:

If your website is slow then definitely users would get irritated to visit it again as the time consumed for loading the web pages is more than expected and it is obvious that nobody wants to lose the visitors to their website. If your web page has many images in that case it the page will take lot of time to load on the commonly used web browsers utilizing standard bandwidth. In order to overcome this problem you should make use of pictures or images that can scale up and change their positions with flexible grid so as to make sure that your web page gets loaded faster. This means you ought to scale down the pictures as per the HTM attributes of height & width so as to create more space. Making us of this arrangement will enable smaller devices(less screen resolution) to create more space for text content & render less space for images. One more solution is we can simply crop the images by making use of the CSS overflow technique. It is always a good practice to make use of web designing templates that can load flexible images.

The advent of responsive web designing has materialized as a boon to all the designers who were struggling day and night so as to meet the requirements of various Internet accessible gadgets available in the market today.

There are some examples of the websites: http://mediaqueri.es

In the present generation, Print style sheets have almost lost their recognition but nevertheless they are and will always continue to be of importance. Most of the people usually prefer to read articles or other important information when they are travelling or usually when they do not have access to the World Wide Web. Here are few important benefits of having Print Style Sheets:

1. One of the most important benefits of print style sheets is that it is very relaxing to read on paper than reading anything on the computer screen.
2. It is easier to read any tutorial if it is beside you and do coding rather than toggling between the windows every time you want to search for something.
3. Print Style sheets can be easily set up and enhance the usability of the web page without leaving the user in frustration.

Print friendly versions of the web pages are generally useful when a user wants to print any article that is spread across several pages. There are only few websites that present link to a print friendly version of the web page as they designers feel that it is difficult to manage and set up print style sheets. This piece of writing will endow you with the most excellent tips that will help you in improving your Print Style Sheets.

Just in case you don’t remember how to setup a print style sheet, below is just a brush up to the basic code on how you can set up a print style sheet:

The important part in the code mentioned above is the media attribute to print rather than screen. This is how the browser will know that it should apply this style sheet when printing the web pages. While we are on the subject of code a great way to know that your print style sheet is heading in the right direction is to look at your website without the use of CSS. This isn’t a 100% full proof but a semantic markup is the foundation of a great print style sheet.

Let us look at few important points to be remembered when setting up print style sheets:

Color and Images:
If one looks at the below image you can visualize the complexity of the design and observe that there are several layers of texture, transparency and color.

However when it is printed this is what you end up seeing the content in the below mentioned format:

Few good things that can be observed in the printed version of this web page are: the background color is been reset to white and removed so that you see and focus on the content of the article. The larger point that one should understand here is that the website should not look like a full colored magazine when it is being printed.

If people really want to print an exact image of how a website looks like when it is on screen then they can always take a screenshot of it and print it out.

Now let us look at a bad example of the same:

Below is the printed version of the above Web Page which is similar to the Actual Page:

This design is just ok but let us see what happens when we try to take a print out. Incredibly it almost looks exactly the same as on screen, all the advertisements are still on the top of the web page and on the right navigation is still there along with the images which are a part of the article are being printed. Not only it is wasteful but it is annoying for someone who just wants to print the content of the web page. So if we compare the two designs shown above one can actually see how similar the web page and printed version of the webpage is.

People who take print outs for offline reading are not going to click on advertisements or on linked images or items in the navigation bar so it is always better to exclude them. The idea here is to simplify your website as much as you can when it is being printed.

One major difference between paper and a computer is that computer is interactive whereas paper is static. In order to allow navigation on the computer, websites have navigation bars which are completely useless on paper. It is always better to remove all the unwanted items such as the navigation bar, right and left column, header, footer and so on. The only thing that your printed page should contain is your organization logo and the actual informative content.

Fonts and Design:
Another great example of print style sheet is shown below:

Now look at the below image which shows the printed version of the above web page:

The above design is much better than what an average web design should be. The three important things that can be noticed in the above design are:

Firstly the font size set in such a way that it is easily readable on a piece of paper. People have several different opinions on how to set the font size on a print style sheet but it is always recommended that the font size is always set to 12 pts which is the default size when printing.

Second thing that you can notice is that this page is much like a printed article should be and is designed in a readable format. Just because you are printing something and simplifying your design that doesn’t mean you should abandon design altogether. There are still some nice things like typography, horizontal rules, and fonts and so on.

Assuming in even more there is one last thing that needs to be noticed as to how the text is linked to the URL. We can see that the URL is printed in parenthesis right after the text. This is important because there would be no way to figure out what this link points to when it gets printed.

Links:
User should be able to differentiate between regular text and links. As we know that people usually take black and white print outs so one should make sure that all the links on the web page have a good color contrast. It is at all times suggested to have a slightly darker color for the links than the normal text. To add-on more usability one can include a footnote at the end of the page that lists all the Links used in that particular webpage. A standard practice is to have blue color for links with bold and underline.

People don’t always prefer to print websites but when they do it is important to provide them with an overall good experience. These guidelines will help you in rendering the reader with great content in terms of flexibility, readability and usability. So what are you waiting for start implementing print style sheets in your websites and gain popularity…!!!

When it comes to mobiles, we have quite a few challenges. With no exception, rendering issue continues to be a concern; as there are a number of browsers, delivered by various vendors. Web Developers started off using WML, with a WAP 1.0 Gateway. But this demanded the device to handle WML, thus causing a device dependency. WML was followed by XHTML and WAP 2.0, which also demanded device to handle XHTML. Later, HTML 4 came in to thwart this device dependency, but ‘rendering content in different browsers’ was a bit of concern; since all vendors had to develop a miniature version of their browsers and let handle content in similar fashion. They also had to depend on third party plugins for efficient programming (Threads, videos etc.). Finally, HTML 5 now aims at developing a standard that would be supported by most vendor browsers. It also promises a far efficient means of programming; offering valuable features.

The jQuery Mobile is a web framework that enables the development of unified user interfaces on popular mobile device platforms esp. smart phones and tablet devices. The framework is built on top of the popular jQuery java script framework. The websites developed using jQuery Mobile rely on clean and semantic HTML to ensure compatibility across any web enabled mobile device. JQuery Mobile framework use progressive enhancement techniques to unobtrusively transform the HTML page to a rich interactive web page that leverages the power of jQuery and CSS.

This piece of writing provides an overview of the jQuery Mobile web framework, with the available set of supported widgets.

Features Of jQuery Mobile:

Following are the key features of jQuery Mobile framework:

• Built on top of jQuery core java script library
• Compatible with the major mobile platforms including iOS, Android, BlackBerry and Windows Mobile
• Baseline support for all devices that recognize HTML
• HTML 5 markup driven configuration
• Progressive enhancement to deliver rich user experience
• Automatic initialization using HTML5 data-role attributes
• Accessibility features such as WAI-ARIA
• Support for events such as mouse, touch, cursor focus based user input etc.
• Powerful theme framework

jQuery Mobile UI

All jQuery Mobile pages are defined using clean and semantic HTML code. The data-role attributes supported by the HTML 5 specification is extensively used in JQuery Mobile pages, to auto initialize the widgets. The jQuery Mobile framework initialization process, interprets the data roles defined for HTML tags, to recognize and render the corresponding tags as UI widgets. Based on the java script / CSS support provided by the mobile device, jQuery Mobile framework enhances the look and feel of the widgets to provide a rich user experience.

A sample HTML page designed to be used with JQuery Mobile is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

< !DOCTYPE html>
<html>
<head>
         <title>Page Title</title>
         <link rel="stylesheet"
                  href="jquery.mobile-1.0a4.1.min.css" />
         <script type="text/javascript"
                  src="jquery-1.5.2.min.js">
         </script>
         <script type="text/javascript"
                  src="jquery.mobile-1.0a4.1.min.js">
         </script>
</head>
<body>
         <div id="firstPage" data-role="page">
                  <div data-role="header">
                            <h1>Page Title</h1>
                  </div>
 
                  <div data-role="content">
                            Page content goes here.
                  </div>
                  <div data-role="footer">
                            <h4>Page Footer</h4>
                  </div>
         </div>
</body>
</html>

The page starts with the HTML 5 doc type tag. Mobile devices that do not support HTML 5 capabilities shall ignore this doc types and other HTML5 data attributes. The doc type header is followed by inclusion of the jQuery Mobile framework js and css files. When jQuery Mobile starts to execute, it triggers the mobile init event on the document object. The mobile init event is triggered immediately upon execution, and hence the custom JavaScript files are to be included in the following manner:

1
2
3

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Multiple mobile pages or views can be defined within a single html body. Typical mobile page will be a div, with the data-role attribute defined as “page”. The page headers, content areas and footers are identified by the data roles “header”, “content” and “footer” respectively. Multiple mobile pages within a single HTML page, enables to pre-fetch any frequently used static pages with a single HTTP request. By default the first page will be displayed in the mobile device by the jQuery Mobile framework. The navigation to the subsequent static pages can be done using “#” href.

jQuery Mobile Data Role Options

As mentioned above, the jQuery mobile identifies the widgets from the data role specification given to the HTML 5 tag. The below list provides the various data role options available to the website developer for building UI rich web pages.

Data Attribute

Description:

data-role: The type of the toolbar to be rendered.

• header – Renders a header toolbar
• footer – Renders a footer toolbar
• navbar – Renders a div as a navigation bar. The navbar should contain an unordered list of links, of which, one link being given the CSS class ui-button-active, to indicate the default selected option.
• button – Renders an anchor reference as a button
• controlgroup – Used to visually group a set of buttons together. The buttons are placed inside a div with this data role.
• fieldcontain – Renders a div as a container of form elements
• collapsible – Renders a div as a collapsible page. The first heading within the page will be treated as the header. The contents of the div shall appear collapsed
• none – During initialization, the jQuery mobile framework tries to provide styling and behavior to various controls and form elements. If this initialization is to be disabled for a specific widget, the data-role attribute can be set to none.

data-position: Indicates how to layout the widgets inside the container

• inline – The widgets are placed side by side on the same line. The attribute indicates the framework to style the widgets to be the width of their content and float them accordingly to fit in the same line.
• fixed – Used along with the toolbars. This attribute indicates whether the position of the respective toolbar is fixed w.r.t the device screen or not. The toolbars start in their natural positions on the page, like the “inline” mode, but when a bar scrolls out of the viewport, the framework animates the bar back into view by dynamically re-positioning the bar to the top or bottom of the viewport.

data-theme: Defines the theme to be used to render the widget or a field container. By default the jQuery mobile framework support 6 different themes. The themes are referred to as a-f.

data-fullscreen: Used along with a mobile page (data-role=”page”). This data attribute indicates that the page should be displayed in full screen mode. By default the toolbars will not be visible on the page unless the user taps on the device to toggle the visibility.

data-collapsed: Used with collapsible panes (data-role=”collapsible”). If this attribute is set to true, the contents of a collapsible pane will appear collapsed on page load.

data-transition: Defines the look and feel of the page transition when a dialog is invoked, or a link is clicked.

• pop
• flip
• fade
• slide
• slideup
• slidedown

data-direction: Used along with data transition to provide a reverse effect of page transition
reverse : Reverses the effect of page transition

data-icon Used to define icons for buttons. The framework comes with a default set of icons.

• arrow-l
• arrow-r
• arrow-u
• arrow-d
• delete
• plus
• minus
• check
• gear
• refresh
• forward
• back
• grid
• star
• alert
• info
• home
• search

Custom icons can also be added by providing custom style sheets. The css file should have definitions starting with ui-icon followed by the custom icon names. The icon to be used should be defined as 18×18 png background image in the CSS definition.

data-iconpos: Used along with data-icon attribute. This attribute indicates the position of the icon w.r.t to the text in the button. The value “notext” for this attribute renders a button with icon alone. Possible values are

• top – the icon appears on top of the button text
• left – the icon appears on the left side of the button text
• bottom – the icon appears on the bottom of the button text
• bottom – the icon appears on the right side of the button text
• notext – the button with icon alone, will be rendered

data-type: Used along with the “controlgroup” data-role. By default the buttons within a control group are arranged vertically. If the buttons are to be arranged horizontally, this data attribute is specified.

• Horizontal

data-placeholder: Used along with the select box widget. By defining this data attribute as true to an option element in the select widget, the option element will be

Widgets
The table below provides the list of available jQuery mobile widgets.

Button
Buttons are code widgets in jQuery Mobile. An anchor reference can be rendered with the look and feel of a button, if the data-role attribute is given. The framework automatically provides the platform look and feel for the HTML markups such as input (with type submit/reset/image/ button) and button.

Applicable data attributes

data-role: { button }

data-icon : { arrow-l | arrow-r | arrow-u | arrow-d | delete | plus | minus | check | gear | refresh | forward | back | grid | star | alert | info | home | search }

data-iconpos : { top | left | bottom | right | notext }

Conclusion
The jQuery Mobile framework provides an option to develop cost effective and UI rich mobile web applications. By using the framework for website development, the developer has to worry less about the varying form factors and capabilities of mobile devices available in the market. Using the framework, along with other advanced features of HTML 5, it is feasible to develop mobile websites that can compete with thick client applications in terms of usability and functionality