It's 2016, we are already in the "Mobile Era" and we all love how our modern sites fit and adapt to any screen. It's amazing how a website can stretch to the 52 inches of a Samsung TV and also look good on your mobile phone. But you know what? There are 20 years of "non-mobile" websites out there screaming to be upgraded. And the first word that comes to mind is "redesign".

Redesign means Higher Cost

Mobile OS manufacturers tend to improve their browsers to allow resizing, double tap zooming and dragging around, so we can use these non-mobile websites on mobile. But this is just a usability workaround, and only fixes half of the "browser + site = UX" equation. If the businesses behind old sites want to upgrade their "non adaptive" websites, they will need to pay for it. If they have a good budget, they will have a lot of options, but what if they don't?

Instead of leaving websites to "die" because they were made more than 4 years ago, why don't we just do something beneficial for both of us: business owners and web developers? Come on!!! Many "family owned businesses" during decades cannot just disappear because we, 2015 Web Developers, prefer to create things from scratch.

Technology is created for pushing, but we can also use it for pulling

I won't say here "Work for free" or "charge less", but I will surely encourage you to "work less" for the same hourly/rate, and work only for that missing part of the website of your customer: The mobile/tablet layer.

Sass is just the future of CSS. It is the new way of saving time, doing more with less (funny huh!) and for creating mixins and functions to save weeks of time. Many CSS libraries/frameworks out there are moving into SASS such as Bootstrap, Foundation and Bourbon Neat, just to mention the 3 most used.

So my intention here is to show how, using SASS & Bourbon Neat, we can target small screen sizes and leave "untouched" the desktop display those sites were designed for.

The following code sets a SaSS mixin that can be used as a function to style only specific Viewport ranges.

// ADD THIS AT THE BEGINNING OF YOUR _config.scss FILE
// ViewPort Breaks
$zero: 0px;
$mobile: 320px;
$tablet: 788px;
$desktop: 990px;
// Helper Media Range function for specific frames
@mixin media-range($range1, $range2) {
  @media all and (min-width: $range1) and (max-width: $range2 - 1) {
    @content;
  }
}

With those 9 lines of code, we can open the door for a lot of websites that need to look nicer and adjust their UI components for smaller screens using mostly fluid widths and some other tweaks.

Then, we will just need to style all "layout responsible" elements, re-using their current CSS and selectors, with the following code:

/* MOBILE and SMALL SCREEN STYLE FIXES */
@include media-range($zero, $mobile) {
  /* Add your styles here */
}

/* TABLET and MID-SIZE SCREEN STYLE FIXES */
@include media-range($mobile, $tablet) {
  /* Add your styles here */
}

I know there are many pieces left that you might have to address: navigation, tables, Flash objects ... each site is a different "patient". Sometimes there will be parts of the site that you need to hide or re-design completely.

But, instead of weeks of redesign process, coffee, meetings... and time, let's help small businesses fix the low-hanging fruit of their non-mobile websites.

Tags
Drupal Planet