Mobile Friendly

Mobile Version

• Mobile version is a mobile design of the desktop site

• All important info is still shown

• Secondary elements like graphics and images can be adjusted or removed.

• Some layouts will need to be adjusted.

Dedicated App

• It gives the user an additional service or functionality unavailable on the mobile version.

• Downloadable to the phone

• More expensive to create (iOS, Android).

• A dedicated app that does the same thing as a mobile version of the site is just a waste of money

• You aren't providing any additional advantage or experience that an app offers.

Advantages of a dedicated app

• Push notifications

• Offline access

• Personalization

• Branding opportunities

• Brand presence

• Leverage device capabilities

• Customer engagement

• Suitable for gaming

• Better performance

Advantages of a mobile version

• Quick access

• Multi-platform compatibility

• Instant updates

• Can't be deleted

• Doesn't use up storage space

• Cost-effective

• Broader reach

• Shareability

• Support and maintenance

Mobile First aka consider responsiveness

• Think of the challenges mobile designs have and design solutions for them before designing for desktops.

• Screen size

  • Mobile devices can only show so much

  • Keep it simple. Only what is really important to the user flow is shown

• User interaction

  • You can use your phone differently than your desktop

  • Click on mouse vs. tap with fingers

  • No hover option on the mobile.

• Data is limited

  • Large images can cost the user data and slow down the site

• Graphics, effects, and images are all developed with mobile challenges in mind

  • Keep image sizes below 500kb

    • "save for web" to make sizes smaller

• Use appropriate file formats

  • If it needs a transparency -> PNG

  • If not then use JPG

  • Newer format-transparency and condensed- use WebP

Adaptive vs. Responsive Design

• Created for specific design's screen

• If it's not on the list, then it may not look right on that device

  • Iphone 8 and 15 pro max

  • Samsung galaxy tab 4

Responsive Design

• Displays the same site to every device, but that site is fluid and will change its layout and appearance based on the size and orientation of the device

• Ranges that a simple design will adjust to fit

  • Desktop, tablet, mobile