![responsive design workflow stephen hay pdf responsive design workflow stephen hay pdf](https://onlinelibrary.wiley.com/cms/asset/b58e9d04-3c2e-413f-984e-16ba952c447b/gcb15498-toc-0001-m.jpg)
It would be better if we provided a smaller version like the one 800 x 1204 resolution image that is shown in the example. We can simply shrink that 2000-pixel image, and it will look good. The largest size that the image is ever displayed at is 2000 x 3010 pixels. In this example, we have a photo of Michelle Obama where the image in the page is 400 x 602 pixels for the current viewport size. Let’s take a look at a resolution switching example:
![responsive design workflow stephen hay pdf responsive design workflow stephen hay pdf](https://stephaniewalter.design/wp-content/uploads/2019/11/03-ui-webdesign.png)
We can’t rely on them looking bad to tell us when we need to change image sources. So long as we’re downscaling flexible images, they will always look good. At least art direction provides us with some hints about how many image sources might be needed. What about resolution switching breakpoints So knowing that an image falls under the art direction use case can give us some clues, but it doesn’t answer all of our questions about the necessary image breakpoints.
#RESPONSIVE DESIGN WORKFLOW STEPHEN HAY PDF FULL#
You can see an example of this in the Shopify homepage that we looked at in Part 8.ĭespite the fact that the image only has one major art direction change-from the full image to the cropped one-Shopify still provided six image sources to account for file size and display density. We may find that we still need to have multiple sources that don’t map to the art direction switch. What if one of the art directed images covers a large range of sizes. However, this may only be part of the picture. Or I guess we can, but if we do so, we’re not really addressing the fundamental reasons why we wanted responsive images in the first place. So we can’t simply reuse our responsive layout breakpoints for our images. We want to provide multiple image sources because of performance concerns, different screen densities, etc. With the exception of art direction, the main reason why we need multiple image sources has nothing to do with where the images look bad. For our layouts, we follow Stephen Hay’s advanced methodology: We resize the browser until the page looks bad and then BOOOOM, we need a breakpoint. The answers to these questions lead to different breakpoints than the criteria we use to select breakpoints for our responsive layouts.