Table of Contents
With time smartphones and other mobile devices got bigger and bigger and this trend will probably only continue and maybe even speed up. There is no doubt about it. Mobile phones are now closer to small-size tablets then ever before. Sooner or later the gap between those categories will disappear. Why is this topic so important for everyone in web design and web development? Well, why not to take a look at this question and explore it more-in-depth. Without further ado, let’s dive in!
Let’s start with a few numbers. The newest iPhone 6 is 138 mm x 67 mm and the Plus version is even bigger. The size of Plus is 158.1 mm x 77.8 mm. Samsung Galaxy S5 is 142 mm x 72.5 mm and, for more managerial types, Blackberry Z3 140 mm x 72.8 mm. Now from little bit different angle. The average size of man hand is 18.9 mm (17.2 mm for females) and the size of palm 84 mm (74 mm for female). Compare those numbers with each other and think about this for a moment.
I don’t want to smother you with numbers. They were used just to demonstrate how the current state of development in technology looks like. By the way, those are the only numbers in the post. Now, we are going to switch to more familiar waters – web design and development – and talk about the old way of design for mobile and then try to find out some better one.
Old way
I guess that almost all of you who are familiar with responsive design or mobile-first approach know at least something about media queries and targeting specific resolutions or breakpoints. The easiest and dumbest way to create responsive design is to pick three breakpoints – 480px for mobile, 768px for tablets and 992px desktop. I picked these specific values on purpose because they are widely used even across the most known frameworks like Bootstrap for example. Next step was to put the content in those barriers and modify it in case of any problems.
For individual parts of the website, like navigation, the patter was following … If the browser or device width is lower than 768px, display some icon instead of it (who likes burgers?) and make the navigation toggle-able. This icon is positioned either on top left or top right. It depends mostly on decision of the designer or owner of the website. Simple, easy and it can be done in just a few minutes with couple lines of code. In most situations, this would be enough for providing mobile users with accessible options of interacting with the page. Until now …
Note: Please, this is not supposed to be a guide on how to create responsive designs so don’t do this sh*t. There are much better ways to do it. I’m using this example only for illustration.
New way
This old way was sufficient solutions for a long time, even though it includes some of the bad practices. However, when the new wave of big screens arrived, this old way of doing design can be thrown into the trash can. If you are asking why, go back to numbers on the beginning of this post and compare the sizes of phones with size of man and female hand and palm. Take your time if you need it, don’t hurry. Do you get it now?
The problem we are facing now in web design and development is the fact that many people who are equipped with these devices will not be able to reach top corners of the screen to click the navigation icon and open it. No matter how funny it might seem to be, it is a serious problem. So, how can we resolve this problem in most elegant way and also how can we prepare for the bigger future?
Option no.1
In short, forget the top. Instead of placing the navigation icon (button) to the top left or top right corner of the screen, let’s place it on the bottom left or right. This may seem weird, but I already saw few examples and they looked pretty good. Try to suppress all the pessimistic thoughts that might be in your mind right now and imagine how interaction with this “bottom” navigation look like on a device with large screen. You would probably have no problem with reaching the icon or individual items in navigation with your thumb now, right?
Option no.2
Another option used in Google’s Material design is to implement floating navigation icon (button). As in previous example, the icon is in fixed position so it remains on top. The reason for floating icon is the fact that OS on smartphones often use the bottom of the screen for placing their own menu bar. This can cause some troubles when trying to add another navigation bar on top of that. What’s more it is even against Google’s guidelines for Android operating system.
However, if you choose the floating icon you will avoid this issue and still be able to provide good accessibility of the navigation for mobile users and this is what we want. Sure, there might be some arguments against this approach. For example, the icon can cover some part of the content or it might not be as clear for the user as it would in the “classic” (old) position on the top.
These arguments can be right and they also can be wrong. Our job, as a web designer and developers, is to have a courage to experiment with different approaches and find ones that work the best. This looking for new gateway we can use to ensure the most comfortable user experience as possible will take some time and couple trials and errors. However, this is the only way to get to the final destination.
Summary
Proper design strategy for mobile devices is (and should be) important part of your toolbox. With screens growing on size, we will have to reconsider how we approach this part of process and adapt to new conditions. Some design habits will need to go away while new will be added. This is what we do. What are your ideas for this problem?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
