Channel wall / Tip: Use % instead of pixels to define width

Contributing Design & Artwork
1

Update (29 Aug)
Or instead of 100%, using “auto” might also be helpful!

Hi guys! Some of you may have noticed, but in case you haven’t (b/c I didn’t for awhile).

I’ve seen two different sizes for the channel wall, depending on which laptop I’m using. On my old macbook, the wall was smaller, and on my chromebook, it is much wider. I don’t really know what determines which size you see though - maybe it has to do with your screen ratio or something?

In any case, I used to see some designs that would go out past the wall and into the right sidebar. And now I sometimes see ones that are smaller and don’t use all the space.

TIP – Instead of defining the width of your content (images, tables, backgrounds, etc) by pixels, you might want to consider defining them by percentage.

width:100% *

instead of

width:600px

or whatever it may be.
—
*Colon or equal sign depends on the content type, I think.

1 Like
2

Yes of course it has something to do with your resolution/screen size. Do you use the same resolution everywhere?
I sometimes use my netbook and there I use an other resolution since it’s only a 10,1 inch screen then my Imac which is 21,5 inch. If I use the same resolution on both Viki’s site design would be too huge for my 10,1 inch netbook screen.

Anyway your suggestion is not always workable, well in most cases it isn’t. Let’s take my latest wall design for example: https://www.viki.com/tv/28380c-the-eccentric-daughter-in-law

If I used your suggestion the design would be messed up since:
The pics I made for the wall are in the same width as the background layer. I did that because I don’t want an extra gap between the dashed border and the pic. I’m already annoyed that for 2 pics somehow it’s 599px so you see a tiny 1px gap but it’s not annoying enough to redo the whole picture. With your method it will result in gaps in the design and the design will not always show up the way I did intend for it to show up. Also if designers use 2 different pics next to each other on walls but use the your method then for some people the pics might end up under each other instead of next to each other like the designer intended.

1 Like
3

what a beautiful cover page!! :heart_eyes:

4

I’m sure you’re right. It’s about the screen resolution, though not necessarily the size of the display itself.

Maybe I should have used pictures to start with.
Anyway, I will show you the 1st design that got me thinking about this.
 

Display 1 (13 in, 1280 x 800)
I guess my laptop’s old, since I looked up some screen resolutions and newer models are like double mine.
Anyway, the image/design is too wide for the wall, and so it goes into the sidebar area.

http://i.imgur.com/2uRTDXJ.png

Display 2 (11.6 in, 1366 x 768)
The image just about fits into the wall space, with the border sticking out a bit. Makes sense - since the screen goes 1366 across and not 1280, the site layout is probably wider.

http://i.imgur.com/VDZLwOl.png

 
We can look at your design too.
 

Display 1
Fits to the edges.

http://i.imgur.com/QZPogyc.png

Display 2
Since you centered it, it’s mostly the same except for the white space.

http://i.imgur.com/acSm3wU.png

 
I was mostly speaking to the case of the 1st design. If the image is big enough, define its width to be 100% (instead of however many pixels) and it will scale to different screen resolutions. Then you don’t get the case where images are too wide or too narrow.

If you use larger pictures in the future (i.e. >600px wide), they should auto-size to 100% of the wall or container that it’s in. You can manually define this too, and you shouldn’t have to deal with gaps.

I’m not sure I understand this. If there are two pictures next to each other, and they are defined to have widths of 50%, that would mean they both are 50% of the container wide and will fit side-by-side.

If instead, you define by pixels, when someone uses a larger or smaller resolution screen, that’s likely when the design will not appear as intended.

This tip was a suggestion, not to be taken as the right or only way to do things. Like you said, it may not work in some cases.
It just popped into my head that maybe using percent instead of pixel would be helpful to some. It seems to let things scale easier and you don’t have to think about how many pixels here or there to make things even.

5

@solunda Thanks :smile:

It’s good to know my design still looks pretty much how I intended it to look (display 2).

And yes you can manually resize things later but I prefer to make my pics at 100% and keep them that way because resizing them later might ruin the quality. I learned to always properly size your pics otherwise you might lose quality (I did study graphic design/DTP).
I also do center my walls and don’t make my pics at the maximum size possible because then they are most likely to large to be uploaded on Viki itself and wall size can vary. I already had to upload the header pic elsewhere because it was a bit to large in kb.

Let’s look at the wall for Eun Dong.
The wall picture that is used is 750x4164px. The whole wall is one picture except the text part on top and the team part. Not sure what the maximum width size is for walls but let’s say thats 750px. Next to that Viki also designed their page with a certain resolution or most likely a variety of different most used resolutions in mind because the wall size can vary depending on the resolution you use.
And that is causing the problem you see in display 1. Viki’s design made the wall space smaller but because the pic remains 750px it will give problems like you see. In the example of that wall of Eun Dong that 100% theory might work because it’s one picture and on a white background anyway but the question is if that pic will be resized to much to match every resolution will all text be readable? In this case it will I guess but if mine are resized a lot it won’t most likely.