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.^[1] 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 as this page cannot offer an introduction to CSS either.

The problem

A video of some Wikimedia main pages when you reduce the page width: Some things cannot be seen anymore.

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."^[2]

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

Find out if your main page has problems

Go to the mobile main page of your wiki. For English Wikipedia, this is https://en.m.wikipedia.org (note the .m in the address).
Either manually reduce the width of your web browser window, or use the developer tools of your web browser:
- In Firefox, select: More tools → Responsive Design Mode.
- In Chrome, select: More tools → Developer tools → Toggle device bar.
- Or press Ctrl+⇧ Shift+M on your keyboard (or ⌥ Option+⌘ Command+M on macOS).
- For more information about your web browser's developer tools, see: Chrome, Firefox, Internet Explorer, Opera, Safari.
Check if you can still see all elements and all text on the mobile main page of your wiki.
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).

On most wikis, editing the Main page requires special permissions. Often these will be either administrator rights, interface administrator rights, or a custom permission group. The exact configuration varies from wiki to wiki. You will have to check to find out. To see the permissions on your wiki, use the Page information link in the sidebar on the Main page and look in the Page protection section.

Step 1: Create the main page template

Create a wiki page called Template:Main_page 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 Template:Main_page/styles.css on your wiki.
- This is a TemplateStyles page. See the TemplateStyles help for more information.
- Do not use the page MediaWiki:Common.css to store the CSS layout for the main page. MediaWiki:Common.css 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 Template:Main_page.
Load the CSS layout by adding the line <templatestyles src="Main_page/styles.css"/> at the top.
Preview and save the page.

Step 4: Test your changes

Reload the page Template:Main_page to apply the CSS layout changes.
- If you cannot see your changes, clear your browser cache.
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 (Template:Main_page) on the main page (Main_page):
- Edit the main page itself by adding the line {{Main_page}} 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 practice and bad practice below.

Bad practice

It is bad practice to use an invisible HTML table for a navigation bar with links:

Good practice

It is good practice to use CSS (and wrapping content into a new line when needed) instead of an HTML table for the same navigation bar:

Bad practice - code

Here is the wiki markup for the bad practice example above which uses an invisible table:

‎

<div style="margin: 10px 0px 10px 0px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-color: #FFFFFF;">
{| style="border-spacing: 1px; border-collapse: separate; width: 100%; text-align: center; padding: 2px 3px 2px 3px;"
| style="background-color: #F9F9F0; border-top: 5px solid #999933; padding: 3px 0.25em; width: 10%;" | [[Project:Sandbox|aaaaaaaaaaaa aaaaaa]]
| style="background-color: #F4F9F0; border-top: 5px solid #669933; padding: 3px 0.25em; width: 10%;" | [[Project:Sandbox|bbbbbbbbbbbb bbbbbb]]
…
| style="background-color: #F0F4F9; border-top: 5px solid #336699; padding: 3px 0.25em; width: 10%;" | [[Project:Sandbox|jjjjjjjjjjjj jjjjjj]]
|}
</div>
‎

Good practice - code

Here is the wiki markup for the good practice example above which uses a list:

‎

<templatestyles src="Main_page/styles.css"/>
<ul class="navigation-bar" aria-label="menu bar">
<li class="navigation-item" style="background-color: #F9F9F0; border-top: 5px solid #999933;">[[Project:Sandbox|aaaaaaaaaaaa aaaaaa]]</li>
<li class="navigation-item" style="background-color: #F9F9F0; border-top: 5px solid #669933;">[[Project:Sandbox|bbbbbbbbbbbb bbbbbb]]</li>
…
<li class="navigation-item" style="background-color: #F0F4F9; border-top: 5px solid #336699;">[[Project:Sandbox|jjjjjjjjjjjj jjjjjj]]</li>
</ul>
‎

The markup uses an HTML list (<ul>) with bullet points (<li>). Note also the class parameters for some elements.

And here is the CSS in the TemplateStyles file Template:Main_page/styles.css for the good practice example above. It defines how all elements in a class look:

‎

.navigation-bar {
  background-color: #FFFFFF;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  display: flex; 
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 10px 0px 10px 0px;
}
.navigation-item { 
  flex: 1 1 0px;
  list-style: none;
  margin-right: 1px;
  max-width: 12rem;
  min-width: 7rem;
  padding: 2px 8px 2px 8px;
  text-align: center;
}

The list does not look like a list because the CSS hides the bullet points via list-style: none.

Fix other layout elements

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

Bad practice

It is bad practice to use an invisible table to have two elements next to each other:

Heading 1

Heading 2

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.

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.

Good practice

It is good practice to use 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.)

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.

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 practice - code

Here is the wiki markup for the example above which uses an invisible table:

‎

{| style="padding:8px;" align="center"
|! style="width: 67%; background: #faf9b2; padding-top: 0.1em; padding-bottom: 0.1em; text-align: center;"|'''Heading 1''' 
|! style="width: 33%; background: #e2e2ff; padding-top: 0.1em; padding-bottom: 0.1em; text-align: center;"|'''Heading 2'''
|- 
|valign="top align="left" style="background:#ffffec"| 
'''Some content on the left:''' Lorem ipsum dolor sit amet …
|valign="top align="left" style="background:#f8f8ff"| 
'''Some content on the right:''' Lorem ipsum dolor sit amet …
|} 
‎

Good practice - code

Here is the wiki markup for the good practice example above which uses two <div> elements. Note also the class parameters for some elements.

‎

<templatestyles src="Main_page/styles.css"/>
<div class="content-container">
  <div class="content-start">
=== Heading 1 === 
'''Some content on the left:''' Lorem ipsum dolor sit amet …
  </div>
  <div class="content-end">
=== Heading 2 === 
'''Some content on the right:''' Lorem ipsum dolor sit amet …
  </div>
</div>

And here is the CSS in the TemplateStyles file Template:Main_page/styles.css for the good practice example above. It defines how all elements in a class look:

‎

.content-container {
  display: flex;
  flex-flow: row wrap;
}
.content-start {
  flex: 2;
  background-color: #ffffec;
  border: 1px solid #000;
  padding: 8px;
}
.content-end {
  flex: 1; 
  background-color: #f8f8ff;
  border: 1px solid #000;
  padding: 8px;
}
@media all and ( max-width: 800px ) {
  .content-start, 
  .content-end {
    width: 99%; 
    flex: none;
  }
}

flex: 2 and flex: 1 define the width ratio (67% to 33%) of the two columns.

For less than 800px width, this example uses "adaptive design": The content on the right will be shown 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: Future proof regarding DST grid work?
TODO: Actually move CSS stuff into TemplatesStyles once this page ends up in its final location outside of the User namespace
TODO: looks like Special:ChangeContentModel 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.

References

[1] ttps://phabricator.wikimedia.org/T293405#8014188

[2] w:en:Wikipedia:Manual of Style/Tables#Page layout

[1]

[2]

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

Contents

The problem

Find out if your main page has problems

General steps

Step 1: Create the main page template

Step 2: Define the layout via CSS

Step 3: Add content to the main page template

Step 4: Test your changes

Step 5: Add the main page template to your main page

Fix navigation bars

Bad practice

Good practice

Bad practice - code

Good practice - code

Fix other layout elements

Bad practice

Good practice

Bad practice - code

Good practice - code

Find more help

See Also

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

References