Difference between revisions of "Nookipedia:Project Interface"

From Nookipedia, the Animal Crossing wiki
(→‎Current: Rm newline tag)
m (Text replacement - "{{Nookipedia}}" to "{{Navbox Nookipedia}}")
 
(14 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{Project Leader}}
 
{{Project Leader}}
Welcome to the project page for Project Mobile! For more information about the project and our objectives, please read on. If you would like to comment on our progress, please use the [[Nookipedia talk:Project Mobile|talk page]]. If you're interested in joining, simply add your name to the [[Nookipedia:Project_Mobile#Members|list of current members]].
+
Welcome to the project page for '''Project Interface'''! For more information about the project and our objectives, please read on. If you would like to comment on our progress, please use the [[Nookipedia talk:Project Interface|talk page]]. If you're interested in joining, simply add your name to the [[Nookipedia:Project_Interface#Members|list of current members]].
  
 
==Purpose==
 
==Purpose==
This project is focused on improving Nookipedia's mobile implementation and establishing mobile-focused design standards that enhance the user experience. One of the project's main areas of focus is the development of templates and tables that display well across a variety of devices.
+
This project is focused on improving Nookipedia's interface. This includes sitewide theming and CSS improvements, establishing responsive and mobile-focused design standards, developing and providing gadgets for editors, and improving templates. One of the project's main areas of focus is the development of templates and tables that display well across a variety of devices.
 +
 
 +
==Mobile==
 +
These general guidelines aim to improve the mobile experience on the site, as over 70% of Nookipedia's readership comes from cellular or tablet devices. Following these suggestions will reduce the amount of clutter within our template and article pages, providing our users with a more productive reading and editing experience.
 +
 
 +
===Please avoid:===
 +
* Hovertext generated using template {{t|tt}}
 +
:: Instead use template {{t|Note}} or see suggestions at the bottom of [[Nookipedia talk:Project_Villager#Standardization_of_minor_things_and_other_stuff...|this page]].
 +
* Expand/collapse buttons generated using <code>class="mw-collapsible"</code>
 +
:: Instead use the tabs extension as documented [[mediawikiwiki:Extension:Tabs/Usage|here]].
 +
* Placing [[Help:Tables|tables]] within tables
 +
:: Instead use a series of <code><nowiki><div></nowiki></code>s or consider simplifying your layout.
 +
* HTML & CSS styling on article pages
 +
:: Instead limit HTML and CSS styling to template pages.
 +
* Duplicating wikitext code or CSS styling in template pages
 +
:: Instead consider utilizing the [[mediawikiwiki:Extension:Loops|loops extension]].
 +
 
 +
===We encourage:===
 +
* Setting template widths to 100% to occupy the full width of the mobile display
 +
* Prioritizing vertical orientation of templates, or flexible templates capable of shifting their aspect ratio
 +
* Maximal information in minimal space to avoid excessively long pages/lots of scrolling
 +
* Use [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout CSS Grids] to create responsive designs and lists (e.g. see [[Template:VillagerGallery]] in action at [[Dog]]).
 +
 
 +
=== Timeless skin ===
 +
Nookipedia has adopted the [https://www.mediawiki.org/wiki/Skin:Timeless Timeless skin] for our mobile site, replacing the previous [https://www.mediawiki.org/wiki/Skin:Minerva_Neue Minerva Neue skin]. Timeless has a responsive layout that will adapt elements and the layout to different resolutions, creating a consistent appearance between small screen and larger screen devices.
 +
 
 +
Although Timeless renders our templates much better than Minerva Neue did, some of them will still need to be optimized for best appearance on mobile.
 +
 
 +
=== To-do ===
 +
Here are some to-dos to help optimize the site for mobile:
 +
* [[Template:Gallery]] (needs to expand width of page and show image)
 +
* [[Template:Villager Info]] (width issues)
 +
* [[Template:HHD Info]] (stretches the page)
 +
* [[Template:Youtube]] (very large and off-center - should make it match layout of galleries)
 +
 
 +
Some pages use tables with lots of data that may not be possible to condense to a smaller size. This may be acceptable in some cases, but we should try to resolve any visual quirks.
 +
* [[List of villagers]] (loads very slowly on mobile, maybe we could hide some data?)
 +
* [[List of amiibo cards]] (also too narrow on mobile when collapsed)
 +
* The various furniture lists
  
 
== Members ==
 
== Members ==
If you wish to join Project Villager simply add your name to the list of current members below.
+
If you wish to join Project Interface simply add your name to the list of current members below.
  
 
=== Current ===
 
=== Current ===
 
*[[File:Sunmarshsignature.png|link=User:Sunmarsh]] '''<small><span style="font-variant:small-caps">([[User_talk:Sunmarsh|<span style="color:#7B7B7B">talk</span>]])</span></small>'''
 
*[[File:Sunmarshsignature.png|link=User:Sunmarsh]] '''<small><span style="font-variant:small-caps">([[User_talk:Sunmarsh|<span style="color:#7B7B7B">talk</span>]])</span></small>'''
 
* <b>~<i>[[User:SuperHamster|<span style="color:#07517C;">Super</span>]]</i>[[User:SuperHamster|<span style="color:#6FA23B;">Hamster</span>]]</b> <small>[[User talk:SuperHamster|Talk]]</small> 10:51, April 2, 2020 (EDT)
 
* <b>~<i>[[User:SuperHamster|<span style="color:#07517C;">Super</span>]]</i>[[User:SuperHamster|<span style="color:#6FA23B;">Hamster</span>]]</b> <small>[[User talk:SuperHamster|Talk]]</small> 10:51, April 2, 2020 (EDT)
 +
* --[[File:Shark HHD Icon.png|20px]] <span style="color:#0B3E57; font-family: Coustard">Dorsal Axe</span> <span style="font-family: Coustard"><small>([[User talk:Dorsal Axe|talk]])</small></span>
  
 
+
{{Navbox Nookipedia}}
{{Nookipedia}}
 
 
[[Category:Projects]]
 
[[Category:Projects]]

Latest revision as of 18:39, December 24, 2022

Tom Nook NH Character Icon.png
This project is in need of a leader!
If you're interested in leading this project, please bring up a discussion on this Project's talk page. List a few bullet points explaining your plans for the project (how you plan to improve it or revive it). Once a staff member has reviewed your plans, or if you've received support from several editors, you may take the lead!
Tom Nook NH Character Icon.png
This project is in need of a leader!
If you're interested in leading this project, please bring up a discussion on this Project's talk page. List a few bullet points explaining your plans for the project (how you plan to improve it or revive it). Once a staff member has reviewed your plans, or if you've received support from several editors, you may take the lead!

Welcome to the project page for Project Interface! For more information about the project and our objectives, please read on. If you would like to comment on our progress, please use the talk page. If you're interested in joining, simply add your name to the list of current members.

Purpose[edit]

This project is focused on improving Nookipedia's interface. This includes sitewide theming and CSS improvements, establishing responsive and mobile-focused design standards, developing and providing gadgets for editors, and improving templates. One of the project's main areas of focus is the development of templates and tables that display well across a variety of devices.

Mobile[edit]

These general guidelines aim to improve the mobile experience on the site, as over 70% of Nookipedia's readership comes from cellular or tablet devices. Following these suggestions will reduce the amount of clutter within our template and article pages, providing our users with a more productive reading and editing experience.

Please avoid:[edit]

  • Hovertext generated using template {{tt}}
Instead use template {{Note}} or see suggestions at the bottom of this page.
  • Expand/collapse buttons generated using class="mw-collapsible"
Instead use the tabs extension as documented here.
Instead use a series of <div>s or consider simplifying your layout.
  • HTML & CSS styling on article pages
Instead limit HTML and CSS styling to template pages.
  • Duplicating wikitext code or CSS styling in template pages
Instead consider utilizing the loops extension.

We encourage:[edit]

  • Setting template widths to 100% to occupy the full width of the mobile display
  • Prioritizing vertical orientation of templates, or flexible templates capable of shifting their aspect ratio
  • Maximal information in minimal space to avoid excessively long pages/lots of scrolling
  • Use CSS Grids to create responsive designs and lists (e.g. see Template:VillagerGallery in action at Dog).

Timeless skin[edit]

Nookipedia has adopted the Timeless skin for our mobile site, replacing the previous Minerva Neue skin. Timeless has a responsive layout that will adapt elements and the layout to different resolutions, creating a consistent appearance between small screen and larger screen devices.

Although Timeless renders our templates much better than Minerva Neue did, some of them will still need to be optimized for best appearance on mobile.

To-do[edit]

Here are some to-dos to help optimize the site for mobile:

Some pages use tables with lots of data that may not be possible to condense to a smaller size. This may be acceptable in some cases, but we should try to resolve any visual quirks.

Members[edit]

If you wish to join Project Interface simply add your name to the list of current members below.

Current[edit]