This is an archive of past discussions. Do not edit the contents of this page. If you wish to start a new discussion or revive an old one, please do so on the current talk page.

Hi! Thanks for taking a look at this proposal for a new Main Page. This is designed as a desktop and tablet Main Page - the mobile site would hopefully receive a separate site with fewer images and of a smaller size. If you have any ideas please feel to comment below or (even better!) plunge forward and try implementing them. We'd also welcome any opinions you have, or for those of you with a knowledge of coding, a look through the CSS of this page would also be much appreciated (I made it myself despite my distinct lack of knowledge, so it's likely to be a bit lot ropey). Thanks for taking the time to have a look, hopefully, together we can all make the front page of this great site even better than it already is. --Nicholasjf21 (talk) 21:44, 3 February 2013 (UTC)[reply]

I'd suggest the name as being Main Page/New, just to keep everything together. Users will not see the header, as we will hide it here as well. JamesA ^>talk 11:51, 3 February 2013 (UTC)[reply]

Sure moved. Travel Doc James (talk · contribs · email) 12:00, 3 February 2013 (UTC)[reply]

I have to scroll down 3 times to reach the search button. If this is what the new main page is going to look like, I think it needs considerable tweaking. Ikan Kekek (talk) 12:41, 3 February 2013 (UTC)[reply]

Yes so a couple of things need to occur first before this works for everyone.

• We need to set the CSS for everyone (IP or logged in) as default (need an admin to do this I think, mine is here
• We need to suppress "Main Page New" by editing this http://en.wikivoyage.org/wiki/MediaWiki:Vector.css like we have done for the main page

This needs doing before we add a link from the old main page to the new one Travel Doc James (talk · contribs · email) 12:44, 3 February 2013 (UTC)[reply]

After numerous tests, I worked out we couldn't hide the Page title properly unless the page was at Main Page New and not under a subpage, so I've moved it back and the title will be hidden universally soon, along with the auto-scaling code. JamesA ^>talk 14:27, 3 February 2013 (UTC)[reply]

The title is also hidden on the article history page, which is a little disorienting. LtPowers (talk) 00:36, 5 February 2013 (UTC)[reply]

I want to say I really like the magazine-like format for the page, but I have some concerns.

Primarily, when I open the page in my browser, I see the world map and the very top of the DoTM. That's it. While stark and attention-grabbing, it seems to defeat the point of having the pretty magazine-style pictures if they can't even be seen without scrolling. I guess I'd say that the images don't need to use the entire available width, at least on my browser. I'm running 1920x1280 resolution with Firefox on Windows XP.

-- LtPowers (talk) 16:55, 3 February 2013 (UTC)[reply]

Hi, thanks for the feedback and kind comments. I understand your concerns about scrolling - there does still seem to be a little free space above the first image so we probably could move the elements up a little. The problem is the World Map really has to be that size for it to be usable, particularly at lower resolutions, otherwise the text covers it and the continents are very small. This means that the other pictures are always going to have to be further down the page, even if their width were reduced and they were placed side-by-side. Unfortunately, because you have a high resolution screen you will probably see a greater image:text ratio that would be seen for users with medium and small resolutions, much as those at the other spectrum will see more text on smaller images. Whilst this isn't perfect, I believe that the current set-up is the best compromise whereby users at a wide range of resolutions may have a similar experience. Perhaps by inhibiting the 'Please join Wikimedia's newest project by contributing to an article today!' banner on the front page and moving everything up slightly to fill the slither of blank space, we could improve the page, although I am unsure whether the former is possible or indeed desirable. --Nicholasjf21 (talk) 18:04, 3 February 2013 (UTC)[reply]

Quite frankly, that wouldn't do anything to solve the basic problem: I simply cannot fit even two of the images on my screen at the same time. I think ideally all four of our major elements should fit on the screen at resolutions as small as 1024x768. LtPowers (talk) 18:31, 3 February 2013 (UTC)[reply]

I understand what you mean, but I think making all 4 fit on the screen at the same time would drastically reduce the imagemap's usability - at some resolutions it is almost too small as it is. At your resolution there probably is room for it to be possible, but at lower resolutions, images would become very small indeed. The present proposal is show in 1024 resolution in the screenshot below. As you can see, were the map to become much smaller (as it would have to), the page's utility would be limited. I could tinker with the CSS to make your high resolution use smaller images if you'd like?--Nicholasjf21 (talk) 18:46, 3 February 2013 (UTC)[reply]

It would be nice to get at least the worldmap and destination of the month fully viewable, though. --Peter ^Talk 22:10, 3 February 2013 (UTC)[reply]

I do agree with you - the only problem is how to do it! :) As can be seen in the image, at some resolutions this already happens, so we'd have to approach it as if using the largest realistic resolution. Whether we could do that by removing the top 'Please join Wikimedia's newest project by contributing to an article today!' banner and moving everything up slightly to fill (what is admittedly!) the slither of blank space at the top I'm not quite sure. I suppose this is the problem with scaling - it's different for everyone! --Nicholasjf21 (talk) 22:25, 3 February 2013 (UTC)[reply]

I suppose we could make the other images smaller and leave the imagemap as it is - if I'm honest the current 3:1 width:height ratio is completely arbitrary! Any thoughts? --Nicholasjf21 (talk) 22:35, 3 February 2013 (UTC)[reply]

Is there a way to suppress the sitenotice on the Main Page? Everyone will still see it as soon as they navigate to any other page. We could also trim the height of the imagemap banner (although that might mean having to redo all the coordinates...). The Arctic Sea isn't needed, and Antarctica is taking up a lot more real estate than necessary because of the projection—we could just chop off 3/4 of it. --Peter ^Talk 23:08, 3 February 2013 (UTC)[reply]

I think supppressing that notice would definitely be a good starting point! Re-doing the co-ordinates wouldn't be too much of a chore I don't think, as you say we could just chop off the top and bottom. I'm not quite sure how the CSS would react to such a change (it might keep it at the same size), but if we want it smaller than it's perhaps something to try! I'd also suggest slimming the other banners to the same size if we did that in order to make the whole page uniform. The only problem is that, with every different resolution, the effect will be more or less pronounced. As LtPowers has a large resolution he may not see a huge difference.--Nicholasjf21 (talk) 23:17, 3 February 2013 (UTC)[reply]

Could we set a maximum width for the banners? --Peter ^Talk 23:46, 3 February 2013 (UTC)[reply]

Do you mean maximum height? We could do, yes, so it should be possible, certainly. Perhaps if we try and disable the notice and then see how much space we need to make up?--Nicholasjf21 (talk) 00:12, 4 February 2013 (UTC)[reply]

To hide the sitenotice on Main Page New, the following code should be copied to MediaWiki:Common.css by an admin:

/* Hide sitenotice on Main Page New */ body.page-Main_Page_New #siteNotice {         display:none;  }  

Thanks, JamesA ^>talk 00:56, 4 February 2013 (UTC)[reply]

That's fantastic - thanks very much! It looks much cleaner now! A slimmed map should hopefully sort it all out! --Nicholasjf21 (talk) 09:00, 4 February 2013 (UTC)[reply]

I've swapped the world image for Peter's cropped version (in JPG format). As a result, the imagemap doesn't work as precisely as it did previously, but I'll change that later today. --Nicholasjf21 (talk) 16:18, 4 February 2013 (UTC)[reply]

The image-map should now be fully functional.--Nicholasjf21 (talk) 18:22, 4 February 2013 (UTC)[reply]

I'd like to echo some of LtPowers concerns. I like the new design, and with the recent CSS changes it finally scales properly for me, but I'm concerned that we're making poor use of vertical space. Right now I see the world map and Bali, and have to scroll to see anything else. The various destination images now have only about 40% of their vertical space devoted to text, so it seems like there may be some room to crop things a bit more and make better use of the screen real-estate.

An unrelated note, but it would be good to work in a link to Peter's Destinations page next to the "Click on a continent" link, both for accessibility and as an alternative navigational aid for those who won't realize that the world map is clickable. -- Ryan • (talk) • 03:06, 7 February 2013 (UTC)[reply]

On the whole, I love it.

My sole complaint is that I'd like to find some way to incorporate the DotM/OtBP/FTT blurbs as they are now, rather than condensing them to only a sentence or two. Even if that doesn't happen, though, I'm fully on board with this design.

-- AndreCarrotflower (talk) 00:23, 4 February 2013 (UTC)[reply]

I agree. I'm fine with this, regardless of the fact that one has to scroll down to see all the photos. The photos are so vivid, they're really magnificent! Ikan Kekek (talk) 02:00, 4 February 2013 (UTC)[reply]

Can we move the "provide design feedback and loading slowly" on to the top picture? Also the main page of Wikipedia has a lot less space before stuff begins. Can we get rid of the white space at the top?Travel Doc James (talk · contribs · email) 00:58, 4 February 2013 (UTC)[reply]

I would like to see the pictures start immediately below the edit buttons. Travel Doc James (talk · contribs · email) 01:04, 4 February 2013 (UTC)[reply]

(edit conflict x2) I was thinking the same thing, but the issue is that they would only be seen if we set their text-color as white. If the images are loading slowly or strangely, than we need users to be able to see the text without the requirement of images. However, the assumption could be made that the top of the first 'map' banner will always load first, and if someone's computer is loading slowly, they will still see the text at least. JamesA ^>talk 01:05, 4 February 2013 (UTC)[reply]

Should be some details here to help with suppression of the white space.[1] While we have gotten ride of "Main page" we have not gotten rid of the space it was in.Travel Doc James (talk · contribs · email) 01:09, 4 February 2013 (UTC)[reply]

I would in fact like the images to move right over to the left ie to the blue line. Not sure if that is possible. Travel Doc James (talk · contribs · email) 01:10, 4 February 2013 (UTC)[reply]

I tested some of the code at the Wikipedia MW page, but I really think we've gone as far as we can with this. I just removed a lot of hidden text crap that was leaving whitespace at the top. Any whitespace that is left is either built into the root of the Vector skin and would be difficult to change, or is caused by the Feedback/Loading Slowly? inteface. JamesA ^>talk 01:15, 4 February 2013 (UTC)[reply]

Wikipedia still has less white space on their main page. We should be able to do at least that good. Travel Doc James (talk · contribs · email) 01:20, 4 February 2013 (UTC)[reply]

Look better :-) Travel Doc James (talk · contribs · email) 01:40, 4 February 2013 (UTC)[reply]

You're right. I used some more Wikipedia code and got it even higher. Anything beyond this would need a lot more code. The following needs to be copied to MediaWiki:Common.css by an admin to take effect (along with the stuff above):

/* Don't display some stuff on Main Page New */ body.page-Main_Page_New #deleteconfirm, body.page-Main_Page_New #t-cite, body.page-Main_Page_New #footer-info-lastmod, body.page-Main_Page_New.action-view #siteSub, body.page-Main_Page_New.action-view #contentSub, body.page-Main_Page_New.action-view h1.firstHeading {     display: none !important; } 

