March 31st, 2016

The title of this post may sound like an ultimatum you have to deliver to clients. It may also sound like breaking the news that development will take twice as long and the invoice will be twice as high.

What this post is really about is this: it's wrong to create a site without any thought given to mobile; it's wrong to let a project move from Information Architecture to Development without any consideration made for mobile. It does a disservice to your client and reflects poorly on you. Limited on scope? It's entirely possible to consider and account for mobile users without spending countless hours reimagining the design.

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 does one account for mobile without spending time on mobile?

Embrace flexbox for mobile

As long as browser support allows, using flexbox 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 and gives you access to the almighty 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! Most layout tweaks that can be done with flex are also possible with floats but floats come with more problems in the realm of sizing and layout than flex does when used correctly. Flexbox is supported in all mobile browsers so using it only on mobile is also an option if your desktop support still extends into old IE.

Avoid hard sizing elements

One of the biggest offenders in poor mobile experience are elements that are specifically sized, disallowing them from scaling on a smaller device. Sometimes this is required and only a true mobile development process of adding breakpoints to resize elements is necessary, but does that call to action really need to 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 appropriate properties and sizes (width vs max-width, percentages vs pixels) can save a lot of hassle in the mobile world and give you a head start to an improved mobile experience.

Consider mobile navigation woes

Having an unusable nav element on your mobile site is a deal breaker for users. Creating a dedicated mobile nav typically requires a round of IA to determine if every nav element is needed on mobile and if any other actions should be included, but at the very least you should try and include a basic dropdown or select-based nav.

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

Solve your problems before they exist

None of the suggestions here add significant time to your development process if you include them as part of your core thinking process behind development. Determining problem areas and solving potential issues ahead of time can not only create a more robust, stable site but help cull future issues that may arise.

Despite what clients might think, unless their aim is a solely desktop-sized application (not website), people will look at their site on a mobile device and when that happens, you'll want to be prepared.