Ideal size for the top header image?

[Dez]

Talking totally responsive in all browsers and on all devices, ideally, what would be the ideal:
Width?
Height?

[m_hutley]

Width: The width of your content.
Height: A reasonable height to display header information without distracting from the content.

(What, did you really expect there to be “Here are the two numbers”? There’s no such thing as ‘ideal’ on all browsers and all devices.)

[Dez]

Don’t be silly - the main reason for these forums is that questions of all types can be asked. There will be some people here who tend to go for certain sizes.

[PaulOB]

@Dez

There will be some people here who tend to go for certain sizes.

It depends on your design.

If the top header image is a background image only of ‘letterbox’ shape then it could be full width on all devices. However if all the image needs to be visible then a full width image may not be viable because it may need to be as tall as it is wide and that would leave you with a page that is maybe many viewports tall on a widescreen.

It all depends on the image in question and on the content you are displaying.

Some people like a full page (height and width image) for the initial image with the header text content centred in the viewport. The rest of the page is below the fold (this was often used in parallax sites which were a fad for a while).

If your header has readable text content then you may not want line lengths getting too long so even though you may have an edge to edge image the content may only need to be 1280px (or whatever) wide.

It all depends on the design as there is no optimum or preferred width for device or desktop; only an optimum size for the design in question.

[Dez]

Thanks Paul, it isn’t for a background image, but the point about text is a good one, there’s text on the image, so really, as the image gets resized due to the device it’s being watched on, I assume there’s a risk of text ‘not looking quite right’ - yeah?

I was thinking of 1400x300.

[PaulOB]

@Dez

I was thinking of 1400x300.

If that works for your design then that’s fine.

It’s all about how your content is best presented rather than any special widths and usually the content will dictate to some extent how wide the elements should be. Of course you need to bear in mind responsiveness at smaller screens and make sure you scale down nicely.

[Dez]

Thanks Paul, I appreciate your helpful input.

[m_hutley]

(He said the same thing i did, but with more words )

[Dez]

Not quite, the tone was a LOT different!