Designing Mobile Website


The level of your website interaction plays a key factor in how long your visitor will stay on your website. Website interaction is even more essential than before with the dawn and growth of mobile websites. Touchscreens have changed the way a person interacts with a site. When developing your mobile website, you need to also give focus to user interaction. You have to think in terms of ergonomics, gestures, transitions, and mobile-specific interaction patterns.

This is important because if your website has poor user interaction, then your user is getting off the site. It may, in fact, be the reason why your mobile site has a high bounce rate.


Ergonomics comes into the pictures when dealing with screen sizes and how much a person’s fingers have to stretch on it. Hit areas refer to areas of the screen the user touches to activate something. Think about where you position your hit areas.

You have to give the user adequate space to press a button – take into a consideration that the finger tip is 2cm wide. Have too many buttons stacked together and a user may press all of them at once because of the lack of space between each of them.


A major part of your web mobile design has to focus on gestures. Here’s a quick look at all the touch gestures you should consider using your website.

Press: The primary action button that selects a button or link on the site.

Long Press: Ability to highlight and select text.

Double Press: Zoom in or out.

Small Swipe: Pull up a list or dashboard from the side.

Large Swipe: Scroll across to another piece of content.

Pinch: Zoom in or out.

It is important to understand that while these are the standard uses of these gesturers, don’t hesitate to try something new and push the boundaries of your design skills. Creating a user experience that is different and efficient can be very rewarding.


Transitions help your user navigate the site and move from across content and web pages.

Expand: Expand a list of content.

Flip: Literally flip the screen over and go back to the previous page.

Open to Full Screen: Expanding an item to full screen.

Swipe: Moving through various web pages on the site.

Slide Down: Move down to access more content on the page.

These are just few of the website transitions that can be used when creating your website.

Aim to have the right level of interactivity on your site. Your mobile website is not a game, so you can’t demand 100% interactivity from users. The right user interaction level will keep the users involved without demanding a lot of attention. Don’t hesitate to try something new with your website design – just ensure that it provides added to the functionality to the site and doesn’t burden your user. Checkout this great article on the topic of mobile web design considerations on Mashable.