Forum:New main page layout

Forums: Index > Village Dump > New main page layout

Note: This topic has been unedited for 1055 days. It is considered archived - the discussion is over.

The current design of the Main Page is based on the one Wikipedia had in 2006 and hasn't changed much in fifteen years. It still works well on desktop computers, but on smartphones it looks like this:

This isn't good. The header content can only be accessed by scrolling, and the two columns are narrow and cramped.

Wikipedia's current main page is substantially different and can adapt to a small screen. I've put together a redesign based on this, which can be found at my sandbox. Here's how it looks:

And here's how it looks on the desktop. For reference, the current version of Main Page is on the left.

I've included some other changes in line with wikipedia:Main Page, such as:

• The section headings are all in sentence case. This is more consistent.
• Horizontal lists use {{flatlist}} so they can be formatted more easily and read as lists by screen readers.
• Only three columns of portals. I didn't figure out how to make it work with four.

However, I kept the list of links under the header. It's hidden in the mobile version to save space, but this can be changed.

This redesign relies on a TemplateStyles stylesheet in addition to the existing custom CSS for the main page. I would also like to install mw:Extension:CSS so pages with custom CSS don't need to use JavaScript to make it work. TemplateStyles can't replace the reskin parser because it restricts styles to the content area with the mw-parser-output class. ❦ Llwy-ar-lawr • talk • contribs • 14:57 17 July 2021

Mobile Menus

I notice that the content here does seem to resize to my iPad Air (which is about 10 years old now and will not upgrade to iOS 13, let alone 14), and tapping on the three bars at the upper left does bring up the menu. At least we aren't stuck to the absolutely horrible mobile format that Fandom came up with (as in who came up with the awful idea of actually finding out what really "trends" on this site?) I tried playing around with it, but couldn't find a way to fix it to our needs way back when. They had circular icon sections that you could click on to get to content pages. However, I found myself having to add content to these new content sections from scratch, and some sections were not removable or hideable (like the trendy crap, which pointed out how popular Porn is - to none of our admins surprise). -- Simsilikesims(♀GUN) Talk here. 23:00, 17 July 2021 (UTC)

The current main page starts to overflow the window/screen below about 900px, and the redesign changes to the one-column layout below 875px. The iPad Air has a viewport size of 768x1024. Whether you notice a difference with the redesign depends on whether you're using portrait or landscape mode.

The mobile menu is part of the mobile skin (Minerva) itself and isn't affected by page contents. Minerva is better than what we used to have, though it has its own problems. ❦ Llwy-ar-lawr • talk • contribs • 05:30 18 July 2021

This looks like a significant step forward

It looks like this makes only a slight difference to the appearance of the main page on a desktop. However, the change when viewed on a phone is substantial.

The current appearance of the main page when viewed on a phone could best be described as "bad", though "pitiful" might be a reasonable description, too. The new version looks 'way better.

So, all in all, it seems like this would be a Good Thing and should be installed.

