![]() ![]() On a mobile device (right), the headline completely covered the image, making it meaningless and decreasing the legibility of the text. In this example from Chicago Ideas, on the desktop (left), the image of the speaker, Bassem Youssef, was only slightly obscured by the headline. The result will be an obscured image and illegible text. Each of these changes impacts the legibility and clarity of both the image and the text, as well as their relationship to each other.įor example, even though words may be carefully placed in a dark or relatively empty area of a desktop image, when that image is resized for a small screen, the text can move to a different region of the picture. Images shrink, and may also be cropped or scaled, to fit the smaller screen. If the text is contained within the image, the negative impact of embedding text within images is magnified on a small screen: the text shrinks as the image shrinks.Įven if the text is not part of the image, the transition from a large screen to a small screen can be problematic: Text wraps differently to fit the smaller viewport. Reduced screen size means less space for both the image and the text. ![]() ![]() Text over an image is tricky on any screen size: The color contrast between text and image can make the words hard to read and the picture difficult to see. Many sites embed text within images or place it over images. Common Problem 1: Clarity of Image and Legibility of Overlay Text Below are three common issues associated with scaling images for small screen devices and three possible solutions. Images need special attention when a design must work across multiple screen sizes. (Conversely, images that work well on small screens may not work well for large screens.) They may not retain their meaning at a smaller scale, they may be cropped inappropriately, or they may cause unneeded scrolling. However, images that work well on large screens do not always translate well to small screens. When a site needs to work on several different devices, many designers simply resize each image in the large screen design to make it fit smaller screens. They may be hero images stretching across the page, icons or drawings representing offerings, or pictures accompanying news stories or products. Images are a large part of most websites. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |