Case Study on Building for Mobile First

Designing for the web used to mean perfecting an HTML and CSS layout in all the popular browsers. Although this is still the case today, modern web browsers have shifted onto many alternative media platforms. No longer is your average web user sorting articles solely from their monitor screen.

I’d like to offer a few ideas on why you should consider designing websites for mobile first. This case study looks at a few simple ideas that are often glossed over – yet have a huge impact on the modern Internet. It’s important that your website can scale with all different forms of incoming traffic.

Working with Limitations

Our first natural instinct when designing is to push away limiting factors. But unfortunately there isn’t a way to combat the mobile interface – it’s small, portable, and touchable to boot. It’s almost like we’re working with a whole new set of rules!

And this is exactly the reason that building your design targeted to mobile first will save you headaches later on. When you’ve already written hundreds of CSS styles and you have the layout working perfectly in desktop browsers it’s easy to call it a day. You likely won’t want to spend even more hours coding to optimize the layout for mobile users.

If you can start off working with the limitations on mobile devices then you’re simplifying the whole process. This forces you to consider which page elements are really important. What do your visitors need to focus on? Scaling up and adding more page UI for bigger screens is a gratifying process as well.

Numerous Devices

The mobile trend was set into motion through the iPod Touch and original iPhone launches. Since these releases Google Android has also gained in popularity, along with similar tablet PCs.

You can hardly count the total number of mobile devices on the market right now. But thankfully their operating systems mostly all support a similar number of standard webkit browser engines. This means if you can build your site to run nicely in Mobile Safari it should behave properly in Chrome as well.

You may also want to consider other 3rd party web browsers if you need to support all mobile users. Mobile Firefox for Android and Opera Mini for iOS are two of the most popular names. Their rendering systems behave similar to their desktop counterparts, so there shouldn’t be too much of a struggle.

Supplying Alternatives

If you have the time to focus on mobile then it will show in your web development work. But no matter how pretty your mobile layout comes out you should always offer a reference back to the original desktop design. Some mobile browsers will let users zoom and pan around the page while also supporting frontend scripts such as jQuery.

It’s regarded as good practices to not trap your users into a minimalist layout. If your main website supports important features then some users don’t want to miss out. This is also the case for iPad and tablet users.

Deploy and Test!

You don’t need to be confident in all the projects you end up building. Web design is all about trying new things and sometimes screwing up. But we learn from our mistakes and this is how we can grow as artists and individuals.

Keep trying out new ideas and layouts to fill in mobile screens. You have the option of going with responsive layouts that will adapt to any screen size. But alternatively CSS media queries and JavaScript plugins can cover all the functionality you’d need to detect a mobile visitor.

The smartphone industry is constantly changing shape much like our World Wide Web. There is really no way for tracking the next big trends in mobile websites and web apps. But there is a great argument that mobile is growing very rapidly and may soon be the dominant form of Internet access.

Keep these thoughts in mind as you sit down to build or sketch out your next project.

Related Readings

If you’ve read the ideas above and want to dig deeper into mobile design then you’ll need a few references. These are some popular tutorials you can follow to pick up on design ideologies when building for mobile first.

Conclusion

I hope you agree that mobile web design is the way of the future. There is plenty of support for newer CSS3 properties and even most JavaScript effects. When you consider how many tech lovers are switching to smartphones it’s no surprise that things are moving so quickly. Let us know your thoughts on the mobile design industry in our post discussion area.