62 Useful tools for Responsive web design

62 Useful tools for Responsive web design

The review includes detailed manuals, approaches, tools, articles containing practical tips needed to create your own adaptive site.

1. CSS Transitions and Media Queries
CSS Transitions and Media Queries

Elliot Jay Stocks talks in detail about the method of combining CSS Media Queries and CSS transitions. The basic idea is the following: Developing an adaptive site with Media Queries, you constantly change the width of your browser to see how the site behaves at the same time. But each time one of your Media Queries runs, you see a hard transition between styles (first, for example, for desktops, and the second for tablets). Why not use CSS transitions to smooth these hard transitions with animation?

CSS Transitions и Media Queries

2. Responsive Data Tables
Adaptive Data Tables

Chris Coyier and Scott Jehl are experimenting with adaptive design techniques for correctly displaying tables (<table>). Tables can be wide, and this can not be avoided. You can zoom out and see the entire table, but then the text size will be too small to read. You can zoom in so that you can read, but then you have to scroll the table vertically and horizontally to view it completely.

One solution is to reformat the table for readability. Another is to display a pie chart. And the third solution is to adapt the table to a mini-image for small screens, which will fully open it.

Adaptive Data Tables

3. Responsive Navigation Menus: Convert a Menu to a Dropdown for Small Screens

Chris Coyier describes the technique of converting long series of links into drop-down menu items at small resolutions. When a user views a site on a small screen and clicks on the drop-down menu, he sees large and beautiful menu items that are easy to select. Obviously, this is much better than displaying a tiny link, which is even hard to click on.

Adaptive menu: Convert menus into drop-down list on small screens

4. CSS Media Queries and Using Available Space
CSS Media Queries and rational use of available space

The manual describes how to make small changes to the appearance of the site at various screen resolutions using Media Queries. For example, in the sidebar, you need to specify e-mail. At small resolutions, e-mail can be supplemented with an icon, on large ones – you can write a message with text, you can combine both, and so on, and so on.

CSS Media Queries and rational use of available space

Adaptive Images and Videos

5. Fluid Images
Rubber images (scaled by browser)

Rubber images are one of the central themes in adaptive web design. In the article, Ethan Marcotte provides a detailed overview of creating them using the classic code snippet img {max-width: 100%; }, As well as all the necessary details necessary for the beginning of the work.

Rubber images (scaled by browser)

6. Responsive Image: Experimenting With Context-Aware Image Sizing
Adaptive images (changing the physical dimensions of the image)

An alternative approach to rubber images belongs to the Filament Group. Their method allows developers to create adaptive layouts that apply different image sizes for different resolutions. In fact, it allows you to submit optimized for mobile devices images for small screens and their versions in high resolution for large screens.

The method developed by the Filament Group uses .htaccess and JavaScript files to feed images of different sizes based on the width of the visitor’s screen. An alternative solution is to use tools such as TinySrc (the tool is now part of Sencha).

Adaptive images (changing the physical dimensions of the image)

7. Responsive Images and Context-Aware Image Sizing
Adaptive images and context-dependent image resizing

Craig Russell developed a method that uses a script on the server side (in PHP) to feed images of different resolutions and volumes. The idea is that in the PHP-script an array is used, into which the image files and their relative scales in percent are imported. The SRC attribute of the IMG tag must be set to get the ID of the requested image, but without specifying the scale.

JavaScript calculates the ratio of the width of the image in percent to the maximum width of the parent block, and this number is then added at the end of the SRC attribute as a scale parameter. In the comments to the article, you can find some useful tips on how to improve this method.

Adaptive images and context-dependent image resizing

8. Responsive Images Right Now

Harry Roberts suggested using a combination of DIV and IMG to select the most appropriate image for the current device. In parent DIV, a large image is stored in background-image, and in IMG – version for mobile devices. With Media Queries, a small image from IMG or a large one from the DIV background will be selected:

 <div class="r-</span>img<span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #333333;">" style="background:</span>url<span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #333333;">(link/to/large/version); width:[width-of-image]px; height:[height-of-image]px;"></span>