You also mentioned mw:Extension:CSS. The main problem with installing extensions is you have to install them (emphasis on you since you're the one doing it at this time). So, if you're cool with it, it seems like you should just do it, unless there's some downside that is not apparent. I'm also a little unclear on how, exactly, this relates to the main page changes -- would installing mw:Extension:CSS allow you to ditch the use of Javascript on the main page? That seems unlikely, but if it's what you meant, that seems like a possibly significant win -- moving things serverside rather than running wonky Javascript stuff in the user's browser seems likely to be more robust when users try to view the site with something like Cyberdog. It might help prevent them seeing everything just break merely because their browser is 30 years old.

I didn't understand the bit about the reskin parser, because I wasn't paying attention, have no idea what it is, and didn't chase the link. :-( Snarglefoop (talk) 01:40, 18 July 2021 (UTC)

BTW what about tablets? Do we have any way of testing this on one of those neither-fish-nor-fowl thingies? A lot of people seem to use them. Snarglefoop (talk) 01:40, 18 July 2021 (UTC)

Also keep in mind that nearly all computers everywhere are phones, so having a main page that looks good "except on phones" is sort of like having a car that works really well "except on roads". Snarglefoop (talk) 01:41, 18 July 2021 (UTC)

The "reskin parser" is a piece of JavaScript code that inserts a custom stylesheet into several pages. Currently it looks like this:

/** Reskin parser ***********************************************************
 * Instructions:
 * 1) Add the page title and namespace exactly ("Name_space:Page_name") as new skin, use
 *	UNDERSCORES *NOT* SPACES: ("Main_Page": "", should be first line). The next parameter
 *	is optionally an existing "MediaWiki:Skin/"-prefixed file (in which case you can skip
 *	step 2).
 * 2) Create MediaWiki:Skin/Name_Space:Page_Name.css and place reskin CSS content there.
 */
reskin = {
	'Main_Page': '',
	'UnNews:Main_Page': 'UnNews.css',
        'UnNews:2015_British_general_election': 'UnNews.css',
        'UnNews:2016_Hillary_Clinton_campaign': 'UnNews.css',
	'UnNews:Religion_Section': 'UnNews.css',
	'AAAAAAAAA!': 'Aaaa.css',
	'An:': '',
	'Babel:666': '',
	'Babel:96': '',
	'Babel:Aa': 'Aaaa.css',
	'Babel:Ap': 'Fullscreen.css',
	'Babel:APPL': 'Fullscreen.css',
	'Babel:CaD': '',
	'Babel:Communpedia': 'Communpedia.css',
	'Babel:F@H': '',
	'Babel:Gbs': '',
	'Babel:Hi': '',
	'Babel:Newspeak': '',
	'Babel:Pumpkin': 'Fullscreen.css',
	'Babel:Vogon': 'Vg:.css',
	'Babel:W2': 'Fullscreen.css',
	'Bad_title': 'Nocategories.css',
	'Broken_Redirect': 'Nocategories.css',
	'Cart': 'Fullscreen.css',
	'Drawing': 'Nocategories.css',
	'EBay': '',
	'Em:': '',
	'File_8AO4F:_The_God_Case': 'Fullscreen.css',
	'Gullible': 'Nocategories.css',
	'Holocaust_denial_denial_denial_denial_denial': 'Nocategories.css',
	'International_Page_Blanking_Day': 'Nocategories.css',
	'Kenny_McCormick': '',
	'Loneliness': 'Em:.css',
	'Talk:Loneliness': 'Em:.css',
	'Marty_Friedman': 'Nocategories.css',
	'Memento': '',
	'Misleading': 'Nocategories.css',
	'Movie_Trailer_Announcer_Guy': '',
	'MS_Paint': '',
	'Namespace:Main_Page': '',
	'Nihilism': '',
	'Rafael_Nadal': '',
	'Rp:': '',
	'EBG13': 'ROT13.css',
	'Sdrawkcab': '',
	'Socratic_method': 'Nocategories.css',
	'Slime_Cube': '',
	'Time_Cubicle': 'Slime Cube.css',
	'The_Consumerist': '',
	'Tlh:': '',
	'Tx:': '',
	'UnTunes:Artsy_and_Misunderstood:_A_Bedroom_Emo_Song': 'Em:.css',
	'Uncyclopedia!_Answers': 'Fullscreen.css',
	'Uʍop_ǝpısdn': 'Upside_Down.css',
	'Visual_puns': 'Nocategories.css',
	'Wikimedia_fundraising': '',
	'Wikimedia_fundraising/Zombiebaron': '',
	'Wikipedia': '',
	'Yahoo!': 'Fullscreen.css'
	// Make sure all lines in this list except the last one have a comma after!
};

var skinName;

if( reskin[mw.config.get('wgPageName')] !== undefined && mw.config.get('wgIsArticle') === true ) {
	skinName = ( reskin[mw.config.get('wgPageName')].length > 0 ) ? reskin[mw.config.get('wgPageName')] : mw.config.get('wgPageName') + '.css';
	var style = document.createElement("link");
	style.setAttribute("rel", "stylesheet");
	style.setAttribute("href", "/w/index.php?title=MediaWiki:Skin/" + skinName + "&action=raw&ctype=text/css");
	document.getElementsByTagName("head")[0].appendChild(style);
}

/* Special reskin (skin specific) for [[SOPA]] -L */
if ( mw.config.get('wgPageName') == 'SOPA' ) {
	if ( skin == 'vector' ) {
		var css = 'black vector.css';
	} else if ( skin == 'monobook' ) {
		var css = 'Black monobook.css';
	}
	var style = document.createElement("link");
	style.setAttribute("rel", "stylesheet");
	style.setAttribute("href", "/w/index.php?title=MediaWiki:Skin/" + css + "&action=raw&ctype=text/css");
	document.getElementsByTagName("head")[0].appendChild(style);
}

All of this has to be loaded on every page and depends on the reader having JavaScript enabled. With the CSS extension, the stylesheet is called for directly on the page that needs it and does not require JS.

It's building a hash table out of a flat list, looking up one thing, and then deleting it again ... on every page view??
That seems totally nuts. Like, there's got to be a better way to do it! Snarglefoop (talk) 06:02, 18 July 2021 (UTC)

Firefox's responsive design mode can simulate tablets. There are also some websites for this, like https://screenfly.org. This is how Firefox thinks Main Page looks on an iPad in landscape mode:

Not bad. The content only starts to overflow at widths less than 900px, so a 1024px viewport width won't have a problem. Here it is in portrait mode:

Getting a bit messy, but still usable. The nastiness in the first image I posted here is something you only see on very small screens. The redesign still works better here, though:

I also discovered that an iPad is shown the mobile skin, but a Kindle Fire HDX (the other tablet option) gets the desktop skin. ❦ Llwy-ar-lawr • talk • contribs • 05:30 18 July 2021

I personally like the new look. I think it could help with site traffic and encourage users to hang around. I was told years ago by Fandoomed/Wikia that many people logging in were using cellphones/mobiles/ipads and that was back in 2013. So I think a redesign as outlined to cater for them is a very good idea. Go for it. --RomArtus*Imperator ITRA (Orate) ® 15:03, 21 July 2021 (UTC)

Agreed. I often argue that our bread-and-butter is funny writing, not typography, but a more faithful cosmetic spoof of Wikipedia will lull the reader on that level and make our funny funnier. Spıke 🎙️02:41 23-Jul-21

It all sounds good. Depending on how the CSS is injected, it could make the Main Page load faster; and even if not, still a boon for mobile devices. Dark Web, White Hat (talk) 03:26, 23 July 2021 (UTC)

Installed

I've updated the Main Page. I've also installed CSS, so the stylesheets can be converted to this system now. ❦ Llwy-ar-lawr • talk • contribs • 18:04 4 August 2021

This looks good to me. (Regarding "installed CSS", I thought we had CSS all along.) I am enthused to get page- and namespace-specific code out of the Common files, where it has to be slogged through to load any page. Spıke 🎙️18:21 4-Aug-21

I installed the vaguely-named "CSS" extension discussed above. It can handle CSS for pages but not namespaces. I don't know any tool for that. ❦ Llwy-ar-lawr • talk • contribs • 19:01 4 August 2021