Tech Tuesday: The Mobile First Approach
16 August 2016 |
About a 6 minute read
When the iPhone was released on June the 29th, 2007 – it was clear that it would change how we browse the web. In fact, it changed an entire industry – it shifted the focus on to touch devices with near desktop like capabilities when it comes to communicating and exchanging information on the web. Previously, we were content with sub-optimal web experiences on a BlackBerry or a Nokia and all of a sudden – you could run a full website in the palm of your hand.
As exciting as that was, it also presented a unique challenge and a rather shocking realisation – we were simply not ready for such an acute transformation. The experience on a small screen when browsing the web became a chore at best – pinching and zooming to get to where you want to go and not to mention advertising content which in often cases made many websites unusable.
A plethora of approaches and strategies were developed by a lot of smart people to try and deal with the ever evolving face of the web, namely:
- Responsive design
- Separate mobile websites/domains
- Mobile first approach
This piece will focus on the mobile first approach and how implementing one as part of the non-functional requirements of a modern, scalable web application will help make it better for the end users and thus resulting in better revenue, better performance and an overall improved experience.
The general principles of the mobile first approach, as quoted by Luke Wrobleski (the author of the industry acclaimed: ‘Mobile First’ book) is to design and develop mobile first and focus on adapting desktop and larger screens later:
“Designing and developing for mobile first not only prepares you for the explosive growth and opportunities in this space, it forces you to focus and enables you to innovate” Luke Wrobleski
The benefits from a content perspective and innovation:
In practice this means that focusing on a smaller screen and overcoming its limitations will, inevitably, require the designer/developer to think very carefully about the most effective placement of content due to the sheer size of the screen. This will, as a result, lead to less secondary content and clutter and to a clearer and better thought out user interface.
To do this – the project has to be approached with the right mind-set from management first. Usually managers have a tendency to think of the lucrative opportunities which present themselves to them on a bigger screen.
However, the mobile first approach requires one to think the opposite way. Think of content first and re-arrange advertising content later to fit into it as opposed to get in its way. The end result is a unified, responsive experience with targeted advertising. So how do we go about implementing the right mobile first strategy?
Four simple steps to implementing the mobile first approach the right way:
- Content is king and so is the user – Think of the user first.
The effectiveness of the mobile first approach relies very much on the considerations managers/designers/developers make when testing user involvement through the design and build process.
To achieve this one would first need to have developed a clear understanding of their users – age group, gender, socio-economic background, etc.
Next we would need to think about the most likely environment in which the users would access the website/service. Things to consider would be:
- Are they on the move? If so – where are they most likely to be?
- Why would they use your service or website?
- What devices are most popular with your key target user?
2. Prioritise – What features and functionality are key:
Once the key target audience has been established as well as their needs and circumstances with which they interact with your website – its time to then prioritize the features they would be most likely to use. Group these functionalities to determine similarities and differences
3. UX and Design – Circumstance and identity:
Once the key features have been identified from a technical point of view – we would then have to move on to the UX and design. The above considerations would help greatly in identifying the context behind each design and UX decision. For example – If the majority of your users are on the move then it is likely that they are doing multiple things at once – listening to music and messaging for example. Identifying these early on will give you context from which you can start designing and building the UX.
4.Simplify – Strip back that which is not necessary:
Once the UX and design phase has finished – mangers/designers/developers need to iterate back on the work that had been done and look for ways to simplify it even further. This can be achieved by examining the design and UX critically and answering the fundamental question – “What can we do without?”
Getting it wrong is easy – the most common pitfall:
It’s easy to start with a great ambition to adapt the mobile first strategy but very quickly a team can find it self in a paralysed position which forces them to separate desktop and mobile into two separate experiences. Unfortunately, once this has happened it is very difficult, if not impossible to fix.
This is because the mobile first approach requires a product team to have largely the same mind-set across design, development and management. Usually, designers and UX architects get very excited about the possibilities of a large desktop screen to design on – a large blank canvas. Management also tends to think of the commercial opportunities offered to customers on a desktop device – particularly if the website is an information based service or product. The result is a huge amount of technical debt and a desktop website which almost seems separate to its mobile user base.
If the mobile first strategy is to be considered and applied successfully, one would need to make sure that the entire project team is on-board and has fully bought in to the idea of it. Otherwise it can do more harm than good.
In the UK – 80% of internet users have smartphones and access the web from their touch devices at one time or another. 4G connection is now the standard amongst mobile data carriers and smartphones and touch devices are becoming cheaper and cheaper to manufacture and buy. All of this means that a well defined and thought out mobile first strategy will help teams to tackle the explosive growth that mobile is presenting us.
Most importantly however, thinking mobile first and solving the problems on a small screen will help us think more effectively on a bigger screen. Responding and innovating as opposed to adapting and conforming. Taking away as opposed to adding more.
“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away” – Antonine de Saint-Exupery
Resources and some further reading:
Senior Full Stack Developer (London)
Champion software quality and technical vision for AND and our clients, work on large-scale projects and help junior and mid developers grow in their roles.I'm Interested
Full Stack Developer (London)
Put your development expertise to work, building remarkable, digital products in Agile environments using a variety of languages and frameworks.I'm Interested
Tech Lead (Reading)
Bring your expert tech knowledge to the table to influence the direction of projects, whilst coaching and your team through engineering best practices.I'm Interested