Mobile Gateway/Mobile homepage formatting/de

Wenn die Hauptseite (Main Page) deines Wikimedia-Projekts noch nicht formatiert wurde, um auf mobilen Geräten angezeigt zu werden, und wenn du ein Administrator auf diesem Projekt bist, dann folge den nachstehenden Anleitungen.

Bitte beachte: Du brauchst Administratorenrechte, um die Startseite (Hauptseite) bearbeiten zu können.

Schritt 1
Entscheide zuerst, welche Inhalte für die mobile Startseite geeignet sind.

Beurteile die Seitenelemente in der Desktop-Version (z.B. "Bild des Tages"), indem du fragst:


 * wie beliebt sind sie?
 * werden sie regelmäßig aktualisiert?
 * sind sie für schnelles Lesen geeignet?
 * werden sie gut auf einen mobilen Bildschirm passen?

Wenn du einmal entschieden hast, welche Elemente Sinn ergeben, fahre fort mit Schritt 2.

Schritt 2
Du musst angemeldet sein und Administrator-Rechte haben, um das Folgende auszuführen. Gehe zur Desktop-Ansicht der Hauptseite, klicke auf "" und suche die Elemente, die du in der mobilen Darstellung berücksichtigen willst.

Bei jedem Element musst du eine kurze Anweisung – "mf-Selektor" genannt – in den Wikitext zwischen div-Tags einfügen, etwa so:



Was gehört zwischen den öffnenden und den schließenden div-Tag? Es sollte vorzugsweise eine Vorlage für das Seitenelement sein wie "Artikel des Tages".

Bestimmte Style eignen sich nicht für responsives Layout, zum Beispiel feste CSS-Grössenangeben feste Grössenangaben in Pixel für Breite (width), Höhe (height) und Innenrandabstand (padding). Eigene, individuelle CSS-Anweisungen können in Extension:TemplateStyles oder MediaWiki:Common.css oder MediaWiki:Mobile.css definiert werden.

Certain styles are not mobile friendly. For example any css rules which make use of fixed pixel size e.g. width, height, padding. If different style treatment is needed please use the Extension:TemplateStyles or port these styles to MediaWiki:Common.css or MediaWiki:Mobile.css.

Einige Tipps zu häufig auftretenden Problemen sind zu finden unter @.

Klick auf "".

Du bist fast fertig.

Schritt 3
Gehe jetzt zur mobilen URL, die üblicherweise languagecode.m.project.org lautet. Du kannst die Breite deines Desktop-Browsers verringern, um einen mobilen Bildschirm zu simulieren. Wie sieht die Seite aus?

Wenn du noch etwas ändern willst, dann gehe zurück zu Schritt 2. Wiederhole nacheinander Schritt 2 und Schritt 3, bis du zufrieden bist.

Das war's!

MFSpecialCaseMainPage
Wenn $wgMFSpecialCaseMainPage aktiviert ist (standardmässig deaktiviert), dann ist es möglich, den Desktop- und Mobilebenutzern unterschiedliche Inhalte zu präsentieren. Vom Gebrauch dieser Möglichkeit wird abgeraten and deprecated as it only works on the `Main Page` and is a maintenance burden … and should only be used as a stop-gap measure when transitioning your MediaWiki site to a mobile experience. It will be removed in 2020.

Die Hauptseiten der Sprachversionen von Wikipedia und den anderen Wikimedia-Projekten unterscheiden sich; deshalb ist es unmöglich, ein universelles Beispiel zu präsentieren. Um dennoch eine Vorstellung davon zu geben, wie es auf deiner Hauptseite aussehen könnte, folgt hier die deutsche Version der Wikipedia. https://de.wikipedia.org/ Wenn du auf "Quelltext anzeigen" klickst (den Tab rechts von "Lesen"), siehst du den Wiki-Quelltext. Benutze die Suchfunktion deines Browsers, um den String "mf-" zu finden.

In diesem Fall sind die div-Tags für die mf-Selektoren Teil größerer Seiten-Objekte. Nur wer vertraut damit ist, wie die Hauptseite dieses Projekts formatiert ist, wird die div-Tags im Einzelnen verstehen.

