We came up with this issue especially because on small screens the page header takes so much space whilst it contains very few information.
So, we thought of adding media queries to make the dimensions at least on mobile devices smaller.
However, I would propose to improve the page header in general.
- The page header displays the user's name and his avatar on many sites (e.g. dashboard, private files, user profile)
- Especially the user's avatar picture blows up the size of the header
- My login information is redundant on these sites as they are also displayed in the navbar that always stays in the sight because it is fixied to the top.
- Because I know who I am and I can always check my login status in the fixed to top navbar, I would remove user's information in the header entirely.
- The page header cards could get a heading displaying the last breadcrumb title which is the most specific page a user is visiting currently
- This would shrink the dimensions of the page header on all screen sizes, which means that there are no special media queries necessary for small screens.
- Users would not see their name and avatar so often as they know who they are
- Users get the information which page they are visiting currently with a quick view
Following some Mockups displaying the status quo and the result of the proposed solution: