It's 2015, we are already in the "Mobile Era" and we all love how our modern sites fit and adapt to any screen. Of course, modern sites: pretty nice and flexible, stretching even to the 52 inches of a Samsung TV, High Resolution images... Its is just amazing. But you know what? We cannot forget there are almost 20 years of "non-mobile" websites out there, screaming to be upgraded. And the first word that comes out to our mind is pretty simple: "redesign".
There is much to be done, and Mobile OS manufacturers trend to improve their browsers to allow resizing, double tap zooming and dragging around, but it is just an actual usability workaround. And still, it is only half of the equation as it is "browser + site = UX". So, if most of these businesses behind old sites want to upgrade their "non adaptive" websites, they will need just to pay for it. If they have a good budget, they will have a lot of options, but how about if they don't?
Instead of leaving some businesses "die" because their websites were made more than 4 years ago, things move pretty fast and they don't have a budget to completely rebuild them, 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 than finding alternatives based on small budgets. And yes, it is 2015, and what you cannot reach from your phone, soon will be a dead business, unleast you don't have competition(who doesn't?).
They need to evolve, but evolution comes with a cost, and it is up to us how to help them.
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 just aim for small screen sizes and leave "untouched" the desktop layer those sites were designed for.
The following code sets a SaSS mixin that can be used as a function to style only for specific Viewports 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 only those 9 lines of code, we can just open the door for a lot of websites that just need to seem nicer or easily adjust their UI components to smaller screens using mostly fluid widths and some other tweaks.
Then, we will just need to style all "layout responsible" elements, reusing their current CSS and selectors, under the following specifications:
/* 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($zero, $mobile) {
/* Add your styles here */
}I know it is up to many factors: navigation, if it is a table based layout, if it has many Flash objects running... Each site is a different "patient" and is doable or not at many different grades. But it is a fact that still being a 10 on a scale from 1 to 10, something can be done on many of them. Some others will only survive if redesigned and rebuilt from scratch. :(
But still, instead of weeks of redesign process, coffee, meetings... and time, let's just take the first step to analyze and help those small websites that are technically able to take this process, to go on and us too.