5 Replies - 375 Views - Last Post: 23 November 2017 - 07:16 AM

#1 O'Niel  Icon User is offline

  • D.I.C Regular

Reputation: 14
  • View blog
  • Posts: 390
  • Joined: 13-September 15

Image stretching over whole width, or use borders?

Posted 17 November 2017 - 10:39 AM

Hi!

I had made a page for a website on which big images stretched over the whole width of the screen.
However, the owner of the screen suggested to implement white borders on the sides of the
images instead. Because it looked too bombastic.

My personal preferences go to stretching over the whole width.
But I'm wondering what looks best.
Stretching the whole screen, or borders?

Stretched:
Posted Image
Posted Image

With border:
Posted Image
Posted Image

And is there a reason why one is preferred over another?
Would it be a better option to do stretched on all screens smaller than e.g 15.6" and with borders on screen bigger than that?

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Image stretching over whole width, or use borders?

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1503
  • View blog
  • Posts: 8,242
  • Joined: 07-September 06

Re: Image stretching over whole width, or use borders?

Posted 17 November 2017 - 02:05 PM

I personally (using a 32 inch, 2560x1440 resolution monitor) don't see a problem with the full-width version, in fact it is less harsh on the eyes since there isn't something contrasting directly with it on either side. Plus, it seems to be the common thing these days to have sites with full-width images; for instance the applications in the list here https://electronjs.org almost all have a full-width image on their sites. It is just the common "to-do" thing at the moment.

I would suggest setting a maximum height for the images (at least a maximum height that is displayed) so that you don't have an image stretching much further than the fold (I would personally try to ensure that the image ended before the fold on most/ all screen resolutions, but that can be a little difficult depending on how much information you also want to have displayed on the image).

Now, obviously if you are being paid for this work, you likely want to ensure that the customer is happy, even if that doesn't necessarily mean it is the "standard" thing to do. At the same time, pushing back a little shouldn't be something that you simply can't do. You want to be proud of your work and have it look good after all.

If I were to go with a "bordered" image, I would suggest going to something that is the standard width of your content for the rest of the page instead of stretching it _most_ of the way and not making it a full-width image. For instance, if your content is allowed to be a centered column of 800px wide, the image would also be centered at 800px wide... with possibly a "border" that stretched the entire width of the page to provide some contrast and pop (or just a border in general).

What it comes down to is if a full-width image isn't an option I would suggest playing with it and seeing if you can find something that looks nice that isn't a full-width-minus-100px-border-image as I think it will likely lead to cleaner and nicer looking results that way.
Was This Post Helpful? 2
  • +
  • -

#3 snoopy11  Icon User is offline

  • Engineering ● Software
  • member icon

Reputation: 1422
  • View blog
  • Posts: 4,504
  • Joined: 20-March 10

Re: Image stretching over whole width, or use borders?

Posted 18 November 2017 - 10:57 AM

Sometimes, when building a web page, you want the image to look like it has a framed border like a photograph.

This brings a familiarity and crispness to the image...

Note it doesn't have to be a white frame... blue or black in this case would work better.


Posted Image
Was This Post Helpful? 1
  • +
  • -

#4 O'Niel  Icon User is offline

  • D.I.C Regular

Reputation: 14
  • View blog
  • Posts: 390
  • Joined: 13-September 15

Re: Image stretching over whole width, or use borders?

Posted 19 November 2017 - 04:51 AM

View Postsnoopy11, on 18 November 2017 - 10:57 AM, said:

Sometimes, when building a web page, you want the image to look like it has a framed border like a photograph.

This brings a familiarity and crispness to the image...

Note it doesn't have to be a white frame... blue or black in this case would work better.


Posted Image


That indeeds looks a lot better!
But wouldn't some people tell that the black is too
contrasting with the rest of the website?

And that it is all out of the color palette?
Was This Post Helpful? 0
  • +
  • -

#5 snoopy11  Icon User is offline

  • Engineering ● Software
  • member icon

Reputation: 1422
  • View blog
  • Posts: 4,504
  • Joined: 20-March 10

Re: Image stretching over whole width, or use borders?

Posted 19 November 2017 - 09:23 AM

You could use blue.
Was This Post Helpful? 0
  • +
  • -

#6 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,128
  • Joined: 21-November 13

Re: Image stretching over whole width, or use borders?

Posted 23 November 2017 - 07:16 AM

Using a frame will make the site look less dynamic, more "settled", more institutional.

White could work if you had a sticky footer so that the outline is around the whole image at all times.

When arguing with clients, I advise you never focus your argumentation on what looks good or not. You should talk about your client's target and communication goals. If your design idea is insightful, the client will accept it even when he is not totally comfortable with the way it looks, so try to express how this idea will help him reach his goals. If you can't do this, maybe you are wrong to come up with this idea. Conversely, you will accept more easily your client's design ideas if they are motivated by reason and not taste. So, as paradoxical as it sounds, it really is a win-win to take the looks out of the argument when you talk about design.

Here your client tells you he doesn't want to be "bombastic". Maybe you haven't understood to whom the website is addressed, what your client's positioning is compared to his competitors is, etc. It is never too late to ask for informations.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1