How are large screen mobile devices effecting responsive design ?


For a long time I was used to 3.5″ devices, first it was iPhone 4 and then  iPhone 4s. Both 3.5″ Devices were perfect for one hand use (So does the Apple used to say). Admittedly, I have never owned an android device or matter of fact any large screen mobile device. A couple of months ago I decided to jump on large screen devices wagon, So I bought myself 4.7″ iPhone 6.

First couple of days I was like “WOW, So much largerscreen area for web pages”, I can see more content websites (and Apps as well) surfing websites was now easy to eyes and all of a sudden that “Perfect 3.5inches screen” was beyond usable. Over a couple of more weeks I was constantly being bugged by one thing “Hamburger icon”, the 3 short horizontal lines icon used in responsive designs for the menu. On most of the websites you will find this icon on either Top-Left or Top-Right corner or website.

Why was I bugged by that little icon? Here’s why – My shiny new iPhone (Yes! I bought the golden one) with 4.7″ screen wasn’t actually one hand device. I found myself constantly fondling with my iPhone in my hand to click on a hamburger icon or I had to use my other hand, which was clearly not an option while I’m cooking food or doing some other tasks alongside.

The future of mobile device sizes doesn’t look to be getting smaller, So as a web developer (or designer) it becomes our responsibility to fix this issue and improve the user experience of responsive designs. There are several alternatives to using a hamburger icon menu, but if you need to have one, a possible solution is to place it near the bottom left corner of the web page. For an even better user experience you can have a tabbed menu at bottom of web page and give your responsive design more look-feel of an app.