Part of the Drupal 8 Mobile UX Roadmap outlined an objective to design Drupal's task and input pages for small and touch screen devices.

We could design individual pages or use cases and have them working great but that doesn't solve all of our problems, if contrib modules have a bad mobile UI then the whole thing falls apart. We are designing a system that can be assembled in many different ways. We need to build and document a framework of different patterns and components, which detailed instructions about how and when to use them.

It would be useful to supply mockups of how example cores pages would work using these components but we should deliver way beyond that.

Example style guides and pattern primers

Comments

lewisnyman’s picture

Issue tags: +Usability, +mobile, +d8ux, +d8mux

Tagging

jhodgdon’s picture

Issue tags: +Coding standards

Sounds like this is a coding standards issue?

lewisnyman’s picture

I thought of it more of a UX design deliverable

Bojhan’s picture

Yhea, this is not really a coding standard - sounds more like a UI standard we should document at http://drupal.org/ui-standards

jhodgdon’s picture

The "coding standards" tag encompasses all of the standards for how we should be writing Drupal code (including documentation, and I think UI design). If you don't consider the UI guidelines to be "standards", then we should move this into the Documentation project issue queue.

Bojhan’s picture

I think it should be a coding standard then, I was a bit trown of by "coding standard" didn't imagine we put stuff thats outside the text editor in there.

lewisnyman’s picture

I would love it if the style guide came with advisory notes and references to theming functions.

It would be a great UI guide for contrib modules.

lewisnyman’s picture

Here's a proposal for the contents of the mobile style guide:

  1. Primary Navigation — Page to Page
  2. Sub Navigation — Within the Page
  3. Forms
  4. Form Elements
  5. Buttons
  6. Lists
  7. Drag and Drop
  8. Filtering
  9. Sorting
  10. Alerts
  11. Imagery
  12. Pagers
  13. Interactive Widgets
lewisnyman’s picture

Issue summary: View changes
Status: Active » Closed (duplicate)

I don't think this issue serves much purpose now.