Deprecated: Function create_function() is deprecated in /home2/blogwebhostingbu/public_html/wp-content/plugins/facebook-like-box-responsive/facebook-like-box.php on line 29
Responsive Design, What is Mobile First? - WebHostingBuzz
Notice: Undefined variable: defaults in /home2/blogwebhostingbu/public_html/wp-content/plugins/fatpanda-facebook-comments/plugin.php on line 366
 

Responsive Design, What is Mobile First?

Posted on 14 Nov 2013 by Justin

Mobile First is becoming as popular a buzzword as responsive design has been for the past couple of years. However, like responsive design, it’s not just a buzzword, but a very valid approach for designing and developing our websites.

More and more people are accessing the web with their smartphones and tablets. So much so that within a short space of time, it is predicted that mobile users will outnumber the more traditional desktop user.

Why Mobile Matters
It has already been noted that Google prefer responsive websites, so why not build your design around mobile first and kill two birds with one stone? There are so many devices on the market – and coming onto the market – at a rapid pace that keeping up with the latest devices is near impossible. A possible solution would be building a mobile first website that is responsive.

The advantage of building from mobile up (progressive enhancement), is that you can build upon a base that is optimised for mobile. Rather than manually remove elements as your site scales down, you build upon existing foundations – you use only what you need at any given time.

Examples of Mobile First Approaches
The mobile first approach is not a new one as there are quite a few designer/developers that have modelled how successful it can be. One such designer is Andy Clarke of stuffandnonsense.co.uk. He created one of the first mobile first frameworks called 320 and Up. It has since been superseded by his new framework called Rock Hammer, though the mobile first principles apply.

Other developers have since followed suit with Zurb Foundation 4 followed by Twitter Bootstrap’s later edition. Another pattern, not directly linked to mobile first as such, is the implementation of Sass. One of the many thoughts behind using Sass with the above frameworks is that the developer only uses what they need to use. Mobile users don’t get bombarded with redundant code – weighing down the mobile users connection limitations. As is often the case.

Alternative Methods
Of course, mobile first isn’t the solution – it’s a solution. Current practises include the more traditional method of designing for the desktop then scaling down to the appropriate mobile size when necessary. An issue with this however, is the site is designed for larger screen sizes and, predominantly, higher connection speeds. Depending on your location, mobile connection speeds are generally quite poor in comparison to broadband speeds.

The term often used for the ‘design for desktop’ approach is called graceful degradation. Before, this was the norm, but as is often the case, these buzzwords eventually become more than just a term and evolve into a particular workflow.

Using separate stylesheets is another method that a lot of developers implement. A mobile specific stylesheet can override existing styles to use exclusively for mobiles only. These stylesheets will load using device detection and depending on the provider, can give the option of using a mobile specific site or to use the desktop version. Google and some news sites are prime examples of this method.

In Summary…
Whether you decide to design around a mobile first, responsive design site, continue with the graceful degradation method or use a separate stylesheet is entirely dependent on your userbase. Regardless, mobile users cannot be overlooked as a separate market of sorts. Determining how to serve a mobile site as an exclusive mobile site or building from mobile up are two different methods with, at times, considerably different results.

WebHostingBuzz Logo

© WebHostingBuzz USA LLC 2002 - 2024
WebHostingBuzz is a Registered Trademark.
All Rights Reserved.
WebHostingBuzz USA LLC, 850 Southbridge Street, Auburn, MA 01501, USA

1 (800) 252-1887

Payment Logos
  • Webmoney Verified
  • Webmoney Accepted

Sign up for our Newsletter

Scroll to Top