-- JamesA ^>talk 01:48, 4 February 2013 (UTC)[reply]

Do we really want to hide the central notice and sitenotice on the new main page? –sumone10154^(talk) 01:59, 4 February 2013 (UTC)[reply]

Wow amazing. All the white space is gone :-) We should only show a central notice / site notice on very special occasions. Most of the time it should be clean IMO. Travel Doc James (talk · contribs · email) 02:07, 4 February 2013 (UTC)[reply]

I find it quite amazing myself! So everyone is aware, to the right is how the page now appears on my fairly wide screen. All the text of the DotM is now visible. JamesA ^>talk 02:17, 4 February 2013 (UTC)[reply]

I guess the last thing we could do is trim the top and bottom bit of the black map. Travel Doc James (talk · contribs · email) 02:25, 4 February 2013 (UTC)[reply]

The "loading slowly" text is just "loading" for me now, at all resolutions. --Peter ^Talk 05:54, 17 March 2013 (UTC)[reply]

I just removed the "provide design feedback" link, as it probably shouldn't be up there indefinitely. Revert if you think it should stay. --Peter ^Talk 22:21, 10 April 2013 (UTC)[reply]

I preferred the previous one. I find this one too dark. Travel Doc James (talk · contribs · email) 01:01, 4 February 2013 (UTC)[reply]

How about this image? http://en.wikipedia.org/wiki/File:Balinese_Stone_Carvings.jpg Travel Doc James (talk · contribs · email) 01:26, 4 February 2013 (UTC)[reply]

Still not perfect. Contrast issue gr. I still like the white text though I guess we could consider altering the color. Travel Doc James (talk · contribs · email) 01:41, 4 February 2013 (UTC)[reply]

We could put the countries flag into the word Bali? Travel Doc James (talk · contribs · email) 01:52, 4 February 2013 (UTC)[reply]

I, ah, flipped the image, and the text is much more readable now ;) Is that too crazy? Am I deceiving the world regarding the orientation of Balinese statues? --Peter ^Talk 03:53, 4 February 2013 (UTC)[reply]

How ingenious. But does anyone else find it ironic saying "Stakes a serious claim to be paradise on earth" when there's some screaming rock devil a few centimetres below :P JamesA ^>talk 04:00, 4 February 2013 (UTC)[reply]

I really like the new image - it works really well! In terms of text colours, if a suitable picture not available in future, I think we could also use grey or black, although I think it would be preferable to keep all the text uniform. --Nicholasjf21 (talk) 08:58, 4 February 2013 (UTC)[reply]

Great call on the flipping of the image. I am happy with that. Travel Doc James (talk · contribs · email) 10:48, 4 February 2013 (UTC)[reply]

Wondering if we should remove this line for IPs "Please join Wikimedia's newest project by contributing to an article today!" As we already have "anyone can edit" below Wikivoyage.Travel Doc James (talk · contribs · email) 01:48, 4 February 2013 (UTC)[reply]

To my mind that could go, unless anyone else objects?--Nicholasjf21 (talk) 18:55, 5 February 2013 (UTC)[reply]

IMO we have something which we should announce to a limited extent anyway by adding a link to it from the main page. Thoughts? Travel Doc James (talk · contribs · email) 01:49, 4 February 2013 (UTC)[reply]

Maybe we should add the link by tomorrow, and give it 10 days for discussion until 15 February when we decide if we want to implement or go back to the drawing board. Possibly something like "Want to try something new? Click here to see our new Main Page protype." as small text in the far top-right corner. JamesA ^>talk 04:04, 4 February 2013 (UTC)[reply]

Any chance we could get a small link on the main page to garner opinions? It would be really useful (and important!) to hear from a wider audience on this issue. --Nicholasjf21 (talk) 23:44, 4 February 2013 (UTC)[reply]

It seems all the banners are in PNG format. This should be changed to JPG. JPG was designed for photos, which all our banners are, while PNG is for computer-generated images. Changing to JPG will also drastically decrease the file-size, bandwith, and loading times which is far too high as it stands. JamesA ^>talk 04:16, 4 February 2013 (UTC)[reply]

Good point. I'm also thinking we should host them locally, or otherwise create a special category for them on Commons. --Peter ^Talk 07:25, 4 February 2013 (UTC)[reply]

Good thinking - I only used PNGs as a temporary solution - I'm sure JPEGs will have the same impact (at a much greater speed!). --Nicholasjf21 (talk) 08:54, 4 February 2013 (UTC)[reply]

Good call. Should be hosted locally and protected. Travel Doc James (talk · contribs · email) 10:49, 4 February 2013 (UTC)[reply]

Right, being able to delete and protect easily is a primary benefit. --Peter ^Talk 15:26, 4 February 2013 (UTC)[reply]

I've just changed all the images to JPEGs, tohugh they are still hosted on Commons - hopefully the page will load more quickly as a result.--Nicholasjf21 (talk) 16:16, 4 February 2013 (UTC)[reply]

It seems like many people were concerned about editing the current Main Page with a low resolution, with an iPad, or while on the road. With the current Main Page, I can't even click on Oceania or anything east of India with my current computer! Only "Discover", "Getting involved" and the sister links work properly. Of course I use a laptop now with a low resolution, but isn't this now suddenly not important anymore? I thought that was the point of changing the Main Page in the first place. Globe-trotter (talk) 09:59, 4 February 2013 (UTC)[reply]

Could you provide a screenshot please? Do the DotM, OtBP and FTT boxes not work either? The links there should scale regardless of the images, so I suspect some other issue. Also, what's the resolution of the screen you were viewing from? JamesA ^>talk 10:14, 4 February 2013 (UTC)[reply]

The new design displays better for me than the old one. You might need to clear your cache. Travel Doc James (talk · contribs · email) 10:51, 4 February 2013 (UTC)[reply]

If I change the resolution of my screen to 1024px (the horizontal resolution of an iPad) everything still appears to function, albeit in a tighter space. It might be worth clearing your cahce as James suggests above, just in case some amended code hasn't taken effect.--Nicholasjf21 (talk) 13:35, 4 February 2013 (UTC)[reply]

Clearing cache doesn't change anything. My resolution is 1440x900. If I view full screen, it does display correctly, but I usually watch it windowed just a bit smaller than full screen, and then everything east of India is missing. The current Main Page works fine, so this is not an improvement in that regard. And the largest problem with the current Main Page was not being able to deal with lower resolutions... Globe-trotter (talk) 14:16, 4 February 2013 (UTC)[reply]

I'd consider your resolution to be in the higher bracket - I'm on 1366 and the page is designed to work down to 1024 (and maybe a bit less!). It's not the resolution that's to blame in this case, I think it's more the fact that you use a window that is smaller than your screen. The current CSS uses the device's width to choose which size image to display. These images are then fixed, which allows us to use a fixed number of imagemaps and position the rest of the page properly. My first attempt at making the page scale used CSS which dynamically scaled the images to the size of the user's screen. This however proved impractical for two major reasons:

1. This meant that rather than the current 11 variations of the imagemap hundreds would be required.

2. For the dynamic scaling to work, the images must be positioned 'absolutely'. This means that the images readily mess up the rest of the page and text.

Very few pages use dynamic scaling, preferring instead to combat the issue with space to the left and right of the content. As can be seen on the Lonely Planet website, the page can withstand being in a window up until the margins of the content, at which point, rather than resizing, the edges of the images (starting on the right) will disappear.

Unfortunately, I don't think Wikivoyage can implement such spaces on the left and right as we have to use a frame to house the content. Text happily moves to accommodate a shrinking page, however it appears to be extremely difficult to programme an image to do the same (though if anyone knows better (and I'm sure people do!) please let me know!). As such however, it is only the shrinkage of the top image that is any major problem as content on the lower pages moves to resolve the issue. Unfortunately, I can't really think of a solution to this issue (short of significantly thinning the images), but if anyone else has any ideas, I'd be very grateful. --Nicholasjf21 (talk) 15:03, 4 February 2013 (UTC)[reply]

So this Main Page cannot be used windowed? That's very unwanted I think, with the bigger screens more and more people use a browser windowed. Globe-trotter (talk) 00:44, 5 February 2013 (UTC)[reply]

The old main page works just as poorly windowed as the new one for me. Maybe even worse. Travel Doc James (talk · contribs · email) 02:30, 5 February 2013 (UTC)[reply]

Is there any way to scale based on the image size, but force the best fit of the 11 discrete sizes? Or possibly set the banners to display smaller than they currently do at each screen size (to allow for space)? --Peter ^Talk 02:37, 5 February 2013 (UTC)[reply]

To correct what issue? Travel Doc James (talk · contribs · email) 02:43, 5 February 2013 (UTC)[reply]

Correct the issue of sizing (because the image is too big when the window is resized). Perhaps instead of selecting the image that would fit across the entire screen size, select the image that is one or two sizes smaller. It would still look great.

I think the most dynamic way would actually be to use Javascript/jquery to resize the image map, like so [2], but it would need some work and add extra overhead, so not necessarily the best option. - Torty3 (talk) 05:34, 5 February 2013 (UTC)[reply]

If you create an example would be happy to look at it. Why is one resizing the window? Most people use the window at full size. Travel Doc James (talk · contribs · email) 16:01, 5 February 2013 (UTC)[reply]

If given access again, I could knock each resolution's image down to the next level, although I fear this would only create a maximum of 240 px of extra space, decreasing as the resolution does. We are to an extent limited by the framework in which this page is created: were this merely a blank html page then improved window compatibility could be achieved easily. My only fear is that we are forced to compromise to the extent that the page's impact is lost. --Nicholasjf21 (talk) 16:11, 5 February 2013 (UTC)[reply]

I think a slight reduction in banner size might be nice, actually. It would allow readers to see more of the banners at first glance. --Peter ^Talk 17:59, 5 February 2013 (UTC)[reply]

I've had another look at the CSS code and the images now scale with the window, whilst preserving the imagemap! Any issues, please let me know! As yet, the text does not resize, but it should work down to a minimum resolution 1024px. --Nicholasjf21 (talk) 15:21, 6 February 2013 (UTC)[reply]

Right, both text and images should now scale down to a resolution of 800px wide. I'd hope that below that, we could use a separate mobile page to cover other devices. Let me know if you have any issues. --Nicholasjf21 (talk) 21:19, 6 February 2013 (UTC)[reply]

Yes agree, this page is not really for mobile and the special mobile page will also need development. Travel Doc James (talk · contribs · email) 21:27, 6 February 2013 (UTC)[reply]

It looks better now, but it's still not functioning correctly with my laptop on windowed. Now the extreme left and extreme right side of the images are cut off, including the text. What also happens in full screen view is that the images don't align with the tables underneath them. Globe-trotter (talk) 23:37, 8 February 2013 (UTC)[reply]

I still love the idea of having a night banner and a day banner based on the users time. Did we come up with a way of doing that? --Peter ^Talk 22:46, 4 February 2013 (UTC)[reply]

