{"id":1391,"date":"2012-03-11T23:12:06","date_gmt":"2012-03-11T23:12:06","guid":{"rendered":"http:\/\/gr-01.de\/whitepapers.grafik-und-redaktion.de\/?p=1391"},"modified":"2013-06-03T03:43:28","modified_gmt":"2013-06-03T01:43:28","slug":"the-challenge-of-responsive-images","status":"publish","type":"post","link":"https:\/\/whitepapers.grafik-und-redaktion.de\/?p=1391","title":{"rendered":"The Challenge of Responsive Images"},"content":{"rendered":"

speckyboy<\/a><\/p>\n

Images are one of the most important elements on a web page in terms of user experience. Few objects on a page have the same impact on everything from emotional responses to bounce rates.<\/p>\n

When users are viewing your site on mobile devices, small screens, or in other unusual situations the images can distort the page and ruin your careful site design. That\u2019s why responsive design is being developed. In this post we examine the use of images in responsive design<\/p>\n

The Challenge Of Images In Responsive (& Mobile) Design<\/p>\n

Responsive design has the web industry talking. Rightly so \u2013 it\u2019s the most important development in web design for years. For the first time, devices of all shapes and sizes will have the opportunity to experience a beautiful and feature rich Internet. For those not in the loop, responsive design builds sites to adapt to the display area (browser window) available to them. Whilst this is a great opportunity to make the Internet better, that\u2019s not to say the advantages are without challenges. One of the most interesting being the handling of images. Let\u2019s examine some basic techniques along with the problems they pose.
\nA Simple Fit<\/p>\n

Seting the images so their width can never be greater than their container element is one of the easier ways to allow images to adjust to the page size automatically. As the column they are contained in shrinks, for example, the would simply scale down to match. You can even include videos and other objects the same way.<\/p>\n

\"\"<\/a><\/p>\n

Imagine the layout on the left (1)<\/strong> with one large image clearly dominating the other two. As we shrink our display area, designers have chosen to move to a one column layout (2)<\/strong> and ensure the images are set to never go beyond 100% of the column width resulting in the layout on the right.<\/p>\n

You can see that the lower images have doubled in relative size on the mobile screen, but our main image has become an extremely thin letterbox atop the two now dominant images. This clearly isn\u2019t the intention of the design.<\/p>\n

Dave Rupert<\/a> has a really nice solution to this phenomenon:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n<\/td>\n
\n
\n
.banner-item {<\/code><\/div>\n
\u00a0<\/code>overflow<\/code>: <\/code>hidden<\/code>;<\/code><\/div>\n
\u00a0<\/code>min-height<\/code>: <\/code>300px<\/code>; <\/code>\/* 300px is arbitrary. *\/<\/code><\/div>\n
}<\/code><\/div>\n
.banner-item img {<\/code><\/div>\n
\u00a0<\/code>width<\/code>: <\/code>100%<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

By fixing the height of the header image and allowing it to overflow we ensure the image ranking is maintained. As we see in the simple picture for narrow screens, image height determines this instead of width.<\/p>\n

Think Responsive And Look Forward To Developments To Come<\/h4>\n

The most important thing about responsive design is that we keep thinking and looking forward to a time when users on all devices can enjoy a beautiful web. As problems such as those examined here present themselves, web technologies and development tools will advance to fill those gaps. In the mean time we\u2019ll cover some useful issues and provide some interesting additional reading for advanced users looking to tackle these issues in their designs.<\/p>\n

Other Solutions<\/h4>\n

Adaptive Images<\/a>
\nA Javascript solution for your website\u2019s content images. No need to change your mark-up, it manages its own image re-sizing, and will work on any CMS or even on static HTML pages.<\/p>\n

Responsive Images Using CSS3<\/a>
\nThis method relies on the use of @media queries, CSS3 generated content, and the CSS3 extension to the attr() function.<\/p>\n

Resizable Images at Full Resolution<\/a>
\nThe trick to this solution is to make sure your starting image is larger than the default size.<\/p>\n

Responsive Images: Experimenting with Context-Aware Image Sizing<\/a>
\nThis approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions<\/p>\n

Fluid Images<\/a>
\nBy Ethan Marcotte on Unstoppable Robot Ninja.<\/p>\n","protected":false},"excerpt":{"rendered":"

speckyboy Images are one of the most important elements on a web page in terms of user experience. Few objects on a page have the same impact on everything from emotional responses to bounce rates. When users are viewing your … Weiterlesen →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[95,83],"_links":{"self":[{"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/posts\/1391"}],"collection":[{"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1391"}],"version-history":[{"count":4,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/posts\/1391\/revisions"}],"predecessor-version":[{"id":1395,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/posts\/1391\/revisions\/1395"}],"wp:attachment":[{"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}