20 Practical tools to enhance Web compatibility design

Cover Photo By:wang Qi@damndigital

In the Internet age, people use a variety of devices to surf the Internet: laptops, netbooks, tablets, smartphones, even televisions. The screens and problem solutions for these devices are different, making it difficult to create a Web site that applies to all of these devices.

However, there are solutions. Compatibility design is to adapt to different sizes of the screen rectification design. If you want to create a design that enhances web compatibility, you'll need to apply fluid grids, images, and queries. Following the previous release of 18 strong compatibility page design cases, this time with readers to share the 20 Web page compatibility design of the practical tools.

Golden Grid System

Golden grid system is an equivalent grid designed to enhance web compatibility. He has four features: columns, spreads, bottom lines, script.

Lettering.js

This is a plugin for jquery's basic Web page word processing techniques. Lettering.js, has the following functions: kerning font, editing creative design, manageable code, users can simply control.

Fittext

Fittext font size can be adjusted. This plug-in can make the page layout of the Compatibility page to highlight the title, prioritize.

Fluid 960 Grid System

The template for Fluid 960 Grid System was created based on the previous works of Nathan Smith. The 960 Grid System: Inherits the effects of MooTools and jquery JavaScript libraries.

Gridless

Gridless makes it easy for users to respond to compatibility sites. It is a preferred compatible mobile plug-in with HTML5 and CSS3 code, and a Cross-browser Web page that supports good word processing.

Skeleton

Skeleton is a small CSS & JS file set that allows users to quickly design Web pages: No matter what size of the screen, it looks good, like a 17-inch laptop screen or an iphone.

Responsive design Testing

As long as you enter this page address, you can test any size of the browser.

PX to EM

This is a computing tool tailored for the user to set EM fonts. As soon as the user selects the corresponding PX font, it can be instantly converted to the corresponding EM size font.

Blucss

Blucss is an easy-to-use and easy to remember CSS framework. When the user is designing the next project, there is no need to worry about the omission of the necessary design elements.

Seamless Responsive Photo Grid

Suppose the user wants to show a lot of pictures at the same time on the Web page, and requires seamless connection between pictures. Seamless can do it. Please enter this site for details.

Simplegrid

The Simplegrid is for a 4-size screen: 720 pixels, greater than 720 pixels, greater than 985 pixels, and greater than 1235 pixels. This means that when a user accesses a Web page, the page size automatically switches to the size of its respective browser window. Simplegrid take you farewell to the horizontal scroll bar.

Adapt.js

Adapt.js is a 826-byte JavaScript file that is used to select the CSS file to load before the browser runs the page. If you want the browser to tilt or resize, adapt.js will only check the screen width if necessary to provide the necessary CSS.

Fluid Images

Here you will find a lot of useful information and exemplary code related to fluid images.

Convert a Menu to a Dropdown for Small Screens

When the browser window is narrow, the menu bar at the top right turns from a regular connection line to a Drop-down menu. Detailed method, see this site.

Resizemybrowser

Resizemybrowser is a perfect tool for testing compatibility Web design, allowing users to easily reset their browser size, one-stop experience of the most popular size or customization.

Responsive Table

The so-called compatibility design is to adapt to the different size of the screen and the rectification design. At the same time, the data table is wide enough for the user to find the ideal problem-solving solution.

Columnal

The columnal CSS grid system blends standard code with personalization code. The grid system part of the code draws on Cssgrid.net, and some code inspiration comes from 960.gs. Columnal makes compatibility page design easier. Although its screen width is 1140 pixels, columnal can be compatible with the width of most browsers because of the fluid design.

1140 CSS Grid

The 1140 size grid matches the 1280 size display perfectly. If the monitor is smaller, the fluid grid is rendered and automatically adjusts to the width of the browser. In addition, media queries is used in 1140 grid to support mobile browsers, so that all information columns can be set up simultaneously to ensure the readability of the information.

Mobilize.js

The HTML5 and JavaScript Framework enable Web page implementation to move. Through Mobilize.js, Web developers can create existing pages as mobile Web pages and automatically detect mobile browsers, as well as many other browsers and devices such as the IPhone, Android, Blackberry, Opera Mini, etc.

Adaptive Images

Adaptive images can transfer small images to small mobile devices. Its embedded solution automatically creates, captures, and transmits device-preference images without any additional changes to the image.

Source: Designwoop

Compile: Antonia huang@damndigital, (reprint please indicate from Damndigital)