Well, back when that idea was first proposed I made a banner to fit over the original one without disturbing the imagemap. Whilst it would need cropping to fit the new one, I'm sure there will be a way of doing it and it is a nice idea!http://commons.wikimedia.org/wiki/File:Bluemarble_banner.png I'll have a look at what's possible! --Nicholasjf21 (talk) 23:31, 4 February 2013 (UTC)[reply]

This site (http://www.katgal.com/2007/03/time-sensitive-css-switcher/) seems to describe something similar to what we'd like, though it would require JavaScript and 2 CSS stylesheets(not too difficult, but is it possible to have two common CSS files on here?). We'd then have to add the day image at different resolutions to the proposed page and it should (he said!) then work! --Nicholasjf21 (talk) 23:35, 4 February 2013 (UTC)[reply]

I believe the issue is determining whether it's night or day; as you know, each is present on half of the planet at any given time. LtPowers (talk) 00:08, 5 February 2013 (UTC)[reply]

If we could do this it would be cool. Travel Doc James (talk · contribs · email) 02:33, 5 February 2013 (UTC)[reply]

Hi everyone!

I'm going to do some tinkering with the page's CSS code this evening, particularly of the following features:

• Change image resolution to next size down, allowing for window space.

• Attempt to fix iPad issues (here).

• Idea of an image carousel.

• Map image that changes with user time.

If I've missed anything or if you have any other ideas, I'd be glad to (try and(!)) implement them!--Nicholasjf21 (talk) 18:56, 5 February 2013 (UTC)[reply]

The top banner for some reason disappears when I view in window. --Peter ^Talk 21:45, 6 February 2013 (UTC)[reply]

Hi! Would mind posting a screenshot of this? --Nicholasjf21 (talk) 22:10, 6 February 2013 (UTC)[reply]

Here it is. I have the problem in Windows on Firefox and in Linux in Chromium (I haven't tried other options). --Peter ^Talk 22:21, 6 February 2013 (UTC)[reply]

Hmm - would you mind checking if you have any custom CSS in your preferences? If you still have an old version in there it will clash with this new one, so you'll need to clear it. If you don't, let me know and I'll have another look! --Nicholasjf21 (talk) 22:41, 6 February 2013 (UTC)[reply]

That was the culprit—it scales beautifully now! --Peter ^Talk 01:40, 7 February 2013 (UTC)[reply]

First, I think this is excellent, and as others have mentioned, a very fresh idea. Some feedback:

• Instead of having to scroll down, can we have a Carousel[3]? We could have a menu on top "Navigate", "Destination of the Month", etc. and clicking on it should show each element separately.

• I am not a fan of the "Click on a Continent" text. If you have to tell them, it defeats the purpose of the design. Can we think of some other way?

• Likewise, we shouldn't give "Other destinations so much prominence when it is probably one of the weakest parts of the site.

— Ravikiran (talk) 04:30, 5 February 2013 (UTC)[reply]

Really impressed, good work. Still scaling issues on all my devices - on an Apple macbook pro, looks good if my window is full screen, but won't scale to size of browser window (i wouldn't choose to have my browser window full screen, normally). Still needs a lot of work for iPhone and iPad, I think you're working on it, but let me know if screenshots would be helpful, if you don't have an iPad etc – cacahuate ^talk 05:09, 5 February 2013 (UTC)[reply]

Thank you both for your very kind comments.

A carousel sounds like a really nice idea - I'll look into whether it's possible on here. I'm not quite sure how else we could tell people to click on the map , but if you have any ideas, please let me know! The 'Other Destinations' link wasn't originally there, but was suggested by another user (above) as it means one can now access the whole world from the main page's top banner. We are still tinkering with the scaling and hopefully we'll be able to create a separate site optimised for mobile phones. If you could give us a screenshot from your iPad, that would be really useful as we don't currently know how the page reacts on a tablet or to a change in orientation. Thanks! --Nicholasjf21 (talk) 11:51, 5 February 2013 (UTC)[reply]

Adding new subsection below for tablet talk. I'd be interested to see a carousel version, but actually quite like it as it is. Only other comment so far is that I'm not sold on the blue color of the bottom two boxes. Wondering what it would even look like as a darker grey or black with white type, maybe it would tie in nicely with the top banner then? – cacahuate ^talk 17:10, 5 February 2013 (UTC)[reply]

Thanks very much for those screenshots - I'll see what I can do! Just to double check, you are using thehttp://en.wikivoyage.org/wiki/Main_Page_New link rather than the one on my user page? I might have a play with carousels, but there's no requirement to use it. There has been a bit of a debate on the colours of the boxes, but we'll keep looking at them -your ideas sound great! --Nicholasjf21 (talk) 18:40, 5 February 2013 (UTC)[reply]

Yep, that's the one! – cacahuate ^talk 23:58, 5 February 2013 (UTC)[reply]

Here's a thought. We could replace the two boxes with a "banner," which would just be an image mimicking their current appearance, but which would then scale in concert with the rest of the banners. --Peter^Talk 02:42, 6 February 2013 (UTC)[reply]

I *feel* that if we could get the carousel with a tabbed header like "Navigate", then it would be intuitive to most folks that the map is clickable. But this is just a guess. — Ravikiran (talk) 03:50, 6 February 2013 (UTC)[reply]

Although I think the carousel would be cool, I think there are a number of issues that make it unfeasible. Firstly, it will be extremely difficult to code, requiring complex JS or even something beyond that. We may even need an extension, but I don't believe one exists (yet). The only wikis I've seen do this are all of those over on Wikia, but they spent multiple months of paid time developing that. The second issue is scaling. I can't ever imagine getting a live, ever-changing carousel to also resize or auto-size itself to someone's window. It was hard enough getting a static image. And finally, a carousel would make the Main Page very small indeed. We would need to think about adding more boxes, as it would be 2 banners high. While a great idea, it's not really an option on a wiki. JamesA ^>talk 11:13, 6 February 2013 (UTC)[reply]

I agree with you James. It is a great idea and for a conventional website, I'm sure it would be excellent. But I fear we're already pushing the Wiki formatting to its limits. I think I've managed to get the images scaling now; I'm just waiting for it to be tested. Perhaps a carousel could go on a list of long-term desires; something that we could consider and play with once the page is (hopefully) in place?--Nicholasjf21 (talk) 11:27, 6 February 2013 (UTC)[reply]

Looks stunning. We do have to make sure the mobile situation is sorted out before we can roll it out though. Jpatokal (talk) 01:22, 7 February 2013 (UTC)[reply]

The mobile site is different completely no? Travel Doc James (talk · contribs · email) 18:24, 7 February 2013 (UTC)[reply]

As noted above, many tablets get the "full" version, which doesn't render usable. Jpatokal (talk) 03:12, 8 February 2013 (UTC)[reply]

The page is no longer appearing correctly for me, the text is now smaller and part of it is cut off from the side (it was fine a few days ago though). I'm using Firefox on Windows 7, but Google Chrome doesn't have any of these problems. Here's a screenshot:

–sumone10154^(talk) 02:30, 7 February 2013 (UTC)[reply]

That should now be fixed for you - thanks for letting me know!--Nicholasjf21 (talk) 09:25, 7 February 2013 (UTC)[reply]

• Again very fine. Curtaintoad ^{(curtain or toad)} 12:09, 22 February 2013 (UTC)[reply]

• Visually striking, the images look good. However images take up too much screen real-estate. Do not think you should have to scroll too far to reach the Discover and Get Involved sections. For frequent visitors people will tend to click straight to watchlist and will not see that these section have been updated.
• Don't forget not everyone has broadband, too high a quality images take time to build.
• Really like the Welcome mapped image at the top, this is a good way to encourage people to explore. Also like the search field as well as the travel topics being more prominent. Could however be overall a little smaller.
• Think the 3 feature subjects should stay side by side as with current main page.

--Traveler100 (talk) 07:06, 7 February 2013 (UTC)[reply]

My first impressions are pretty much exactly the same as Traveler100. Needs to be much smaller, I do like the three features side-by-side, don't want to scroll so much.

To add one more point; it makes the "Discover" and Get Involved sections look a bit primitive. As a result, they look out-of-place. ChubbyWimbus (talk) 15:16, 7 February 2013 (UTC)[reply]

nah! New and striking look is awesome! I do think we need to redesign the two bottom boxes a bit to fit the new style though – cacahuate ^talk 16:39, 7 February 2013 (UTC)[reply]

The three side by side does not fit on my monitor. But than I have it vertical. The old style looks too much like an "encyclopedia" rather than a travel guide :-) I think realistically we may need to have two pages one for those with fast and one for those with slow connections. Travel Doc James (talk · contribs · email) 18:23, 7 February 2013 (UTC)[reply]

I think you're right - two pages may be necessary. I'm afraid I don't presently know how long this page would take to load on a slower connection - any ideas? Also, does anyone jave any ideas about ways in which I could spice up the bottom boxes?--Nicholasjf21 (talk) 18:53, 7 February 2013 (UTC)[reply]

On a portrait mounted high resolution screen this page looks really good, but that is not what most people will be viewing on. Most will be medium sized landscape screens or portrait tablets. I agree with Travel Doc James it should look more like a guide book than an encyclopaedia, but the when you pick up a physical book you view the whole cover. Can we have something that sizes to the readers browser size? I like the overview world map (would want to keep that) and the quality good sized images look great. How about only displaying one topic and not three? Could alternate every 20 seconds which topic is displayed if no page change made, or cycle through a different topic every time the user/IP re-visits the page.--Traveler100 (talk) 20:01, 7 February 2013 (UTC)[reply]

The three side-by-side was really problematic when not viewed in widescreen. I'm interested in Traveler100's idea, which I think is basically what Ravikiran was proposing, but could you (or someone) mock something up so we could test it out? By the way, this current layout already looks awesome on a tablet. --Peter ^Talk 20:31, 7 February 2013 (UTC)[reply]

Thanks very much! I'll have a go at the change every 20 seconds idea - if all is well, it should be do-able without too much hassle....--Nicholasjf21 (talk) 21:01, 7 February 2013 (UTC)[reply]

Actually, I was thinking more of the carousel: have three links on the top of the second banner for dotm, otbp, and ftt, and have the one currently viewed highlighted. I'm not sure whether anyone actually looks at a splash page for more than 20 seconds! --Peter ^Talk 21:46, 7 February 2013 (UTC)[reply]

The new layout is really impressive visually. I also like the idea of rotating the DotM, Otbp and Ftt to address the screen size issue -- either every 10-15 seconds or through the three links that Peter mentioned above (or both).

How do the high-res images work? Is that a cropped version of one the guide's photos that will have to be prepared before the guide can be featured? -Shaundd (talk) 04:12, 8 February 2013 (UTC)[reply]

Yes, they are cropped, and will need to be prepared as part of our DotM process (I have some lined up for Niamey next week). --Peter ^Talk 05:29, 8 February 2013 (UTC)[reply]

