Mobile First is becoming as popular a buzzword as responsive design has been for the past couple of years. However, like responsive design, it\u2019s not just a buzzword, but a very valid approach for designing and developing our websites.<\/p>\n

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.<\/p>\n

Why Mobile Matters<\/strong>
\nIt has already been noted that Google prefer responsive websites<\/a>, 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.<\/p>\n

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.<\/p>\n

Examples of Mobile First Approaches<\/strong>
\nThe 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<\/a>. 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<\/a>, though the mobile first principles apply.<\/p>\n

Other developers have since followed suit with Zurb Foundation 4<\/a> followed by Twitter Bootstrap\u2019s<\/a> 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\u2019t get bombarded with redundant code – weighing down the mobile users connection limitations. As is often the case.<\/p>\n

Alternative Methods<\/strong>
\nOf course, mobile first isn\u2019t the solution – it\u2019s 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.<\/p>\n

The term often used for the \u2018design for desktop\u2019 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.<\/p>\n

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.<\/p>\n

In Summary…<\/strong>
\nWhether 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":958,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[343],"tags":[359,360,357,358],"yoast_head":"\n