Responsive web design is now the standard, we need responsive technology to cope with increasingly fragmented screen sizes, and web designers are trying to get it right. The responsive design of pictures and galleries in web pages is also one of the key and difficult points. They are the most common and visible elements on a web page. There’s nothing more frustrating than opening up a beautiful website and having images and galleries that just don’t seem to match the page.
If you want to design responsive images and galleries, today’s 7 tips will give you a clear and systematic idea. They do not involve specific code implementation, more involved in the design process and processing techniques, done these work, specific implementation is not difficult.
1. Consider the aspect ratio
There’s no denying that the image viewing experience on the desktop is completely different from that on mobile. For the vast majority of websites, images are displayed in similar locations. The designer’s job is to make sure that as the site changes with screens and devices, images don’t get weird and distorted as the layout scales.
At this point, always keep in mind the aspect ratio of the image, and always keep the aspect ratio unchanged.
Back on a desktop web page, the large background image or image at the top of the page looks great, but when it switches to a mobile device, the scale and orientation of the screen changes in the first place, so does it still look good? Will the presentation of information be lost when the image is reduced in size? Does it get stretched?
At this point, it is particularly important to control the aspect ratio of the picture. Keep the original image from being stretched, and keep the aspect ratio of the portion of the image displayed as reasonable as possible to match the corresponding screen, so that you don’t have to worry about too many responsive breakpoints, causing you to upload too many images.
2. Consistency of size and proportion
There are breakpoints in responsive design. In order to accommodate different screens, images need to be cropped to different proportions and sizes, which directly affects the overall design and development process.
Many people just upload an image to their CMS and expect it to look perfect. That’s not realistic.
Each image should be cropped to a reasonable size and placed in an ideal position to ensure that it will look the way the user expects it to. The back end may take considerable time and effort to do this, but the effort is well worth it.
3. Use a rotation map or gallery
Wheel broadcast graph control and library control is the most common picture carrier in the website, and can also be more freely manage pictures. Especially if you are using well-known or widely adapted third-party controls, the heavy lifting of controlling image elements will be taken over by these controls.
However, we mentioned before the image aspect ratio and size control should also be paid attention to, otherwise it will also make the display effect of the webpage awkward.
In addition, you need to use what controls in what situations. If you have several high-quality images or need to recommend specific articles or features, then you need to use the slideshow rotation control. If you have a large number of images that need to be displayed, and you can zoom out and have no readability problems, use the gallery class controls to display them. Many portfolio sites often use gallery controls.
4. Try to avoid using Captions
While captions can make your images more informative, they have a very direct impact on how your web page works. Avoid them and, if necessary, present them in other ways.
Add the Caption property and it does render well on the desktop, but it’s often a problem on the small screen. In order not to let these minor usability issues affect the user experience, avoid them as much as possible. It doesn’t pay to drive users away because of small problems like this.
5. Mix pictures and videos with caution
If a site contains both images and videos, it should be acceptable to both users and designers, even if many users are already used to it.
However, it is important not to have images and videos in the same control or block, even on the same page. Maybe it looks cool, maybe some pictures and videos can match, but more videos and pictures are difficult to keep the same size, resulting in some pictures or videos will always leave blank and gap.
The best solution is to display them separately to avoid the differences and conflicts in media attributes and sizes. This applies to almost any design element, but especially to graphics and video.
6. Cut out unnecessary elements
While scroll charts and gallery controls are great, many designers tend to add a lot of junk to them, most commonly a bunch of navigation arrows, buttons, text, and even action call buttons. The list goes on and on.
In general, users are already familiar with how to interact with controls such as a wheel map. Unless your design is so different from our perception that you have to use other navigation methods to guide the user.
Keep only what the user wants, keep things simple, and don’t give too many choices. Simplifying your design can actually increase your conversion rate.
7. Use only high-quality images
While this truth is self-evident, it must be repeated. If you don’t have quality images, you might as well not use images at all. Now, high-quality, high-resolution images are more necessary and important than ever before. Users won’t spend time looking at a site with poor graphics. Everyone’s screen is already a retina screen, and low-quality images are harder to look at. Since we are in the pursuit of top visual effects, so high-quality pictures are undoubtedly a necessity.
Of course, finding pictures is also a very important skill, and the following article should help you find them all:
conclusion
We all want to be able to build a quality website that users can operate and use, and good images are the most critical element, and must not be neglected.
When your site is still in the frame drawing stage, it is best to take into account the display effect of a variety of devices, although it seems a bit of trouble, but will save a lot of worry later, in the long run is quite worth it.
Nick Babich: User Experience Design
Designshack By CARRIE COUSINS
Review images
This article is originally translated by youset.com, please respect the copyright and translator’s achievements, please attach the youset.com link to transfer, violators will be corrected. Thank you for your cooperation.
[Yushi.com original article submission email: [email protected]]
= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.5 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com