How can web products quickly support mobile?
Many product newbies may choose to do responsive product design. Because responsive front-end experience is similar to design, it is assumed that it can be left to front-end development and not take too much time to complete.
But in reality, complete a web product from PC to mobile cross-platform. The response is not simple.
Responsive has become more and more Internet companies in the website construction, because can reduce the development cost, rapid development and a variety of templates, so attracted many people to choose. But you know what? Responsiveness is not a panacea.
What is the response?
Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, it means that a website can accommodate multiple terminals — rather than making a specific version for each terminal. The concept was born as a solution to mobile Internet browsing.
Responsive layouts can provide a more comfortable interface and a better user experience for users of different devices, and with the popularity of large-screen mobile devices, it is no exaggeration to describe them as a trend. As more and more designers adopt this technology, we’re not only seeing a lot of innovation, we’re also seeing patterns taking shape.
▲ Responsive pad, Mobile, PC
However, there are still three mistakes of responsiveness, which I share with the students of product and operation
1. Responsiveness is not equal to only having to develop once
Even responsive, front-end development students still need to complete the development of web pages, mobile pages. So the development effort is still 2 sets. However, because responsive Web and mobile are similar in functional logic, page style, and interaction behavior, more code capabilities can be reused.
If it’s on the IPAD side, you need to develop a pad version.
2. Responsive has high requirements for UI design
Unlike the product manager, the UI designer’s graphics directly affect the front-end developer. Therefore, whether UI designers can design according to responsive specifications and understand the size and structure of the responsive Web will directly affect the workload.
So you can see that many web products are already responsive in advance, such as the well-known wordpress, ASK2, are built-in responsive.
WordPress Open Source Web framework
▲ WhatSNS open source framework
There are already mature responsive frameworks on the market that can reduce UI design effort.
3. Product managers need to tailor requirements for responsiveness
The biggest change in responsiveness is the change in user usage scenarios. From PC to mobile, navigation bars, buttons, content display fields all have an impact.
Therefore, what functions should be mainly implemented for users in mobile terminal responsiveness? Or those data browsing? It’s the product manager’s job to focus on.
▲ In responsive mode, functions remain unchanged, but the usage scenarios of functions change
In responsive mode, there are many changes between web and mobile terminals. For example, a community product adopts responsive structure. The PC navigation bar and the responsive navigation bar
The Web side of the nuggets community
▲ The response form of gold digging
With a proven third-party framework, responsiveness can help address the cost, time, and design effort of mobile development. And because the logic is similar, reactive layouts can even reduce the effort and time of testing.
4. How to judge whether the product is responsive?
Here are four dimensions of experience to help you verify
1. The same page should look comfortable at different sizes and scales;
2. The same page should look reasonable at different resolutions;
4. Experience on the same page should be unified under different operation modes (such as mouse and touch screen);
5, the same page on different types of devices (mobile phones, tablets, computers), interaction should be consistent with habits.
From user experience design public account
Now it’s less and less reactive
Because of the complexity of the current demand, it is no longer the ability of users to browse and query data. H5 on mobile needs to provide activities such as content generation, user interaction, and logic. Just reactive is not displayed.
So responsiveness is destined only for content presentation, content browsing scenarios. For example news website, information website, stock securities website. However, it is not suitable for responsive scenarios involving user transactions and business services, which have higher requirements for mobile scenarios.
At the same time, the mobile terminal and the Web terminal have different user paths due to their unique usage scenarios.
Product managers should honestly return to requirements research and prototyping, and output mobile prototype pages.
Product managers can play with multiple apps to compare responsive and proprietary H5. The limitations of responsiveness will clear up as you play more apps.