So my current web project is an initiative campaign site, and the project team was cognizant of the fact that we’re no longer designing just for PCs, so we need versions of the banner image for:
- computers (646 x 405)
- tablets (480 x 301)
- smart phones (320 x 201)
- feature phones (240 x 150)
That was solid, forward thinking.
However, the image was designed entirely with the computer-sized 646 x 405 pixel real estate in mind, and we have a headline, a paragraph length quote and the associated attribution footer for the quote, plus a right-side image and a “watch the video” button as the call to action.
It works just great at 646 x405, sorta works when scaled to the tablet-optimized 480 x 301 if your eyes are good, but by the time we got down to the phone size resolutions, the text was utterly unreadable.
It was a very instructive lesson in how we should have used progressive enhancement.
The next campaign we run we’ll work on this section of the page by developing the core message for the feature phone first and scale out from there, adding more as we go. We’ll build a purpose-built banner for each image size instead of attempting to scale it. It will look something like this:
- feature phones (240 x 150) basic call to action, link
- smart phones (320 x 201) basic call to action, link button, smallest image
- tablets (480 x 301) call to action, abbreviated quote, link button, small image
- computers (646 x 405) call to action, full quote, link button, large image
Come to think of it, yeah, I’ll eventually need to work on making this site more mobile and tablet friendly as well.