The carousel feature sounds like an interesting solution. I'd definitely like to see how it looks. ChubbyWimbus (talk) 06:49, 8 February 2013 (UTC)[reply]

The carousel would be great if we could get it working, but as I said, we'd need a pre-built MW extension or months of coding by trained experts. If you can prove me wrong, that's fantastic. You can see an example of a carousel in action on this Wikia wiki, but I remember that Wikia put a lot of time and monetary resources into developing that thing, and a lot of people didn't like it. JamesA ^>talk 06:59, 8 February 2013 (UTC)[reply]

Would a Slideshow work?--Traveler100 (talk) 07:24, 8 February 2013 (UTC)[reply]

We might be able to make that work I suppose... the only major problem as I see it is how to make the text loop with the pictures, but it should be do-able (hopefully!).--Nicholasjf21 (talk) 09:38, 8 February 2013 (UTC)[reply]

I fear a fully fledged carousel may perhaps be a bit beyond our (but more specifically my) capability! I could perhaps do a sort of 'slideshow' that changed the images every 5 seconds or so, but whether that would be any good I don't know....--Nicholasjf21 (talk) 16:37, 8 February 2013 (UTC)[reply]

Hi! I was just thinking whether it would be preferable to try and make this site mobile compatible or to create a new page altogether. The former means that we would only need 1 page for all devices (although whether it would be quick enough on a mobile network is a moot point), whilst the latter would offer the opportunity to customise a page specifically for mobile usage, but does require multiple pages. Any thoughts? --Nicholasjf21 (talk) 19:10, 7 February 2013 (UTC)[reply]

I'm all for a dedicated mobile main page, particularly one that would be really stripped down and focused on navigation. I kind of had that in my mind while putting together the very bare-bones Destinations page. --21:48, 7 February 2013 (UTC)

That sounds great! With a bit of tweaking I'm sure that would be ideal! --Nicholasjf21 (talk) 23:30, 7 February 2013 (UTC)[reply]

Agree that this is a smarter way to go. One does not want to ask a single page to do too much or it will not do it all well. Travel Doc James (talk · contribs · email) 09:04, 8 February 2013 (UTC)[reply]

Do we then want to start work on the mobile site at the same time as this one, or wait until the desktop version is up and running first? --Nicholasjf21 (talk) 12:02, 10 February 2013 (UTC)[reply]

Hi! I'm still slightly concerned about how this page now renders on tablets. If you have one and experience issues would you mind posting a screenshot and/or reporting any problems? Thanks!--Nicholasjf21 (talk) 16:15, 8 February 2013 (UTC)[reply]

Hi all, sorry I'm a bit late to the discussion. I've had quite a bit of work/travelling/work/etc going on for the last couple of weeks since James and Nicholas asked me to look at this, so I haven't really participated. I'm going to take a bit to read this discussion completely and then I'll probably have some more stuff to write, and ideas for what to do. In the meantime I have sorted out a couple of the issues raised via my own CSS implementation. Sadly it's already superseded by what you see here in the Page under discussion, so I'm going to have to do it all again. -- MarkJaroski (talk) 20:13, 8 February 2013 (UTC)[reply]

Thanks very much for taking a look at this Mark! I really do appreciate it. The major issue I'm facing is attempting to implement a carousel (see above), it looks like it will involve lots of JavaScript and CSS. I will have a go, but I'm not sure I'll do very well!--Nicholasjf21 (talk) 21:48, 8 February 2013 (UTC)[reply]

I'll look at that, but first I think it might be a good idea to look at how the layout is done in the first place. It looks to me that this is mostly done right now with big HTML tables, and that the various banner images are all loaded in multiple sizes no matter what. We should probably think about changing to pure CSS layout and loading only the images needed for a given layout. That will be lighter and simpler. What do you think? -- MarkJaroski (talk) 07:36, 9 February 2013 (UTC)[reply]

That sounds like a great idea - I fear that, whilst the current one works, I've done it clumsily so there's probably some redundancy in there that we could remove and use to improve it.--Nicholasjf21 (talk) 10:01, 9 February 2013 (UTC)[reply]

starting to think it might be best to do it add an extension. That will give us more control so we won't have to fight the wikitext engine to get the HTML we need. -MarkJaroski (talk) 12:23, 9 February 2013 (UTC)[reply]

That sounds like a good idea - at times I've felt like I'm attempting to build a skyscraper on foundations of sand! Is it going to be a very time-consuming process?--Nicholasjf21 (talk) 13:15, 9 February 2013 (UTC)[reply]

Not really. If I'm right the longest part will be getting WMF to accept the extension, but if we all want it it shouldn't be a problem. -- MarkJaroski (talk) 09:20, 10 February 2013 (UTC)[reply]

Brilliant - that sounds great. --Nicholasjf21 (talk) 10:55, 10 February 2013 (UTC)[reply]

Neat! I've just discovered that these days I can apt-get mediawiki! That was easy. So now I'll start working on an extension to do our carrousel, etc. -- MarkJaroski (talk) 16:57, 12 February 2013 (UTC)[reply]

Hi! Does anyone have anything else they'd like to see added to (or removed from) the page? At present, the 'carousel' idea is proving tricky, and Mark's very kindly looking at rationalising some of the code. In the meantime are there any other (slight smaller preferably!) changes that you'd like to see? --Nicholasjf21 (talk) 16:45, 10 February 2013 (UTC)[reply]

I would definitely rethink the blue boxes at the bottom - Peter suggested above maybe converting into a banner, I like that idea. Maybe try to match it to the header? Black with white type? Or maybe even if grey would be nice, can you try some things and show options? – cacahuate ^talk 05:02, 11 February 2013 (UTC)[reply]

I'll take a look this evening and report back! --Nicholasjf21 (talk) 15:12, 11 February 2013 (UTC)[reply]

I've changed the bootom boxes to grey and the text to white (as much as possible!). As you can see, lots of the content in those boxes uses templates, meaning that to display them in white we'd have to mess up the current front page. As for the bullet points, that would require some more code in Common.CSS. Any thoughts? I'll keep thinking of what we can do with it. --Nicholasjf21 (talk) 18:28, 11 February 2013 (UTC)[reply]

I'd like, ideally, to see what I've visualized at right. Clicking the dotm, otbp, ftt buttons would change the displayed banner. The table at bottom would be replaced by a banner of similar dimensions and identical scaling to the banners above (so the banner is a 1700 x 567 PNG file with two blue boxes separated by a white area, with text then added over it in the code, as we add text to the other banners). --Peter ^Talk 04:47, 12 February 2013 (UTC)[reply]

I like that layout. How about changing the dotm/otbp/ftt buttons to a carousel approach, i.e. a left arrow button on the left side, a right arrow button on the right side, and leave out the button corresponding to the one currently displayed? I also wonder if the "Click on a continent" text would be more noticeable if we moved it across onto the map, maybe in the ocean under Africa. --Avenue (talk) 11:59, 12 February 2013 (UTC)[reply]

Right, I think I may have found a way to create a carousel using pure CSS. Would we prefer buttons or a timer system to control it? --Nicholasjf21 (talk) 13:38, 12 February 2013 (UTC)[reply]

This might be asking too much, but could we possibly do both? Have a 10 sec rotation, which would be halted by the button controls? --Peter ^Talk 16:19, 12 February 2013 (UTC)[reply]

Great mockup! I'd really like the carousel approach to the featured destinations. Globe-trotter (talk) 16:59, 12 February 2013 (UTC)[reply]

Wow! Buttons please. I hate timers. — Ravikiran (talk) 17:49, 12 February 2013 (UTC)[reply]

Sounds good! Right, I'll aim for buttons and do my best to get a timer as well. I'll post on here when I've got a working version. --Nicholasjf21 (talk) 18:34, 12 February 2013 (UTC)[reply]

I second Peter's suggestion of a timer, but also with arrows / buttons that can overrule it. On another note, I'm sure you're working on this, but the boxes at the bottom aren't aligning the same width as everything above it, they tend to extend wider – cacahuate ^talk 01:47, 13 February 2013 (UTC)[reply]

Looks very very fine. - Curtaintoad ^{(curtain or toad)} 12:06, 22 February 2013 (UTC)[reply]

I'm not a fan. I love when people think outside the box so I truly appreciate the effort. But while I actually do believe it looks good in many ways, I don't think it goes well with the general Mediawiki layout, and takes us to far away from the Wikimedia family. I also think using large images as default is problematic for a site which is meant to be used while travelling, even with the link to revert to the old main page, since I believe that functionality for people on the road should be our main objective, not an afterthought. I do like the top header, with the clickable world map, if we can integrate that with our current layout somehow and PNGcrush the hell out of that image, I could quite possible support that though. I hate to sound like a nay-sayer, and put down a commendable effort, but that unfortunately is my feedback as it stands, sorry --Stefan (sertmann) ^talk 15:10, 24 February 2013 (UTC)[reply]

Using the monobook skin ([4]), it looks quite strange. The left part is hidden, so it reads "elcome" instead of "Welcome". PiRSquared17 (talk) 21:27, 12 February 2013 (UTC)[reply]

I'll get that fixed for you! --Nicholasjf21 (talk) 21:41, 12 February 2013 (UTC)[reply]

Also applies to the "modern" skin, Cologne Blue, and to some of the lesser-used skins (chick, standard, myskin, nostalgia). However, you should mainly focus on getting Vector and Monobook to work because almost nobody uses the other skins. PiRSquared17 (talk) 22:01, 12 February 2013 (UTC)[reply]

Hi! I've hit a bit of a brick wall with the carousel implementation if I'm honest. The method I was attempting to use used CSS which, whilst complicated, was hopefully simpler than JavaScript. Unfortunately, that type of CSS only functions with the newest versions of browsers (particularly with Internet Explorer) and it was becoming very difficult to maintain the scaling effect within the carousel framework. As such, I think a JavaScript solution might be the answer. Unfortunately, my knowledge of JS could be written on the back of a postage stamp, but if anybody is, or knows of, someone who is adept with it and would be prepared to help, I'd be very grateful. I have tried on Stack Overflow, but no-one has responded as of yet.

The scaling of the boxes at the bottom in relation to the banners is also somewhat problematic. Whilst the boxes scale dynamically, the banners scale in stages in order to preserve the imagemap of the world image. As such, they tend not to line up as would be desirable. If anyone has any thoughts as to how that would be fixed, I'd also be very grateful!

Unfortunately, I'm not really a coder and I'm sure that if anyone with some experience were to look at what I've done, their first thought would be 'What a mess!'. I have however learnt a lot whilst working on this, and I'll keep trying to improve it. Unfortunately, I'm slightly concerned a carousel could be beyond our reach on here - unfortunately, MediaWiki is not designed or optimised for this sort of effect, but I've not given up hope yet.

Any more ideas / opinions are very welcome! :)

Can you put together a mock-up outside of Mediawiki ? I'll use that to build the extension. Doing it as an extension will make it much much simpler to get the HTML you need. A pure div/span layout would probably be ideal, no? Thanks! -- MarkJaroski (talk) 15:19, 13 February 2013 (UTC)[reply]

