Say "goodbye" to Waterfall mode: 5 steps to implement responsive Web Design

　　

 

Congratulations, you finally convinced the leaders that your next Web design project requires responsive design. Although convincing them that it is a very difficult task, you cannot rest on honors now. Now the most critical question of the project is: how to lead your team to build responsive design?

Responsive Introduction

You may be familiar with the development process of the typical "Waterfall Model": Starting from the system requirement analysis, then starting the design, then starting the development in the front and back, and finally evaluating and implementing it. Linear nature is the main feature of waterfall development: When this stage is completed, the next stage begins immediately, and the two work almost seamlessly together. The development process of the "Waterfall Model" is carried out by designing a series of stages in sequence, and you only need to move forward in a single direction. Unfortunately, as problems continue to accumulate, You have to slow down, to cope with various thorny issues.

"Waterfall mode" development process demo:

　　

 

The so-called responsive Web design refers to the use of the same set of code During website construction, this allows the website content to be displayed on PCs, tablets, and smartphones. The days of creating multiple versions, such as PC and mobile, to publish the same content are gone forever. Now you can build a very flexible website to cope with all the running environments.

Shows the responsive design process:

　　

 

So why is responsive design rather than waterfall? Waterfall mode is designed only according to the standard desktop browser. In addition, almost no other design and development environment is considered, which is its biggest disadvantage. Agile responsive design takes these cross-platform issues into account from the very beginning, so as to carry out more detailed preliminary framework diagram, design and testing, and these tasks are omitted in the waterfall model. Once a responsive design-based website is implemented, it will be correctly displayed on PCs, mobile devices, and tablets.

Diagram of the effects of responsive design on different devices:

　　

 

In this case, how can we implement responsive Web design in the team? Next, we will review the development steps of typical waterfall models and explain how to turn them into responsive design patterns.

How to implement responsive Web design step 1: Plan

Waterfall Model Development

During the development of waterfall mode, the frame chart mainly consists of layout and widgets. They are set to a specific size (usually pixel-based) and there is almost no room for adjustment. These frame charts show the size of the specific GRID/layout, but different screen resolutions may cause layout changes, and everything becomes meaningless. In the end, the navigation bar menu cannot be used, the form page cannot be accessed, and the interface will become messy.

Responsive Web Design

It is not difficult to solve this problem. You need to design different parts for different views, and do not set a page as a whole "page ". The page is not the smallest unit-it is the scroll bar, the text content, the form and other components are the smallest elements of the entire page. Different screen sizes must be taken into account in the frame chart, so the layout size is not fixed. The layout can be changed from three columns to two columns, and displayed on the smallest display device (mobile phone), or even in a single column.

At the same time, you also need to change the user experience of the website-on a small screen, the scroll bar is required not only to operate through the mouse, but also to be controlled by people with fingers. In this way, the frame chart is just a prototype design tool, instead of a template, and must be developed and tested to ensure that it can be executed on the display screen. If you start designing before these preliminary tests, some unknown development problems will come one after another. In any case, the fundamental vision of the project must remain unchanged. Therefore, it is essential to maintain open communication channels between departments.

Step 2: Design

Waterfall Model Development

In the development of waterfall model, we will design based on the frame chart, and make it colorful and vibrant through fonts, colors, spacing, and other design tools and techniques. In general, the design will be modified back and forth, and the brand and design specifications will be gradually improved through continuous design updates.

Responsive Web Design

In order to better use the allocated project time and resources, the responsive Web design should design layout and components of different sizes. Responsive Web design no longer uses pixel-based perfect design. We believe that designing flexible components in an unfixed mesh makes it controllable to design la s of different sizes and the workload of components. Although the design can be compatible with the desktop browser, It is very challenging.

Let HTML use Fluid layout in all environments to improve the design quality. Without focusing on the overall user experience, it is a waste of time to consider the width of each browser. For example, you need to ensure that the original rotating banner operations on small mobile devices are quick responses and are designed according to the industry-recommended minimum 44px as the standard size of the human fingertip. The Design of user experience is equally important to the design of all screen sizes.

Step 3: Development

Waterfall Model Development

In the waterfall development method, once the customer confirms the design drawing, There will be various problems in the small screen in the subsequent front-end development. Unfortunately, due to the linear characteristics of the waterfall model, these unpredictable problems can only occur as the project progresses.

Responsive Web Design

In agile responsive development, the design must be based on a flexible grid. Developers need to plan and prototype components and perform tests at each stage. Code optimization is required to ensure that parts are the smallest possible component unit. The components can be easily added to and removed from the layout, so they were not planned in the initial design. Through good collaboration between developers, designers and planners, we can avoid various problems caused by necessary modifications. In this way, the team members can reach a consensus to discover and solve the problem early.

Step 2: Test your patience

Waterfall Model Development

In the final stage of standard waterfall model development, the site is evaluated through unit testing and functional testing. Problems found at this stage may require re-planning the project's initial vision, and sometimes a newly listed device may have a heavy impact on the project. The Demand Analysis Team and design team have to re-plan and design to take care of these changes and will spend more time making changes.

Responsive Web Design

In the responsive development process, each stage is tested in a variety of browsers and screens of different sizes. Therefore, problems can be detected as early as possible. In this way, we can also find out the mismatch between a mobile environment and the framework, and understand the performance of the design on different platforms. The responsive Web design completes the project prototype as soon as possible, allowing customers to check results earlier to achieve a win-win situation.

Step 5: Discover and solve problems as soon as possible

Waterfall Model Development

In the traditional waterfall development process, there is no iteration through design and interface. Waterfall development ignores small details in the project construction process, which causes some problems and conflicts with customer expectations. Although the problem was solved through continuous and timely communication with the customer, the seriousness of these bad decisions was still unknown.

Responsive Web Design

While making the same progress, the responsive solution uses dynamic code to show the implementation process of each step to the customer. In this way, these early work will facilitate the next phase of work, and key modifications can be made before the deadline.

Summary

Using agile responsive Web design can free you from the waterfall model. It will simplify your design and development work, make your work more efficient, and maximize your brand image on all possible platforms. The real challenge is to jump out of the waterfall development model and become a responsive design team. But as long as you follow the above five steps, you will say "bye, bye" to the waterfall mode, and say "hello" to the responsive Web design ".

The guest author, Travis Xie pard, is the vice president of technology at BGT Partners. BGT was rated as one of the top 15 places in the Advertising Age in 2012 and in China. It provides interactive marketing and technical solutions for global enterprises to help them enhance brand promotion and explore more partners and make business changes.

Source: Bye, Bye Waterfall: 5 Steps to Implement Responsive Web Design

Source: webapptrend.com