We believe a mobile first approach works better in responsive design because it produces scalable and mobile-friendly code. This also means we can build responsive sites faster and more efficiently without comprising quality.
Responsive development approaches
The two main approaches when developing a mobile site are desktop first and mobile first.
Desktop first ensures the site is fully functional for desktop users before considering amendments for other devices. Some functionality may be dropped for mobiles and tablets due to the limitations of mobile devices or budgetary constraints. This may be the quickest solution, but isn’t always good for your users. They might struggle to access certain content on a mobile device or may need to switch to the desktop view to use interactive features. If the responsive work hasn’t been correctly implemented, it can be difficult to use the site properly.
Mobile first takes the opposite approach and begins with mobile development. Only when the website is working and fully functional on mobile do you move on to tablet, and then from tablet to desktop. Functionality is added where required, but only to enhance the user experience – not providing them with more content that would be unavailable on a mobile device. This method ensures that the site is fully responsive and that it works consistently across devices.
Content is key
We always advise taking the mobile first approach.
One of the main reasons is content. When taking a mobile first approach you are forced to think about how your content looks on a mobile device and ensure that mobile users have access to the same content as a desktop user.
Some developers argue that because you’re restricted by mobile devices, you deliver less interactive content on desktops as a result. However, there are ways to target devices and build a site which is impressive on any screen – and that’s one part we really enjoy.
In our efforts to make better responsive websites, we’re using two new techniques – grid systems and mobile-first CSS coding.
We code our CSS for mobile screen sizes first, ensuring styling is correct on a standard size smartphone before we even consider tablets and desktop users. This makes the subsequent task of tablet and desktop styling much easier, often requiring just some width adjustments. And, if you use a grid system, you may not need to make any adjustments at all!
We have tried taking a desktop first approach but this often makes the coding of mobile and tablet sites much slower and more challenging. With the sharp increase in the number of mobile users, future-proofing your website in this way makes a lot of sense.
My next post will look at grid systems – ones we’ve tried, tested and which is our current favourite.