With mobiles predicted to outpace desktop computers as the preferred device to access the internet sometime this year, it’s time to shift our thinking. For many businesses, a mobile site is an afterthought, or perhaps even a “maybe someday” item.
With that in mind a new trend in web development is emerging, to create the mobile web as a priority, designing from the smallest to the largest, with a focus on everything from design to content, to shaping a new best practice for code. This trend is called “Mobile first”.
This perspective requires a laser-like focus on the user’s needs, which for web-nerds like Butterfly, is music to our ears. Designing (and developing) with mobile first means paring down to the minimum and delivering what users need - upfront and immediately. It also means coding in a way that is fast and efficient – compensating for 3/4G speeds, and varying phone capacities.
Working your website to suit a mobile audience as the primary access point can even affect your content- consider mobile user’s reading patterns- most people read long form articles on tablets late at night, when in bed. During the day, when using phones, they seem to like checking short bursts of information. What would you change about your site’s content, if you knew when and how they would be interacting with it? Putting mobile first in your mind when constructing content strategy completely changes your perspective on how, what, where and when you serve up your content.
When designing recent responsive sites such as the Butterfly website, we’ve discovered some problems inherent in our outmoded approach of designing desktop and “shrinking down” to fit tablet and mobile.
Firstly, the mobile version has a tendency to come out looking like a less impressive version of the desktop- what do I mean by that? The visual elements such as images, tend to get lost in favour of buttons (which are easier to touch), and you might end up with a simple stack of buttons for a homepage. Not very exciting. If we were to design for mobile first, and scale up to desktop, the effort would be on making that first element as interesting as possible (because we don’t want to lose our primary audience with a boring looking site!)
Secondly, there is a tendency to try and fit all the desktop elements into the mobile version, creating a squishy or scroll-happy design. Now I am a big believer in making all desktop features/functions available on mobile- there isn’t anything that you can do on desktop that can’t be achieved on mobile with clever design and thinking, but that doesn’t mean we should clutter up the user’s view and experience.
What we’ve learned is that by putting mobile first, we can concentrate on what matters for the user based on context- what device, how people use those devices, and come up with user stories that guide the design in a more relevant and accessible way. The joy of living in this age is that there is a ton of data to back this up, either via your own Google analytics or other metrics, or global or nationally collected data.
While there is a lot more to the theory, now you know the basics! I recommend this book for anyone who is interested: Luke Wroblewski – Mobile First.