The DT Blog

We try to keep you up-to-date with the latest trends in web development and graphic design, while also writing about our hobbies or trips from time to time.
If you enjoy what you've read, give it a like or a share!

Mobile Website Positions

While rearranging apps on my iPhone, I became aware of a the sub-continuous ordering that had taken place.  On each page I had arranged the top line of apps in descending order of importance and frequency.  Going from left to right, I started with Gmail (accessed dozens of times a day) and worked my way down to the Clock (accessed only once a day).  However, my middle rows are arranged in ascending order of frequency.  For instance (left to right), I started with (that I have yet to access) and worked my way to Cozi (accessed about a dozen times a week).

This got me thinking about how important proper placement is for mobile website?

Why is it important to position things properly on your mobile website?

  • Because it's psychological.  For English speaking and reading people, the top left is the prime spot for communicating importance.  It is seen as the beginning, the premier.  It psychologically holds more weight.  Even if it is impractical to access an icon farthest away from the tapping thumb, it is often automatically where the most importance is placed.  When designing a mobile version of a website, the logo or the navigation need to hold this spot.  After this another form of psychology takes over: "The path of least most resistance."
  • Because it's practical.  For right handed people (and even many lefties) who operate their phones with their right hand, the easiest place to tap is near the middle of the screen while the easiest place to scroll is near there right edge of the screen (where full range of motion can be easily achieved).  As I mentioned in a post several years back, when a right finger has to cross the screen to tap the left side, virtually the entire screen is blocked.  This makes too many left-aligned links a bad idea.

Where should items be placed for my mobile websites?

Top LeftMobile Position Top Left

Because the top left communicates most importance and origin, it is a great spot for either a logo or for navigation.  It may not be the most accessible, but this spot makes up for practicality by helping your users NOT have to search for things!

TopMobile Position Top

When a user accesses the top left position virtually all of the screen is covered.  All of it, that is, except for this spot right here!  Because of its constant visibility, the top position is great for communicating an over all message by way of a logo or a tag line.

Right SideMobile Position Right Side

The functionality of this position has changed slightly over the years.  Due to users inadvertently clicking links and blocking content, the right side is often best reserved for free scrolling area and left relatively open.

CenterMobile Position Center

The center is where you should place the majority of your content as well as your common (non-navigational) links.  Here words and pictures are both easy to see and easy to access.  Fewer accidents occur here because the thumb does not scroll or rest here as often.

Left / BottomMobile Position Left / Bottom

It would be overkill to call this no man's land, but to tap this area the thumb would be strained and the screen would be covered.  So, though it's a great place for content, it is not a great position to put links or navigation.

Hopefully this will help you think through where to place various items as you develop your mobile website and create a great user experience.  Proper placement can help insure both form and function as your clients access your website through their mobile phones.