Over a million developers have joined DZone.

My Lesson About Responsive Web and Image Scaling

Pam Gazley provides her skilled insight into image scaling within a responsive web design.

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

After leading a major responsive web redesign, I learned a few things that developers and QA practitioners should keep in mind when building and delivering digital experiences. Our new site was designed and developed with the help of Cyberwoven and Duality, our new brand designers. I've gone through many website launches in my day and though this was not the biggest, it was the most exciting. Not only did it involve getting "personal" with Drupal but it meant testing across mobile devices as well as browsers -- overall a great learning experience. I'm really happy with the outcome. I know design is subjective but I think we did a great job setting a mood and refreshing the content so that it's short, concise and to the point. I also love how the back-end CMS turned out. It's very flexible and allows for content reuse across the site which is great from a web content management perspective. We're constantly working on improving it but all-in-all, it was a successful launch and we didn't incur any dips in website traffic. However, with everything in life, nothing is perfect, or in our case Perfecto! I got a lot of feedback around my decision to rely on a "hamburger menu" and image resizing. Re-introducing a full menu is a no-brainer but I needed to dig deep into the image resizing because sites do it differently. Here is what I learned about how image scaling with a responsive web design works.

Textual vs Objective Images

When the designs were presented to our web development agency, they interpreted our use of background images as "Textual" – meaning that the image isn't meant to be literal or purposeful, it was meant to set a mood. The focus of the banner would be the text and/or CTA buttons we laid on top of the image. So, instead of scaling the entire image to the size of the viewport, which is how many responsive websites do it, we decided to crop or expand the image based on the size of the viewport. The text and CTAs we laid on top would always stay on top of the background image. 

Cropping vs Scaling an image.
Cropping vs Scaling

Here’s where the trouble started...After the site was launched my internal clients started asking for pictures of the assets or incorporating a customer logo on top of the "textual" image. We did that but in doing so, we made the image "Objective" – the image was meant to convey or promote a message. When we uploaded the "Objective" background images, the creative element(s) that we wanted people to consume got cropped, thereby annoying people who wanted to see the asset or logo.

Cropping Cut Off the Picture of the "Asset"

What's the Right Way to Do it?

Basically, it is up to you. I don't think there is a right or wrong way. Since our original designs were to have the background image that set a mood and not provoke action, the cropping model works best. With scaling, we risked the text being dropped onto a background or scaled to a size that might make it unreadable. If you have an e-commerce site and the images are meant to provoke an action, such as adding to your cart or getting more details about the item, the scaling method probably works best because you want to make sure your consumer is consuming the image of the item - perhaps from different angles. When you embark on a responsive web design project or any digital engagement project for that matter, talk about how creative elements will be used so you can make the best decision for visual display and future image management. Also, always consider your audience. The majority of our visitors are coming in thru Desktop but it doesn't mean I am going to forget our mobile and tablet users - I'm just slightly adjusting what they might see. For those of you who get lots of mobile traffic, think carefully about your use of creative elements.  And, don't forget to test your site on as many mobile viewports as you possibly can – see what your site looks like on mobile devices. The next step for us will be to maintain the integrity of our background “Textual” images but to allow us to upload an “Objective” image that will lay on top of the background image – just like the text and/or CTAs.

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.

web design and web development,responsive design,images

Published at DZone with permission of Shane O'Neill. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}