Product requirements and design processes for responsive web sites

In this translation, we continue to address the topic of web Design in response style. The previous several related articles to the concept annotation, the method explanation mainly, this article is around an actual website case launches, from the demand, the process, the step detail and so on aspect described the response design in the project practice way.

Some of the points in this section will overlap with the previous ones, and we will provide an entrance to the corresponding articles in these places to facilitate in-depth reference reading. Next enter the text.

By 2015, the number of mobile internet users will exceed those of desktop users, according to DailyTech. In addition to smartphones, the number of users who use tablets or even televisions to surf the internet continues to grow. In this situation, how to make our website compatible with various types of equipment as far as possible, and ensure a good user experience, this will be an increasingly important issue.

Through the design and development of the response style, we can make the site page with the browsing device to respond to the different, dynamic adjustment layout structure, element specification style, the same content in different formats presented to the users of different devices.

If you are not familiar with the response web design, you can first refer to our previous study on the concept of response design, components and basic ideas for the implementation of the article, a full range of preheating.

What is the appropriate way to adopt a responsive web design

When customers ask for product feature mobility, there are solutions that we can choose from, including native client applications, Web applications, and so on, and what is the right way to do it, depending on the specific requirements. Also consider whether the site itself needs to be implemented for mobility. Although a responsive site is not a purely mobile solution, in some cases this is a very worthwhile approach to consider.

Your Heart Ghost

The whole process is challenging to design and develop a new mobile version site or client application. Unless the product is officially online, you cannot really understand whether it will succeed or not. Instead of simply spending resources to build mobile sites or develop client applications for mobility, it is better to focus on making the original site more resilient and to have the best possible user experience in a variety of mainstream mobile devices.

You want to save costs

To create a responsive site, there is a natural need for experienced interaction, visual design and front-end developers. The resources needed, especially in terms of time, are about 20% to 30% more than the average web site, but much lower than the cost of creating a mobile version of the site alone or designing a client application. From the maintenance point of view, it will be much easier.

You want the site to be compatible with future new devices

The so-called mobile version of the site, usually for a certain type of specific specifications of the equipment to create a separate, elastic is relatively poor. New mobile devices are emerging, the traditional mobile version of the site needs to be constantly updated to maintain, in order to ensure that the new equipment to work well. The response design can be judged by the specific specifications of the device browsing environment, using different presentation methods to display the content, without the maintenance of a specific specification and better adaptability.

More

On the way of mobile Web site selection, you can refer to our previous article "Out of the maze of mobile Internet-the method of mobile Web site strategy."

Design process for responsive web pages

We will use a real hotel website as an example to demonstrate the process of responsive web design. This site was created by us in September just for the MacDonald hotel chain. In the entire design development process, there are a few key steps that we are going to start learning each:

1. User research and Equipment specification estimate

2. Make wireframe Prototype

3. Visual design

4. Front-End Construction

User research and equipment specification estimates

Early, through user research, we can understand the user group to use the type of equipment distribution, and estimated several typical response specifications, used to plan different presentation. There are several issues that need special consideration:

How much difference does the user have on different devices?

In the past, we often assumed that users were highly targeted when using mobile devices to access a Web site, such as getting a hotel address on a trip and booking a room. But the reality is not only that-users of mobile devices, such as smartphones and tablets, will increasingly use the network in relatively stable and calm conditions. So in many cases, the user use different device target difference is not so large, we can not one-sided assumption of different types of equipment users of the requirements of the difference in functionality.

What should be considered in terms of functionality and content presentation, from a technical standpoint?

For a variety of complex web sites, the need for different types of equipment for the function and content prioritization, so that in the development phase through the CSS to define different response rules, the most reasonable style specifications and layout of the presentation; especially for mobile phones and other small screen equipment, need to spend some more thoughts.

Making wireframe Prototypes

Through the wireframe, we can plan and define the logical structure behind the responsive visual effects. (For Wireframe prototypes, refer to our previous "wireframe prototype's nature and Practical Application Overview")

We have planned several typical screen sizes based on previous research and estimated results. In this case, we've chosen three typical mainstream devices, including desktop displays, ipads and iphones, because, according to our user research, the vast majority of users use these three devices.

It is important to emphasize that the purpose of the response design is to preset the output format of the function and content for the screen specification range of different devices. So we just need to select some representative equipment without having to look at all the known specifications; The main goal of our wireframe prototypes is to plan the logic behind the style.

At this stage, we must be clear about what key pages throughout the site are representative of functionality and layout. For this case site, "key pages" include the homepage, the booking process page, the hotel details page and so on.

Start planning

First, define the structure grid in each of the key specifications. We created three page templates with a width of 1024 pixels (desktop display), 768 pixels (the ipad vertical screen width), 320 pixels (iphone vertical width).

As shown in the figure above, starting with the width of each column allows for a relatively simple planning effort that helps us focus on responsive layout changes.

Communication and review

The next thing we need to consider is how the module components in each column should be adapted and adjusted in a way that scales with the width of the page. In this process, it is very important to maintain communication among the team members, including visual designers, front-end developers and so on, using the preliminary wireframe prototype, with everyone to communicate module components in the layout and style of the adjustment plan, as far as possible in the early let the relevant members of the entire planning to have a good idea, and early detection of front-end implementation, and other aspects of potential problems.

Home

Perhaps for your own actual project, other pages are more important or more representative than the home page. This is not a problem, you can adjust the specific page planning order; Our project case is starting from the homepage. The following illustration shows the wireframe prototypes of the three response specifications that we made for the first page.