Hi! Sorry for the slow response! I'll try my best to put a mock-up together, but I can't vouch for the quality! I was planning on using the examples here, but I'm not sure they'll be compatible with all browsers. Something purely made up of div and span formatting that would be brilliant - it's quite hard using a Wiki/HTML hybrid! --Nicholasjf21 (talk) 23:35, 13 February 2013 (UTC)[reply]

Exactly. Those examples are exactly the sort of thing that I think we can pull off with an extension, since we won't be bound by the limits of Mediawiki. I'm going to be on leave next week, and though I'll have to spend a certain amount of time with the kids I'm also hoping to get some time to work on this. -- 18:24, 15 February 2013 (UTC)

Thanks very much, that's brilliant! :) If there's any way I can be of assistance, please just let me know! --Nicholasjf21 (talk) 22:13, 15 February 2013 (UTC)[reply]

OK, so I've got a sandbox up and running and am ready to get started. Now we need two things, the HTML/CSS/JS design and a design for the tag API which we'll use to implement it in Wikitext. The Parser extensions support an XML-like syntax, so probably we're going to have to do something like this:

<carrousel>    <banner img="someimage.jpg" title="Bali" feature="DOM">"Stakes a serious claim to be paradise on Earth"</banner>    <banner img="someimage.jpg" title="Niamey" feature="OtBP">A lively Sahellan city on the banks of the Niger River</banner> </carrousel> 

Or something like that. We probably need more data, it really depends on how much control editors should have over the final design. The extension code will take the data editors supply in the proposed carrousel and banner tags and turn that into HTML. I presume that you can supply that? Otherwise I'll work on it too. -- MarkJaroski (talk) 14:38, 17 February 2013 (UTC)[reply]

Do you mean the html? I should be able to supply that... I'm not so hot with JavaScript and CSS though (particularly the former!). --Nicholasjf21 (talk) 16:59, 17 February 2013 (UTC)[reply]

I would like to see the clickable areas on the world map light up when I hover over them with the mouse, or drag a finger over them on a touch screen. This visual feedback will help make it clear what clicks we are inviting folks into. Outlining or highlighting would do it. --Rogerhc (talk) 05:36, 16 February 2013 (UTC)[reply]

That does like a nice idea, although I confess, it also sounds difficult to implement! If we redid the image-map in pure html it might be possible I think...? --Nicholasjf21 (talk) 19:49, 16 February 2013 (UTC)[reply]

There's a Javascript script that might help with this, discussed here: mediawikiwiki:Extension talk:ImageMap#Imagemap Area highlight script 11186. It seems to work fine with imagemaps like the one in our Oceania article, but I can't get it to work well with this new Main Page yet. (If you want to see it in action, add importScript('User:Avenue/Imagemap-Highlight.js'); to your common.js page (like I've done here), then visit User:Avenue/Oceania map test.) --Avenue (talk) 03:45, 18 February 2013 (UTC)[reply]

That's a lovely effect! Is there any way I can help with it? --Nicholasjf21 (talk) 10:05, 18 February 2013 (UTC)[reply]

Probably. I've got it working semi-okay for just a single screen size here. I haven't figured out how to handle multiple screen sizes, but then, I don't really understand how these work even without the mouseover script. So perhaps you're in a better position to sort that out than me. The script also adds continent labels below the map, which I don't think we'd want here. I imagine it's easy to remove them if you know Javascript, but I don't. I'll let the writer of the script know we're interested in it; maybe they can help too. --Avenue (talk) 13:50, 18 February 2013 (UTC)[reply]

That would be great, yes! I'll try and tweak the co-ordinates as well so it looks a bit cleaner when highlighted. As for the different sizes, if you copy the new Div class tag you've added into all of them, I can's see quite why it shouldn't work. Thanks! --Nicholasjf21 (talk) 16:20, 18 February 2013 (UTC)[reply]

Yes, adding the class to all the div tags seems like the obvious approach, and I tried that first.[5] It doesn't seem to work for me (running Firefox under Ubuntu); it displays blank rectangles for each size except the one that fits best (where the map is displayed), with the mouseover effect working for both the map (good) and all the blank rectangles (bad). I don't know why. The search box appears in the blank rectangle above the map. The other writing isn't visible against the white background there, although underlines appear when you mouse over the links for Itineraries, Phrasebooks, etc. --Avenue (talk) 02:59, 20 February 2013 (UTC)[reply]

(i wrote the script that Avenue mentioned above): i do not know that it's even possible to immitate the "hover" effect on handheld computers, smartphones and tablets using touchscreens. as to different screen sizes: not sure i understand the issue, but you can see the demonstration page of the tool as used on hewiki here: w:he:תבנית:מפת_תמונה/דוגמאות. note the "if you do not speak hebrew" box. if you need tech support installing this tool, let me know. the next paragraph is some technical description of the tool.

if you do not care about the actual technical implementation, you probably want to skip the next paragraph altogether.

how does it work

the tool uses a feature of web browsers that was introduced long time ago as a proprietary enhancement, and eventually incorporated into html5 standard, which is called "canvas". all major browsers support this, but in the case of IE, support was introduced only in version 9 (IE-9), so it does not work for users of IE-8 and earlier, or IE-9 in "compatibility mode".

in order for this to work, i am creating a 3-layer sandwitch: there is the image itself at the bottom, on top of it the canvas is layered, and on top of it the image again. the canvas and the 2nd instance of the image are transparent: the 2nd image is required because when you layer the canvas on top of the image, it "steals" the mouse events of hover and clicks, in effect disabling the imagemap.

the script sniffs the hover events off the imagemap, and uses it to "highlight" or mark the area . it does it by drowing a translucent, or semi-transparent area on the canvas: since the canvas lies below the completely transparent but "active" image, and above the visible but inert image, these translucent areas are visible on top of the image.

one little things this script does, is to "unify" areas if they share link and tooltip: if several different areas share the same link and tooltip, hovering over one of them highlights all of them. this can be use, for instance, when a country contains several non-contiguous regions, such as archipelago, or make Alaska and Hawaii highlight together with continental US etc.

in addition, the script optionally generate a list of the areas, and displays it below the image. hovering above any of this list's items, highlights the corresponding areas. again, this feature is optional. when packaged in a template, you control it simply by a parameter to the template.

in hewiki, the template that uses this script also uses another script that allows toggling image display size within the page. IOW, under the image we show a link-like legend, "לחצו להגדלה", such that clicking it shows the image in an alternative size. think about it as having 2 thumbs on the page, say [[File:filename|thumb|200px]] and [[File:filename|thumb|800px]], such that one of them is hidden and one visible, and pressing the linkette toggles which of them is visible and which is hidden.

peace - קיפודנחש (talk) 19:54, 18 February 2013 (UTC)[reply]

Hi! Thanks very much for your explanation; sorry for my slow response! We're planning on creating another page for mobile devices, so the problems with touch-screens hopefully wouldn't apply here. At present, when the page is resized, a new version of the image is called up with a corresponding image-map. Do you think your technique could be used for this page, any technical help that could provide, would be very gratefully received! --Nicholasjf21 (talk) 21:44, 19 February 2013 (UTC)[reply]

i did not dive deeply into the technique you used to switch images, but since all the coordinates are the same for all sizes, it seem you can at least use a template or something, so this section of main page will look maybe like so:

{{world imagemap|world|1637}} {{world imagemap|world2|1433}} {{world imagemap|world3|1353}} {{world imagemap|world4|1193}} {{world imagemap|world5|1125}} ... and so on and so forth 

and the actual imagemap will reside in Template:world imagemap, which accept 2 parameters - the div ID and the image width. this is technically not any different than what you have now, in principle, but you won't have to repeat the same thing so many times, and it makes the main page a bit tidier. if you want to toy with the imagehighlighter script discussed above, you may also want to note that all the actual parameters used for highlighting (like the border color of the highlighted area, or the color of the highlighted area itself) are controlled by a single variable in the script ("areaHighLighting"), and it is very probable that there are better values than the ones i chose.

peace - קיפודנחש (talk) 00:43, 20 February 2013 (UTC)[reply]

Thanks! That's brilliant! I'll try and have a go with that tomorrow and see if I can combine it with Mark's efforts (above). --Nicholasjf21 (talk) 00:52, 20 February 2013 (UTC)[reply]

Yes, thanks very much for your interesting explanation. I've hacked away at the script a little bit[6] to try and remove the list of areas below the map. But I don't really understand the code, so maybe my edit has unintended consequences. If you have a better suggestion, I'm all ears.

I didn't mean to imply that your script would work for mobile devices/touchscreens. I think it would be nice if it failed gracefully on them though, since I imagine some users of such devices (especially tablets) will visit the usual main page, not the mobile one. Just from playing around a little, it seems to me that selection areas in imagemaps are more discoverable on such devices anyway. (An enclosing rectangle is shown when my finger is put down within one of the selection areas, with or without the script).

I quite like how the highlight border colour you chose looks on our nighttime map. --Avenue (talk) 12:34, 20 February 2013 (UTC)[reply]

I find the bottom color and text contrast not enough to show up well. I think it was better before. Travel Doc James (talk · contribs · email) 02:37, 19 February 2013 (UTC)[reply]

I agree! I'd quite like to make the text white, but because it uses a template that also controls the current front page, I can't change it. Would you like me to revert it to its previous blue? --Nicholasjf21 (talk) 21:47, 19 February 2013 (UTC)[reply]

Please. Black text on a black background does not work. Travel Doc James (talk · contribs · email) 06:01, 21 February 2013 (UTC)[reply]

Have attached what I currently see. Wondering if we should increase the size of the text for "Bali" and "Niamey" so that it is the same size as the "welcome" Travel Doc James (talk · contribs · email) 06:07, 21 February 2013 (UTC)[reply]

Thanks for the screenshot! I'll change the colour back tot he previous blue. Text size is a little difficult as, although the images scale, the text doesn't (I've tried, but it all went berserk!), so I've had to balance legibility at lots of different resolutions, though we could probably still tweak it. --Nicholasjf21 (talk) 10:33, 21 February 2013 (UTC)[reply]

Hi! Whilst the main site is tickled up and its carousel installed, I was thinking it would probably be worth starting on the accompanying mobile site (see above). Any ideas for good starting points? --Nicholasjf21 (talk) 21:54, 19 February 2013 (UTC)[reply]

What precisely needs to be done, and how to we tell mobile devices to use it instead of our standard main page? Destinations almost works really well. The image map would need to scale, and the bulleted lists below should be replaced with a more tidy table (or something that gets less mashed up on small screens). --Peter ^Talk 20:13, 20 February 2013 (UTC)[reply]

Well, the mobile page can, I suppose, be anything we want it to be (just smaller than the main main page!). I think we'd be able to sort out an automatic redirect depending on screen size without much fuss, so that shouldn't be too much of a problem. The only minor issue could be getting a truly dynamic image map to work, but I'm sure it's possible. With a bit of a tidy, I'm sure the Departures page would make a great starting point! --Nicholasjf21 (talk) 00:01, 21 February 2013 (UTC)[reply]

The mobile page should be displayed automatically by MediaWiki when it detects a mobile device (or by going to http://en.m.wikivoyage.org/). LtPowers (talk) 02:26, 21 February 2013 (UTC)[reply]

Right, but how do we edit en.m.wikivoyage.org/Main_Page? --Peter ^Talk 03:04, 21 February 2013 (UTC)[reply]

Hmmm... I'm not sure, but I'll look into it! --Nicholasjf21 (talk) 10:26, 21 February 2013 (UTC)[reply]

I've cloned the Destinations page here. Feel free to have a play and see what comes out! --Nicholasjf21 (talk) 22:57, 21 February 2013 (UTC)[reply]

It's generated automagically by parsing the Main Page for special tags. Some details are at m:Mobile projects/Mobile Gateway/Mobile homepage formatting and m:Mobile projects/Mobile Gateway. LtPowers (talk) 01:28, 22 February 2013 (UTC)[reply]

Is it therefore possible to use a separate page, or would we have to embed it within the desktop version? --Nicholasjf21 (talk) 08:39, 22 February 2013 (UTC)[reply]

I don't know. LtPowers (talk) 15:11, 22 February 2013 (UTC)[reply]

I think this: http://meta.wikimedia.org/wiki/Mobile_projects/Mobile_Gateway#The_easy_way should work, hopefully. I've also had a play with the page here - what do we think? --Nicholasjf21 (talk) 22:58, 24 February 2013 (UTC)[reply]

Not bad, but the imagemap doesn't line up correctly with the image, as far as I can tell. LtPowers (talk) 23:42, 24 February 2013 (UTC)[reply]

No, you're right! :D I must have done it to the wrong scale - I'll fix it now. --Nicholasjf21 (talk) 00:00, 25 February 2013 (UTC)[reply]

There we go - fixed! --Nicholasjf21 (talk) 00:11, 25 February 2013 (UTC)[reply]

• Yes, I do think the new wikivoyage page should replace the old one. It looks very fine and good the new one. Curtaintoad ^{(curtain or toad)} 12:04, 22 February 2013 (UTC)[reply]

I don't quite understand your 'THIS MESSAGE IS NOT FOR USER:NICHOLASJF21' header, but thanks for your comments. --Nicholasjf21 (talk) 16:43, 22 February 2013 (UTC)[reply]

Actually, that message may be for you (and few errors), sorry about that... :/ Curtaintoad ^{(curtain or toad)} 02:12, 23 February 2013 (UTC)[reply]

Don't worry about it. :) --Nicholasjf21 (talk) 09:29, 23 February 2013 (UTC)[reply]

Thank you. :) Curtaintoad ^{(curtain or toad)} 23:23, 23 February 2013 (UTC)[reply]

Around 20 hours ago, i made two edits to the new wikivoyage page: this: [7] - and this: [8]. ;) Curtaintoad ^{(curtain or toad)} 23:31, 23 February 2013 (UTC)[reply]

And i 'm not sure if it is correct or not. Is it correct ? :) Curtaintoad ^{(curtain or toad)} 23:33, 23 February 2013 (UTC)[reply]

I think you're probably right here, though if other people think differently, we could probably consider what they think looks best as well. :) --Nicholasjf21 (talk) 23:42, 23 February 2013 (UTC)[reply]

Great, it 's correct! Thanks for the answer. :) Curtaintoad ^{(curtain or toad)} 03:12, 24 February 2013 (UTC)[reply]

We should help improve the new main page and create new main pages until we get the perfect one someday. :) Curtaintoad ^{(curtain or toad)} 03:56, 24 February 2013 (UTC)[reply]

If we're going to launch the New Main Page soon we could do with setting up a mobile redirect ASAP to the mobile page - any suggestions? --Nick (talk) 17:55, 25 March 2013 (UTC)[reply]

Two points:

1. The text on top of the Bali image is really hard to read, due to low contrast.
2. I have a high-resolution widescreen (16:9) monitor and the the individual sections/images are getting too big. Perhaps a bit of Reactive Design is needed and starting from a certain width two columns need to be used?

—Ruud 10:54, 21 February 2013 (UTC)[reply]

Hi! Thanks for your feedback! Would you mind posting a screenshot so we can have a closer look? We're aiming to put the 3 banners in a carousel arrangement eventually, so that should hopefully solve one of your problems. --Nicholasjf21 (talk) 11:09, 21 February 2013 (UTC)[reply]

Could we make the text slightly bigger? Travel Doc James (talk · contribs · email) 06:51, 24 February 2013 (UTC)[reply]

This is what I was talking about when I suggested converting the bottom boxes into a banner. The text would need to be set over them (I'm not great at doing that), but this will solve the scaling issues. --Peter ^Talk 23:31, 22 February 2013 (UTC)[reply]

Do you mean to be used like the other banners currently are? It is a nice idea, though I do have a slight concern - it's really rather difficult to keep text in place on top of the banners. As these boxes contain a lots of text, I fear it may get lost as the page resizes. Perhaps I could fine-tune the margins on the current boxes first and we could see how that worked? --Nicholasjf21 (talk) 23:52, 22 February 2013 (UTC)[reply]

Yes that's what I mean, and also yes, I don't have a good idea of how to keep the text both well positioned on the banner and readily editable ;) --Peter ^Talk 00:14, 23 February 2013 (UTC)[reply]

I've had a play and I think it should be do-able just using tables! The only issue now is that the page is so complicated behind the scenes I can't quite decide where to put it! I'll keep at it! :) --Nicholasjf21 (talk) 00:31, 23 February 2013 (UTC)[reply]

Right, the boxes should now scale in-line with the banners, however, it has moved the travel topic text out of place and I'm not quite sure how to put it back. If anyone has an idea, please feel free to have a go! If we can't fix it, it hopefully won't matter because it would eventually be self-contained as part of the proposed carousel. --Nicholasjf21 (talk) 01:08, 23 February 2013 (UTC)[reply]

I love that it now lines up :-) Travel Doc James (talk · contribs · email) 06:52, 24 February 2013 (UTC)[reply]

