Bernie Cook's Blog

Azure, C#, .NET, Architecture & Related Tech News

Mobile First – Front-End Development

Leave a comment

Over the past few weeks I’ve been piecing together a personal ASP.NET MVC 4 application which draws on an array of the more popular frameworks, libraries, design patterns and best practices available. After dedicating most of my time to the back-end (service, repository, data access layer, etc.) I thought I’d take a break and start beautifying the interface. I wanted to make the front-end as rich and lean as possible so began drawing on my HTML5 skills as well as turning to some of the more popular front-end websites like A List Apart and Smashing Magazine to see what the latest and greatest front-end coders were blogging about. It didn’t take long before I came across 3 terms that were going to consume my next few weeks:

  1. Mobile first development
  2. Responsive web design
  3. Adaptive web design


I’ve been developing since Netscape Navigator was considered a decent browser, and admittedly I don’t get as involved with the front-end as often as I used to, but I was amazed when I started reading up on these topics and how intrinsic they are to any modern day web development project. So I picked up a few books and started reading, the first of which was titled; “Mobile First” by Luke Wrobleswki, the remainder of which are listed at the end of this blog post.

Following is a summary of the “Mobile First”. If you’ve read any of Luke’s books you’ll know that he really knows his front-end and does a terrific job of illustrating his opinions and points of view.

Mobile First

The Mobile First book drives home the point that website and application design should adopt the mobile first design philosophy, meaning that interfaces should be designed for mobiles first. Interface development for tablets, laptops and desktop sized screens should then carry on as an extension of the mobile first interface (see the screenshot below for an example, or just see the website: Think Vitamin). In doing so developers address the indisputable growth of mobile devices and the how prominent they have become as devices which consume information online. Further to this the methodologies adopted when designing for a smaller device encourage the designers and developers to do away with anything that isn’t essential – focusing on abbreviating content where possible and the navigational interface elements.

The first part of the book presents a strong case for the importance of mobile first development, referencing both statistics and the reviewing the state of modern day web development in a very practical manner to support it’s argument. The second part discusses how a developer would design for the mobile platform by examining how information organisation, layouts, input, forms etc. are best applied to a mobile device.

It’s worth noting that the author doesn’t intend this to be a coding manual on mobile first development – so you won’t find any source code within.

I’d recommend Mobile First for anyone wanting to gem up on the current state of mobile development and how the explosion of this particular platform’s in the last few years now means it’s far from sensible to be thinking about front-end development any other way.

A working example of mobile first development is Think Vitamin – the following screen shots given you an idea of how the mobile first design (far left) is presented, and how the content adjusts to increasingly larger screen sizes. So you start by designing on the left and working your way across to the right.

If you want some more examples check out Media Queries.

For me this book has changed the way I will approach any new interface that has the potential to target multiple platforms. And after reading this book, in particular the first 2 chapters, it’s hard to refute the case that Luke presents. The last few years have shown how much of an impact mobile technology has had on our lives and this book teaches the reader how to work with this trend, rather than against it, to better deliver content online.

If you have a spare 6 hours (it’s only 120 very short pages) I’d strongly recommend picking up this book.

Mobile First – Chapter Overview

  • Part 1 – Why Mobile First
    • Growth
    • Constraints
    • Capabilities
  • Part 2 – How to go Mobile
    • Organization
    • Actions
    • Inputs
    • Layouts

Related Front-End Books

In addition to “Mobile First” I’ve read the following books which all fall under the same, or similar, banner. Each book is linked to it’s official home page.

Advertisements

Author: Bernie

I currently live and work in the UK, just outside of London. I've been working in IT for 15+ years and in that time have solved many technical problems via blogs, forums, tutorials etc. and feel like I should be giving something back. This blog post is my way of contributing and I hope it proves just as useful to others as their contributions have to me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s