![]() In most cases, an image should not simply scale up to fill a larger screen. Pay attention to the details of scaling and cropping an image. As a result, the photo no longer communicates the point of the article: now it looks like a guy working, rather than a dad needing to focus on his son. In the desktop view (right), the boy disappears behind the text, the laptop is obscured, and the focus shifts to the man’s head, rather than to the relationship between the two people in the photo. In the mobile view of (left), the image shows a man in front of a laptop and a small boy next to him. Pictures may become oddly framed or may overlap with other page elements, losing meaning or effectiveness. Common Problem #3: RepositioningĪs images grow to fit larger screens, their relationship to other elements on the screen may change or shift. As the page width grows for a larger and wider monitor, the city skyline disappears as well as the top and bottom of the boat. The mobile view of includes a picture of the water, a sailboat and the city skyline. This approach effectively crops the image vertically and can keep more items visible on the screen without scrolling, but the resulting image may lose meaning if it is poorly cropped. To keep images from becoming disproportionately large, some designs constrain the height of the image, expanding only the width. On the American Lung Association’s site, 3 icons and text links from the mobile homepage (left) are scaled up to occupy an entire desktop screen (right). The increase in image size does not increase the image’s value on desktop. Thus, paradoxically, large-screen users see less information than mobile users. The same image fills the whole screen on desktop (right). On Chipotle’s mobile view (left), an image about fresh ingredients appears above a promotion. In general, any weakness in an image become more apparent, the larger it becomes. Poor image quality: Low-resolution images may become pixelated or blurry at larger sizes.The image becomes an obstacle to get around and increases interaction cost. Scrolling: To get past the image and see some content, users need to scroll.This wasted screen space could be used to show more things, rather than just bigger things. Low information density: The information value of many images is not high enough to justify the space they take up when enlarged for a big screen.This procedure frequently results in a picture that is disproportionately large in relation to surrounding page elements (headlines, text or navigation). In order to resize an image to fit a larger screen, some designs simply expand the height and width of the image to fill the new container. Common Problem #1: Disproportionate Scaling When you’re designing for multiple page sizes, you need to consider orientation (horizontal or vertical), aspect ratio (the proportional relationship between the width and height of the image), size and relationship to surrounding elemetns carefully. They may become too large in relation to surrounding page elements, force extra scrolling, or lose impact. Images that work well on small screens may not be appropriate for big ones. You may have read that article and thought, “My mobile images look great – not to worry.” Now it’s time to see if your desktop images also look great. Previously, we discussed that images designed for large screens often don’t work on small screens. Users of these high-end devices should also be supported by your design. Those larger screens may be tablets, laptops, desktops or even 30-inch monitors with 4K resolution. But sites that are optimized for mobile don’t always translate well to larger screens. Websites are often designed with a mobile-first or mobile-focused approach. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |