User:AKlapper (WMF)/Sandbox/Make main pages more mobile friendly

This article shows how to make navigation elements and visual elements work better on mobile screens. It shows examples how to replace invisible layout tables with CSS.

This article concentrates on main pages because main pages get the most readers. However, recommendations in this article apply to other pages as well.

This page does not provide any "scaffold" for main pages. It is up to each community to create and design their main page. Every main page is different, so there are no simple copy-and-paste solutions for every problem. Knowing some basic HTML and CSS is also helpful.

The problem


Many main pages of Wikimedia wikis were written for wide screens on computers.

Such main pages do not work well on small screens (like mobile phones) because they do not have a "responsive design" or "adaptive design".

Often these main pages use invisible tables for layout, for example to position elements. But tables are for tabular data only. "Page layouts should be done via CSS, not tables, whenever possible."

Watch the linked video to see the problem on some Wikimedia wikis.

Find out if your main page has problems

 * 1) Go to the mobile main page of your wiki. For English Wikipedia, this is   (note the   in the address).
 * 2) Either manually reduce the width of your web browser window, or use the developer tools of your web browser:
 * 3) * In Firefox, select: More tools → Responsive Design Mode.
 * 4) * In Chrome, select: More tools → Developer tools → Toggle device bar.
 * 5) * Or press Ctrl on your keyboard (or Option on macOS).
 * 6) * For more information about your web browser's developer tools, see: Chrome, Firefox, Internet Explorer, Opera, Safari.
 * 7) Check if you can still see all elements and all text on the mobile main page of your wiki.
 * 8) If you cannot see everything anymore, then there is a problem to fix.

General steps
This section covers the following general steps:
 * create example content for your main page, as wiki markup and HTML markup (when there is no wiki markup for it),
 * save the example content as a template,
 * create CSS which defines the layout of that content,
 * use TemplateStyles to save and apply the CSS layout to the example content in the template,
 * on the main page, load and embed this template (and the CSS layout for it).

Step 1: Create the main page template

 * Create a wiki page called  on your wiki.
 * Don't worry: This step itself does not change or override your existing main page.
 * You are creating a template so that you can use TemplateStyles in the next step.

Step 2: Define the layout via CSS

 * Create the wiki page  on your wiki.
 * This is a TemplateStyles page. See the TemplateStyles help for more information.
 * Do not use the page  to store the CSS layout for the main page.   is loaded on every page on your wiki. This might lead to performance problems.
 * Add the actual CSS (see examples below).
 * Preview and save the page.

Step 3: Add content to the main page template

 * Go back to the page.
 * Load the CSS layout by adding the line  at the top.
 * Preview and save the page.

Step 4: Test your changes

 * Reload the page  to apply the CSS layout changes.
 * Reduce the width of your web browser to see how the page looks on smaller screens. See the instructions above.
 * Also test your changes with the other skins available in the Preferences under "Appearance".

Step 5: Add the main page template to your main page
Load the template on the main page :
 * Edit the main page itself by adding the line  to it. As written above, this will usually require special permissions.

Fix navigation bars
Change the width of your web browser window (see the instructions above) and see the difference between the good example and bad example below.

Bad example
This is a bad example which uses an invisible HTML table for a navigation bar with links:



Good example
This is a good example which uses CSS (and wraps content into a new line when needed) instead of an HTML table for the same navigation bar:

 aaaaaaaaaaaa aaaaaa bbbbbbbbbbbb bbbbbb cccccccccccc cccccc dddddddddddd dddddd eeeeeeeeeeee eeeeee ffffffffffff ffffff gggggggggggg gggggg hhhhhhhhhhhh hhhhhh</li> iiiiiiiiiiii iiiiii</li> jjjjjjjjjjjj jjjjjj</li> </ul>

Bad example code
Here is the wiki markup for the bad example above which uses an invisible table. Some items are left out via  to keep it more readable: ‎

Good example code
Here is the wiki markup for the good example above which uses a list. Some items are left out via  to keep it more readable:

‎

The markup uses an HTML list with bullet points. Note also the  parameters for some elements.

And here is the CSS in the TemplateStyles file  for the good example above. It defines how all elements in a  look:

‎

Fix other layout elements
Change the width of the window of your web browser (see instructions above) and see the difference between the good example and bad example below.

Bad example
This is a bad example which uses an invisible table to have two elements next to each other:

Good example
This is a good example which uses CSS instead of an HTML table to put these two elements next to each other:

(TODO: Wrapping elements below 800px only works once TemplateStyles are actually in place.)

<div class="leftcontent" style="float: left; width: 65%; border:1px solid black; padding: 5px; background: #ffffec;"> Heading 1 Some content on the left: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris cursus mattis molestie a iaculis at erat. Fusce id velit ut tortor pretium. Adipiscing vitae proin sagittis nisl rhoncus mattis. Proin sed libero enim sed faucibus turpis. Vitae et leo duis ut. Dictum fusce ut placerat orci nulla. Blandit massa enim nec dui nunc mattis. In vitae turpis massa sed elementum. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Cras semper auctor neque vitae tempus. <div class="rightcontent" style="float: right; width: 30%; border:1px solid black; padding: 5px; background: #f8f8ff;"> Heading 2 Some content on the right: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris cursus mattis molestie a iaculis at erat. Fusce id velit ut tortor pretium. Adipiscing vitae proin sagittis nisl rhoncus mattis. Proin sed libero enim sed faucibus turpis. Vitae et leo duis ut. Dictum fusce ut placerat orci nulla. Blandit massa enim nec dui nunc mattis. In vitae turpis massa sed elementum. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Cras semper auctor neque vitae tempus.

Bad example code
Here is the wiki markup for the example above which uses an invisible table. Some text is left out via  to keep it more readable: ‎

Good example code
Here is the wiki markup for the good example above which uses two  elements. Note also the  parameters for some elements. Some text is left out via  to keep it more readable:

‎

And here is the CSS in the TemplateStyles file  for the good example above. It defines how all elements in a  look:

‎

For less than 800px width, this example uses "adaptive design": The content on the right will be below the content on the left, and both will have full width.

Find more help
Do you need help? Is something unclear? Please ask!

TODOs for the author of this poor page --- remove!

 * TODO: Which CSS units make most sense above?
 * TODO: Actually move CSS stuff into TemplatesStyles once this page ends up in its final location outside of the User namespace
 * TODO: looks like  is not needed for TemplateStyles to work
 * TODO: Potentially update https://incubator.wikimedia.org/wiki/Help:Manual
 * TODO: Fix/split meta:Special:MyLanguage/Small wiki toolkits/Starter kit/Main page customization - My goal is NOT having boxes.