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?
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.
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
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
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.
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)
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
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:
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.
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.
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.
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.
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
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
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.
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+.
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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.
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.
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.
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.
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.
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. “
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.
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?”.
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).
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.
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.
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.
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.
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.
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.
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.
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.
Alex, the dynamic founder, entrepreneur, developer, and content writer at Smart Spate, is committed to excellence. As a digital innovator, Alex continually explores cutting-edge techniques to keep SmartSpate ahead in the industry. Passionate about web development, Alex is dedicated to producing high-quality, informative content in the ever-evolving world of web design.
error: This Content is Protected! All Rights belong to Smart Spate Ltd.
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. For information on a cookie and how it impacts on users, you can visit our Privacy Policy and Cookie Policy.AcceptCloseRead more
