Dry！ How to place and process pictures and videos in responsive web pages

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

@ Chen Zimu: Responsive Web Design, is a popular web development idea, it is the use of flexible grid system, so that the display mode of the Web page can be accessed according to the screen size specifications and adaptive. By 2015, the number of users on the mobile side will grow from 800 million to 1.9 billion, which means that the current Web page we are designing for desktop browsers will have a very bad experience with their phones and tablets.

However, with the change of actual application situation, there are a series of complicated complications in response web design. The remainder of this article is a detailed description of how multimedia elements, such as pictures and videos, can be placed and processed in responsive web pages, and the ultimate goal is to help you make a reliable website that allows these elements to be seamlessly loaded on a variety of handheld devices to enhance the user experience.

Image processing in responsive web design

First of all, the response image processing methods. In response web design, the problem of image processing is more or less similar to the design of navigation bar in traditional Web pages. With the popularity of new mobile devices, the higher pixel density of the screen makes any one of the pages of the flaw is obvious, so the core problem of image processing is how to ensure that the site (especially the picture) in all aspects of the flexibility to be as flexible as possible, and ensure that each pixel will not be blurred in the

Picture Display problem

First, when a Web page responds to a device, it does not have a specific image release standard. And to address this problem, there are plenty of options available for you to choose from. At this point, however, the problem arises: in 3G mode, the image on the mobile device under the retina screen should be handled. In the case of poor speed, should the size of the picture be automatically optimized (reduced)? This is the so-called "art design" problem. The images provided on the Web site can be displayed on different screen devices, or they are far from enough. Small screen device users may not be able to see the details of the picture, then, should be in the "normal display" on the basis of this small screen to cut a separate version, so that users see the details.

It has been suggested that developers should be all the size of the scale of the pictures are uploaded to the site in advance, and set a good CSS and media query function, will be too large or too small pictures are hidden, so that the browser to download pixels exactly match the image. However, the actual situation is not the case, the browser before loading the CSS class, all the relevant pictures have been downloaded, which makes the Web page more bloated, loading time longer.

Possible solutions to picture problems

Before continuing, let's be clear: there is no solution to having every screen display a picture perfectly. But we can continue to explore more feasible solutions, as much as possible to improve accuracy, the following is our response to the image of the page problem, find the possible solution:

Bootstrap

If you start designing a responsive Web site, but you don't have a clue how to do it, you should try the bootstrap CSS framework. With the help of bootstrap, you can easily achieve your goal. More importantly, the style provided by Bootstrap and the classes that are extended on the underlying HTML elements will make the response of the picture easier to implement.

Focal Point

Focal point is a framework that can help you "grow" the picture and control the focus. This technique only uses CSS, and developers just need to add a class to the corresponding tag that contains the target picture.

CSS Sprites

