Best Practice for Responsive Website Header

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.