The benefits of a mobile-first approach

The benefits of a mobile-first approach to your website

Website development has progressed at almost breakneck speed – the more technology advances, the more tools become available that can be used to create a meaningful and valuable user experience on a website. Hardware and software improvements, better security, as well as better browser technology have opened the doors for web developers to build websites with highly versatile functionality. And now that responsive web design and development is allowing businesses to create a seamless experience between desktop/laptop and mobile site visits, it seems that it’s only forward and upward for the technology.

Do you design for mobile first?

Almost every business needs a website in order to access their target audience online. That’s a lot of websites – most of which are planned and developed based on the assumption that they will be accessed from a desktop or laptop computer. Implementing a “mobile-first” philosophy when planning a new website may seem like an illogical way to think about a new website, but there are a number of benefits for going mobile-first, which could show you that this way of thinking about web development makes a whole lot of sense.

But first, the facts:

  • There are 1.2 billion (and counting) mobile users worldwide
  • There are more mobile devices sold and activated than babies born, per day
  • More people in Africa access the internet via a mobile device than via a PC or laptop
  • 25% of mobile users in the US only use their smartphones to access the internet – not once using a desktop or laptop to go online
  • Let’s face it: the world is gravitating towards mobile and there’s nothing designers or developers can do to stop it.

What is mobile first?

Imagine designing a website exclusively for a mobile device or smartphone. It’s not a mobi site, but a full functionality website akin to what you’d find if you accessed a responsive website on your smartphone – except that it’s designed and built primarily with the mobile user in mind; with desktop functionality as the proverbial afterthought (instead of the current trend, which is to do it vice versa).

There are practical reasons for why a mobile-first development philosophy is beneficial to your/your client’s website. These include:

  1. Progressive enhancement vs graceful degradation

    Progressive enhancement involves initiating a website build that will provide a great experience for users with a minimum browser spec, while still looking lean and mean in high-end browsers. As technology improves, better features and capability can be added to the website to improve the overall experience in the most commonly used browsers. Graceful degradation is an approach to web development where the developer starts with the highest specification and best features, and gradually strips away functionality to accommodate users who might not be able to explore its full features because of their hardware or browser shortcomings.

    A mobile-first development approach will impact your preference for a progressive enhancement or graceful degradation methodology. Will you cater to the full spec of smartphone browsers and reduce the spec for low-end desktop browsers, or start with the minimum requirements (such as those in IE7 and 8) and progressively enhance your features?

  2. Trim the fat

    By using that starting power developing a website with only the most core content, navigation, and functionality, developers will have trimmed the fat – removed all the unnecessary “fluff” from the website, and providing users with a streamlined, clean, quick experience that they will want to revisit, regardless of which device they visit from. Web designers and developers can work together to create a total experience that provides the best of the best in terms of form and function.

  3. Simplicity and speed

    There are two essential characteristics of the mobile browsing experience that can make users love or hate a website from the get-go. The first is simplicity: no one wants to pinch, pull, and scroll while navigating a website or exploring the content. While simplicity and responsiveness (we’ll get to this) go hand-in-hand, it’s one of the first hurdles you’ll tackle with a mobile-first philosophy. There is only so much (or so little) space on a smartphone screen, which is why designers and developers need to work together to ensure that what users interact with is something they’ll find worthwhile enough to come back to repeatedly.

    Most smartphone and mobile device users will be accessing the internet with a 3G connection or via a wireless hotspot with a lot of other users. Browsing the web on a smartphone is generally a slower experience than via a solid connection at home or in an office on a laptop or desktop PC. A simple, fast website will be a huge relief to mobile users and they’ll remember any website that provides them with that experience.

  4. Where does Responsive Web Design fit in?

    All this talk of designing for mobile vs. for desktop or laptop assumes that no matter which design philosophy we adapt, the website in question will work on a range of devices with a whole spectrum of screen sizes and resolutions. Responsive web design and a mobile-first design philosophy go hand-in-hand – determining your mobile experience first will ensure that your mobile users are wowed by a website built for their devices. The use of CSS selectors can make your responsive layout fluid instead of adaptive, and using media queries that are device-targeted can still render your mobile-first design fantastic on a different device. Responsive web design means providing your user with an awesome experience that is consistent no matter which device they use to access your website – despite your mobile-first approach.

    One of the key factors that will make responsive web design a success in 2014 is the use of scalable vector graphics (SVG). Read more about it here.

  5. WebDev inspiration

    We love seeing what technology can do for company websites. Here are some award-winning and award-worthy examples – remember to check them out on your desktop browser as well as on your mobile device or smartphone.

    Peak Performance Academy Bed & Breakfast Case 3D Breitling
     

Blogroll

  • 1 Apr 2014
    The key to getting icons, data charts, logos and user interface art optimized and rendered as smooth as possible is to use SVG. Here’s more about what makes SVG perfect for the web’s obsession with responsive design
  • 19 Mar 2014
    Imagine designing a website exclusively for a mobile device or smartphone. It’s not a mobi site, but a full functionality website akin to what you’d find if you accessed a responsive website on your smartphone
  • 29 Aug 2013
    Is it worth having a mobile app or should you just have a responsive website?
  • 31 Jul 2013
    Many people experience hacking on their basic Joomla websites, here’s why
 

Portfolio

Contact

South Africa
South Africa
+27 73 226 8293