5 golden rules "adaptive" web design

5 золотых правил «адаптивного» веб-дизайна

In May 2010 Ethan Marcotte in his article for the "A List Apart" wrote the concept of adaptive (responsive) website design, thereby ushering in a new direction.

article attracted the attention of a wider audience which forced the author to write a book on design adaptation.

A detailed description of the layout based on a grid, flexible images and media requests with radically changed the process of creating a beautiful site.

Since then, responsive web design technology has become one of the most discussed topics in the design community.

Design-oriented content

Before you pick up a pencil or open Photoshop, it seems appropriate to equip the strategy content. It is necessary to create a certain understanding of content aimed at a specific site. It makes no sense to run a website, not realizing that the nature of the material will be placed on it.

5 золотых правил «адаптивного» веб-дизайна

When the content is already available, you can experiment with how things will look - to build a framework for content. This term was coined by Stephen Hay in the book Responsive Design Workflow, which involves the use of basic rectangular blocks to create the layout for the content.

This technique is ideally suited to demonstrate the basic arrangement of the basic pattern. The main component of navigation, hidden navigation elements, page footer and secondary modules. First, create a frame without too much detail - additional items will be added later.

Then, already need to think about the "adaptive" control points. For content generated in the framework of content strategy, approach simple layout of a column designed for mobile devices. It is better to do in the browser, using the basic elements of HTML, but more about that later.

By limiting the design to a single column, you can already think about the content of the hierarchy on the page. What is the most important information component of the page? Where should be located the main call to action? Does it make sense to read the page from start to finish?

Once the desired order of presentation of information, it is appropriate to expand the canvas of the content, but not to such an extent that the content will seem too stretched. It is necessary to fix the width. It will be the first reference point.

And then adjust the page layout to conform to the new width of the column by adding, for example, for the sidebar.

Design "in the browser"

Member consider that the flat visual elements and Photoshop layouts too complicate the process of creating a website design, providing a view of how the site will look like, depending on your browser settings.

5 золотых правил «адаптивного» веб-дизайна

But the end result is almost always different from the initially planned. Expansion elements, increasing the space around them and other nuances - all affect the result.

The problem of visual elements - is that they look too good. Sharp images, typography smoothed, the use shade effects and blending modes turn the site into a work of art. But customer expectations should be commensurate with what happens in the end.

This will help a prototype created with HTML and CSS (Cascading Style Sheets), which can then be subjected to various manipulations. Show the customer how the design looks at different devaysakh and at different screen width.

Do not worry that you may not be a magician external interfaces, because there are tools to make prototypes (Macaw, Webflow and Adobe Edge Reflow). You can also use the advice of a developer, but it is believed that a better first learn the basics - it will help create a picture of the process of building a responsive web design.

One advantage of this strategy is that it reduces the time required for the change.

Assume that the available 20 Photoshop layouts (or a Fireworks), each of which in three versions (for desktop, tablet and mobile devices), and the task is to update the style of buttons for the site, or the navigation controls. This means that you need to process 60 pages to change the style, in short, the work is very time-consuming.

But thanks to simple manipulations with CSS, such a change will need to make only once - updates will be applied to all available pages. In the long run it will save time.

Among other things, it will be possible to test the capabilities of devices with different screen sizes. Most of the tools mentioned are substituted with pre-set parameters viewing windows available but the ability to export its own design and make it fit for a particular browser. Thus it is possible to transmit the desired mobility experience.

Development patterns library

One of the key features of almost all RWD-projects - style guide. It usually includes the main styles for the project and the provisions of interactive modules.

5 золотых правил «адаптивного» веб-дизайна

At this stage it is necessary to identify each of the patterns of interaction experience.

In Fireworks symbols and styles are used for common components and modules. For good design is necessary to illustrate how each of the modules will be adapted to the selected control points.

Developer Brad Frost introduced the concept of Atomic Web Design, to describe it, he uses a kind of pseudoscientific terminology. Key styles of the brand he calls atoms that make up the design of the foundation. Such things as color, font and icons relate to the basic HTML elements for the formulation of "molecules". The molecules used to create "organisms". Take, for example, the search button. In this case, the input form and the label may be added to the button.

Then there is a mixture with other organisms to create "templates" for example, heading. In turn, the templates allow you to create the page already - and voila! Do you have Atomic Web Design.

This theory is applicable for the preparation of the structure patterns library. First brand styles are, and then they can be adapted to the HTML elements, etc. Your library of patterns will be able to tell the story of the project - how the customer brand has become a new way to look at the network. Developers need to add notes and fragments of programs related to a specific screen menu options.

Laboratory patterns over time can become a variable web-design, to the extent that, as a transition from page design to the design of the system components.

Versatility

In developing the design is impossible to predict every nuance of the user experience, especially with regard to mobile devices. There are literally hundreds of different scenarios of how to use the site can handle - all because of the huge number of smartphones and tablets with different screen sizes, resolution settings and the type of data input.

5 золотых правил «адаптивного» веб-дизайна

The design should adapt to any environment. Below are the points that you may find useful.

proven method

Most of today's mobile devices equipped with a touch screen, so you need to consider the size of interactive interface elements. There is no consensus about the ideal smartphone space pressing. Apple engineers choose 44px, people from Microsoft argue that 34px better.

Perhaps the use of 48px is more practical in the development of interactive elements. For each region retained at least 6px, and usually 12px - for the base level. In the era of the general design and the large size of many of today's websites leave a little more space for desktops. These increased in volume elements must be used in forms - for simplicity and consistency mobile devices. Some people prefer to design their own advanced form fields to match with the style of the site.

