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. 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 , 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? 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 (), 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. 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 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: - and this: . ;) 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