Digital Marketing

The Difference Between Mobile Friendly and Responsive Design

Nov 18, 2014

mobile-vs-responsiveThe Internet’s been in “mobile everything” mode for a couple of years now, with total time spent on mobile devices overtaking time spent on desktop and laptop computers this year. But with all of the new and updated mobile products flooding the market, one thing seems to be consistent – mobile and tablet screen sizes keep changing! So, how does one prepare for this without having to redesign your websites and emails to keep up? The answer is simple – responsive design. Many people think that responsive design is the same as mobile friendly, but it’s not. A mobile-friendly website or email is not necessarily responsive, but a responsive one is—generally speaking—always mobile-friendly, making it the better option.

Below we will outline some differences and give you some best practices to keep in mind when designing your websites and email campaigns.

Mobile Friendly Design Characteristics

  • Use a font size that is large enough to see on small devices because the font size does not change with the screen size.
  • Utilize a multi column layout that should allow the reader to click and zoom between blocks of content.
  • Make sure the call to action is easily seen and clickable.
  • Employ a fixed width page.

Responsive Design Characteristics

  • The email or website’s width will adapt to any display size with any orientation.
  • Font sizes change depending on device so you can target multiple display sizes.
  • Layout design can be changed very easily from multi-column to single-column depending on device.
  • You can choose to hide or show certain elements (i.e. image buttons) depending on which device the page is viewed on.

Best Design Practices for Mobile Devices

On a small screen you should be able to easily read any web page with just one eye, click all links and call to actions with one thumb and have all images easily viewable at an arms length. Although this might seem silly, if followed you will have a website or email designed in a way that is mobile friendly.

Keep these attributes in mind:

  • Minimal font size should be 16px
  • All call to actions should be at least 46px squared
  • Be sure that the copy is not cluttered, do not group several links closely together.

Hand Held Decisions

Keep in mind what type of device is being used when designing for mobile devices. If using responsive design, you can have the design change depending on which device is being used, allowing you to customize the user experience for what works best on a particular device. The positioning of hands is quite different from a phone to a tablet. A phone is generally held with one hand and used with just one thumb. Tablets are generally help with two hands and both thumbs are used, reaching just the sides of the device and not the middle.

The challenge you are faced with is to have a design that is optimized for both hand held devices interchangeably. This can be accomplished by having all call to action buttons span the full width of the page. Another way to appease both devices is be sure your design can scale down to a 480px width, which is the most common size for a phone in landscape orientation.

Icon Design & Consulting is a marketing agency that specializes in digital marketing. If you need help making your website and email designs responsive, and therefore, mobile friendly, please call us at 800-557-9511 for help.

 

Photo Credit: Mailchimp