Mobile First?

When three of us created Munro Bagger back in our days at CodeClan, we didn’t give mobile clients or responsive design much thought. We knew there was a high probability that our users would use mobile devices because of the subject matter of the website but we also know that we had enough on our plate worrying about React, Rails weather forecasts and user authentication.

By the end of the project the site was responsive and usable on a phone but it doesn’t give the same user experience as an app. That got me wondering if it was possible to create  a website that had the look and feel of an app so I went looking for React tools that would allow me to dress up the website to look more like an app. I found a few and I tried a few but it is a confusing landscape and documentation often seems to assume a high level of expertise which impedes progress.

In the end I decided that Material Design was the way to go; after all, many Android apps had already been implemented using that style (or “design language”) so a website implemented using Material Design was half way there. I needed a React implementation so I tried Material UI which was very well reviewed but I hit problems and I could not fix them so I went back to the drawing board and found MDL (Material Design Lite). For a while I contemplated wrapping the CSS and JavaScript provided by MDL in my own React components but it looked a bit tricky. Luckily, when digging around a little more, I found that someone had already done just that. I fell in love with React-MDL.

After I had installed React-MDL, I was able to make very rapid progress and within a few days the website looked a lot like an app. When things didn’t look quite right I was able to use the element inspector to find which CSS classes had to change. I found it very transparent and easy to use. I recommend it.

I stopped converting the website to MDL at the point it was going to need some major surgery and decided to start work on a Cordova app but that’s another story. The lesson from this post is that, with hindsight (and fewer time constraints), it would have been better for us to consider the needs of the mobile user first. React-MDL would have made many things easier.