5 Steps to Implement Responsive Web Design Method and Say Goodbye to Waterfall Model (Graphic Tutorial)
 Responsive Introduction You may be familiar with the typical "waterfall mode" development process: starting with system requirements analysis, then design, then front-end and back-end development, and finally evaluation and implementation. The linear nature of waterfall development is the main characteristic: when one phase is completed, the next phase begins immediately, and the two work together almost seamlessly. The "waterfall model" development process is designed to be carried out in sequence through a series of stages, and only needs to advance work in a single direction. Unfortunately, as problems continue to accumulate, they have to slow down to deal with various difficult problems. “Waterfall model” development process demonstration diagram:  The “responsive” design process is shown in the following figure:  The effect of responsive design on different devices:  How to implement responsive web design Step 1: Plan waterfall development In waterfall development, the framework diagram is mainly composed of layouts and widgets. They are set to a specific size (usually based on pixels) and allow little room for adjustment. These wireframes give specific grid/layout dimensions, but different screen resolutions will cause the layout to change and nothing will make sense. As a result, the navigation menu becomes unusable, the form page cannot be accessed, and the interface becomes cluttered. Responsive Web Design solves this problem without difficulty. You need to design different widgets for different views, and don't treat a page as a whole "page". The page is not the smallest unit - rather, scrollbars, text content, forms and other components are the smallest elements that make up the entire page. Wireframes must account for different screen sizes, so layout dimensions are not fixed. The layout can be changed from three columns to two columns, and on the smallest display devices (mobile smartphones), it can even be adjusted to a single column display. At the same time, you also need to change the user experience of the website - on small screens, the scroll bar is required to be operated not only with a mouse, but also with fingers. This means the block diagram is just a prototyping tool rather than a template, and will require some development and testing to ensure it performs on display. If design begins before these initial tests, unknown development problems will ensue. Regardless, the underlying vision of the project must remain intact, so maintaining open channels of communication between departments is essential. Step 2: Design waterfall mode development In waterfall mode development, the next step is to design according to the framework diagram, and make it colorful and full of vitality through fonts, colors, spacing and other design tools and techniques. Usually, the design will be modified back and forth, and through continuous updating of the design, the brand and design specifications will be gradually improved. Responsive Web Design To better use the allocated project time and resources, responsive web design should design layouts and components at different sizes. Responsive web design is no longer about pixel-perfect design. We believe that the workload of designing flexible widgets in an unfixed grid and designing layouts and widgets of different sizes is manageable, although it is already extremely challenging to complete a design that is compatible with desktop browsers. Improve your design quality by using HTML with fluid layouts in all environments. It’s a huge waste of time to consider every browser width instead of focusing on the overall user experience. For example, you need to ensure that the rotating banner’s text is responsive on small mobile devices and is designed to fit within the industry-recommended minimum size of 44px as a standard human fingertip. Designing for the user experience is just as important as designing for the look and feel of the product for all screen sizes. Step 3: Development in waterfall mode In the waterfall development method, once the customer confirms the design drawing, in the subsequent front-end development, various problems will be found in small screens. Unfortunately, due to the linear nature of the waterfall model, these unforeseen problems can only arise as the project progresses. Responsive Web Design In an agile, responsive development process, designs must be based on flexible grids. Components need to be planned and prototyped by developers, and tested at every stage. To ensure that components are the smallest possible building blocks, the code needs to be optimized. Because components can be easily added and removed from the layout, this was not planned for in the initial design. Avoid problems caused by required modifications through good collaboration between developers, designers, and planners. In this way, team members can reach a consensus and discover and solve problems early. Step 4: Patient Testing Waterfall Development The final stage of standard waterfall development is to evaluate the site through unit and functional testing. Problems discovered at this stage may require re-planning the original concept of the project, and sometimes a newly launched device may even deal a heavy blow to the project. The requirements analysis team and the design team have to re-plan and re-design to take into account these changes, and will spend more time to make modifications. Responsive Web Design During responsive development, every stage is tested in multiple browsers and on different screen sizes, so problems can be discovered early. This can also reveal issues where a certain mobile environment does not match the framework diagram, and understand the performance of the design on different platforms. Responsive Web design will complete the project prototype as early as possible, allowing customers to check the results earlier to achieve a win-win situation. Step 5: Discover problems early and solve them as soon as possible. In the traditional waterfall development process, there is no process of design and interface iteration. Waterfall development ignores small details in the project construction process, which causes some problems and conflicts with customer expectations. Although the issues were eventually resolved through constant and timely communication with the client, the severity of these poor decisions remained unnoticed. Responsive Web Design A responsive approach achieves the same progress while using dynamic code to show customers the implementation process every step of the way. This way, this early work helps drive the next phase of work and allows key revisions to be made before the deadline. Summary Adopting agile responsive web design can free you from the waterfall mode. It will simplify your design and development work, make you more efficient, and maximize your brand image on all possible platforms. The real challenge is to break out of waterfall development and become a responsive design team. But just follow these five steps and you’ll say “bye, bye” to the waterfall model and “hello” to responsive web design. Guest author Travis Sheppard is Vice President of Technology at BGT Partners. BGT was named one of the 15 best places to work by Advertising Age in 2010, 2011, and 2012. It provides interactive marketing and technology solutions to companies around the world to help them strengthen brand promotion, tap more partners and carry out business transformation. Original source: Bye, Bye Waterfall: 5 Steps to Implement Responsive Web Design |
<<: Example of implementing text wrapping in html (mixed text and images in html)
>>: The difference between where and on in MySQL and when to use them
Recommend
How to connect to MySQL remotely through Navicat
Using Navicat directly to connect via IP will rep...
Bootstrap+Jquery to achieve calendar effect
This article shares the specific code of Bootstra...
Summary of 3 ways to lazy load vue-router
Not using lazy loading import Vue from 'vue&#...
How to ensure the overall user experience
Related Articles: Website Design for User Experien...
Mysql5.7.14 Linux version password forgotten perfect solution
In the /etc/my.conf file, add the following line ...
Detailed installation and configuration tutorial of PostgreSQL 11 under CentOS7
1. Official website address The official website ...
Example code for implementing fullpage.js full-screen scrolling effect with CSS
When I was studying CSS recently, I found that I ...
15 Best Practices for HTML Beginners
Here are 30 best practices for HTML beginners. 1....
vue $set implements assignment of values to array collection objects
Vue $set array collection object assignment In th...
Explanation of the use of GROUP BY in grouped queries and the SQL execution order
In SQL, GROUP BY is used to group data in the res...
Three ways to achieve text flashing effect in CSS3 Example code
1. Change the transparency to achieve the gradual...
Vue implements the method of displaying percentage of echart pie chart legend
This article mainly introduces the pie chart data...
How to reduce memory usage and CPU usage of web pages
Some web pages may not look large but may be very...
When Navicat connects to MySQL, it reports 10060, 1045 errors and the location of my.ini
Navicat reports errors 10060 and 1045 when connec...
A brief analysis of the difference between and and where in MySQL connection query
1. Create a table CREATE TABLE `student` ( `id` i...