fbpx
>

Web Design Tips for iPhones (And Other Smartphones)

web design tips iphone

iPhones and other smartphones have taken over browsing, shopping, and educational research that once took place solely on a desktop. While this isn’t news to anyone, if you’re a business with a digital footprint, it’s essential to understand why.

The first and most obvious answer is the convenience of having a lightweight, mobile device you can take anywhere. The second is a byproduct of having access to these devices–now, when we’re bored waiting for a train, you can hop on your phone. Something that was physically impossible with a desktop or laptop.

Whether your business is getting the bulk of your traffic via mobile devices or not, you should plan any new web design with mobile-friendliness in mind. (Bounce rates are never higher than mobile devices while visiting an unfriendly, text-heavy website.)

Web Design Tips for iPhones

Here are essential web design tips for iPhones and other smartphones.

Finger-Friendly Buttons

CTA button example

If you’ve ever tried to check out on your device and kept hitting the “search” functionality instead, you understand why this is important.

On a mobile device, your button should be between 42 and 72 pixels high, with the most preferred size being 60 pixels high (Depending on your text, the width will vary).

If you have multiple buttons on a given page, the padding between the buttons becomes important too. For a standard 60 pixel-wide button, leave at least 24 pixels between each. Generally speaking, the larger the button, the less space required between two.

Video Is Great, But Understand Your User

Sure, many people watch videos on their mobile devices, but does your customer?  Before adding videos to each page, ask yourself these questions:

  • Where are my customers when they browse my site? Are they at a place with reliable wifi or out and about with limited data?
  • Are they in public or private? Do they own headphones? Automatically playing loud videos upon arrival might make your users bounce.

We like adding video, but we sub in photography when ideal bandwidth isn’t available.

 Rows >>> Columns

Rows, columns, and stacked elements look great on desktops and tablets but become too thin when viewed on an iPhone. Consider single-column relationships and how to divided it when it displays on a vertical screen.

Here’s an example of a desktop version of rows and the mobile version which responded and shifted to columns:

desktop columns

Mobile columns

Sans Fonts

Did you know that sans fonts are easier to read than sans serif on digital screens? While we love combining fonts and using sans serif for accents and headings, you typically don’t want your body text to have a serif.

Here are the two compared:

sans vs sans serif fonts

Scrolling Features

If you plan on having a lot of content on a given page, add a “Scroll To The Top” option so users don’t have to exhaustingly scroll back up. A sticky navigation also helps with this but takes up valuable screen space so weigh your options.

White Space Is Your Friend (And Enemy)

This falls between design and content publishing, because a designer may not have control over the way a content manager imports text and images.

That being said, make sure paragraphs and headings break in an optimal way. Then, train your content person to space out concepts for better user experience.

Know Your Resolutions

Here are the latest iPhone resolution sizes so you can understand the amount of screen that will show at any given time. As you can see, iPhones and other devices have been getting steadily larger, enabling web designers and content creators to fit more elements on any given view.

For more web design tips and expertise, contact Zenman.

Calendar August 21, 2019 | User Zenman