Designing for Mobile


Mobile First

By considering the mobile first, we are able to meet mobile user’s requirements on the most basic level because of the constraints of both performance and the landscape of the mobile platform. The mobile user has a device which is not only smaller in terms of real estate, but is also frequently on a lower connection speed or limited data plan. Essentially it forces us to become more focused and direct with our content, which will produce a quick, concise and relevant mobile experience that is carried over to the tablet and desktop.


Mobile-First Forces You to Focus on Core Content and Functionality

When you are dealing with a screen-size that is 320px X 480px or less you have to rethink and design the layout of your traditional desktop website layout. You only have enough space on the screen for the most important and key parts of your website.


New Capabilities with the Mobile Web

Because users are constantly upgrading their phones and changing plans, there are huge possibilities to utilise new and exciting technologies in your Mobile website.

Some of these things include:

  • Location information from an onboard GPS
  • Multi-touch interaction from different gestures and actions
  • Bluetooth device connection
  • Modern browser and hardware acceleration
  • Device tilt and movement information from an accelerometer
  • Audio and Video input from onboard microphone and camera


Touch Based Interface

The main reason gesture controls feel so natural and intuitive to us is because they resemble interacting with a real object. Gestures are invariably linked to animations in mobile apps. Animations play a very important role in maintaining an illusion of interactivity for users. When paired with gestures, animation essentially makes the brain believe that it’s interacting with tangible objects. However, touchscreen design demands thoughtful awareness of where fingers casually come to rest on the device.

These are some of the most common user gestures:

  • Tap: Touch surface briefly
  • Double tap: Touch surface with two quick motions (often to zoom)
  • Drag: Move along surface without breaking contact
  • Pinch/spread: Touch surface with two fingers to move in (pinch) or out (spread)
  • Press: Touch surface and hold
  • Flick: Scrolls quickly





Mobile Jazz (2016) Benefits of a Mobile First Approach Available at: (Accessed: 5 April 2017). (2017). ZURB — Product Design, Interaction Design & Design Strategy. [online] Available at: [Accessed 5 May 2017].



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s