<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>Good morning guys, I hope you're well. I've had a chance to
preview the new Asterisk Docs page and it's looking good. However,
there are a few points I would like to note and direct at the
developer in order to improve the current layout of the site;<br>
<br>
Just for reference, I was browsing using the following settings;<br>
<br>
- OS: Windows 11 (21H2)<br>
- Browser: Google Chrome 115.0.5790.99<br>
- Screen Resolution: 1360 x 768<br>
<br>
==================================================<br>
Desktop Site<br>
==================================================<br>
<br>
- The content of the footer is left aligned. This seems "off" to
me. Usually I see footer content centered. Try centering class
"md-copyright" and observe how that looks.<br>
- There are dropdown buttons but they do not dropdown and reveal
submenus as one would expect. Class "md-nav__icon md-icon", you
may use JavaScript here to reveal the submenu and allow the user
to navigate quickly through the menus. Currently, two page loads
are required which slightly hinders the UX and also creates double
load on the host web server.<br>
- The main page content does not span the width of the screen. You
can use the CSS "vw" property to extend the width of the main
content div "md-content". "vw" or viewport width, will allow the
content to span the entire screen width regardless of device.<br>
- The main subheaders have links to blank pages. My suggestion
would be to remove links on those subheaders and revert to my
earlier point regarding the dropdown menus. There's no point
linking to a blank page.<br>
- The footer disappears on pages where the content goes offscreen.
It's jarring to have the footer pop in and out. On other pages, it
appears fixed due to lack of content. Consider having the footer
fixed in place just like the titlebar.<br>
- Table of contents. Consider adding an arrow or some symbol to
the TOC active element to allow users to visually inspect their
current position. md-nav__link--active CSS can be modified for
this.<br>
- The TOC has a scrollbar on it which seems out of place. Consider
applying an overflow CSS attribute to md-sidebar__scrollwrap to
hide it.<br>
- There seems little point to me in indenting items in the TOC.
Consider removing indentation and reviewing how it looks and how
using it without feels.<br>
- The search bar width is small then when clicked expands. This is
jarring to use as an end user. I recommend a consistent width for
the search box that does not expand. This will allow for a
consistent UX.<br>
- The project logo is present but not the name of the page. It's
prudent to add the name of the project next to the project logo to
inform users, those who don't have images or simply don't
recognise the logo, that this is the Asterisk Docs page.<br>
- Back to top only appears if a user scrolls up. Have that
functionality available whenever a user scrolls past a certain
point (for example 100px or more from the top of the page.<br>
- Subheaders and subheader menu font is exactly the same and as
such, these all blend into one when looking at them. Consider
changing the style of the subheaders and / or the submenu items to
allow for easier dinstinction betweeen them. Maybe consider
smaller fonts or horizontal rule.<br>
- Consider a scroll animation when clicking an element of the TOC.
That would make the UX a little more fluid. It doesn't have to be
fancy, a simply scroll to effect to the selected link would
suffice.<br>
- Consider using a different style for the content headers as they
blend into the main text.<br>
- There appears to be an animation on md-source__repository
md-source__repository--active but it really is so subtle, if you
literally blink, you'll miss it! Maybe reconsider that one. If you
want to animate it, consider what you want to do with it. Do you
want to highlight the project's stats? If so, consider something
like a countup animation to highlight the stats.<br>
- Consider the colour of both header and footer to fall into a
cohesive colour scheme.<br>
- Consider the height of both header and footer and if possible,
and it looks possible, to have them both the same size.<br>
- There appears to be 50px+ of overlaying whitespace when the
footer appears. This obscures part of the navigation submenu. Not
only that, the navigation submenu scrolls beneath the footer. Have
the navigation menu not scroll under the page have it fixed inside
it's designated space on the page.<br>
- Some pages have ToCs, some don't. Try to maintain consistency.<br>
- Consider the placement of the header items. Something like this
would fit logically for me personally -> "Company Logo" ---
Github Project Details --- Search Bar --- App Settings (Dark
Mode).<br>
- When applying dark mode, consider the header icons as they still
illuminate brightly.<br>
- Consider the sizing of the footer icons. They are very small and
maybe could be a touch larger for accessibility.<br>
- A link to the IRC channel would be nice :) Use the Hashtag SVG
icon if you wish.<br>
<br>
==================================================<br>
Mobile Site<br>
==================================================<br>
<br>
Phone used: Samsung Galaxy M32<br>
Browser: Google Chrome 115.0.5790.166<br>
<br>
- Right off the bar, when I load the page, I have no idea I'm in
the right place. No logo or page title. 3 stacked lines, the dark
mode button and search icon. Consider placing some branding there
on the header itself.<br>
- Ensure the spacing is appropriate. The 3 icons are not aligned
in a consistent manner. If you only have 3 icons, it might make
sense to left align, center and right align them.<br>
- Docs on mobile defaults to "dark mode" is this intended
behaviour?<br>
- On the submenu, consider the placement of the project logo and
title.<br>
- Don't allow for submenu items that navigate to nothing to be
clickable. Navigate down the tree until there is content to show.<br>
- The Back To Top button behaviour is inconsistent. When scrolling
up, it appears but may disappear depending on the content. Have it
fixed.<br>
- When going back one page, don't have the menu expanded. Instead,
scroll to the last content page.<br>
- Don't allow scrolling of the content when the submenu is open.<br>
- Consider keeping the logo and title on the submenu fixed in
place for consistent design.<br>
- Noticeable clipping on the submenu when reaching the footer of
the the page.<br>
- Consider the footer alignment of elements and sizing of the
project links.<br>
<br>
I'm happy to assist with the code and design if needed. You can
reach me on here or you can reach me on Libera.Chat in #asterisk.
Thanks guys.<br>
<br>
Martin.</p>
<div class="moz-cite-prefix">On 09/08/2023 23:43, George Joseph
wrote:<br>
</div>
<blockquote type="cite" cite="mid:CAP=uFEvz44qex4h56pJeEaAzZKoLBqVsvrJ0SxOz1hzXdg4Biw@mail.gmail.com">
<div dir="ltr">
<div dir="ltr">On Wed, Aug 9, 2023 at 4:05 PM George Joseph <<a href="mailto:gjoseph@sangoma.com" moz-do-not-send="true" class="moz-txt-link-freetext">gjoseph@sangoma.com</a>>
wrote:<br>
</div>
<div class="gmail_quote">
<blockquote class="gmail_quote" style="margin:0px 0px 0px
0.8ex;border-left:1px solid
rgb(204,204,204);padding-left:1ex">
<div dir="ltr">
<div dir="ltr">On Wed, Aug 9, 2023 at 2:30 PM <<a href="mailto:asterisk@phreaknet.org" target="_blank" moz-do-not-send="true" class="moz-txt-link-freetext">asterisk@phreaknet.org</a>>
wrote:<br>
</div>
<div class="gmail_quote">
<blockquote class="gmail_quote" style="margin:0px 0px
0px 0.8ex;border-left:1px solid
rgb(204,204,204);padding-left:1ex">On 8/9/2023 11:12
AM, George Joseph wrote:<br>
<br>
<br>
> Yeah, create an issue. I can take a look in the
coming weeks. If you <br>
> constrict the width of your browser, at some
point, the left nav bar <br>
> will collapse and you can get it back by clicking
on the "hamburger" <br>
> button that then appears in the top-left of the
page. There's no way <br>
> to collapse it manually though so maybe we can
find a way to add that. <br>
> Maybe we can also make the page table of contents
collapsible. Both <br>
> should give more space to the content. I think
we can also override <br>
> the viewport width of the content. A tweak to
the dynamic <br>
> documentation generator might also help.<br>
<br>
I don't think the issue here is collapsing the
navigation. In fact, I <br>
really hate when you're on a large monitor and
websites collapse menus <br>
like that, catering to mobile devices only is pure
insanity, making life <br>
more difficult for everyone else by requiring yet more
clicks to do <br>
anything. The issue is that the site seems to max out
at a certain <br>
viewport; on a large monitor, the middle portion could
take up more <br>
room, but there is vast whitespace to the left and
right margins. It's <br>
possible that the style is assuming a max-width that
it will use for <br>
presentation. Ideally, the middle content should
expand to take up the <br>
space it can so it can use the full width of any
monitor.<br>
</blockquote>
<div><br>
</div>
<div><br>
</div>
<div>Yeah I get it. I was just throwing out some
additional ideas as well.</div>
<div> </div>
</div>
</div>
</blockquote>
<div><br>
</div>
<div>Simple change. Check now. You may have to clear your
cache or at least look at a page that's not currently in
your cache.</div>
<div><br>
</div>
<div> </div>
</div>
</div>
<br>
<fieldset class="moz-mime-attachment-header"></fieldset>
</blockquote>
</body>
</html>