Wikivoyage talk:Main Page design

I have not made much progress. Maybe another time. --Rogerhc (talk) 18:32, 31 January 2013 (UTC)

Problems on big screens

Swept in from the pub

Main page

Article with too small banner

I've just set my new screen up. Now I have noticed that your pages does not look very nice on my screen. The main page as well as the normal articles. Everything is too small. Especially the main page looks really strange. I am not sure whether you have discussed this already. I have added tweo screenshots. Centering the content could be a first solution, I think. I have a 27" screen (2550 pixelks width). Meanwhile these screen are not that exotic any longer and people will use it at home as well (like me). So we should consider such screens as well. -- DerFussi 09:07, 6 March 2016 (UTC)

Also something I noticed on my 24 inch screen. The first one is down to our banner templates which scale images down to 2100 pixels no matter the source resolution (I upload banners in as high a resolution as possible in anticipation that this will be increased). --Andrewssi2 (talk) 09:20, 6 March 2016 (UTC)

I usually just enlarge the browser scale with 'ctrl +' or ctrl mouse scroll wheel (or in your case maybe (Strg +). Not sure with web browsers but I have other applications that have a HD screen menu customisation option to make icons larger pixel sizes, also useful on high pixel count tablets. --Traveler100 (talk) 12:22, 6 March 2016 (UTC)

It's a bit tricky trying to find a balance between supporting very hi-res screens and not forcing users on smaller screens to download huge images. At the moment the DOTM/OTBP/Featured banner images are limited to 1700px width but they are still 230kb for Hilo, 284kb for the phrasebook, and 496kb for Kyoto, which is way too much for someone on a small screen. It's probably worth looking at how the pagebanner code sends different sized images to different users and seeing if that can be leveraged for the main page.

For now, those with a large screen can add the following to your User:UserPage/common.css file, which I think will allow page banners and everything but the map on the main page to stretch to larger sizes:

.banner-image {
    max-width: 100%; 
}
#mainpage-map {
	max-width: 100%;
}
.wpb-topbanner, .wpb-topbanner img {
	max-width: 100%;
}
.jcarousel-wrapper {
	max-width: 100%;
}

Fixing the map requires getting rid of the 1125px limit in Template:Mapbanner, but since doing so will add to the page size for users on small screens I haven't changed it. -- Ryan • (talk) • 16:16, 6 March 2016 (UTC)

The problem is not my own screen. I can live with that (WV is part of my life). The problem are our readers and visitors that come over here by using search engines. Or journalists or blogger who want to write about us. They don't know about personal css files. And we can not expect that they create personal css files befor using WV. They also dont want to use browser magnifying shortcuts. They look at it and think: Oops, it looks quite nonprofessional - and go. And the article banner in Phnom Penh on the screenshot looks nonprofessional. In worst case we get bad advertising. We do not make this website for us, we make it for them. We should not forget that. The website should look acceptable (not perfect) on all screens and devices (desktop, table, phone). WV/it at least centers the content on main page. Look more acceptable to me than left aligned. -- DerFussi 07:32, 7 March 2016 (UTC)

To clarify, I'm not suggesting personal CSS as a long-term fix, I'm suggesting it is something you can try for now to see if it helps to resolve the problem until we can find a long-term fix. -- Ryan • (talk) • 15:34, 7 March 2016 (UTC)

So if I understand correctly it is not the size of the image that has been uploaded but a restriction of what the pagebanner downloads to the viewer? Can it not be smart enough to know what screen size it should build too? People who are on wide screens generally do not have a bandwidth issue. On the usability side though, I think it would be good to download large images to high definition medium sized screens for better quality but I question the usefulness for large screens. It really is not good to have such a wide page to read paragraphs of text, it is difficult for the eye to trace back to the start of the next line when more than about 15 words per line. Generally I either set browsers to large zoom, or not the whole width of screen or move to second or third screen which is in portrait position (as people still insist on publishing documents that are portrait not landscape format). --Traveler100 (talk) 16:05, 7 March 2016 (UTC)

If the pagebanner adjusts the download based on viewer width, it should use the width of the browser window, not that of the screen. I for one only at rare occasions maximize the browser window. --LPfi (talk) 20:10, 7 March 2016 (UTC)

Good point, window width is the deciding factor not screen width. Due to reading line length I also tend not to do full screen. --Traveler100 (talk) 20:20, 7 March 2016 (UTC)

Of course it depends on the browser width. Nobody doubts about it. But i think its not useful (and shortsighted) to base a web design on the own browsing behaviour. A website should at least show not any glitch on all screen sizes. Thats what I wanted to point out. I think its very useful to use some time to set some css for @media (min-width: 1900px) {}up. -- DerFussi 05:50, 8 March 2016 (UTC)

Note many sites limit a column max width on the content area. There are good reasons behind this, even if it seems counterintuitive - readability improves. It's dangerous and unfair to assume "People who are on wide screens generally do not have a bandwidth issue". A large image could be loaded on a large screen but this means a user on a slow/expensive connection may be punished simply for having a large monitor. The site gets slower and user engagement may drop/ I'd strongly urge the community to limit the entire content area rather than thinking about loading larger banners. Jdlrobson (talk) 20:53, 26 April 2016 (UTC)

Well, there is every permutation of user here I guess, from a massively wide monitor on a low bandwidth connection to an iPhone on 4G. There isn't 'one size fits all'.

I would urge however against being too precious about this point. The obvious trend over the past 10 years has been ever increasing bandwidth in all parts of the world and it will continue to be the case. If we extend the banner across the width of the browser window it is not going to exclude anyone. Andrewssi2 (talk) 22:45, 26 April 2016 (UTC)

I would urge you to read this report. 2G and slower connections are much more important than you might think. "The majority of the mobile users in the world uses a 2G connection, the growth will happen in the countries where the 2G usage is highest. And proxy browsers usage is low so it doesn't solve the problem. We need to have a site that is fast on 2G." Jdlrobson (talk) 18:00, 28 April 2016 (UTC)

There is no requirement whatsoever for the site to be 'fast on 2G'. The banner is basically another image on the article, no more and no less. It is distasteful to suggest people with 2G connections want to have a low quality experience, especially since most of those 2G connections will upgrade rapidly over the next 10 years. In any case there is a separate template used for mobile devices, and the banner is scaled down accordingly for that. --Andrewssi2 (talk) 22:49, 2 May 2016 (UTC)

It's not just a 2G question; voyagers relying on mobile data are likely to be either roaming at some inflated price or using a local pre-paid SIM with relatively limited data support. A dime a megabyte is typical for those sort of plans here, with wide variation in the number of megabytes in the bundle. K7L (talk) 02:53, 3 May 2016 (UTC)

Main Page: max-width of Template:Bottomboxes

How about setting a "max-width: 1125px" CSS property at the table in the Template:Bottomboxes used on the Main Page, so that the it does not extend in width beyond the map and the other box on top. This can be a temporary solution, but will make the main page look better in the meantime. Xsobev (talk) 18:37, 22 June 2016 (UTC)

The main page problem in the wide screen(1080px)

Swept in from the pub

Main page screenshot on 1920*1080px wide

Fix version screenshot on 1920*1080px wide

1920*1080 pixel about wide screen of main page problem, the content frame does not seem to be the same size as the image above, can improve the content frame with the same size?--Yuriy kosygin (talk) 05:10, 14 February 2017 (UTC)

@Yuriy kosygin: This edit will fix the main banner. Now it will display with a background color that is the same as the ocean spread across 100% of the screen to any size. I can't edit the DotM banner below it because I don't have permissions. —Justin (koavf)❤T☮C☺M☯ 06:37, 14 February 2017 (UTC)

@Koavf: Wow! That good idea! But I don't have permissions... --Yuriy kosygin (talk) 06:45, 14 February 2017 (UTC)

@Yuriy kosygin: I am not an admin, so I can edit one of those templates but not the other (nor can I edit the Main Page). Now why one is protected and the other isn't, I don't know... —Justin (koavf)❤T☮C☺M☯ 06:48, 14 February 2017 (UTC)

@Koavf: Mmm, I understand.--Yuriy kosygin (talk) 06:59, 14 February 2017 (UTC)

@AndreCarrotflower: has been the one who edited the main page the most in recent times, so he should be able to help once he reads this. Hobbitschuster (talk) 15:23, 14 February 2017 (UTC)

What do you think about make the 5 blocks the same width and center them? Doing this will create two bands in the sides, but it will look better than the current Main page. --Zerabat (talk) 15:39, 15 February 2017 (UTC)

@Koavf:, @AndreCarrotflower:, @Hobbitschuster: and @Zerabat: This is the Chinese version of the solution(Oops!! Chinese version code with the English version is different... I'm sorry!), we will take the lock size without changing the size of the wide screen. In this case, DotM banner does not need to change its size! see before and after.--Yuriy kosygin (talk) 15:31, 17 February 2017 (UTC)

I have modified the Template:mapbanner and Template:Bottomboxes Code,But... As the main page change middle (mapbanner, DotM banner and bottomboxes), maybe need admin help! Cause I don't have permissions.Yuriy kosygin (talk) 16:36, 17 February 2017 (UTC)

@Yuriy kosygin: I'm a little confused: I thought that my edit fixed the problem but then you removed it... And yes, that central carousel needs to be fixed--it can be centered or stretched. —Justin (koavf)❤T☮C☺M☯ 02:30, 18 February 2017 (UTC)

@Koavf: I'm sorry, I might think central carousel can not stretched the possibility...--Yuriy kosygin (talk) 12:06, 18 February 2017 (UTC)

@Yuriy kosygin: You can put anything inside of <div span="width:100%" style="background-color:#XXXXXX;"></div> and then if the thing itself won't stretch, the box it is in will. Plus, if you center the element, you won't end up with whitespace. —Justin (koavf)❤T☮C☺M☯ 18:00, 18 February 2017 (UTC)

Currently I see the map with a black background extended to the right edge of the screen, but the carousel is still at its old width and the blue box is now the same width as the carousel. This looks fairly bad. Did someone change something? Powers ^(talk) 19:05, 20 February 2017 (UTC)

@LtPowers: Yuri set a max width. Not sure why--this is the opposite of his complaint. Now the map/searchbox at the top and all of the links at the bottom extend 100% (which is probably what we want...) and the carousel in the middle does not. Again, there are two solutions to this aesthetic problem. I'd be happy to help if you need it. —Justin (koavf)❤T☮C☺M☯ 19:17, 20 February 2017 (UTC)

Please do, if you have a solution. Powers ^(talk) 21:22, 20 February 2017 (UTC)

@LtPowers: Not sure how you'd like me to do it but there are two ways to fix it. I can't edit the Main Page myself, so how do you want me to give you the code to fix it? —Justin (koavf)❤T☮C☺M☯ 23:15, 20 February 2017 (UTC)

What options do you have in mind? I don't think stretching the carousel is a good idea given the set aspect ratio of the images. Powers ^(talk) 02:02, 21 February 2017 (UTC)

@LtPowers: Not sure how familiar you are with HTML but it's actually not too complicated and is basically what the other portions of the Main Page do: put the carousel in a <div> and center the contents. I agree that the carousel probably shouldn't be stretched itself because it will distort the images. Again, I can write up that code, if you think it would be helpful. —Justin (koavf)❤T☮C☺M☯ 02:14, 21 February 2017 (UTC)

The problem with centering is that the other elements are left-aligned. I did try adding the div tag you quoted upthread but I couldn't get it to center; I may have the syntax wrong. Or maybe the custom classes used for the carousel are hardcoded to left-align. Powers ^(talk) 18:15, 21 February 2017 (UTC)

┌────────────────────────────────────────────────────────────────────────────────────────────────────┘ @LtPowers: You could change <div class="jcarousel-wrapper"> to <div class="jcarousel-wrapper" style="width:100%; background-color:#0000FF;">. What do you think of that? It will put a box behind it that will bleed to the right and it has a kind of gradient between the dark blue of the map above and the light blue from the navigation box below. —Justin (koavf)❤T☮C☺M☯ 20:59, 21 February 2017 (UTC)

Hm. That actually didn't work... I'll have to look at this more. But do you like the idea in principle? Otherwise, I will have to come up with something more creative. —Justin (koavf)❤T☮C☺M☯ 21:01, 21 February 2017 (UTC)

I don't know, it sounds kind of weird but I'd have to see it. It seems to me the easiest solution is to keep all three boxes to the same width (whatever the carousel and map are). Powers ^(talk) 01:05, 22 February 2017 (UTC)

@LtPowers: Don't you agree that the hanging whitespace is a problem? For what it's worth, this is not an issue on any of our sister projects--they all expand to 100%. —Justin (koavf)❤T☮C☺M☯ 06:43, 22 February 2017 (UTC)

I did this applying the solution from zhwikivoyage: wrap all the boxes inside a center-aligned div. (If the world map banner does not look good, don't care about it, it's just a CSS issue). Is this what you want to do, or you want to extend all the boxes (mapbanner, carousel banners, discover banner and sister projects) to fit the whole space?--Zerabat (talk) 20:10, 22 February 2017 (UTC)

Koavf, I'm not following your question. What do you mean by "hanging whitespace"? I understand sister projects expand to 100%, but do other projects have images that take up the full width of the Main Page content? We do. And we can't expand the carousel to 100%, so we have to do something different. Anyway, the Main Page is currently back to a condition where the top and bottom boxes overhang the carousel. This isn't attractive. Powers ^(talk) 02:41, 25 February 2017 (UTC)

@LtPowers: I can fix the middle section with the carousel. How would you like me to do this? —Justin (koavf)❤T☮C☺M☯ 02:44, 25 February 2017 (UTC)

You're the one who says you can fix it. So you tell me. I'm not aware of any options for making it expand to an arbitrary width. Powers ^(talk) 02:55, 25 February 2017 (UTC)

@LtPowers: MediaWiki:Gadget-Carousel.css has the following line: max-width: 1125px; and if it's changed to max-width: 100%; or better yet, deleted entirely. It's hard for me to do much until then. I guess the problem that I'm trying to describe is that I don't have the userrights to modify these pages myself. The code is not terribly difficult--I know I can figure it out if I tinker with it. (See also Wikivoyage talk:Main Page design.) —Justin (koavf)❤T☮C☺M☯ 03:51, 25 February 2017 (UTC)

The max width is hardcoded because that's the size of the images we use in the carousel. If we allow it to expand, the right directional arrow ends up at the right margin, far away from the edge of the image. Powers ^(talk) 22:25, 25 February 2017 (UTC)

@LtPowers: The <div> that the carousel is in can be expanded but the pictures themselves centered in the div. —Justin (koavf)❤T☮C☺M☯ 20:02, 26 February 2017 (UTC)