Say "Goodbye" to Waterfall mode: teach you 5 steps to implement responsive web design

Congratulations you have finally convinced the leaders that your next Web design project needs a responsive design. Although persuading them to believe is a very difficult thing to do, you can't rest in honor now. Now the key question for the project is: How to lead your team to build responsive design?

Introduction to the response

You may be familiar with the typical "waterfall mode" development process: start with the system requirements analysis, then proceed to design, then start the background development, and finally evaluate and implement. The linear nature is the main feature of waterfall development: When this phase is completed, the next stage immediately begins, and the two work together almost seamlessly. The "Waterfall mode" development process is done by designing a series of sequential stages, only to move forward in a single direction, and unfortunately, as the problem accumulates, it has to slow down to cope with all sorts of tricky problems.

"Waterfall Mode" Development process Demo diagram:

The so-called "responsive web design", which refers to the use of the same set of code in the construction of the website, so that the content of the site in PCs, tablets and smart phone browser can be normal display. The days of creating multiple versions of Pc,mobile to publish the same content are gone. Now you can build a very flexible website to cope with all the running environments.

The response design process is shown in the following illustration:

So why use response design instead of Waterfall mode? Waterfall mode is designed only in accordance with standard desktop browsers, and in addition, almost no other design development environment is considered, which is its biggest drawback. Agile responsive Design takes these cross-platform issues into account from the outset, allowing for more detailed early-stage framing, design, and testing, which are omitted in waterfall mode. Once implemented, Web sites based on responsive design will be properly presented on PCs, mobile devices and tablets.

The effect of the response design on different devices display diagram:

So how do you implement responsive web design in your team? Below, we review the development steps of the typical waterfall pattern and show how to make them responsive design patterns.

How to implement responsive web design step one: Planning

Waterfall Mode Development

In the waterfall pattern development process, the frame diagram mainly consists of the layout and the small parts. They are set to a specific size (usually based on pixels), and there is little room for adjustment. These frames give a specific grid/layout size, but different screen resolutions can cause the layout to change, and everything becomes meaningless. Eventually, the navigation bar menu is not available, the form page cannot be entered, and the interface becomes cluttered.

Responsive web Design

It is not difficult to solve this problem. You need to design different parts for different views, and don't use a page as an entire page. The page is not the smallest constituent unit--it is the scroll bar, the text content, the form, and other components that are the smallest elements that make up the entire page. The frame chart must consider different screen sizes, so the layout size is also not fixed. The layout can be changed from three columns to two columns, on the smallest display device (mobile smartphone), and can even be adjusted to a single-column display.

At the same time, you need to change the user experience of the site--on a small screen, it requires that the scroll bar not only be manipulated by the mouse, but also that people can control it with their fingers. The framework diagram is just a prototype design tool, not a template, and requires some development and testing to make sure it performs on the display. If you start the design before these initial tests, some unknown development problems will ensue. In any case, the fundamental vision of the project must remain unchanged, so it is essential to maintain an open communication channel between the departments.

Step Two: Design

Waterfall Mode Development

In waterfall mode development, the next step is to design the frame diagram and make it colorful and vibrant with fonts, colors, spacing, and other design tools. Usually, the design will be changed back and forth, and through the design of constantly updated to gradually improve the brand and design specifications.

Responsive web Design

In order to better use the assigned project time and resources, responsive web design should design different sizes of layouts and parts. Responsive web design no longer uses the perfect pixel based design. We believe that the design of flexible parts in an unfixed grid and the workload of designing different sizes of layouts and parts are manageable, although it is already challenging to finish the design that is compatible with desktop browsers.

Let HTML use the fluid layout in all environments to improve design quality. Instead of focusing on the user's overall experience, considering each browser width is a waste of time. For example, you need to make sure that the originals of the rotating banner on a small mobile device are fast-reacting and are designed according to the industry's recommended minimum 44px as the standard human finger tip size. It is equally important for the design of the user experience and for the appearance design of all screen sizes.

Step Three: Develop

Waterfall Mode Development

In the waterfall development approach, once the customer confirms the design, the next front-end development will find problems in the small screen. Unfortunately, due to the linear nature of the waterfall pattern, these unforeseen problems can only occur as the project progresses.

Responsive web Design

In the agile response development process, the design must be based on a flexible grid. Developers need to plan and prototype the parts, and test them at every stage. To ensure that the part is the smallest component possible, the code needs to be optimized. Because parts can be easily added to and removed from the layout, they are not planned in the original design. Avoid all kinds of problems caused by necessary modifications through good collaboration between developers, designers, and planners. In this way, the members of the team reach a consensus, you can find early and solve the problem.

Step 4th: Patient Testing

Waterfall Mode Development

The final stage of standard waterfall development is to evaluate the site through unit and functional testing. Problems identified at this stage may require a redesign of the project's initial assumptions, and even sometimes a newly listed device may be a heavy blow to the project. The requirements Analysis team and the design team have to be redesigned and designed to accommodate these changes and will spend more time making changes.

Responsive web Design

During the response development process, each phase is tested in a variety of browsers and different size screens, so problems can be detected as early as possible. This also discovers the problem that a mobile environment does not match the frame diagram, and the performance of the design on different platforms. Responsive web design will complete the project prototype as early as possible, so that customers can check the results earlier to achieve a win.

Fifth step: Early detection of problems, early resolution

Waterfall Mode Development

In the traditional waterfall development process, there is no process through design and interface iteration. Waterfall development ignores the small details of the project construction process, causing some problems and conflicts with customer expectations. The seriousness of these bad decisions remains undetected, although the problem is solved by constantly communicating with customers in a timely manner.

Responsive web Design

Response solution, while making the same progress, using dynamic code to show the customer each step of the implementation process. In this way, these early work facilitates the next phase of work and can make critical changes before the deadline.

Summarize

Agile Responsive web Design frees 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 five steps above, you'll say "Bye, bye" to the waterfall model and say "hello" to the responsive web design.

Guest author Travis Sheppard is the technical vice president of BGT. BGT is one of the 15 best places to work in 2010,2011,2012 by the "Advertising Age." It provides interactive marketing and technology solutions to companies around the world to help companies strengthen their branding, tap more partners and make business changes.

Source: Bye, Bye waterfall:5 Steps to implement responsive Web design

Article Source: webapptrend.com