But with regard to mobile devices, it is recommended that you use the "native" controls. Keyboards and drop-down menu should be optimized for a particular device. And one more thing: remove the selected link when you hover over mobile devices.

Some adjustments can significantly enhance the experience of cooperation. But nothing could be worse than repeatedly pressing on the touch screen to perform a specific task. And all because of the omission on the part of allocation under the cursor.

Navigation

One of the common issues that arise during the development of "adaptive" website - how to organize navigation. For this purpose, there are a number of ways depending on the number of control points.

Jump links

One of the simplest and most versatile techniques for mobile navigation - jump link menu. This is essentially the link-anchor, which provides the user menu at the bottom of the page.

This does not require javascript or some other additional scripts that provide universalization for all browsers and devices.

Drop-down list

Another common navigation patterns - a drop-down menu when the menu icons enables navigation with the addition of smooth animation. For this technique requires javascript - to place the menu buttons below and then hide as long as it does not need the user.

Some elements of navigation for such purpose can be used by a graphic element "accordion", it allows you to see the navigation levels, without loading each page.

Without canvas

This method is perhaps the most popular in the RWD, because the sites are increasingly resorting to the aid applications. The pioneer was the social network Facebook with their mobile applications, it offers web developers a chance to place the site navigation at the edge of the viewport, and move it to the user's request.

On sites such as Teehan + Lax and Squarespace, described technique is used as the sole method of navigation. It is believed that in the near future it will become a trend in RWD.

Mobile version of the site focused on tasks

Another important point, which is worth paying attention to the development of the mobile version - the location of the controls at the top of the page. Above the "fold".

Developers discuss that in the field of web design is no such thing as a "crook", recently appeared a myriad of new devices with various resolution, which further complicates the task of defining the fold line of a particular site. Starting from the smallest size of the device may define a so-called 'safe zone'.

For the reason that the users of mobile devices, as a rule, are in motion and have a limited amount of time and bandwidth, it is important that the surface of each element of the category of "call to action" (banners, etc.) are always located at the top of the screen, and additional content - below.

A striking example - a mobile design for e-commerce, where many pages devoted to the product contained, along with site navigation, product name, price, image in miniature and appeals to buy anything that is above the fold. The secondary content, such as product features and specifications may be placed in the bottom of the site.

Achieving this is possible due to strict observance of content strategy and careful consideration of how the site will look like in the top of the application.

5 золотых правил «адаптивного» веб-дизайна

Performance

It is impossible to predict how the device will be in the hands of the user, and how connectivity it will have. Therefore, you must create a design "adaptive" site, keeping in mind the performance. No one wants to waste time and wait, especially on the Internet. If the site does not load within a few seconds, the user can take.

5 золотых правил «адаптивного» веб-дизайна

If your site has a good design and all other components in the procedure, users certainly will drop it again. The main thing you should pay attention - to make the page as possible lightweight. Over 60% of the "weight" of the majority of sites - it is only an image. Other: scripts, style sheets, and other media elements.

The easiest way to reduce the size of site files - is to export them directly from the graphical application. However, this is not enough. In particular, when the PNG-used files.

Sites such as TinyPNG, help to reduce the weight of the files, reset the ballast of additional data and subtract color. Such portals - a real find, and many designers have added in TinyPNG set of commonly used tools.

"Adaptive" image

In addition to reducing the size of images, sometimes it is important that the different images are suitable for different devices. After all, huge images (hundreds of kilobytes) is not designed for mobile devices, which are present in the data limit and bad 3G connection capabilities.

There are many scripts that will help to achieve this (Picturefill Scott Djelfa and Adaptive Images) depending on the needs of the site and server capabilities. But do not worry about it. Web designers usually involve how the images will be tailored to the various control points and Soup and make appropriate adjustments. Ideally, a guide on styles and patterns laboratory.

Truncation script

The large size of the site can also depend on a variety of scripts, such as Javascript and additional CSS style sheets.

Some might say that all this should worry the developers, and will be right - but only partly.

If placed at the center of the site compatible with a mobile device, then accordingly should be written and CSS, as well as any other style sheets for major control points.

The total amount of animation - is something for which requires constant monitoring. Under the animation in this case means everything that moves and requires scripting. Animation significantly increases the size of the files.

For neophytes, working for the first time on mobile sites, initially better to follow the path of least resistance, for the most part limited to static elements. If you need to add a beautiful slide - you can experiment a bit and see how it will affect the website performance.

Feed small portions of content

A good way to reduce the file size and thus increase productivity - "cut" the content in small portions and deliver it as needed when users request it. It's not about how to segment all of the content, only secondary.

There are many advanced techniques, for example, «load on scroll» - it is used by many social networking in relation to news feeds - so users can download more content out of necessity (instead of random loading more content volume by pressing the lower part of the page).

Another useful way of providing greater detail and allows you to view a larger volume of secondary information - to place content on the next page for mobile viewing. For example, you can put a neat link to go to the page where the information more.

In conclusion…

The times when the web designers had to take care only of the content combining with color, typographic styles of web pages and other irrevocably gone. The design world has undergone a sea change: Now do not hire a web developer to only paint a detailed framework in the typical project "waterfall" type.

It is necessary to take into account a number of points to be aware of the process of building the site and selection of priorities with regard to content that matches your requirements. All selected experimentally, only transferring theory into practice, it is possible to understand all the nuances.

Industry Web Design is trying to keep up with the times and take into account the current realities, when produced myriad mobile devices. It is time to broaden the horizon of design and make web design a bit better - for each electronic device.

In this article it was presented five features Responsive web design, but they are, of course, much more. And by the time the reader will master the text, a list of all possible nuances filled up with something new.

Rusability express our gratitude for the excellent material.