Jetzt gehe zu: https://de.m.wikipedia.org/

Das Ergebnis als mobile Seite wird angezeigt. Die Abschnitte des Inhalts, die zu den mf-Selektoren gehören, werden in der mobilen Darstellung aufgebaut.

Deprecation steps for wikis using MFSpecialCaseMainPage
MobileFrontend is in the process of deprecating the code relating to main page special casing. If you have a wiki using it you'll want to stop using it immediately. If you have any questions please don't hesitate to use the talk page!

How can I tell if I'm using it?
For projects you are users of please apply the query string " " to your main page on mobile and compare it with the main page without the query. For example users of English Wikipedia can compare https://en.m.wikipedia.org/?mfnolegacytransform=1&debug=1 with https://en.m.wikipedia.org/. If the two pages look different you must migrate ASAP.

What can I do to fix this?
Assuming you do not want to do a big redesign and just want to retain the existing main page design, you can follow this guide.

Copy the main page markup into a sandbox e.g. a sub page of the user namespace. Now switch to mobile mode. Note, the mobile site can be viewed in your desktop browser, so if you can you may want to consider using the wikitext editor of the mobile site.

You'll need the TemplateStyles extension deployed on your wiki. You can see if it's installed on your wiki by visiting Special:Version. If it's not for whatever reason please request it.

To add template styles to a page add the following line to the top of your new draft page:

You can now add CSS @media queries to your page by adding CSS inside Template:Main Page/styles.css to display different content to different device resolutions.

You can apply the "nomobile" class to any elements you wish to continue to hide on mobile. In some cases use of this class is the most straightforward way to update your page.

Known problems are listed below:

1. Stop using tables

If your main page uses table's in any way, please remove them. There are many tutorials on the web for doing column layouts. Please put "responsive column layout" into your favorite search engine. If this is confusing, you'll probably want to seek help from a CSS expert!

DivTable converter provides a way for you to convert a table HTML to divs. You should aim to put the associated CSS in MediaWiki:Common.css. This act alone should improve your rendering in mobile greatly.

2. Review any inline styles

Search for any instances of styles which make use of the css properties " ", " ", " " or " "

For example:

Move these into a TemplateStyle. Use a class and move the css declaration to css.

Example CSS:

e.g. Example - note the pre tag is only included for example purposes - this should be put into a TemplateStyle.

3. Reskin for mobile

With the above steps applied your page should look no different on a desktop browser, but as you shrink the screen (horizontal width) to under 720px - the threshold you introduced in step 2 the styles should disappear. You'll want to add new styles (outside the media query you introduced in step 3). These styles will apply to mobile devices and will be overridden.

If there is any content in the page that you do not want to render in the mobile skin you should add the class "nomobile". e.g.

4. Apply the new template

Copy and paste the sandbox page into your Main page. Refresh the browser and verify that it works as expected on both mobile and desktop.

5. Make a site request to turn off main page special casing

If your site is now no longer using the special page casing and your site appears in this config:

You'll want to let a Wikimedia site admin know that you are ready for main page special casing to be turned off. File a Phabricator ticket using this link that links to this web page and lists your wiki.

You'll be able to tell when this has been successful if you've been using the  prefixes as suddenly other content will display on your mobile site!

6. Remove any mobile specific ids.

i.e. any instance of the following:

These are not necessary any more. Previously these would choose which content to show on mobile, but now you have a new mobile first responsive design and have disabled main they will be ignored.

e.g. This example

Quick fix (dirty)
The quickest possible fix for your wiki might be to fix the design for Minerva only by forcing horizontally stacking at the trade off of impacting the small amount of desktop Minerva users.

To see if the quick fix works for you add the following to your Main Page:

and then inside Template:Main_Page/styles.css copy paste the following CSS:

Please be aware that this is a quick and dirty fix, which may break more complex main pages (e.g. ones that use tables within tables), and it also doesn’t improve the current situation where the main page breaks on smaller desktop screens and wastes much space on larger mobile ones. If you really don’t have time, you can use this temporarily, but you should plan to really fix the mobile (and small-screen desktop) experience using the above size-dependent methods (or completely redesign the main page, of course). If you decide to go this way, you should make sure to test the resulting main page using mobile view.