After extending the blurb text for the feature banners to two lines, the bottom boxes are bleeding together at the very bottom on wider displays. See screenshot at right. --Peter ^Talk 03:19, 25 March 2013 (UTC)[reply]

Hi all, I'm working on implementing some of the ideas that Nicolas and others have floated here in a Mediawiki extension. The idea is that updating the main page without breakage should be a simple as possible, while still preserving our ability to do some advanced layout stuff.

I have skeleton code working right now for a simple extension which will be used by adding a number of new SGML/XML-like tags to the page on which you want to use the extension. I'm starting with the banners which we see here already, but I think I'd like to implement a carousel as discussed above (I've noticed I was habitually using the French spelling above, but I'll switch now).

Anyhow, in the limited banner version we'll need some way to tell the extension which way to orient the image and text (left or right), a way to tell it which image to use, and a way to tell it what the headline, section, and abstract text for the banner are. Am I leaving anything out? Here's what I'm working with in my sandbox:

<banner direction="left" title="A place" section="Destination of the Month" img="An image name on common.">Something about the place</banner> 

Anyhow, that's the idea so far. I'll be posting extension code on GitHub in a little while. -- MarkJaroski (talk) 13:34, 24 February 2013 (UTC)[reply]

My code repository is online. Please clone and submit at will. -- MarkJaroski (talk) 15:10, 24 February 2013 (UTC)[reply]

That looks absolutely fantastic Mark! Thanks for all your hard work! --Nicholasjf21 (talk) 16:54, 24 February 2013 (UTC)[reply]

Progress

• Basic layout works, still to do, image resize, pop-up. -- MarkJaroski (talk) 09:29, 25 February 2013 (UTC)[reply]
• Links work, added "section-link" attribute to give editors control over the link out from the section title -- MarkJaroski (talk) 11:40, 25 February 2013 (UTC)[reply]

Demo site

I suppose it would be helpful to put up a demo site. After my last experience with hosting Mediawiki at waterwit.ch I think my hosting provider would prefer that it be a locked-down instance, in which I create accounts for each of you here. Would that be acceptable? -- MarkJaroski (talk) 15:25, 25 February 2013 (UTC)[reply]

That would be great - thanks very much! --Nick (Nicholasjf21) (talk) 15:29, 25 February 2013 (UTC)[reply]

OK. Here it is: http://waterwit.ch/index.php?title=Main_Page

Nicolas, or anybody else, if you want a login to play with the banner tag, just let me know. I think I have my email turned on.

Keep in mind that this is a first draft. The banners don't even do half of what the ones here do, but I intend to implement most or all of that stuff. -- MarkJaroski (talk) 20:46, 26 February 2013 (UTC)[reply]

Excited to see this developing and eager to get it implemented! Do you have an idea of what the roadmap looks like? Will it require a lengthy deployment phase? --Peter ^Talk 23:34, 4 March 2013 (UTC)[reply]

Mark that site look perfect. Travel Doc James (talk · contribs · email) 00:52, 5 March 2013 (UTC)[reply]

It really is looking great - thanks Mark! :) --Nick (talk) 01:16, 5 March 2013 (UTC)[reply]

Thanks! I wish I knew who to talk to about getting it deployed. I suppose we could deploy it just for the banners at first and keep adding features as we go, but we'll have to figure out who's in a position to do that. -- MarkJaroski (talk) 06:23, 6 March 2013 (UTC)[reply]

OK, so I think I understand the deployment process a bit better. I'm going to spend some time getting acquainted at the extension developers project, and we'll see how it goes from there. I'll also make a list of TODO items which we can prioritise and then make release decisions based on which ones are done and which are still todo. -- MarkJaroski (talk) 07:55, 6 March 2013 (UTC)[reply]

That sounds brilliant Mark! If there's anything I can do to help, please just let me know! --Nick (talk) 10:23, 6 March 2013 (UTC)[reply]

If it's possible could we perhaps change the imagemap's grey background to one that matches (-ish) the dark blue of the oceans in that picture?Could we also create a span 'class' that was just plain and only resized the images? Thanks! --Nick (talk) 23:52, 15 March 2013 (UTC)[reply]

Sure. The background is only there for development anyhow, so that I can see what the CSS is doing without much trouble. -- MarkJaroski (talk) 08:49, 16 March 2013 (UTC)[reply]

Oh brilliant! Thanks! --Nick (talk) 09:56, 16 March 2013 (UTC)[reply]

So, one of my goals with this thing is to provide simplified markup to make it easier for more editors to work with this page, while doing things with the layout that might not even be possible with Wikitext. So, now I have a request. Nick, Peter, James, and James, and anyone else who's interested, can you help me devise some simple markup syntax for imagemap banner? If you click edit you'll see that I've already taken care of the listnav at the bottom, but probably we could also do something with the rest of it, so you could do something like this:

  <mapbanner> ==Welcome== to =Wikivoyage= the '''free''' worldwide travel guide that '''anyone can edit''' [[Special:Statistics|'''{{NUMBEROFARTICLES}}''']] articles in English Click on a continent → *[[Itineraries]] *[[Phrasebooks]] *[[Travel topics]] *[[Other destinations]] </mapbanner>  

But I'm not sure that the above exactly satisfies our needs. Maybe we should have semanticly named classes wrapping the various elements, as in our own special microformat? What do you think? -- MarkJaroski (talk) 16:56, 16 March 2013 (UTC)[reply]

Perhaps something like this?

  <mapbanner> <span class="line1">[[Wikivoyage:Welcome, newcomers|'''Welcome''']] to [[Wikivoyage:About|'''Wikivoyage''']]</span> <span class="line2">the [[Wikivoyage:Copyleft|'''free''']] worldwide travel guide that [[Wikivoyage:Plunge forward|'''anyone can edit''']].</span> <span class="line3">[[Special:Statistics|'''{{NUMBEROFARTICLES}}''']] articles in English</span> <span class="line4">Click on a continent →</span> <span class="links">*[[Itineraries]] *[[Phrasebooks]] *[[Travel topics]] *[[Other destinations]]</span> </mapbanner>  

Would this provide the necessary versatility? --Nick (talk) 17:53, 16 March 2013 (UTC)[reply]

Well, there are two problems with that:

1. It still requires editors to mess around with span tags
2. It's better to have whatever classes we use have a name that actually reflects the content of the span or div or whatever. This is from the notion of semantically correct tagging.

For what it's worth if we did just number the classes by line it could be done entirely in the extension code, since computers are good at counting. -- MarkJaroski (talk) 18:15, 16 March 2013 (UTC)[reply]

I think your original might be versatile enough - we're unlikely to see much editing of the top banner and as long as it isn't impenetrable (like the one on here!) it should hopefully be enough. --Nick (talk) 18:29, 16 March 2013 (UTC)[reply]

Mapbanner Format Specification

Hi Nick, See, what I really need input on is the specifics of how to mark things up so that the extension can at least possibly work across language versions, if people want to use it. One major rub is the text sizes in the first line. You've been making the word "Welcome" a bit smaller than the name of the site, and the preposition "to" much smaller. I think that looks good, and it's easy enough in English, but it needs to be flexible enough to accomodate other grammars.

I guess the site name is easy enough to detect everywhere, but how do I tell the "Welcome" part from the preposition? In French it's exactly the same and in the same order: "Bienvenue à Wikivoyage" so that's easy, but what about languages that have different preposition rules?

Anyhow, so I'd really like all of your opinions on this, preferably stated as rules, something like this:

• The first line will always be the welcome line, and will contain the name of the site.
• The name of the site should be very large text (300%?)
• The action word (eg. Welcome) should be just a little bit smaller than the name of the site.
• The preposition, if any, should be of normal size
• The second line will be the pull-quote/slogan/anybody can edit line
• The third line is for stats
• The fourth line is an always on tool-tip explaining that the continents are clickable
• Following the fourth line there'll be a list of other parts of the site we'll like to highlight done as a normal unordered list.

So let's call it a spec? Anyhow, Nick, this is all inferred from your work, so rather than inferring I'd like to know in concrete terms what you think about it. -- MarkJaroski (talk) 07:29, 17 March 2013 (UTC)[reply]

On reflection it seems to me that I can figure out what to do with the first line with these rules:

• The name of of the site is a match for the name of the site (easy)
• The action text ("Welcome" in English) is any other link that is not the name of the site.
• Whatever's left over is to be rendered small.

Does that sound right? -- MarkJaroski (talk) 08:10, 17 March 2013 (UTC)[reply]

Or...... maybe it would make more sense to do these with attributes for the mapbanner tag, since they are fixed? I think this is especially true with the "click" text. -- MarkJaroski (talk)

Hi! Sorry for my slow response! The varying sizes of the text on the first line is entirely unintentional! Here are some rules that I'd like to see (including yours):

• The name of of the site is a match for the name of the site (easy)
• The action text ("Welcome" in English) is any other link that is not the name of the site.
• Whatever's left over is to be rendered small.
• All links are to be white and emboldened.
• All other text is to be normally formatted.
• The first line of text should be rendered very large (250-300%).
• The name of the site should be emboldened.
• The site description should be approximately half the size of the welcome message (125-150%).
• The article number text should be small (100%).
• The imagemap 'click' prompt should be slightly larger than the the site description (150 - 175%).
• The bottom array of links should be emboldened (but not the points that separate them!) and equivalent in size to the site description text.
• The destination name on each banner should be large (200-220%)
• The category of the destination should be somewhat smaller (150-170%)
• The short destination description should be smaller still (130-150%)
• Images should be in a 3:1 ratio and of a colour that will allow white text to appear clearly on top.

Hope that's what you wanted and that it helps! --Nick (talk) 12:12, 17 March 2013 (UTC)[reply]

Indeed it does! Meanwhile I've realized that I can do this as a template. Template code isn't quite as nice as extension code, but implementation is easier and faster, so I'm going to give it a try.-- Mark (talk) 12:57, 17 March 2013 (UTC)[reply]

The extension could in theory leave relative text sizing (of "Welcome" vs "Wikivoyage" vs "to") to the 'end user' of the extension, setting a base largish size but letting them change the text size to what works best for that language. LtPowers (talk) 13:08, 17 March 2013 (UTC)[reply]

  {{mapbanner|[[Welcome]] to [[Wikivoyage]]|the '''free''' worldwide travel guide that '''anyone can edit'''|'''{{NUMBEROFARTICLES}}''' articles in English|Click on a continent →| *[[Itineraries]] *[[Phrasebooks]] *[[Travel topics]] *[[Other destinations]] }}  

That's looking great! Thanks very much! Could we perhaps try it with the 'Welcome to Wikivoyage' line all the same size - I'm not completely sure it looks quite right with the discrepancy, but I might well be wrong! --Nick (talk) 13:28, 17 March 2013 (UTC)[reply]

I've kept the "to" at about half the size for now. If we make it bigger we'll have to reduce the size of the linked text so we don't bump into North America. I've also constructed a full page example made entirely with templates. Feel free to play with it. -- Mark (talk) 16:39, 17 March 2013 (UTC)[reply]

That's looking great! Could we make the top line of each banner (including the top one) just a bit smaller - at present I think they look just a little bit too big (sorry - I should have said so above!). That would also allow us to have the whole first line at the same size. Would it also be possible to shift the bar of links at the bottom so that they're a bit more central on the rest of the text? Sorry if I sound very pedantic - this is fantastic work! --Nick (talk) 16:48, 17 March 2013 (UTC)[reply]

For what it's worth, squint your eyes and look at it. Maybe you'll notice how the right side of the text tracks the shape of the continents. :) -- Mark (talk) 17:31, 17 March 2013 (UTC)[reply]

Aha! Very nice! :) --Nick (talk) 17:52, 17 March 2013 (UTC)[reply]

Hi Nick, I've added a bottomboxes template. Can you give it a try on the test page in my namespace above? -- Mark (talk) 19:29, 17 March 2013 (UTC)[reply]

I'll take a look now! Thanks very much! Once we've got these up and running perhaps we can copy it across and replace my rather unwieldy 'Main Page New'? --Nick (talk) 19:30, 17 March 2013 (UTC)[reply]

I've copied the current content across, though I know some people still aren't quite happy with how those boxes look. Also, at present, they don't seem to always re-size in sync, but I'm not quite sure how I can fix that. It's looking great! --Nick (talk) 19:43, 17 March 2013 (UTC)[reply]

I think we're getting pretty close. I figured out a way to get the boxes to line up vertically, provided the left one is alway taller. The page doesn't work quite as well at very low resolutions as it did before though. Also, what did we decide the maxium width of the banner images should be? -- Mark (talk) 09:08, 18 March 2013 (UTC)[reply]

I think we started going for 1125px, but if you think a different resolution would look better just go for it! :) --Nick (talk) 09:41, 18 March 2013 (UTC)[reply]

It's pretty straight-forward. I just have to add a rule to the CSS. -- Mark (talk) 09:51, 18 March 2013 (UTC)[reply]