<span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #333333;"><img src="link/to/small/version" /></span>
<span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #333333;"></div> 

 

Adaptive images right now

9. Responsive Images Using CSS3
Adaptive images using CSS

The Nicolas Gallagher method relies on using Media Queries, content properties, and attr () expressions. Unfortunately, this method is interesting only from the point of view of the idea – it does not work in any of the currently existing browsers.

Adaptive images using CSS

10. Responsive Images Using Cookies
Adaptive images using cookies

Keith Clark suggests using cookies to submit thumbnails to mobile users. Every time the browser requests a file from the server, it automatically sends cookies along with the request. If we use JavaScript to create cookies with information about the size of the current screen, then all subsequent browser requests will return this data to the server.

In other words, the server will know the screen size of the device even before the browser starts to load images from HTML. This can be used to reduce the size of images on the server side.

Adaptive images using cookies

 

11. Responsive Images With ExpressionEngine
Adaptive images using ExpressionEngine

John Faulds presented a method for creating adaptive images that differed significantly from those given above. The user agent determines whether the device is mobile or not. Based on the test results, a global variable is created, which is used in templates to change the image size of the output. It turns out that only one image is sent to the browser, but for mobile visitors, it is one, and for visitors from the desktop is different.

Adaptive images using Expression Engine

12. CSS: Elastic Videos
CSS: Adaptive videos

Nick La based on the application of max-width: 100% to video represents a method that makes HTML5 video, object- and iframe-embedded video adaptive. As for the latter, the method is very simple. Just paste the code into the DIV block and specify padding-bottom from 50% to 60%. And for child elements (such as iframe, object embed) – width and height properties equal to 100% plus absolutely position. This will cause the built-in elements to expand in full width automatically. Originally this method was proposed by Thierry Koblentz.

CSS: Adaptive videos

13. Resizable Images (At Full Resolution!)
Images with variable sizes

A quick guide to resizing images based on the amount of text.

Images with variable sizes

Adaptive e-mails

14. Optimizing Your Email for Mobile Devices With the Media Query
Optimizing email for mobile devices using the Media Queries

To view large letters, horizontal scrolling is often necessary, especially when a large image is attached to the letter. In this study, the Campaign Monitor explains how emails can be optimized for mobile devices using Media Queries and offer several useful methods and code snippets for use in practice.

Optimizing email for mobile devices using the Media Queries

15. Responsive Design for Email, the Largest Mobile Audience
Adaptive design for email, the tool with the largest number of mobile audience

The article shows interesting experience and thoughts of the Beanstalk team on the use of Media Queries to create mobile friendly (user-friendly) mobile mail.

Adaptive design for email, the tool with the largest number of mobile audience

16. Media Queries in HTML Emails
Media Queries in HTML letters

This article discusses the use of Media Queries for specific mobile email clients.

Media Queries in HTML letters

17. Guide to CSS Support in Email
Guidelines for CSS support for email clients

Creating mail on HTML, which would be displayed equally correctly in all main email clients, can be extremely long and labor-intensive. Support for even simple CSS is significantly different between clients and even between different versions of the same client.

Campaign Monitor has compiled a guide to save your time and nerves on finding out all these details. Tested on 24 different email clients, it covers all popular email applications.

Guidelines for CSS support for email clients

Tools for Adaptive Web Design

You can design an adaptive design from scratch or use the tools listed below to speed and simplify the process of creating it.

18. Respond.js

This is a fast and small Polyfill (a snippet of code that adds an unsupported functionality) created by Scott Jehl to support the min-width and max-width properties of CSS3 Media Queries in IE6-IE8 and higher.

Css3-mediaqueries-js is another script that allows you to work with CSS3 Media Queries in IE 5+, Safari 2 and Firefox 1+.

Css3-mediaqueries-js

