User blog:RR3 Michael P/Mercury (Mobile skin)

Mercury
The Mercury (Mobile skin) presentation was made by Wiki Staff 29 July 2017. Slides are available to view.


 * w:c:connect:Mercury

The following were the key points (from my perspective) and notes I have made:

Navigation & Mercury
Mercury’s goals are different than desktop. Mercury is primarily for readers; desktop is strongly preferred by editors. Mercury stresses wiki links, infoboxes and the main copy of articles.

Not shown or altered

 * Notice: Because Notices almost always have to do with editing, they are not shown in mobile.
 * Navbox and "block" Navigation: Because these are rarely mobile friendly, they are not shown in mobile. See "Mobile Main Page"
 * Infoicon: Resized and stripped to the image ONLY, and does not include any text.
 * Quote: Stripped to the essentials, rather than using a table for layout.
 * Notes:
 * The notices we put at the top of the page advising users that cars are available to win, are not shown on mobile! The easy fix is to change them text, possibly with indent.
 * Navbox: Fine, mobile users can use navigation or categories
 * Infoicon: BRL and look OK
 * Quote: character picture are stripped, reads OK on mobile, the quote is signed by the character.

Mobile Main Page

 * Note:
 * Some content has been added and displays an introduction.

The Mercury engine
The page is rendered on the server and stripped back, ready for mobile.
 * Note:
 * The size of the article page, i.e. text to define data in templates doesn’t matter.

Coding Conventions
Many source code habits come from the mindset that space is at a premium. In this era of computing, space in the source code is not expensive. If the code is easier to read in a more organized way, that makes it easier to edit. PRO-TIP: The mobile page editor in Mercury edits the source of a single section of an article at a time. Spacing and indentation make a big difference in how easy it is to edit on mobile devices.
 * Old method:


 * Recommended method (makes editing on mobile easier):

Tables
No colspan / rowspan, no nesting tables, and no building rows or cells with templates (contents only).
 * Note:
 * This is a big change for us, several of our tables use colspan / rowspan (see Responsive Tables below)

Intuitive Templating
It's already challenging for new editors to get used to the rules and guidelines editing on a new community. Templates that are very complicated, with un-intuitive parameter names, are enough to scare users away.
 * date_of_birth = is fairly simple, but | dob = (and other acronyms) may not be understood by everyone who edits…..
 * Note:
 * Abbreviations are used in most of our data! Not allot we can do with existing templates (due to the amount of data to update), new templates can be designed with full names in mind.

JavaScript and Interactivity
Content modified (or created) using JavaScript and jQuery will not be visible on Mercury.
 * Note:
 * The countdown clock doesn’t work, as it uses JS. CountdownNG.png

Responsive Tables
colspan and rowspan themselves compound this irregularity... scope= “col” and scope=“row” is future-proof and portable.
 * Note:
 * Tests on changing templates with colspan and rowspan to scope= “col” and scope=“row” are required.

Conclusion

 * Notes:


 * May of the points made in the presentation does not affect our Wiki.
 * Categories have already had a redesign and aid navigation.
 * Template classification has already been completed.
 * Mobile home page, has now had added some content. It looks like some content is created from whats hot on the wiki too.
 * Navigation works well. Navigation.png


 * Car article pages render well, as do special event pages. Rewards_table_has_zebra_stripes.png
 * Some tables (with zebra stripes) render well.
 * Other tables (with rowspan) do not render as wall, but still display (see car upgrade pic below)


 * The calendar switched to desktop view, as it is a project page. Calendar_defaults_to_Desktop_view.png


 * There are some improvements to look at. Car_upgrades_display_but_no_zebra_stripes.png
 * Tables (with rowspan/colspan) do not render as wall, but still display
 * scope= “col” and scope=“row” are required (further investigation required)


 * Its good to know what is allowed and what isn't on mobile.
 * Overall I'm happy with how the RR3 Wikia looks on Mercury mobile skin. Hopefully regular mobile users are too.


 * Portable Infobox


 * OldInfobox.pngble infobox has been on Sirebel and my to-do list for some time, the infobox we use is currently an old standard, all infobox need to be updated to the new Portable Standard.


 * Followup:


 * Change notices to text, particularly on cars available to win this release.
 * Tests on changing templates with colspan and rowspan to scope= “col” and scope=“row”.
 * Update Infobox to new portable standard

RR3 Michael P (talk) 12:56, July 30, 2017 (UTC)