The number of people who use the tablets, smart phones and any other mobile devices to access the Internet is growing rapidly, and with it increased demand for sites that are displayed correctly on all these devices. Design concept, which describes the idea of creating a universal site for all permits, rather than separate its mobile version, called adaptive (responsive) design.
With the increasing demand for such sites from developers there is a need for suitable tools to create them. Today we tried to put together a jQuery plugin for creating an adaptive design that will allow you to solve many problems. Using the following plug-ins, you can not only scale images, video and fonts, depending on the size of the user's screen, but also to change the entire grid of the site.
Isotope
Isotope Plugin allows you to change all of the net placement of blocks on the page depending on screen resolution. This plugin provides filtering and sorting capabilities that allow you to provide a layout for your website according to your wishes. Move the blocks when the page width is accompanied by a nice animation.
***
jQuery Mansory
Another plugin that allows you to change the grid site is jQuery Mansory. It seeks to place all of the available elements in a way that would minimize the empty vertical space between them. Its use provides some of the best results for the screens of mobile devices.
***
Responsive menu
Responsive menu is a simple plugin that makes the menu friendly to small screens resolution.
***
Convert a Menu to a Dropdown for Small Screens
This plug-in instead of the standard display menu items in the line makes them a drop-down list.
***
Responsly.js
Plugin Responsly jQuery allows you to manage the entire site by editing just one CSS file. Its main task is to create a version of the page for the screens of mobile devices. Provided support for all popular browsers, but we recommend that you thoroughly test does it work in IE.
***
Breakpoints.js
Using a plug-in Breakpoints.js you can determine the critical values of the screen resolution, the transition through which will generate a custom event. They will perform on the page, any necessary action.
***
jFontSize
We are all accustomed to the button A + / A-, which can be found on many sites. JFontSize plugin performs the same function. He adjusts the font size for best display on the screen in accordance with a resolution of the screen the user's device.
***
Fit Text
With the Fit Text headlines on your website pages will change size depending on screen size the device used.
***
jQuery UI mediabox
jQuery UI mediabox is a universal plug, through which can be changed by the size of any elements on a page, for example, video from YouTube or Vimeo. All changes can occur in real time.
***
FitVidJS
This plugin changes the size of embedded video, depending on the width of the screen.
***
Photo Swipe
Photo Swipe is a versatile gallery, based on Javascript. It was developed primarily for use on mobile devices. Its use will make the viewing of images on your site intuitive for all users of mobile platforms.
***
Elastislide
Elastislide this adaptive image carousel, which changes the size and behavior based on the available screen size. If you add this carousel in a container with a variable size, the carousel itself will change with him. In this plugin uses jQuery Touchwipe.
***
Responsive Thumbnail Gallery
This plugin allows you to create images of two sizes. You need to define a threshold size, after which the image will show a different size. With all the other plug-in will manage itself.
***
Adaptive images
It's not really jQuery plugin, but it is still worth mentioning. Adaptive images are very useful on sites with an adaptive design, and stretching. No changes to the page layout of your images will be delivered to the end user is the amount that best corresponds to the resolution of its screen.
***
Speaking of solutions for creating websites with an adaptive design, we would like to mention is a collection of
ready-adaptive templates for websites. The company offers TemplateMonster templates that are optimized for display on the screens of the four main dimensions:
980px: Monitor
768px: tablet
480px: smartphone (landscape orientation)
320px: Smartphone (portrait)
Below are some examples:
***
Website Template # 37517 on fashion
***
Industrial Template # 37685
***
Business Template # 37359
***
Charitable Organization # 37421
***
Business Template # 37735
***
Wedding Template # 37765
0 comments:
Post a Comment