19. WebPutty: Scientific Progress CSS Editing
WebPutty: a breakthrough in CSS editing

This tool is a web-editor of your site’s CSS with autosave function and real-time result viewing. WebPutty supports SCSS, Sass, LESS and Compass. To use this tool, simply paste the link before the closing </ head> tag on your site.

WebPutty: a breakthrough in CSS editing

20. Debugging CSS Media Queries
Debugging CSS3 Media Queries

When creating an adaptive web design, you have to work with a lot of Media Queries. Johan Brook shares a little secret on how to find out which Media Queries rule is working out at the moment. The article also contains mixing for developers using Sass.

Debugging CSS3 Media Queries

21. Responsive Design Testing
Adaptive Design Testing

This tool is designed for anyone who needs a quick and easy way to check the created site at the different width of the screen. You can check the site either online or by downloading the code from Github.

Adaptive Design Testing

22. Responsive Containers: Selector Queries
Adaptive blocks

JavaScript Andy Hume allows you to apply different classes to HTML elements based on their width.

Adaptive blocks

23. Resize My Browser
Change the size of your browser

If you want the browser to display content at a certain window size, then this is what you need. Just click on the size that is needed, and see what your site looks like at this size. It does not work in Chrome and Opera because of problems with the “ResizeTo” event.

Change the size of your browser

24. Media Query Bookmarklet
Media Query tabs

A handy tool that shows which Media Queries are active at the current width of the browser. Drag it to the bookmarks bar and, if necessary, just run it.

Media Query tabs

25. Responsive Px
Use the information from this little tool to create an adaptive site.

Use the information from this little tool to create an adaptive site.

26. ProtoFluid