Gah. It doesn't work correctly, because the text keeps getting bigger. I'll have to change the JavaScript to resize it according to the computed image size. :( -- Mark (talk) 10:02, 18 March 2013 (UTC)[reply]

OK. It works now. Do you think I should resize the text and images in the bottom boxes too ? -- Mark (talk) 18:42, 18 March 2013 (UTC)[reply]

I think they're probably alright as they are, unless you think otherwise? --Nick (talk) 19:04, 18 March 2013 (UTC)[reply]

Text resizing

I've got the text resizing working the way I want now, but I still haven't got the vertical space between text elements right. So please don't judge that aspect too harshly. -- MarkJaroski (talk) 17:06, 16 March 2013 (UTC)[reply]

Not sure if this is what you were referring to, but for the two wrapped lines of detailed text about the 3 articles, the spacing between the two lines seems too wide relative to the font size. It looks like a paragraph break, rather than just a LF/CR. I'm referring to, for example, "Australia's capital, with national monuments, museums, and galleries around large man-made lakes. Canberra's centenary celebration begins this month!" Nurg (talk) 06:04, 25 March 2013 (UTC)[reply]

Hi! I've just found this interesting looking J-Query plugin that purports to change an image's co-ordinates as it is dynamically resized. I think this could be very useful on this page, for both desktop and mobile versions, allowing us to remove the extremely dense code that's needed for the top map banner. Any chance that it could be installed? --Nicholasjf21 (talk) 00:31, 25 February 2013 (UTC) EDIT - Unless we prefer the page's images to resize in steps? --Nicholasjf21 (talk) 00:32, 25 February 2013 (UTC)[reply]

Wow , very cool ! Curtaintoad ^{(curtain or toad)} 02:19, 25 February 2013 (UTC)[reply]

Fantastic! Switch it asap please! —The preceding comment was added by 124.171.163.61 (talk • contribs)

Thanks very much! That's very kind of you! We're currently trying to incorporate the bottom 3 banners into a rotating 'carousel', but once we've done that we should hopefully be able to implement it. --Nick (talk) 10:38, 10 March 2013 (UTC)[reply]

I was just coming by to say the same thing. I'm so happy to see WikiVoyage being bold to attract users and readers with aesthetic and updated style versus the old school look of Wikipedia. Happy to be involved in such a project :) SarahStierch (talk) 01:06, 11 March 2013 (UTC)[reply]

This is neither visually appealing (I have to scroll downs to see everything) nor very user usable... why not to only make pictures on current main page bigger and leave them nicely horizontally next to each other so that they touch on their sides? Would be much more usable than this while leaving extra room for further contents below...--Kozuch (talk) 22:45, 11 March 2013 (UTC)[reply]

Working on this as we speak! We're going to try and implement a 'carousel' for the top 3 banners, creating much more space. The current main page wouldn't work with that, because the scaling would be off. --Nick (talk) 23:02, 11 March 2013 (UTC)[reply]

It might just be me, but I really don't think having the three showcases as a carousel is a good idea. Is the page length now really such a disaster? After checking, this Main Page is actually shorter than most other WMF projects, including Wikipedia. We may fit less content onto our page, but why is that such a concern? What other content do people want to put? If we were to use the carousel idea, this page would be extremely short and seem a little bare.

Additionally, there will always be compatibility issues with the carousel. Some older browsers may have issues. People using the full site (for editing) on mobile phones will also have significant problems. Carousels can be frustrating, if they change too fast, too slow, they don't stop rolling when you hover, they do stop, etc. All these things are subjective, so even if we were able to modify this with code, there is no perfect formula that makes everyone happy.

I am also concerned by the extended time that is being devoted to the carousel. While I applaud the significant effort being put in by volunteers, this sort of thing requires extensive coding and is expected to take a long time. This page has been pretty much ready for over a month now, but we've been twiddling our thumbs on something that I think will exacerbate this page. At the very least (but unpreferably), could we at least implement what we have while we wait on this much sought-after carousel? JamesA ^>talk 03:26, 12 March 2013 (UTC)[reply]

Let's remember we're not all looking at the same thing. To address Kozuch's suggestion, the three images side by side already cause a lot of problems for users not using wider screens. And the banners right now on the new page cause problems for users of wider screens simply because they get so huge (vertically as a consequence). The carousel probably won't be perfect for everyone either, but I think it's the best solution. Also, I thought we were going to either have it not cycle automatically or stop cycling when you click a display option, so I don't know why that would be a problem.

I'd be cool with simply implementing this now, since our current page has issues of its own, and I'm excited to see this fresh, striking design on the main page, but I think others want to take the time to make sure everything's perfect/fixed before we do. --Peter ^Talk 05:48, 12 March 2013 (UTC)[reply]

Well, which one? Not cycle automatically or stop auto-cycling when hover? It's subjective regarding which is better, and that's why it's a problem. Personally, I hate auto-cycling carousels, because I know how they work and don't need a computer to show me. But many internet users might not even be aware that a carousel exists and can be scrolled through unless the computer does it for them. If it doesn't auto-scroll, viewers may not even see the other two banners.

What's your reasons for the carousel being the best solution? My resolution (1366x768) is fairly wide, and I can see the top two banners. I can't imagine people having significantly wider screens than that. JamesA ^>talk 07:01, 12 March 2013 (UTC)[reply]

I agree with your assessment of carousels, but don't have an answer ;) I also use 1366, but we've had comments above from users with substantially wider displays who thought seeing 1.5 enormous banners didn't make sense. We've already fixed that a bit, but I think the carousel takes care of the sizing pitfalls pretty elegantly. We do want people to be able to find the two boxes at the bottom. I think the closer we get to this, the better. --Peter ^Talk 07:23, 12 March 2013 (UTC)[reply]

I do agree that it might be nice to implement a version of this now as a beta and then to see what we can do with carousels at a later date. Personally, I'm not unhappy with the page as it is (my resolution is also 1366 wide), but I can see that for some people with very large resolutions, a carousel arrangement might be preferable in the long-term, but maybe if we were to implement it now, people could see how they felt about it on a regular basis. Perhaps the link the top-right should be changed to a version of the current main page just in case people have any issues accessing this? --Nick (talk) 10:10, 12 March 2013 (UTC)[reply]

I'm at 1920x1080 and at full width I can only see half of the Canberra image without scrolling. The massive black image at the top completely dominates the screen and it looks bad to me. Of course, come to think of it, the carousel won't fix that problem. Modern web design is moving strongly toward fixed-width columns; would it be terrible if we capped the banner widths at, say, 800 pixels? LtPowers (talk) 12:40, 12 March 2013 (UTC)[reply]

That's an odd screen size, but I won't debate it. And you're right: the carousel would just be more confusing if it's half cut off and you've got to scroll to the right size to view the entire thing. A fixed width could be a solution, but I'd suggest larger than that. JamesA ^>talk 12:54, 12 March 2013 (UTC)[reply]

Might I suggest 1125 as the default largest width? That's the width my screen uses and it seems to work fairly well. I agree that 800 might produce a bit too much white space. This can be done very easily by fiddling with the CSS if we think it's the way to go. --Nick (talk) 13:04, 12 March 2013 (UTC)[reply]

I also think a capped width makes sense, and should bolster the case for implementing this now, rather than waiting for more (admittedly substantial) improvements. --Peter ^Talk 16:21, 12 March 2013 (UTC)[reply]

800 was just a fairly random number. One number I'm seeing online is 960; that might be a place to start. I don't think my resolution is all that unusual; it's my monitor's native resolution, and I believe 1920 is the next standard pixel width up after 1600. (320 - 640 - 960 - 1280 - 1600 - 1920: all 320-pixel increments; the formerly-standard 800(x600) is halfway between 640 and 960; as for 1024, who the heck knows where that came from?). LtPowers (talk) 18:25, 12 March 2013 (UTC)[reply]

960 displays pretty well. --Peter ^Talk 18:38, 12 March 2013 (UTC)[reply]

I too think a carousel is a bad idea for a wiki. Why the hell should I wait some seconds to see other content or ever click somewhere... Most of us dont have bad eyes and dont need to have and image 1000+ px wide... plus, would you be able to supply such great photos all the time? I highly doubt that... Your main idea is correct - make the current main page look a bit better. Take this new graphics and convert it to a horizontal layout (3 items next to each other - much like current design). You can not go wrong with such a solution...--Kozuch (talk) 18:46, 12 March 2013 (UTC)[reply]

Except... that current design is a problem for narrow screens—see the thumb to the right for what these look like on your average 3rd world internet cafe computer. Compare what it will resemble with a carousel. I think the plan is a huge improvement visually and functionally.

I feel like this discussion is turning into a carousel ;) Since Mark is currently hard at work developing the carousel, could people perhaps withhold judgment until they actually see it? From the comments, I get the impression that not everyone has really digested how it will work, and the various ways we can tweak it. Also, there hasn't been a problem in the slightest finding high quality images, and the process is kind of fun. --Peter ^Talk 20:08, 12 March 2013 (UTC)[reply]

Absolutely! Mark's doing a great job and I still think a carousel could work really well with this design. As Peter says, let's just wait until we've got it up and running before we make our minds up. No Main Page will ever be perfect for every display on every device, but we'll try and make this as all-encompassing as possible! I do think it would be nice to perhaps implement a version of the current page, however, perhaps with a big 'Beta' sign. --Nick (talk) 20:14, 12 March 2013 (UTC)[reply]

I'm happy to let Mark continue his fantastic work on the carousel, but in the mean time, are we agreed in implementing what we've got so far? In terms of usability, it won't be as bad as the current Main Page, and is an improvement from a visual perspective. Could someone possibly implement the fixed width at what was agreed to above? JamesA ^>talk 23:55, 12 March 2013 (UTC)[reply]

I'll get to it! If you have any idea how to fix the wonky Featured Travel Topic titles, please dive in! --Nick (talk) 23:59, 12 March 2013 (UTC)[reply]

Right - the CSS should now be sorted - it's here if you wouldn't mind copying it across. --Nick (talk) 00:13, 13 March 2013 (UTC)[reply]

I copied the code across straight from your css. Is that right now? JamesA ^>talk 00:16, 13 March 2013 (UTC)[reply]

Yep, that should be it for the CSS now, unless there are any issues. Now we need to 'lock' the text in place on top and see what's left to do. --Nick (talk) 00:22, 13 March 2013 (UTC)[reply]

I think we now need to cap the max width of the boxes at bottom, to keep them in sync with the banners for screen displays wider than the 960 banner limit. --Peter ^Talk 04:17, 13 March 2013 (UTC)[reply]

Nick, would you do me a favour and have another look at the image map. If the result of the discussion above is to keep it then I think it should probably be less detailed. I realise that tracing all of the continent shapes was a lot of work, but I think normally with imagemaps you want the shapes to be simpler, so that close is good enough for whoever is mousing and clicking. Thanks! -- MarkJaroski (talk) 15:32, 12 March 2013 (UTC)[reply]

Can do! I'll try and keep them and simple and less precise than last time. Thanks for all your hard work! PS Would you mind taking a look at the page as it is - I'm having trouble to get the 'Fundamentals of Flying' titles to stay in the right place as the page scales. Thanks! --Nick (talk) 15:38, 12 March 2013 (UTC)[reply]

Done! :) --Nick (talk) 19:17, 12 March 2013 (UTC)[reply]

The place where it links to Fundamentals of flying appears really... well, out-of-place, to say the least. The media (a picture iirc) it is sitting on is to the left, so maybe one of them should have a right-align? Ceadeus Slayer Sea of Blood -Underwater Ruins 19:19, 12 March 2013 (UTC)[reply]

Thanks for the tip! I think it's something to do with the tables format the page is based upon - it should be do-able! --Nick (talk) 20:22, 12 March 2013 (UTC)[reply]

OK. The newest version at [9] has the imagemap working with automatic resizing. Yes, I should really make it possible to edit the imagemap, but for I'm just going to make the text editable.

I'm not really sure about the search box, since it duplicate the search box we already have. Is there some reason why we have to have two? -- MarkJaroski (talk) 19:59, 13 March 2013 (UTC)[reply]

That's looking really good! Could we perhaps widen the banners so they're the same depth as the ones on here? --Nick (talk) 20:06, 13 March 2013 (UTC)[reply]

Sorry, but I'm not sure what you mean by either widen, or depth. I thought I was using the widest ones available. MarkJaroski -- 20:50, 13 March 2013 (UTC)[reply]

OK, now we have the image map with text. Try it. You can use markup in the attributes, I think. -- MarkJaroski (talk) 21:59, 13 March 2013 (UTC)[reply]

That's looking fantastic Mark - thanks very much! How would we go about implementing this on here? --Nick (talk) 23:09, 13 March 2013 (UTC)[reply]

Sorry for the confusion - by width/depth I meant vertical dimension as for me, at present, the tail of South America is being cut off the top image. --Nick (talk) 11:37, 14 March 2013 (UTC)[reply]

Ah, I understand now. Sorry. That's from my having imposed a vertical (as I think of it "height") limit on the banner boxes. I'll make it auto again. -- MarkJaroski (talk) 18:43, 14 March 2013 (UTC)[reply]

There's no need to apologise- I'm sorry for being so vague! Thanks again for doing a fantastic job! --Nick (talk) 18:46, 14 March 2013 (UTC)[reply]

OK, so the newest version supports any amount of free text before the imagemap, and places that in the text box. Can you please update it with formatting, etc on waterwitch ? -- 20:50, 14 March 2013 (UTC)

Will do! :)--Nick (talk) 23:28, 14 March 2013 (UTC)[reply]

Looking again at File:Narrowmainpages.png, note how the text in the top banner ("Welcome to Wikivoyage... Other destinations") is on top of the Americas, preventing users from clicking that part of the image