7 ways to improve the design process of responsive design

Adaptive design is rapidly becoming the industry standard, which entails a whole carousel of excellence, platforms and tools. As a result, there is a shift in the thinking of specialists and, in particular, in understanding how to adapt the workflow to increase its efficiency.

Of course, due to the fact that the process of working on an adaptive project is very individual and iterative, it is rather difficult to analyze it and give solutions for all occasions. Nevertheless, some common methods and techniques can be used almost always.
')
We will look at seven techniques for improving responsive design, starting with the content structure and ending with scalable images.

1. Mobile version first

The “mobile first” approach, with its gradual improvements covering the main aspects of interface design, will help you focus and understand the limitations of the mobile environment for more efficient and innovative work.

This means that you first create design and content that is optimized for the simplest devices. Then the design is expanded for devices with small screens and support for the Media query. In conclusion, the template and content are improved for desktops. The number of users accessing the network from smartphones continues to grow at a frantic pace, and the “mobile first” approach has even been implemented by Google .

Designing for mobile devices should now be our starting point, not the end of the work. This approach makes you focus on user needs, pay attention to important content, design optimized and fast-loading pages, and then improve everything step by step.

As the members of the ZURB team behind the popular CSS framework Foundation note:

The mobile first approach is not to focus on designing for mobile devices, it is also used to improve the usability of sites, more efficient use of web space and reduce unnecessary elements on web pages.

Despite the youth of this design technique and the large number of technical difficulties that arise when implementing it, using this approach means that you create an adaptive, focused, concise and promising basis for your products.

2. Content strategy

The goal of responsive design is to make the best user experience possible in any context . Creating a responsive website is an excellent reason to look at the content with different eyes , to make it more readable and easily accessible, regardless of the device on which the user views it. No matter whether you choose a gradual deterioration or progressive improvement , applying the content out methodology will help develop a content strategy that puts the user in the forefront.

As told in UXMag :

In order to show the correct content to the user in each specific case, a strategy is needed that will provide the user with the necessary content at every stage of his journey.

Development of information infrastructure and content strategy means that content should be created on the basis of the framework and structure , based on the study of users and their needs.

This knowledge and the minimum amount of content needed to create a useful design will be the basis to which you can add more screens and extensions. It is equally important to answer key questions about how the content of each type relates to the goals of the site, and to establish which content will contribute to the fulfillment of these goals. If the content is well structured in the initial stages of the project, be sure that it is easy to transfer to other platforms .

As the author of Content Everywhere, Sara Wachter-Boettcher, eloquently noted:

If we talk about content as something that defines form and content, it becomes clear that content is not even the primary, but the fundamental thing.

3. Sketch and Prototype

After developing your content strategy and toolkit, start integrating the sketch into an adaptive design process — this will help create a smart, organized layout that scales easily.

Today's variety of screen sizes, resolutions and device capabilities mean more layouts to plan. With the help of sketches, rough sketches and ideas can be brought up for discussion in order to lay the foundation for the future framework and prototype of the project. Creating sketches is portable, affordable, and gives flexibility for creating and creating iterative, evolutionary layouts, without spending a huge amount of time drawing endless mockups in Photoshop. In addition, the visual and content accuracy of paper layouts is rather low, which means that you can actually focus on user interactions and content flow, rather than paying attention to how it will look like in the end. In general, the key idea of ​​sketching is to prioritize the adaptability of the content, not the form .

There is a huge amount of resources for sketching , and Zurb's Responsive Sketchsheets also includes the mobile first approach, so that it can be used to move from full-sized mobile pages to thumbnails of sketches for desktop layouts. Or, if desired, simply move down from the desktop version. You can even do sketching on the iPad . The tool does not matter - choose the one that is right for you and allows you to perform quick iterations.

Having obtained a set of sketches, you can proceed to prototyping , that is, creating a simple HTML template (or a working draft version), in order to determine whether the content structure, navigation, markup and breakpoints work in a given context. They provide an opportunity to improve the functionality and interaction and, thanks to minimal visual design, do not distract attention from the structure and content . For prototyping, you can use numerous frameworks and platforms, or you can do everything yourself.

