Understanding Response Web Design elements

Response Web design is now a hot topic in web design. In a way, it is very important to respond to the popularity of web design concepts because users are accessing the site in more and more diverse ways. Ipad,iphone,android mobile devices, desktops, notebooks-now our web design has to be used in many ways.

Let's look at the implications and principles of responding to web design.

Key features of

Response Web page design

To think that web design is "responsive" requires three key offerings. Web designer and developer Ethan marcotte--the person who responded to the web design by describing these features as follows:

Web sites must be built on a flexible grid. The pictures included in the design must also be flexible. In different environments, you must have different views through media queries.

Css-tricks changes its page layout based on the size of the browser window.

It is important to note that all three features must be implemented so that the real response page design takes effect.

Any design that lacks these features is not a response to web design. It is immutable.

Next, let's take a closer look at these three features to better understand how they blend and give us a complete response to the web design.

Flexible Grid

The term grid becomes ambiguous for web design. Saying that your site must be composed of a flexible grid does not mean that you are limited to selecting one from dozens of of the great grid systems available.

For columns, spacing, and containers defining their own parameters are often the best solution for Web design and can be as flexible as any existing system.

In fact, most existing grid systems are limited to using CSS classes to define size, spacing, and alignment. Trying to attach these restrictions to a response web design can be tricky and a lot more time-consuming than writing your own layout.

Whether you are using a preset grid system or using a custom solution, a flexible grid system is really important where your layout size and spacing mechanism is.

For web designers, this means giving up our beloved pixels and replacing them with the page layouts of relative units of measurement such as percentages and EM.

Of course, this does not mean that we no longer use pixels in our image-editing software (i.e., photoshop,fireworks, etc.). Instead, an added step that requires a simple mathematical calculation is part of the web design process as we convert our pixels into a page layout that uses relative units.

St Paul's Parochial website uses a flexible grid layout that can change the layout according to the browser's window size, and the layout changes are displayed in a smooth animation.

Flexible Picture

Images with our flexible grid move and zoom are a more critical feature in response to web design. Flexible images often give web designers a headache. Loading a zone large, out of size picture, and using the HTML width and height attributes to narrow it when we need more space to display content in smaller browsing devices is not a good practice to speed up web loading.

Of course, how much this problem depends on how much pressure the image has on your site. With the development of web design, we have seen fewer and less sites using images and picture libraries that are not necessary. Maybe it's a good chance to assess whether your web design needs as many pictures as it does now.

Another way to zoom pictures is to use CSS to crop them. The overflow properties of CSS, such as Overflow:hidden, allow us to crop pictures dynamically and make the surrounding space suitable for the new display environment.

We can also have multiple versions of images on the server, and dynamically use different sizes of versions based on server or client feature detection techniques such as user agents.

Finally, we can completely hide the picture, if we really want to focus on the content without the graph, you can set the picture to Display:none in the style sheet.

The picture elements in the vitamin are flexible and scale according to the browser window size.

Media Query

Media queries are certainly the most exciting (and most frightening) feature of responding to web design.

People often have the wrong understanding of the media query, consider it as a core part of the response design and think that flexibility is dispensable. The real truth is that media queries are almost useless without a solid HTML and CSS base that includes flexible grids and flexible pictures.

Media queries allow designers to create multiple layouts using the same HTML document, and to do so by selecting different styles based on user agent attributes, such as browser window size. Other parameters are azimuth, screen scheme, color (that is, how many colors the screen can render) and so on.

The following is an example of a media query choosing a style based on the window width:

<link rel= "stylesheet" media= "(max-device-width:320px)" href= "Mobile.css"/><link rel= "stylesheet" Media= "(min-width:1600px)" href= "Widescreen.css"/>

The media query is not explicitly a mobile solution or a flat-panel solution. Instead, the media query and response design allows us to think outside the screen size or scheme and start creating a flexible web site that adapts to all the different mediums.

UX London uses meta viewport to set the scale and layout width.

Response page Design What exactly is

Although we've looked at three features in response to web design, there seems to be nothing exciting about it. The fact that 90% forms the response page design is the beginning of a good web design. Well-organized HTML and flexible layouts are part of everyday work in modern web design. What Marcotte advocates in response to web design is to show us a new way to achieve good design practices that we should have done no matter what. In the modern environment, it is more necessary to provide flexible layout, so that we can better adapt to the existing diversity of browsing situation, we want to design more fluent and flexible.

Responding to Web design lets us focus on taking the time to do the right thing, not just how we write the code, but how to conceive new ideas and execute new designs.

8 JavaServer Magazine with flexible layout

that's not enough

Anyone who has had the experience of creating flexible content and media queries will realize that this is not the ultimate, all solution to creating a website that adapts to every user agent. Depending on the device they use, users often have different requirements for browsing through different browsing devices.

Mobile browser users may be most concerned about access to the most core information as soon as possible. For hotels, it may be menus, service phone numbers, physical addresses, and floors. In this case, downloading the entire site and explicitly hiding 90% of the content is not a perfect solution.

the right direction

Responding to web design is a step in the right direction. Many websites insist on getting a lot of benefits from the response design, and every designer should be able to execute the program and look for ways to optimize their design.

As designers make progress in adapting to a variety of devices and situations, the device is trying to find the perfect and direct way to display Web pages as much as possible.

The two are mutually reinforcing, and we will inevitably have more and more opportunities to create a more dynamic, attractive and beautiful web world.

And that's the thing to be excited about [中文版]

Reprint Please specify:
Author: rockux–web Front end
From: Understanding response Web Design elements