Responsive Web Design: A full response web design tutorial

Article Description: responsive web design takes into account multiple platforms, a variety of screen sizes, can optimize the network browsing experience of a variety of devices.

Responsive design has now become the focus of web designer learning. There are a lot of related discussions in the Web Discovery Group, which shows that we have more and more contact with this kind of cases at ordinary times.
You will gradually find that more and more enterprises and customers around us are concerned about the response Web site, as a diligent designer, how can we not understand it?

Responsive web design takes into account multiple platforms, a variety of screen sizes, can optimize the network browsing experience of a variety of devices.
When you do not know what device users use, do not know the user's screen size, if you want to achieve a better layout, you can use the response design.
In the design of the response, the content should be designed specifically, and the adaptability of the content under different environment should be given priority.

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 multiple 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 speak a little bit with the customer communication skill, lets the customer accept the responsive design (corresponding, the salary 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.

Do you have the 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? How to change?

Where is the change small? Where is the big change? Before you start coding, it's all about the chest.

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.

Some tools

Some useful resources are available here:

Grid

• Gridset
• Gridpak
• Twitter Bootstrap
• Zurb Foundation
• Inuit.css

Font

• Typecast
• Typekit

Style Guide & Pattern Library

• styletil.es
• Brad Frost ' s pattern Lab
• Paul Robert Lloyd ' s barebones
• Pea.rs

Case study

• David bushell:a Responsive Design Case Study
• David bushell:gloople:a Responsive Design Review
• David bushell:responsive Design for Kings Transfer
• NHS Responsive Design Case Study
• Our very own case studies section has some great tips on the responsive design.

Other

• Responsive Design Weekly Newsletter