If loading time is the first factor you need to consider (it should be), then you can choose the CSS Wizard, especially if you need to fit the device with the retina screen. When you apply a Web page to a high-resolution screen (such as Apple's Retina screen), you typically add larger picture resources and use media query in CSS to identify and fit the dimensions. However, the number and size of files increases dramatically, and the number of CSS selectors in the code is increased, and more files are referenced.

This can be improved if you use CSS sprites. You can include all the pictures you need for a Web page in a larger image for the selector to refer to. With just one HTTP request, you can get multiple picture footage locally. The photo-type material referenced by the label is not suitable for use with CSS sprites, but the icon footage and button styles you use in header and footer will be much more useful with CSS sprites.

Adaptive Blog

Adaptive image solutions can be used to detect the screen size of the device, for HTML embedding screen size requirements of the picture resources. This scenario is a typical server-side solution that requires JavaScript to be run locally to detect, but it mostly relies on Apache2 Web servers, PHP 5.x, and the GD library.

The best thing about adaptive pictures is that you don't need to change the tags. Some people think that a tag based solution is best, but that's not the case. For WordPress, such as content management system, adaptive image solutions with the combination will be very convenient.

If you want your site to be adaptive, you need to modify or add a. htaccess file on the server side. In addition, you will need to add a PHP file to your Web server's root directory and add JavaScript code to the site page. When you do this, the PHP script gets any requirements for the picture and adjusts the size output page according to the breakpoint specified by the requirement.

Plugin for output response pictures in WordPress web site

In the WordPress site, there are other plug-ins to achieve response-style pictures of the solution. The following plug-ins work the same as labels:

-PB Responsive Image

-WP Responsive Image

-simple Responsive Image

-picture Fill WP

In addition, there are many response-style WordPress themes available for users to choose from.

The ultimate solution to the picture?

Once again, please remember that all of these options for dealing with pictures have their limitations. For example, adaptive image scheme, it requires the combination of Apache and PHP, so it is good for content management, but it is unlikely to be perfect for the site platform or host server. In addition, an adaptive picture depends on the server's need to get picture size through the. htaccess file, which means that the captured picture is not on its own server, and the script in the htaccess is powerless. In addition, the script is not able to detect bandwidth, if you take the 3G version of the ipad Air access to such sites, the loading speed may be miserable. Most importantly, it doesn't solve the "art design" problem, it just adjusts the size of the original picture. So, for all of this, you need to experiment to find the most appropriate solution.

Video processing in responsive web design

There is no doubt that video is an extremely important marketing tool for websites. As a result, there is a growing demand for resilient, responsive video.

Just like the picture, it's a headache to have the pictures flexibly fit the web. This is not about the size of the video player, but even the basic page elements, such as the play button, need to be adapted and optimized for bizarre devices. Several solutions are provided below:

Video optimization for WordPress

Although WordPress offers a variety of responsive themes, these inline videos are not normally tailored to the screen size. This is why the Web page they are on may be stretched or asymmetrical. Fitvids This plugin perfectly solves this problem. This is a jquery plug-in that allows the video to fit on its own screen size. After activating the plugin, WordPress automatically adds the ". Post" class to the CSS selector when it publishes the video content. Save the changes, you can try to observe the layout of the Web page in different sizes of devices, feel the video playback experience, and see how it works.

In addition, there are more optional WordPress plug-ins:

-fluid Video embeds

-video Overlayer

-MARCTV Video Embed

-responsive Video

Manually embed video from another web site

YouTube and other similar video hosting sites typically have a fixed width and height in pixels and are embedded in the code. There's nothing wrong with normal web sites, but for responsive web pages, such videos are not suitable. These video site codes using built-in page frames and object tags are not possible with HTML5 video elements. To put it simply, HTML5 's tags are not possible to embed video from YouTube and Vimeo.

This time, CSS again come in handy. Specifically, you can maintain the intrinsic proportions of the video even if the container element shrinks proportionally. This technique can help you to embed videos of YouTube, Vimeo, and SlideShare streaming media sites into your Web pages and display them naturally. All you have to do is use

It is noteworthy that the process of stripping out video and encapsulating it to div by size is not easy, and that the technology is not highly feasible for multiple video sites. But if your site has been designed as a responsive page, the technology will work perfectly on your site.

Case

Here are some real-world examples of how the response Web site optimizes pictures and videos for different browsers and screens:

Case 1:bootstrap+jquery

This is a minimalist blog/portfolio site that uses bootstrap v2.2.2 and jquery. The former allows the site to use a large number of forms, modes, hints, buttons, turntable and response output, after the addition of jquery site flow layout ability to improve. jquery allows sites to be displayed in a variety of ways (such as displaying three columns on a desktop browser, displaying a column on a tablet, and displaying a column on the phone's screen).

Case 2:fitvids

This is a case of embedding video through Fitvids in the WordPress framework. The advantage of using this plugin is that it is easy to install and will make the video perfectly fit for the screen.

Case 3:focal Point

This case uses focal point to adjust the background picture and highlight the person's photo. Therefore, the Web designer in this case does not provide a series of different sizes of pictures, they just change the site's visual center of gravity, focus on the largest object.

Case 4: Adaptive pictures

Finally, this case uses an adaptive image scheme. The developer uses a. htaccess file, a php file, and a simple line of JavaScript code. The first two files can be placed under the server root, and this line of JavaScript code needs to be inserted into the header of the index file. To figure out these cases, you should visit their website.

Hopefully this instructional article will improve your understanding of response-style web design.

Original address: Graphicmania http://www.graphicmania.net/how-to-deal-with-images-and-videos-in-a-responsive-website/

Excellent network translation: @ Chen Zimu

This article by the excellent network uisdc.com original translation, the transfer please specify the source of the network translation, thank you for your small series.