Nine considerations for the design of a responsive web page picture library

Response design is undoubtedly an essential part of the current web design field. The picture in the Response Web page is a cliché, and many of the arguments focus on how the image of the response site should be displayed. Continue to extend, how should a picture library in a responsive web site be designed?

Compared to a single picture, the gallery's display is undoubtedly more complex, involving more variables, so it is even more troublesome to implement. Next, let's take a look at the basic rules and techniques that are worth noting if you want to design a responsive picture library.

　1. Carousel Slide: Hide navigation as far as possible

The presence of navigation on the desktop may be nothing, but when viewed on the mobile side, the navigation remains as hidden as possible and appears when needed. And such as the left and right buttons and the point of view of the browse location, preferably in the cursor after the move up again, such a design can not only avoid user distraction, but also to avoid the content and navigation elements between the conflict, reduce the overall design confusion.

　2, avoid the use of a large number of portrait pictures

If you are designing a picture library that is similar to a grid layout, you might try to pick and landscape images, or square images. This design, while compatible with desktop design, also allows users to view the small screen better. Portrait of the picture on the phone to fit the portrait screen, if the cross, the picture will appear particularly small, browsing will be quite inconvenient. Horizontal is the best, if not, using a square image will be a good compatibility scheme. A responsive picture library is designed to take into account a variety of factors, and it is important to keep in mind the user's different browsing scenarios.

3. Support gesture operation on mobile end

Using clean up on the touchscreen is almost a user's instinct. Therefore, in the design of the response picture library, the sliding operation and other gestures to give users more power, so that the experience more realistic. Using arrow navigation on a mobile device is too tedious and old, and gesture interaction is more natural and more in line with the real interaction experience.

　4, disable the Lightbox effect on the mobile end

The Lightbox effect is probably the most common picture browsing mode on the desktop side of the page, and the picture appears as a pop-up box, zooming in with screen size and mouse operation. The use of this image browsing pattern is particularly extensive and frequent in the product presentation page, but it can cause a lot of user experience problems on the mobile side: Cover other interactive controls, no exit, size inappropriate, and so on.

　　5, let the navigation element low-key not ostentatiously

Navigation is especially important if you use the form of slides to present a large number of picture libraries. Users certainly don't want to spend too much time waiting to load, they will still click on their own speed, page, enter, exit, maintain, and so on. So when you want to use navigation elements, be sure to design them where they don't seem to be in the way. Don't let the small dots of the navigation cover text or links, and avoid complex controls, distracting the user and making the entire page more complex to design. Clickable jump navigation dot can let users quickly jump to where they want to go, improve efficiency, reduce unnecessary consumption. Of course, don't get too complicated! Balance is the most important!

　6, do not let pictures and video confusion

Usually, different types of media mix together no problem, but the user certainly do not want to look at the picture, suddenly found that the next picture into the video, the sudden sound and the additional flow of consumption is absolutely they do not want to encounter things! Split the video and the pictures so they know what's next, Don't let the accident happen.

　7, ensure that the picture display size do not exceed the maximum width of the original picture

This is important, though very basic, but it still needs to be stressed. Picture as far as possible not to fill more than the size of their own space, which will allow the image to display a pixel distortion effect. It is worth noting that in many cases the picture is completely filled with a block at the mobile end, but on the desktop side, the maximum can not exceed its width. It doesn't seem that hard? But there are still a lot of responsive pages, and when you pull the browser screen, there's a picture that's out of its size.

8, picture Scaling

If you have pictures in your gallery that involve scaling, try to make the picture smaller rather than larger. It's even better to set the exact size of the picture. In general, picture scaling uses percentages to control its size change, and if you have a property that is set to scale in percentages, the other related properties are best set to Automatic. For example, if you set the picture width to 50%, the height scaling should be set to automatic.

　　9, avoid the use of picture title

Using a picture title or other additional text will add a lot of problems to yourself and your users. The first problem is that it is forced to appear on the mobile-side interface. On the mobile side of the limited interface space, it may be squeezed with the picture, resulting in a confusing user experience. Another problem is that it may limit the use of your text. You have to figure out how it's divided, how much space to occupy, how to display on the desktop side and what to show on the mobile side, how to be normal, and too many variables to control it will be quite troublesome. The pictures are different, and the text always somehow covers the place that shouldn't be covered. The contrast between picture and text always varies with different pictures, which is also one of the troublesome places.

Conclusion

Be careful not to make a big mistake, today's rules are not complicated, but when you start responding to a picture library, these Grisse problems begin to appear and affect the entire design and experience in unexpected places. Focus on the user, and be careful to bypass these pits, will make your response page better and faster.