0

A website design has been provided to me which I should turn into a HTML page.

But here is the catch:

  • It was made to only look good when taking full width (it has a slideshow, and also a horizontal product slider where products appear to come from outside the screen).

  • It was made at width of 900px. If I was to make it fluid, it could still look good to let's say 1200px, but any wider and:

A) The slideshow images would get too stretched out to show what they need to and in good quality.

B) The text that goes over the slideshow becomes unreadable, as it assumes certain image size at which it can work pasted like that over the image.

QUESTION: How do I make this design work on wider screens?

WHAT I HAVE TRIED SO FAR:

  1. Fixing the page width at 1200px and centering it on screen. I see this working well on many websites. However, all these websites have something on top (like menu) which goes full width. This design doesn't have that, and just that detail makes in noticeably not look good. And the products in the horizontal slider then appear to come out of "nowhere" instead from outside of the screen.

  2. Adding background color/gradient to the margins that appear with solution 1. It seems to only emphasize how out of place is this design when not full width.

  3. I may have the option to suggest changes in design, but what to suggest?

Any advice much appreciated.

Improve this question
2
  • 1
    Propose to the client to add a full width bar on the top with a litle form for a newsletter or contact infos (email / phone) .
    – Core972
    Apr 21, 2018 at 7:23
  • 1
    Would it be possible to share a sample layout to give a better idea, one passing thought is to have a transparent to solid gradient on either side. This will add some continuity to the design and make it seem like the design continues on either side but gets "hidden behind some clouds (or similar element). However, I'm not sure if it would fit the feel and overall tone and color set on your design
    – TDsouza
    Apr 21, 2018 at 17:46

1 Answer 1

Reset to default
1

If the idea of designing a >1200px version is not the answer you are looking for , then :

Fixing the page width at 1200px and centering it on screen...

This is a good solution, combined with Core972's comment of adding a full width bar with contact details (address, phone, email) will do the trick.

...the products in the horizontal slider then appear to come out of "nowhere" instead from outside of the screen.

To fix this you simply need to have different background colors for your body/html and your main container. After this all of your problems will just go away.

I may have the option to suggest changes in design, but what to suggest?

This can't be answered since we don't have the website on our hands or at least a layout sketch...and it also comes down to designing a version for over 1200px.

Improve this answer

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.