Think Tank Thoughts

The Client Always Needs Mobile

It’s possible to consider mobile users without spending countless hours reimagining the design, even if your scope is limited.

a computer next to a mobile phone

Feb 11, 2022 | BY LookThink Team , Problem Solvers

The title of this blog may sound like an ultimatum — it may also sound like breaking the news that development will take twice as long with an invoice that's twice as high, but that's not the case.

What we're trying to say is: it's wrong to create a site with no thought given to mobile; it's wrong to let a project move from information architecture (IA) to development with no consideration for mobile. This is a disservice to your client and a poor reflection on you. It's possible to consider mobile users without spending countless hours reimagining the design, even if your scope is limited.

The easiest pitfall is to think mobile requires a full round of design and development on top of the original effort. In reality, it requires two things:

  1. Designers need to consider mobile while designing
  2. Developers should account for the fact that their code may be executed on a mobile device

So how should you account for mobile without spending time on mobile?

 

Embrace flexbox for mobile

If browser support allows, using flex boxes to determine module or section layouts across the site can save a ton of time and make the move to responsive incredibly easy.

Instead of relying on floats, which break elements out of the document flow, flex allows elements to remain sized and spaced properly to give you access to the mobile tool of flex-direction.

Have 3 buckets that should stack?

.buckets {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  .items {
    flex: 1;
  }

  @media screen and (max-width: 420px) {
    flex-direction: column;
  }
}

Should that sidebar appear above the content?

.container {
  display: flex;

  .content {
    flex: 2;
  }

  .sidebar {
    flex: 1;
  }

  @media screen and (max-width: 420px) {
    flex-direction: column-reverse;
  }
}

Voíla! Layout tweaks are possible with floats, but they come with more complexities (like sizing and layout) — using flex helps you to avoid these issues. Keep in mind, mobile browsers support flex box. You can choose to use flex only on mobile if your desktop support extends to old Internet Explorer. 

 

Embrace flexbox for mobile

Specifically sized elements are huge offenders in poor mobile experiences — this keeps elements from scaling on smaller devices. Sometimes, this is something you have to do; a true mobile development process, including breakpoints for resizing elements, is necessary. Consider this: should that call to action be width: 500px; or can it instead be max-width: 500px; which would allow it to scale on smaller screens?

While it may vary from object to object, using the properties and sizes (width vs max-width, percentages vs pixels) can pave the path to an improved mobile experience.

 

Consider Mobile Navigation Woes

A broken navigation element on your mobile site is a deal breaker for users — but a dedicated mobile navigation typically requires a round of IA to determine if you need every nav element on mobile, or if you should include other actions. At minimum, include a basic drop-down or select-based navigation menu.

It takes only an hour of work to include a secondary navigation that appears at small sizes and helps quell one of the biggest issues on mobile sites, which is poor or no navigation.

 

Solve your problems before they exist

These suggestions won’t add significant time to your development process — but if you include them as part of your core thought process behind development, you will benefit. Determine the problem areas and solve potential issues ahead of time to create a more robust, stable site to cull future issues that may arise.

Despite what clients might think, unless their aim is a solely desktop-sized application (not website), users will look at their site on a mobile device. When that happens, you must be prepared.

Ready to meet your UX partner?

Let’s Talk About Your Experience.

Tell us about you