Wikipedia:Main Page (2016 redesign)/background
For ten years now, the English Wikipedia has greeted its readers with the same Main Page. Back in 2006, when HTML3 and CSS1 were cutting edge, it looked fresh and modern. Today, it is very out of date, using obsolete markup and riddled with accessibility issues. That is because tables are the main method used for layout, and even back in 2006, that was frowned upon, but there was no better alternative for static layout.
Back then, screen resolutions tended to only grow. But today, web pages are displayed on a large scale of resolutions, from small mobile devices to large desktop PCs. This necessitates the use of responsive design that will fit any screen. With that in mind, the tables will have to go and make place for current technologies and standards. The 2016 redesign (which started in 2013) incorporates these methods, while still maintaining some backward compatibility for older browsers, to allow the Main Page to display on any device without the pitfalls currently imposed by the current design. The new design is responsive and will adapt to any viewport size (up to a reasonable margins).
It employs some recent technologies in CSS and HTML that were created just to address these issues, namely the flexbox model combined with media queries. It also incorporates the floating box model to maintain some backward compatibility and graceful fallback for older browsers. However, most modern browsers in use already support the flexbox model for some time now, so the share of older browsers using the fallback is negligible.
The content of the main page is still governed, maintained and generated through its core templates. Some of them will need some updating as these still use tables as well (notably Picture of the Day). The main goal of this endeavour is to change the underlying framework; to replace the tables with the flexbox model, and separate the styling (now inline) from the layout. This allows for flexible and quick adaptation of styling when so required.
The new styling itself is kept minimal, but brought up to current standards. No more colored backgrounds and a clear distinction between the several sections, while maintaining a coherent look and feel. Combined with the flexbox model, the new design will bring the Main Page of the English Wikipedia out of the HTML middle ages and make it accessible to a multitude of devices that currently cannot access the Main Page without excessive sideways scrolling.
- No more rigid tables used for layout
- Utilizes Flexbox model and media queries for a responsive design
- Some backward compatibility maintained using floating box model
- Separates the layout from the styling by moving style-related CSS to external stylesheet
- Easy to maintain, as most inline (styling) CSS is removed, and sections clearly marked
- Fresh look. Moves Wikipedia back to today!
- The skeleton lists all the components used to build the main page
- MediaWiki:User:Main Page/NewMainPage.css contains the main presentational CSS. This will be moved to a template once TemplateStyles is rolled out
The following (new) templates are used:
- {{Be an editor}} contains the "Be an editor" text
- {{Wikipedia's sister projects (fluid)}} re-implements the sister projects box with a fluid and responsive design
Other versions: