Here at Performance Web, we have just completed our first site build using SASS. SASS is an amazing extension language for CSS that provides you with all sorts of useful functions, including variables, nesting and mixins (which are a bit like functions). In addition to SASS, we used a WordPress starter template: Bones. Bones is a well-written and extremely convenient starter template for WordPress. Some of its biggest features: a mobile-first approach to development and utilisation of SASS.
We loved the mobile-first approach. Here are three reasons why you should give it a chance:
1. Get your priorities straight
It’s easy to spot a desktop-first site. Often, developers are asked to “make it responsive”, and they do. However, without careful planning it is very easy to change a few widths, hide a few divs, and irritate your customers. Although a nicely rendered site on a mobile is welcome by all, it’s very annoying when any useful information seems to have been hidden.
A good (bad) example of this is the Barclays site. The desktop site is what you expect – following familiar conventions and a reasonable amount of content. The mobile site doesn’t really give you much at all. In fact, it’s missing pretty much all useful information except contact details. You end up clicking around, realising there’s nothing there, and eventually opting for their very non-responsive desktop site. This ruins a Sunday evening browsing mortgage deals in the bath.
2. Mobile content cannot be an afterthought
If my dog had thumbs, he’d probably have a smartphone. Some stats compiled by Super Monitoring and displayed in this pretty info-graphic emphasise how important mobile marketing and commerce has become:
- 50% of mobile web users primarily access the web via their mobile
- 80% of consumers plan to buy something on their mobile in the next 12 months
- 57% of potential customers won’t recommend you to their mates if your mobile site is non-existent/rubbish
They even go on to claim that “not having a mobile optimised website is like closing your store one day each week“. Not good.
3. Your website will be cooler
A problem familiar to all web developers is old browsers – some being more problematic than others. It is harder to predict the capabilities of the end user’s browser when developing for desktop, which can limit innovation. Mobile, on the other hand, is on a stronger foot. Mobile browsers tend to be modern, and the biggest mobile platforms offer additional functionality: location services, advanced touch controls and accelerometer input to name a few.
These functions can be leveraged in mobile development and then gracefully degraded as you scale up to desktop. A common example is the branch finder – you’ll often see mobile sites that ask to use the phone’s location, opposed to desktop sites that ask for a post code.
The next step
If you’re a WordPress developer, I highly recommend the Bones starter template. A quick search on Google will also bring up some fantastic more in-depth blogs on the subject.
If you’d like some advice on an upcoming project, feel free to leave a comment or get in touch!