Skip to main content

Thoughts / Bottom Navigation Pattern.

5th July at 10:29

Last night I was checking out my portfolio and brainstorming some ideas to improve the website overall.

One thing that immediately stood out to me was a need to improve the mobile experience for navigating the site in general.

I had noticed that the likes of Facebook, Google, and Spotify were using bottom navigation patterns throughout their apps.

In the past, I had read how bottom navigation bars can help the user as it easier to reach on mobile.

I also reduced the links' font-size to reduce the amount of horizontal scrolling required by the user to access all the navigation's options. I was also able to increase the horizontal spacing between sibling elements, which made the links easier to tap.

Personally from browsing the site, I have found it much easier since making the change, and I'm excited to hear feedback from others.

Another benefit that I have noticed, although this is only from my own experience, is that it is easier to focus on the content between page transitions now.

Other improvements I have made to the site last night include:

  • Whitespace fix on the Contact form
  • Changed min-heights of link cards on smaller devices to reduce the need for vertical scrolling
  • Increased the font-size of card headings on /about and /projects to help readability.
  • Increased the font-size of general h1 tags on mobile to help with differentiation and again readability.
  • Added a link to the Homepage in the site footer.

Back to Top