Websites for growing businesses

Mobile Design for The Modern Business

Back in the days of Mad Men, modern businessmen would leave their wives behind, pick up a newspaper from the front doorstep, catch up on yesterday’s affairs on the train or car ride to work, and pass along information with old school note passing, secretaries, phone messages or, shockingly, share news in person. Shopping was done by hand, air tickets booked by telephone, data stored on fat heavy disks, books read by hand; the list goes on… Obviously, a lot has changed in today’s world, meaning businesses need to be doing a lot less in person and a lot more online to build their fanbase.

We are now in the age of the mobile phone: the news is delivered via text the second a catastrophe happens, shopping, groceries, talking and messaging is all done behind the screen, and even business meetings are increasingly taking place over computers. In an age where more people own mobile phones than toothbrushes, the mobile market is ripe for businesses to relay information, opening the Smartphone App market up to new and creative possibilities for businesses. And many businesses have been jumping on the App market, creating Smartphone-friendly Apps for their companies, brands, new hot deals; so much so that the App market is overflowing with possibilities. The only catch – there is limited space on phones, and attention spans are now shorter than ever.

For businesses looking to catch a larger pool of mobile clientele, the best solution might just be developing a user-friendly, Smartphone-adaptable, modern website that can be easily navigated on mobile phones. This way, customers can seek your company out on their own terms, and if your website is easy to use, it might just be a hit during those long business meetings. Here’s a rundown on everything you need to know to get your website designed for the mobile client:

Go to infographic transcription

Mobile Design for the Modern Business infographic


Infographic Transcription

The Importance of Mobile Design

According to Ericcson1, by the end of 2013, global mobile penetration reached nearly 92%.

There are 6.7 billion mobile subscriptions. However, the actual number of subscribers is 4.5 billion.

This is because many people might have more than one mobile subscription, such as…

  • Work cell
  • Home Cell
  • Tablet
  • PC dongle.

Smartphone users spend an average of 2 hours and 42 minutes a day on mobile devices.

  • 02:16 is spent on mobile app usage.
  • 00:22 is spent on mobile web browsing.

But are mobile apps a better substitute for a mobile website or mobile-optimized site?

No! A mobile user may never download a native app, but is HIGHLY unlikely they will never use the mobile web.

For researching purchases, mobile web is still preferred. 4 out of 5 US smartphone owners use their phone to help with shopping, including:

  • Searching for store loaction
  • Comparing prices and reading reviews on 3rd party sites
  • Looking for promotions and discounts.

Other mobile spending stats:

  • 74% of smartphone shoppers have made a purchase following the research on a phone.
  • 8% of the total e-commerce market is comprised of mobile commerce.
  • The average annual spend on mobile purchases in the US was $300 x $10.

So mobile’s important. How can you design for it?

Mobile is a whole different environment than the traditional web page. You need to tailor your media to keep up with the ever-evolving platform.

Device Fragmentation

Mobile design needs to be able to match any mobile screen. You need to consider:

  • Screen size
  • Screen orientation
  • Physical input
  • Pixel density.

OS Fragmentation

Today there are three major mobile operating systems:

  • Android
  • Apple
  • Windows

One needs to consider…

  • Interface patterns
  • Variations between OS versions
  • External inputs
  • Variations between device makers (for Android).

Performance Development

The costs of developing for mobile are different than for strict web design, not to mention apps!

  • How will your design run on devices with different processing ability?
  • How will your site or app use the device’s resources?
  • How will you run trials and implement across multiple devices?

The answer? Responsive Design

Responsive design will adapt and automatically change the layout of a website to fit the device being used.

  • It maximizes user experience
  • Improves functionality
  • Improves readability

Without responsive, there are two options for mobile design…

  1. A mobile version of the website
  2. A non-optimized site

A successful mobile design is not static

Think not about individual pages, but also the transitions and navigation of your pages.

Images should be able to easily scale and fit to any screen size.

  1. Your mobile design should be innovative without being overloaded with slow-loading and battery-draining visual effects.
    – This is especially important when considering mobile apps!
    – Use CSS Elements and Javascript with caution!
  2. You need to understand the underlying structure of the platforms and interface patterns.
  3. Know how far you can customize UI components. Don’t be afraid to be “unoriginal”-simply redesigning known native UI elements can help you create the most efficient and cost-effective interface.
  4. Utilize the best featurs of mobile tech: Cameras & Microphone, Voice, Face & Fingerprint Recognition, Tap Detection, Location Services and More!

Tools for Mobile Design

Sketch – Sketch is a graphic design tool built with mobile in mind.

Proto – Proto is a mobile prototyping platform to help build and deploy mobile app simulations.

ImageOptim – ImageOptim helps compress image files without loss of quality.

Liveview – LiveView can help you see how your screen on your computer will appear on your mobile.

Origami by Facebook – Origami by Facebook is another tool for native UI prototyping, the closest you can get without going into coding.



Ivan Serrano is a social media and business journalist living in Northern California.

SHARE: Share on Google+Share on LinkedInShare on FacebookTweet about this on TwitterShare on Reddit

Comments are closed.