A tool for rapid prototyping of adaptive design. You can design CSS for various popular screen sizes, orientations, and browsers, whether it’s phoning (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablets (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitors or TVs 720p, 1080p).

You can view the design results directly in the browser and use the familiar development tools, such as Firebug. Also, try the alternative ScreenFly tool.

ProtoFluid

27. Fluid Grid Calculator
Rubber Mesh Calculator

Harry Roberts has developed a calculator and a rubber mesh generator. Just specify the number of columns, the width of one column, the intent, and the tool will generate a CSS rubber grid according to your parameters.

Rubber Mesh Calculator

28. Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko
Free HTML5/CSS3 WordPress 3.1 theme with an adaptive layout: Yoko

Yoko is a modern and flexible WordPress theme. Thanks to the adaptive layout based on CSS3 Media Queries, the theme is customized for different screen sizes. The design is optimized for large screens of desktops, tablets and small screens of smartphones. To give the site an individuality, you can use new post formats (for example, galleries, side columns or citations). Select your logo and image in the header, adjust the background and color of the links.

Free HTML5 / CSS3 WordPress 3.1 theme with an adaptive layout: Yoko

29. Scherzo, a Responsive WordPress Theme
Scherzo, Adaptive Theme for WordPress

This WordPress theme is a great example of adaptive design, displaying equally well on almost all devices and screens.

Adaptive design models

30. 320 and Up

The 320 and Up tool is based on the principle of mobile first (first mobile devices), in which design is created first for mobile device screens, and then expanded to tablets, desktops, and large screens. It works well both as a complement to the HTML5 boilerplate, and separately.

320 and Up

31. Mobile Boilerplate

These are customizable templates for creating multi-functional, high-performance mobile web applications. You will get cross-browser compatibility for A-class smartphones and good support for old BlackBerry, Symbian, and IE Mobile. And also a large number of different optimizations for mobile browsers.

Mobile Boilerplate

32. Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Skeleton: Excellent Boilerplate for adaptive development

Skeleton is a small collection of CSS and JavaScript files that will help you in the rapid development of sites that are equally convenient on any screen, whether it’s a 17-inch laptop or iPhone. Skeleton is a well-organized and designed grid that is adaptable right up to the mobile phone. It also has styles for most HTML elements that can be used as a basis for your design.

Skeleton: Excellent Boilerplate for adaptive development

Frameworks for adaptive design

33. 1140 CSS Grid

1140 CSS Grid is optimized for working on screens from the size of mobile devices to monitors of 1280px in width. This is a simple and flexible mesh that uses Media Queries.

1140 CSS Grid

34. inuit.css

This CSS framework is a good foundation for development on tiny screens (for example, phones) and small screens (for example, tablets) right out of the box with minimal effort. In addition, there is a generator for creating a rubber CSS-framework for themselves.

inuit.css

35. Flurid

Flurid is a rubber mesh for 6, 7, 8, 9, 10, 12 and 16 columns.

Flurid

36. FluidGrids

FluidGrids is a modular grid generator that creates layouts from 6, 7, 8, 9, 10, 12 or 16 columns.

FluidGrids

37. Less Framework 4

CSS-framework for creating adaptive layouts. It contains 4 basic layouts and three sets of typography.

Less Framework 4

38. Fluid Grid System

Rubber framework with an emphasis on typography.

Fluid Grid System

39. Tiny Fluid Grid

Tiny Fluid Grid will help you create your own rubber grid of 12, 16 or 24 columns, set their maximum and minimum width and indent in percentage.

Tiny Fluid Grid

Adaptive design strategies

40. The Responsive Designer’s Workflow
Workflow developer adaptive web design

Luke Wroblewski has completed the presentation of Ethan Marcotte on the application of the principles of adaptive web design in the modernization of the site of one of the leading newspapers. Among other things, Ethan explains how he approaches the methodology of designing adaptive web design and what the prototyping process is in the context of adaptive web design.

Workflow developer adaptive web design

41. The Goldilocks Approach to Responsive Web Design
The Goldilocks approach to Responsive web design

Goldilocks considers mock-ups based on em that look great regardless of the device from which they are viewed.

The Goldilocks approach to Responsive web design

42. Content Choreography
Choreography of content

In the article, you can read about how to plan your site correctly in order to meet the standards of today. Begin to manage the content so that it is best served at any width.

Choreography of content

43. Structured Content First
First, structured content

In this presentation, Stephen Hay describes the troubles that you may encounter when creating an adaptive site.

Stephen shows that we must first think about the proper structuring of content, which will make it universal and conveniently accessible from both a small screen and a text browser. Your content should be ready for use anywhere.

First, structured content

44. Design for a Target Experience First
Design for Target Experience First

Another interesting look at the creation of the adaptive design. Nathan C. Ford focuses on the behavior of its visitors, and then, based on it, creates custom scripts and Media Queries.

“Each site has goals that go beyond simple reading, where a lack of different capabilities can actually destroy an enjoyable experience of interaction. I’m working on such a project now. Our approach is to learn everything and form the optimal interaction for the most likely user scenarios. By working in this way, we perfect each media quiz to perfection. “

Design for Target Experience First

45. More Responsive Design, Please
Even more adaptive design

In the article, Jason Things reflects on the problems of adaptive design. The article is very well thought out and, as they say, “must read”.

Even more adaptive design

46. Breaking Development

Luke Wroblewski took notes at the Breaking Development Conference during Stephen Hay’s presentation on the design realities for various devices.

Breaking Development

47. Patterns for Multiscreen Strategies
Templates for Multiscreen Strategies

Pay attention to this simple but very useful presentation to get an idea of what the main factors play a decisive role in multi-screen concepts.

Templates for Multiscreen Strategies

48. Responsive Web Design from the Future.
Adaptive Web Design from the Future

According to Kyle Neath, adaptive web design is a broader concept than just the screen size. Kyle wrote about how GitHub handles links, about the address bar, about a partial page refresh, and explained why he thinks the HTML5 History API is the most important thing that happened in the front-end development since the appearance of Firebug. Very inspiring presentation.

Adaptive Web Design from the Future

49. Developing a Progressive Mobile Strategy
Development of a progressive mobile strategy

In this presentation, Dave Olsen presents a progressive mobile strategy that consists of strategies for audiences, content, and platform. Dave believes that to develop a sustainable and scalable mobile strategy, you need to answer the following questions: “What is the value of this content for the target audience?”.

Development of a progressive mobile strategy

50. How to Use CSS3 Media Queries to Create a Mobile Version of Your Website
How to use CSS3 Media Queries to create a mobile version of the site

In this article on Smashing Magazine, Rachel Andrew explains how using just a few CSS rules, you can create an iPhone version of your site using CSS3, which will work right now. The article provides a very simple example and the process of adding styles for mobile devices to the site to show how easily we can add mobile-oriented styles to an existing site.

You may also be interested in the following articles on this topic: Aaron Gustafson “Adaptive layouts with Media Queries” and Emily Lewis “Adaptation for various devices with CSS3 Media Queries.”

How to use CSS3 Media Queries to create a mobile version of the site

Discussions and different perspectives on adaptive web design

These articles, although not textbooks, can give you valuable information about why you need to use adaptive web design techniques (and when you do not need to do this).

51. Responsive by Default
Default Adaptivity

Andy Hume explains that in his opinion, adaptability is our everything. This is what makes a website working when it is loaded through an unknown browser on an unknown device of an unknown person.

Default Adaptivity

52. Responsive Web Design or Separate Mobile Site? Eh, It Depends
Adaptive web design or a separate mobile site? Depends on the circumstances.

Interesting article about the pros and cons of adaptive web design in comparison with the mobile site.

Adaptive web design or a separate mobile site? Depends on the circumstances.

53. The Case Against Responsive Web Design
Against adaptive web design

It is perfectly logical to include in this review views on when the adaptive design is appropriate, and when not. This article discusses why the adaptive design does not always make sense in terms of user interaction. Pay attention to interesting comments to the article. Luke Jones has a similar opinion.

Against adaptive web design

54. A Responsive Mind
Adaptive mind

Discussion in the blog Jeremy Keith about the necessary components of adaptive design and how to effectively create different layouts based on different screen sizes. With examples.

55. Responsive Enhancement

An excellent introduction to adaptive design as a way of thinking, not as a tool or technique. Jeremy Keith argues that adaptive web design can not simply be added as a step to an existing workflow. Instead of achieving the perfection of pixels, we must strive for perfect proportions.

56. Mobile-First Responsive Web Design

The publication is a combination of philosophy and strategy for the accumulation of best practices in the field of adaptive design.

57. Where are the Mobile First Web Designs?
How far has mobile first web design gone?

In this article Jason Grigsby talks about the results of his research on adaptive design, its features, and also makes a few remarks about the current state of things in the field of adaptive site building.

Additional Resources

Publications on an adaptive design that do not fit in the category above.

58. Media Queries

A regularly updated collection of websites that use Media Queries.

Media Queries

59. Responsive Web Design, by Ethan Marcotte
Responsive Web Design, by Ethan Marcotte

This book, written by Ethan Marcotte and published by A Book Apart, is a storehouse of knowledge on the development of adaptive sites. It covers the basics of adaptive design, modular meshes, adaptive images and Media Queries, which is enough to understand how to create an adaptive site.

Responsive Web Design, by Ethan Marcotte

60. The Big Web Show Episode # 9: Responsive Web Design

In the 9th series of The Big Web Show, Jeffrey Zeldman and Dan Benjamin invited Ethan Marcotte to discuss adaptive design.

For a snack

61. The Latest in HTML5
Recent Trends in HTML5

The presentation discusses the little-known aspects of HTML5, which can be implemented in browsers in the near future. Among other things, Media Queries on the server-side with JavaScript and detection of device form factor.

Recent Trends in HTML5

62. The first Russian-language blog about adaptive design.

An excellent addition to the article will be a blog about adaptive design, in which developers share their experiences and write reviews of responsive tools.

Related Topics:

50 Useful tools for PHP developer