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?
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.
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.
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.
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.
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).
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.
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:
&lt;div class="r-&lt;/span&gt;img&lt;span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #333333;"&gt;" style="background:&lt;/span&gt;url&lt;span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #333333;"&gt;(link/to/large/version); width:[width-of-image]px; height:[height-of-image]px;"&gt;&lt;/span&gt; &lt;span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #333333;"&gt;&lt;img src="link/to/small/version" /&gt;&lt;/span&gt; &lt;span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #333333;"&gt;&lt;/div&gt;9. Responsive Images Using CSS3
Adaptive images using CSSThe 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.
10. Responsive Images Using Cookies
Adaptive images using cookiesKeith 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.
11. Responsive Images With Expression Engine
Adaptive images using ExpressionEngineJohn 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.
12. CSS: Elastic Videos
CSS: Adaptive videosNick 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.
13. Resizable Images (At Full Resolution!)
Images with variable sizesA quick guide to resizing images based on the amount of text.
Adaptive e-mails
14. Optimizing Your Email for Mobile Devices With the Media Query
Optimizing email for mobile devices using the Media QueriesTo 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.
15. Responsive Design for Email, the Largest Mobile Audience
Adaptive design for email, the tool with the largest number of mobile audienceThe article shows interesting experience and thoughts of the Beanstalk team on the use of Media Queries to create mobile friendly (user-friendly) mobile mail.
16. Media Queries in HTML Emails
Media Queries in HTML lettersThis article discusses the use of Media Queries for specific mobile email clients.
17. Guide to CSS Support in Email
Guidelines for CSS support for email clientsCreating 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.
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+.
19. WebPutty: Scientific Progress CSS Editing
WebPutty: a breakthrough in CSS editingThis 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.
20. Debugging CSS Media Queries
Debugging CSS3 Media QueriesWhen 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.
21. Responsive Design Testing
Adaptive Design TestingThis 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.
22. Responsive Containers: Selector Queries
Adaptive blocksJavaScript Andy Hume allows you to apply different classes to HTML elements based on their width.
23. Resize My Browser
Change the size of your browserIf 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.
24. Media Query Bookmarklet
Media Query tabsA 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.
25. Responsive Px
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.
27. Fluid Grid Calculator
Rubber Mesh CalculatorHarry 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.
28. Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko
Free HTML5/CSS3 WordPress 3.1 theme with an adaptive layout: YokoYoko 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.
29. Scherzo, a Responsive WordPress Theme
Scherzo, Adaptive Theme for WordPressThis 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.
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.
32. Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Skeleton: Excellent Boilerplate for adaptive developmentSkeleton 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.
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.
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.
35. Flurid
Flurid is a rubber mesh for 6, 7, 8, 9, 10, 12 and 16 columns.
36. FluidGrids
FluidGrids is a modular grid generator that creates layouts from 6, 7, 8, 9, 10, 12 or 16 columns.
37. Less Framework 4
CSS-framework for creating adaptive layouts. It contains 4 basic layouts and three sets of typography.
Rubber framework with an emphasis on typography.
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.
Adaptive design strategies
40. The Responsive Designer’s Workflow
Workflow developer adaptive web designLuke 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.
41. The Goldilocks Approach to Responsive Web Design
The Goldilocks approach to Responsive web designGoldilocks considers mock-ups based on em that look great regardless of the device from which they are viewed.
42. Content Choreography
Choreography of contentIn 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.
43. Structured Content First
First, structured contentIn 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.
44. Design for a Target Experience First
Design for Target Experience FirstAnother 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. “
45. More Responsive Design, Please
Even more adaptive designIn the article, Jason Things reflects on the problems of adaptive design. The article is very well thought out and, as they say, “must read”.
Luke Wroblewski took notes at the Breaking Development Conference during Stephen Hay’s presentation on the design realities for various devices.
47. Patterns for Multiscreen Strategies
Templates for Multiscreen StrategiesPay 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.
48. Responsive Web Design from the Future.
Adaptive Web Design from the FutureAccording 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.
49. Developing a Progressive Mobile Strategy
Development of a progressive mobile strategyIn 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?”.
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 siteIn 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.”
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 AdaptivityAndy 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.
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.
53. The Case Against Responsive Web Design
Against adaptive web designIt 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.
54. A Responsive Mind
Adaptive mindDiscussion 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.
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.
59. Responsive Web Design, by Ethan Marcotte
Responsive Web Design, by Ethan MarcotteThis 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.
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 HTML5The 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.
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