At some point in the sketch and prototyping stage, you might think that it would be good to create a pattern library — a dynamic, documented design library of basic elements and patterns that are used as a starting point and then supplemented. Such a library will help provide a more flexible workflow and will be especially useful for groups working together. There are several resources - one of the most impressive is Rock Hammer from Stuff and Nonsense. Use it as a base for design and design patterns or as a basis for creating a responsive website.

As Matt Griffin noted in the text for A List Apart , sketching and prototyping give us the opportunity to “rethink the whole approach to adaptive web design and help to stop developing“ websites ”and“ mobile sites ”, and instead concentrate on creating flexible content delivery systems with a set of rules that determine the presentation of the content when context changes. "

4. Framework

The choice of a CSS framework depends on the ideology of the project and personal preferences, but its implementation in the workflow of creating an adaptive website has many advantages . The use of frameworks can speed up the development process, normalize standard cross-browser compatibility issues, and bring a structured approach to grid-based design — all that is so necessary in the process of creating an adaptive site. Perhaps the main advantage of frameworks is the need for minimal testing and debugging, which is possible due to the fact that the framework corrects errors related to a specific browser and has already been tested on most browsers and mobile devices.

When choosing a framework, it is important to pay attention to several things. How much training is needed to get started? How much documentation is available, and under what conditions is support provided? What are the functionality of the framework?

One of the frameworks that implement the mobile first approach is the Foundation from the ZURB team. Its latest version was rebuilt from scratch, based on Luke Wroblewski’s mobile first methodology - now the layout you are doing will be initially built for a small device. Its grid with 12 columns can be scaled to a considerable size and at the same time it easily “collapses”, so you can create complex layouts with a grid that is reduced to fit all the columns needed for mobile devices one above the other. It adapts to various screen sizes through both percentage widths and media queries. Now the Foundation supports more devices, and working with them has become more intelligent. This framework combines flexibility, power and uses the Sass preprocessor, so you can remove all presentation classes and write the exact semantic markup of your choice, while retaining the additional benefits of the framework components. Now Foundation comes complete with Sass add-ons and extensions for almost every component.

Using an adaptive CSS framework alone will not solve all the design and development problems; however, these tools are worth the time to learn them, and can serve as the basis for your future adaptive projects.

5. Breakpoints

It is widely believed that breakpoints should be based on total screen sizes (mobile, tablet, desktop). However, when developing for specific device resolutions, we do not fully disclose the potential of an adaptive design that is built around mobility , flexibility and adaptability.

Since content is the cornerstone of the web, it makes sense to use the device denial approach (device-agnostic) and set breakpoints according to the content. Examine your design, find points where problems really arise, and improve weaknesses. Trying to find a new breakpoint for each new expansion is impractical, because new devices are constantly appearing.

The advantage of this approach, according to the designer and author Elliot Jay Stocks , is that:

If you improve your design when it looks good, you don’t have to worry about upgrading media queries for new devices.

So what does the “content” approach to breakpoints mean?

This means that you determine the basis of the structure based on the content, and then focus on what happens to the layouts. This approach provides more information about the microdetails of content behavior in a moving context, because you are not focusing on controlling the design in the format of pages, but on the principles of design that unite the pages,

thinks designer Mark Boulton.

Another approach to defining breakpoints was voiced by the author of the book Implementing Responsive Design Tim Kadlec ( Tim Kadlec ) and is to change the width and height of the browser window and see what points can be improved by allowing the content to act as a conductor. Start with a mobile view (about 300px) and increase the browser window until things start to look demanding improvements. This will be the first breakpoint - set up a media query for it and resolve any issues that arise. Repeat these steps until you reach an acceptable range between points. By setting breakpoints in REM and EM , instead of pixels (), you will achieve a large degree of flexibility.

