Five tips to help you speed up response web design project

No successful Web project is done under the premise that designers and developers cannot communicate smoothly, and collaboration is the foundation of a good project.

I have seen experienced designers and developers who have failed to communicate and misunderstand, and have seen novice designers and development teams work together to make stunning design projects through efficient collaboration. Full running-in at the beginning of the project allows the project to be smoother in subsequent rapid iterations. Enough harmonious communication is not only good for work, but also for the whole team to maintain emotional stability.

In the response web design project, the communication between the designer and the developer is fluent or not, it becomes more important.

When designing a responsive web site, the entire team must take full account of a large number of different sizes of screens, and designers and developers accustomed to "pixel precision" need to be fully prepared for a mobile interface and a large number of different proportions of equipment. In short, the response design makes the whole project delivery face a lot of uncertainties, which is also the difficulty of the response Web site project.

Hopefully, the next 5 tips will help teams successfully handle the communication and technical problems of this project.

　　1, priority focus on "extreme" size

When you face the two extremes of screen size, such as the phone screen and the desktop monitor, the question will come naturally. Some designers start from the dynamic perspective of their design, but most of the designers are still from the static page began to design: Choose a fixed height and width, draw the corresponding sketch or visual manuscript.

This leads to a few questions: what size does your development team prioritize? What size is the design team's first delivery of the high-fidelity visual manuscript? What equipment should you prioritize in terms of technical constraints?

I always recommend that you start with the most basic "extreme" dimensions of the user, recommending the minimum and maximum of current (2015) devices:

Apple x 568 px (iphone 5, because it is the retina screen, usually we are designed according to 72DPI, but the IPhone 5 display is actually 144px, so we gave such a design size. As a UI designer you should be very clear about @2x and @3x issues.

1600x1000 px (common size for desktop displays)

Of course, the actual situation of your users may be slightly different, a little investigation to determine the "extreme situation."

"When you just started a responsive Web project, start with the most common maximum and minimum size design." ”

When you face the smallest screen, you need to display the most important content on the small screen, and how to choose is a rather demanding thing. But in the face of the big screen, the things you think about are diametrically opposed: how do you show content as excessive? is the compartment too wide to reduce legibility? How can I select elements to avoid such a problem? Finally, in the face of two different sizes of the interface, you have to consider the way they are involved in the input, The smallest screen is usually a touch screen and a virtual keyboard, the largest screen, most of the time is the traditional keyboard mouse.

The most important thing here may be that you need to select two interface sizes at a time instead of the traditional one for a screen design and then complete the rest. Designers and developers are divided on this issue, the impact on the follow-up is very large.

2. Discuss content layout between different breakpoints

In the daily web design, everyone to the static wireframe betting so much attention, but in the response design, should always keep in mind that the layout of the page is flowing. This means that most of the users of your Web page are actually experiencing the "middle state" of the page. So you have to consider every adjustment and change in layout design as the size of the screen changes. For example, when the screen size becomes smaller, the text content needs to shrink, and the mixed-row picture will be indented to a column.

Try not to "assume" or "speculate" with your development team on the issues of adaptation and inability, and should not. Proactively identify this information and reach a consensus with your development colleagues before they have done too much. For complex layout changes, it is a wise choice to draw the first block diagram or sketch in advance to illustrate it separately. For some less important features, a brief discussion or email notification is sufficient.

　　3, for the picture material processing strategy early to prepare

A picture in a responsive web page, usually made up of a group of pictures of different sizes. For example, my personal site on the top of the big picture, is composed of a group of 6 pictures, resolution and size are different, to ensure that the various devices can match the corresponding picture.

The format and size of the picture often creates a barrier between the designer and the developer within the team. You can use PNG or JPG, icon fonts, and SVG to be used well on the web. In other words, there is no right answer: what more is available depends on the content and the resources themselves. But the important thing is that you have to agree on the format and stick with it. In addition, you may also want to delve into a common picture size system that is used in a variety of projects.

But for modern responsive web design, this is just a starting point. Now you need at least two sets of picture footage, one for the normal PPI screen, and one for the high PPI Retina screen. More complete response web pages, for the atlas and the material requirements are higher, the subdivision more, the pertinence is stronger.

Try to avoid leaving the filter decision for the response picture format to the end of the project.

At the very least, you have to make a basic distinction for screens of different pixel densities. Read this article about Srcset, or use tools such as Picturefill to ensure cross-browser support. If you feel the whole package is overwhelmed, start with the small part. Gradually adjust the Srcset property of the picture element is a good start, in the process, you will gradually see the response of the page more and more reliable.

　4, starting from the basic elements of thinking, the use of modular design

My response web design process is deeply influenced by the smacss of Brad Frost's atomic Web designs and Jonathan Snook. All two frameworks rely on small, reusable infrastructure components to implement a powerful network architecture.

So, in the process of handover with developers, I prioritize small, reusable components because they bring the same user experience and visual effects to different devices on different platforms. This consistency will be easier for the development team to digest and absorb. Furthermore, the reusability of the group pieces between different pages is also very strong, so if you design a set of efficient programs, there will be a useful future.

Imagine that you are designing a registration page with large headings, large HD images, and forms. Because the Web page is responsive, all of these elements vary in size as the device and screen are converted. In the early stages of project development, you should work with the development team to finalize the details involved in the page. What does it look like? What kind of validation mechanism? If you want to enter the form, how to match the touch screen and the traditional mouse?

　　5, let developers give visual and experience design feedback

Some designers do not allow developers to participate or provide feedback in product design meetings, usability design sessions, and other communication links. This indulgence and closure is wrong. You know, experienced developers also have a wealth of knowledge in the areas of product, experience, and design. Let them participate in these links, can make the product more mature. The front end and the designer overlap more in skills.

More and more designers are starting to write their own code, and developers are getting used to making quick prototypes, block diagrams, and also in private to fill in the knowledge of aesthetics and design classes. The advent of responsive web design has made the overlap between two occupations more and more, exacerbating this trend. Although there are no designer titles hanging on the developer's head, they can often speak amazing language and are thought-provoking.

Of course, the Division of roles and responsibilities is still extremely important. But tweaking a few small steps can actually improve the final product significantly. So, when you do the next round of usability testing, you might want to bring the developers together to discuss it.

Conclusion

All five techniques need to be implemented and supplemented. Most teams focus on the release of the product and on the card deadline, which is a stage to consider these issues, not for the product, nor for the designers and developers in the team at the moment.

At the beginning of the project development, a little planning, the late return is absolutely rich.