To learn about the response web design with a small partner.

Responsive web Design

In the past, the Internet needed a computer, a cat.

Now, mobile phones, tablets, TV can be online.

Responsive Web design, written by Ethan Marcotte, a book apart published in detail on the principle of response.

A variety of devices can support networking, both advantages and disadvantages:

The good news is that we can log on to the Internet anytime, anywhere.

The bad news is that the designer's workload has multiplied, and the user has become increasingly picky and impatient.

In this kind of environment, the response design becomes the mainstream.

The challenges posed by responsive design

There are many challenges in response design.

First of all, the type of equipment, screen size varies. Small, medium and large in all kinds. Second, if you are a developer, you will understand that it is not easy to implement responsive design from a technical standpoint.

Mediaqueri.es offers a number of excellent response-style design cases

When responding to design on any project, it is important to prioritize the content, taking into account the combination of content and overall design, taking into account how content is represented on the page. You need to see how the different elements in the page are closely combined and work together to maintain a consistent and holistic style.

In this size, the elements can be arranged in such a way that you need to figure out the layout of the other dimensions when designing the response. How do I convert a large size page to a small size page? How do I convert a small size page to a large size page? How to ensure consistency of browsing experience in various sizes?

How to persuade customers to use responsive design?

Web design is a highly time-sensitive industry, we need to keep up with trends, and constantly learn. Response design is the most worthy of learning and time in this era.

Greenbelt Festival is an example of a very well worth learning response web design, image source mediaqueri.es.

Internet terminology is becoming more and more popular, now even customers, but also inkling, a lot of customers understand the design is not shallow. So how do you convince a client? Below I will talk about a little bit of communication skills with the customer, so that the customer can accept the response design (corresponding, pay you understand).

Psychographic

At the beginning of any project, you must understand, understand and analyze the needs of customers.

On the basis of meeting customer expectations, try to make the customer fully understand your design.

A beautiful response-style design modern Green home, image source mediaqueri.es.

You need to know what the customer wants. After converting your brain into a term, speak it in an approachable language.

For example, a customer might say that he wants to make the site work well on the IPhone and ipad. In this case, I would generally say, "yes-then the response technology will be able to work well on any device, not just the ipad and the iphone."

If your client knows a little bit, it will be nice to work together.

Stuff & Nonsense website is a precedent for responsive design, depending on the size of the screen, choose different illustrations, quite interesting, image source mediaqueri.es.

Can be a little time to give customers to do popular science, so that customers can better understand your work, communication is very smooth.

Response Design techniques and recommendations

So how do you create a responsive design?

The great discontent's interview is well known and is also an excellent case for responsive design, with mediaqueri.es images from the source.

Is there a best answer? The answer is no best answer, everyone's development process, design process is different.

However, there are several ways to recommend it, and some suggestions, hopefully some of them will help you, you can learn a few and combine them. Pay attention to many experiments, try different methods to see which is the most suitable.

Using image tools to design

Using PS and other tools to create a fixed-width model, this method may be the way most people design a Web site. But it still works. Use image tools to make the layout more intuitive.

UX London 2013 Scalable, very elegant responsive design, image source mediaqueri.es.

But don't be too rigid, design models that are separate for each dimension, or you'll be crazy for taking too long. can use the wireframe, not too fine, a lot of thinking about the content, size, layout of the three changes in relationship, how the whole?

Where is the change smaller? It's all about the chest before you start coding.

Design in a browser

This is a bit of a controversy. There's been a lot of debate online lately about this topic.

WWF's responsive design, image source mediaqueri.es.

In the browser design, refers to the completion of the wireframe phase, directly into the browser, using a variety of online tools to start the design. Without using any image tools.

If you can effectively use the online tools, then this kind of hair is very useful.

But many designers think this design will limit creativity and create better vision.

The Next Web site, even on the small screen, the content organization is still orderly, image source mediaqueri.es.

But for developers, they are more accustomed to using code, and there is no doubt that browser-style design is more appropriate for them.

Case:

CSS Tricks

Microsoft

Make a decision in the browser

This is one of the most popular ways of personal love. You can do a little work in the image software and use the online tools and browsers to do a little more work.

And I think that to test the quality of Web design, you have to check in the browser.

and fonts are often changed in the browser, using the browser to check the design, is a good way to help you quickly correct the design.

Microsoft's response design is quite interesting: the use of image clipping and segmentation, in different devices to reflect the same effect. Image source fmediaqueri.es.

And this approach is more flexible, can be used to optimize the design of the image tool, but also with the browser 鞥 better inspection design, view the results.

Content first, move first or follow desktop?

The first thing to remember is that no matter what, the content is limited. Content is the core of the design and is the subject of user browsing.

Philip House is a big to small, follow the desktop design, very creative, image source mediaqueri.es.

Second, whether your design is mobile first (start with small size layout, gradually enlarge size) or follow the desktop (from the full size desktop layout design, gradually shrinking), all depends on your habits and specific circumstances.

From small to large can get better compatibility, consistency. From big to small can be more creative.