7

While working on converting an outdated website to be more responsive I came across a concern with the website header. The client wants to keep their large graphic (both image and text are 1, not 2 separate entities) for the header from desktop to mobile.

The image is readable at the desktop level but appears difficult to view at the mobile level. I thought about changing the image to a web font (while using media-queries) at the mobile level but thought it would be confusing to users if there was a large graphic at the desktop level and just text at the mobile level. Can website headers change from image to a web font across devices?

The client also wants to change header colors from blue at the desktop & tablet level to green at the mobile level. Shouldn't the colors remain the same across various devices?

enter image description here

2
  • Is the header image even going to show properly on a mobile? I would assume it's a background image with text over the top, meaning that on smaller devices it's not going to shrink it's just going to get cropped down so you only see the top-left part of it anyway?
    – JonW
    Dec 18, 2013 at 14:03
  • Yes it's a background image and it sadly does clip when reduced. I've tried to use what scss magic i have but it's not fairing out so well. Dec 18, 2013 at 14:08

3 Answers 3

9

Break the header into two.

Yes, you can change the website header across devices. However, the example shows what looks like a logo on top of a background image. Consider breaking the header into both a raster image (the background) and a vector image (the logo). This will allow the background to scale down to a mobile device while allowing the logo to scale down without blur for legibility.

Colors can be different across devices, but the color scheme should be consistent.

Consistency is important in good user experience, and the overall color scheme is more important than the colors themselves to enforce this consistency. The Nielsen Norman Group wrote about consistency and the user experience between web (desktop) and mobile devices:

"A consistent user experience, regardless of channel, is one of the 4 key elements of a usable cross-channel experience. Consistency across channels helps build trust with customers."

Despite the request for different colors, there should be a way to keep consistency. For example, here is one responsive site that changes color as the width reduces, but retains a consistent color scheme.

1
  • Thanks for your help @Jonathan Strate! The link you posted on consistency really helped in backing how the site header should be the same color from desktop to mobile. As for the graphic we moved away from using it and opted for a leaf svg and a web font because it'll be easier to maintain and looks so much cleaner than the pixel jpg. Jan 15, 2014 at 12:38
3

Regarding the header image, you can use media queries to switch the images at some breakpoint where it makes sense to do so, to make the best use of the screen space available.

For example:

.header {
    background-image: /* mobile-friendly version of image by default */;
}
@media (screen and min-width: 480px) { /* arbitrary breakpoint for simplicity */
    .header {
        background-image: /* larger version of image */;
    }
}

This requires preparing two versions of the header image, but ensures they look good at the appropriate screen sizes.

You of course have the option to use a webfont for the header in place of an image, and size it appropriately for different screen sizes. Using media queries gives you a lot of flexibility - you could even use a webfont version for small screens, and an image for larger screens.

Per your other question re. changing color, you could do that using media queries as well (see above example), but it could be a good idea to keep colors consistent to match the site's brand or theme.

3
  • Media Queries were initially used as part of the responsive design. I tried what I could at a a 26.875em size but it's not readable and the text clips. If I reduce the size it's not readable and if I increase the size the image clips. Dec 19, 2013 at 16:16
  • I think what he meant was use two different image files. With one file optimised for mobile, and a different one for desktop.
    – Racheet
    Dec 19, 2013 at 17:17
  • Hey @Racheet! Yeah there is currently two images being used. The image seen in the mobile view is the shaved version of the desktop version. Dec 19, 2013 at 19:02
1

Can website headers change from image to a web font across devices?

Sure. Using responsive CSS breakpoints and/or JS, you can do pretty much anything you want for each particular view.

Shouldn't the colors remain the same across various devices?

There should be an established, cohesive visual and brand design set up for the client. Typically, based on that, no, you would not want to change colors based on viewport sizes. You certainly can from a technical standpoint. It's probably not a major UX/usability issue. But it does seem like an odd visual/branding design request.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.