5 golden rules of "responsive" web design
In May 2010, Ethan Marcott, in his article for A List Apart, wrote the concept of responsive web design, setting the stage for a new direction.
The article attracted the attention of a wide audience that forced the author to write a whole book on the adaptation of design.
A detailed description of the layouts based on the grid, flexible images and work with media queries has radically changed the process of creating beautiful sites.
Since then, responsive web design has become one of the most discussed topics in the design community.
Content Oriented Design
Before picking up a pencil or opening Photoshop, it seems appropriate to equip content with a strategy. It is necessary to make a certain idea about the content intended for a specific site. After all, there is no point in launching a website, without being aware of the nature of the material that will be placed on it.
With the availability of content, it is already possible to experiment with how everything will look like - to build a framework for the content. This term was suggested by Stephen Hey in the Responsive Design Workflow book, which implies the use of basic rectangular blocks to create a layout for content.
This technique is ideal to demonstrate the basic layout of the main patterns. The main components of navigation, hidden navigation elements, page footer and secondary modules. First, a frame is created, without undue detailing - additional elements will be added later.
Then you need to think about "adaptive" control points. For content generated as part of the content strategy, a simple single-column layout designed for mobile devices will do. It is better to do this in the browser using basic HTML elements, but more about this after.
By limiting the design to one column, you can already think about the hierarchy of content on the page. What is the most important information component of the page? Where should be the main call to action? Does it make sense to read the page from start to finish?
After drawing up the required order of information, it seems appropriate to expand the outline of the content, but not to such an extent that the content will seem too stretched. It is necessary to fix the width. This will be the first reference point.
And after correcting the layout of the page to match the new width, adding a column, for example, for the sidebar.
It’s important to take into account that flat visual elements and Photoshop layouts make it too difficult to create a website design, providing a view of how the website will look depending on the browser settings.
But the final result almost invariably differs from the originally planned one. The expansion of the elements, the increase in the space around them and other nuances - all this affects the result.
The problem with visual elements is that they look too good. The images are clear, the typography is smoothed, the use of the shadow effect 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 the prototype, created using HTML and CSS (cascading style sheets), which can later be subjected to various manipulations. Show the client how the design looks on different devices and with different screen widths.
Do not worry about the fact that you may not be a magician of external interfaces, because there are tools that allow you to make prototypes (Macaw, Webflow and Adobe Edge Reflow). You can also use the advice of some developer, but it is believed that it is better to first learn the basics - this will help to get an idea about the process of building responsive web design.
One of the advantages of such a strategy is that the time required for making changes is reduced.
Suppose that there are 20 Photoshop (or Fireworks) layouts, each of which is in three versions (for desktop, tablet, and mobile device), and the task is to update the style of buttons for the site, or navigation elements. This means that it is necessary to process 60 pages to change the style, in short, the work is very laborious.
But due to simple manipulations with CSS, such a change will need to be made only once - the updates will be applied to all available pages. In the long run, this will save time.
Among other things, it will be possible to test the capabilities of devices with different screen sizes. Most of the mentioned tools are substituted with the parameters already set for the viewing windows, but the opportunity is available to export your own design and adjust it to a specific browser. Thus, it is possible to transfer the desired mobility experience.
Pattern Library Development
One of the key features of almost all RWD projects is the style guide. It usually includes the basic styles for the project and the interactive positions of all modules.
At this stage, it is necessary to determine each of the patterns of interaction experience.
Fireworks uses symbols and styles for common components and modules. For a good design, it is necessary to illustrate how each of the modules will be adapted to the selected control points.
Developer Brad Frost proposed the concept of Atomic Web Design, to describe it, it uses partly scientific terminology. He calls the main styles of the brand the atoms that form the basis of the design. Things like color, font, and icons correspond to basic HTML elements for formulating “molecules.” Molecules are used to create "organisms". Take, for example, the search button. In this case, the input form and the label can be added to the button.
Then there is a mixture with other organisms to create "templates", for example, headings. In turn, the templates allow you to create pages already - and voila! You have Atomic Web Design.
This theory is applicable to the compilation of the pattern library structure. First, brand styles are created, and then they can be adapted to HTML elements, etc. Your library of patterns will be able to tell the story of the project - how the client brand has become a new look on the web. Developers need to add notes and program snippets related to a specific OSD option.
The laboratory of patterns may, after some time, turn into a variable web design as the transition from page design to system component design is made.
When developing a design, it is impossible to predict every nuance of user experience, especially with regard to mobile devices. There are literally hundreds of different scenarios of how to use can access the site - all because of the huge number of smartphones and tablets, different screen sizes, resolution settings and the type of data entry.
The design must adapt to any environment. The following are points that may be helpful.
Most modern mobile devices are equipped with a touchscreen, so you need to consider the size of the interactive interface elements. There is no consensus about the ideal area of the smartphone to click. Apple engineers choose 44px, people from Microsoft claim 34px is better.
Perhaps using 48px seems more practical when designing interactive elements. For each region, at least 6px are left, and usually 12px - for the base level. In the era of general design and large size, many of today's sites leave a little more space for desktops. These expanded elements should also be used in forms - for simplicity and consistency with mobile devices. Some prefer to design their own advanced form fields to match the style of the site.
But in relation to mobile devices it is recommended to use “native” controls if possible. Keyboards and drop-down menus should be optimized for a specific device. And one more thing: remove the selection of the link when you hover the cursor for mobile devices.
Some adjustment can significantly expand the interaction experience. But nothing can be worse than repeatedly pressing the touch screen to perform a specific task. And all because of the omissions of the selection when hovering the cursor.
One of the common questions that arise during the development of an “adaptive” website is how to organize navigation. For this there are a number of ways depending on the number of control points.
One of the simplest and most versatile mobile navigation techniques is the jump link menu. This is essentially an anchor link that provides the user with a menu at the bottom of the page.
In some navigation elements for this purpose, the “Harmonica” graphic element can be used, this allows you to view the navigation levels without loading each of the pages.
This method is perhaps the most popular in RWD, because sites are increasingly resorting to using applications. The social network Facebook with its mobile applications has become a pioneer; it gives web developers a chance to place the site navigation at the edge of the viewing window and move it at the user's request.
On sites such as Teehan + Lax and Squarespace, the described technique is used as the only navigation method. It is believed that soon it will become a trend in RWD.
Task-oriented mobile versions of sites
Another important point that you should pay attention to when developing a mobile version is the location of controls at the top of the page. Over the "fold".
Developers are arguing that in the field of web design there is no such thing as a “fold”, recently there has been a huge variety of new devices with various resolutions, which further complicates the task of determining the fold line of a specific site. Based on the size of the smallest device, it is possible to determine the so-called "safe zone".
For the reason that users of mobile devices are usually in motion and have limited time and bandwidth, it is important that the surface of any element of the “call to action” category (banners, etc.) is always located at the top of the screen, and the additional content - below.
A vivid example of this is mobile design for e-commerce, when many product pages contain, along with site navigation, the name of the product, price, images in miniature and calls to buy everything that is above the fold. Secondary content, such as product features and specifications, can be placed at the bottom of the site.
Achieving this is possible due to strict adherence to the content strategy and careful consideration of what the top of the site will look like in the application.
It is impossible to predict what device will be in the hands of the user, and what connectivity he will have. Therefore, it is necessary to create a design of an "adaptive" site, keeping in mind the performance. No one wants to spend time and wait, especially on the Internet. If the site does not load in a few seconds, the user can leave.
If the site has a good design and all the other components are also in order, users will certainly enter it again. The main thing you should pay attention to is to make the pages as light as possible. More than 60% of the "weight" of most sites are just images. The rest: scripts, style sheets and other media elements.
The easiest way to reduce the size of the site files is to export them directly from the graphics application. However, this is not enough. In particular, when PNG files are used.
Sites such as TinyPNG help reduce the weight of files, reset the ballast of additional data, and reduce color. These portals are a real find, and many designers add TinyPNG to a set of frequently used tools.
In addition to reducing the size of pictures, it is sometimes important that different pictures are suitable for different devices. After all, huge images (hundreds of kilobytes) are not designed for mobile devices that have data limitations and poor 3G connectivity.
There are many scripts that can help achieve this (Picturefill Scottle Jelphy and Adaptive Images), depending on the needs of the site and server capabilities. But do not worry about it. Web designers usually consider how images will be adapted to different control points and devices and make appropriate adjustments. Ideally, a style guide or pattern lab.
Some may say that developers should worry about all this, and they will be right - but only partially.
If the compatibility of a site with a mobile device is at the forefront, then CSS and any other style sheets for large control points should be written accordingly.
The total amount of animation is something that requires constant monitoring. Animation in this case means everything that moves and requires writing scripts. Animation significantly increases the size of files.
For neophytes, who work on mobile sites for the first time, it is better to follow the path of least resistance first, limiting for the most part to static elements. If you need to add a beautiful slide - you can experiment a little and see how it affects the performance of the site.
Serving content in small portions
A good way to reduce file size and thereby improve performance is to “cut” content in small chunks and provide it as needed when users ask for it. This is not about segmentation of all content, but only secondary.
There are many progressive techniques, for example, load on scroll — many social networks use it for news feeds — so users can download more content based on need (instead of randomly downloading more content when they click on the bottom of the page).
Another useful way to provide more detail and allow you to view more secondary information is 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 is more.
The days when web designers had to take care only of combining content with color, typographic styles of web pages and other things were irretrievably gone. The design world has undergone dramatic changes: now web developers are not hired, just to paint a detailed framework in a typical waterfall project.
It is necessary to take into account many points, to have an idea about the process of building a site and choosing priorities in relation to content that meets the requirements of the user. Everything is selected experimentally, only transferring the theory to a practical plane, it is possible to understand all these nuances.
The web design industry is trying to keep up with the times and take into account modern realities when a huge number of mobile devices are being produced. It's time to expand the design horizon and make the sphere of web design a little better - for each electronic device.
In this post, five features of responsive web design were presented, but they are, of course, much more. And by the time when the reader will master this text, the list of various nuances will be filled up with something new.
Thanks to rusability for the wonderful material.