In addition, this method does not take much time. Drew Thomas states:

It takes as much time to add a “special” media query as to find a solution that allows content to work without additional media queries.

We do not advocate the thesis that “ breakpoints are dead, ” rather, we believe that content should fill our media queries; The only way to create a design that will work on any device is to forget about all devices. You can even go ahead and turn to the classical theory of readability to determine breakpoints based on it.

6. Scalable images

One of the challenges of responsive design is image manipulation . They must be mobile in order to scale to fit both the projections and the text. There is still no official specification from the W3C on this issue, so it only remains to independently search for new solutions and work with them.

One such solution is the use of Adaptive Images software, which is built on the experiment of the Filament Group . Adaptive Images uses one .htaccess file, one php file and one line of JavaScript code to determine the screen size of the site visitor. The module then automatically creates, caches, and displays a scaled version of embedded HTML images that is appropriate for a particular device. It is also important to think about how images will be trimmed when zoomed out - tools like Focal Point and ReSRC.it help intelligently crop the image so that the main focus of the image is not lost when viewed on smaller devices.

With the advent of a new generation of high pixel-density retina displays, the importance of optimizing images for proper scaling has increased. One way to create responsive retina images is to use CSS Sprites . To work with high-resolution displays, you need two images — in normal (@ 1x) and high (@ 2x) resolutions, which means duplicate files, selectors, and links in CSS. When using CSS Sprites, however, “you just need to override the reference to the @ 1x sprite file for all selectors that include high-resolution attributes,” says Maykel Loomans . This technique reduces the number of network requests, reduces the size of the style file and allows for a more efficient retina image creation process.

However, CSS Sprites only works with images marked in your CSS. For the images on the web pages, Imulus has developed an extremely useful Retina.js plugin that checks your server for paths to images with @ 2x at the end.

Another tip is to cut unnecessary images using Icon Fonts , which are very easy to scale , edit and maintain, resulting in lighter sites.

Another media resource that requires proper scaling is video — it must be flexible and scale from screen to screen. Everything is a bit more complicated here than in the case of images, but jQuery plug-ins (eg Fitvid.js and Fluidvid.js ) will help facilitate development.

7. Minification

You spent time creating a beautiful responsive website, but did you do something to optimize performance? Images, JavaScript, CSS, libraries - all this needs to be downloaded, which means longer download times and the number of HTTP requests.

Minification is the practice of removing unnecessary characters from code (without losing its functionality) to reduce its size and increase download speed. These unnecessary characters can be spaces, tabs, line breaks and comments, which are removed to minify the code, while leaving all its qualities unchanged, but reducing the overall weight. To reduce the weight even more, you can set the level of minification (especially for JavaScript), which will more aggressively replace variables and function names with single letters. Independent web developer Mike Beckwith ( Michael Beckwith ) recommends saving non-minimized copies of CSS and JavaScript-files for the working copy of the site, and on the "combat" version use minified ones.

You can minify CSS and JavaScript files with a large number of tools : CSSTidy , Minify , JSMin , YUI Compressor and SquishI are just some of them. These tools can even be compared. Ultimately, the choice of the minification tool depends on your code and workflow.

In addition to code minification, you can combine CSS and JavaScript into common files to reduce the number of HTTP requests . This can be quite difficult to implement if the scripts are different on different pages, but it’s worthwhile to reduce the response time. Another performance optimization method is to enable Gzip compression . Once activated on the server, it sends the .zip file to the browser, instead of the .html file. Then the browser loads the archive, unpacks it and shows the contents to the user. As a result, instead of downloading a 100 kilobyte html file, after compression, a file weighing 15 kilobytes is loaded, which means the site visitor will interact with more compact, fast, compressed content, and the load time will decrease. Do not forget that the decrease in load time directly affects the revenue , so there are several advantages at once.

PS Notes on translation are accepted in lichku.

PPS We also started posting digests of interesting publications of the world of usability and UX on our blog. Suddenly, anyone interested.