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".
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. It is like going to a disco that has mandatory night vision goggles to get in because it didn't had lighting setup when buil(weird huh?). You will end up in the floor, hating both: the goggles and the disco. You but you will still want to dance, so bye bye "Goggle Disco" and you'll go for a new one.
And that's it, the owner has to rebuild his disco, and setup a lighting system, or it will just be an abandoned warehouse in a couple of weeks. And it costs.
So when talking about websites, it costs too. If you want to upgrade your "non adaptive" website, you will need to pay for it. If you have a good budget, you will have a lot of options, but how about if you don't?
Instead of leaving some business "die" because their websites were made more than 4 years ago 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!
Using SASS & Bourbon Neat we can just aim for small screen sizes and leave "untouched" the desktop size 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.
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.
Then, we will just need to style all elements, reusing their current CSS and selectors, under the following specifications:
// MOBILE / SMALL SCREEN STYLE FIXES @include media-range($zero, $mobile) { // Add your styles here } // TABLET / 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.