DEV Community

Cover image for Mobile Navigation on the Modern Web

Posted on

Mobile Navigation on the Modern Web

For a long time websites have used a top aligned navigation layout. Go to any website and the controls and navigation is almost always at the top of the page. Sometimes this will be in a fixed position so that as the user scrolls down the navigation stays in view. Occasionally websites will have a left aligned navigation system in addition to this. These are usually context specific; the content of the left hand navigation often depends on which page of the website you are on.

This left hand navigation scheme does not work well on mobile devices because horizontal space is at a premium. However the top aligned navigation was an easy transition to mobile design. This is interesting because app development has gone in quite the opposite direction. It has long been understood that putting the most used navigation elements of an app at the top of the screen makes it difficult for the user to reach. As phones have become large this problem has increased. Due to this mobile developers have placed the primary navigation features of their app on the bottom of the screen. Open up any app and you will probably find this to be the case.

It is time for mobile website designs to follow suit. Very often if a company has a website and a corresponding app, the mobile version of the website will derive the design of its user experience more from the desktop experience than from the app experience. This is often due to the fact that the implementation of the mobile and desktop versions of the website are integrally linked whereas often the app is totally distinct. Different development cycles might be used for each and can lead to different designs. Different stakeholder and product owners might be involved and this can again lead to a diversion.

However the long story short is that with respect to design the mobile website experience should be more closely linked to the app experience than to the desktop experience. The most striking example of this is with mobile website navigation. The de facto standard should be to place it at the bottom of the page.

I just took a look at a few examples of apps and mobile websites and they all fell into this same trap. The website had the navigation at the top of the mobile screen following suit with the desktop version and the app placed the navigation at the bottom of the screen following suit with what works best on a mobile device.

Check out my blog for more of my musings upon technology and various other topics.

Discussion (1)

sur0g profile image

You truly say the right things! I just don't get it when I'm forced to use my other hand to tap that "go back" or "menu" buttons. Those UX/UI things drive me completely mad.
Actually the most popular reason of broken phones is falling on the ground (about 60%+). I believe around 60% of that falls are caused by the users try to reach that "go back" button with their grip hand.