Web design implications and principles: responding to Web design

Article Description: 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 a number of ways.

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 a number of ways.

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

Key features in response to web 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-describing these features as follows:

• Web sites must be built on a flexible grid basis.
• The pictures included in the design must also be flexible.
• In different environments, you must be able to 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 not to be changed.

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 of the 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.

This does not mean, of course, 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 School 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 pictures

Images with our flexible grid move and zoom are a more critical feature in response to web design. Flexible images often make web designers a bit of 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 big a problem this is 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 inquiries

Media queries are no doubt the most exciting (and most frightening) feature of responding to web design to people who are unfamiliar with them.

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 situation 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 to meta viewport set the scale and layout width.

What is the response to Web design?

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 a flexible layout, so that we can better adapt to the existing diversity of browsing situation, we have 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 also the idea of new ideas and the implementation of new designs.

8 Faces Magazine with flexible layout

It'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 a hotel, it may be a menu, a service phone number, a physical address, and a floor. 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, more attractive and more beautiful web world.

And that's the thing to be excited about.