At first glance, it is not immediately obvious what "Previous" and "Next" lead to when you reach the end of a guidelines page. The only way to see is by hovering and reading the URL, or returning to the main page with the table of contents.
By modifying the Pagination Template, readers could see "Previous"/"Next" with the title of the corresponding page as well.
Example:
Possible complications
The template may need to be extended to allow for secondary formatting so that long page titles can fit properly in the pagination buttons.
Problematic:
Simple font scaling and padding reduction looks like a good start:
.pagination--pager {
padding: 1em 1em; /* instead of 2em on sides */
font-size: 0.75em; /* 20% reduction*/
}
And can be optimized by reducing the padding on the right of the body so buttons have more width to hold text:
.page {
padding-right: 2em; /* reduction from 300px; this modification also renders the width calc unnecessary for large viewports */
padding-left: 1em; /* a little breathing room for the left sidebar */
}
At first glance, it is not immediately obvious what "Previous" and "Next" lead to when you reach the end of a guidelines page. The only way to see is by hovering and reading the URL, or returning to the main page with the table of contents.
By modifying the Pagination Template, readers could see "Previous"/"Next" with the title of the corresponding page as well.
Example:
Possible complications
The template may need to be extended to allow for secondary formatting so that long page titles can fit properly in the pagination buttons.
Problematic:
Simple font scaling and padding reduction looks like a good start:
And can be optimized by reducing the padding on the right of the body so buttons have more width to hold text:
Result: