Going Mobile

I spent sometime in the past week working on the creating wireframes for one of my pet-projects using wireframe.cc. This tool gives the option of designing for desktop, mobile and tablets. My focus was on the mobile design.

As a software developer who has spent close to three years building user interfaces for multiple web-based products, one thing that I quickly realized by looking at our data is the importance of supporting mobile devices. I myself tend to spend most of my spare time on my mobile device consuming most of my information there.

When I started off at my company, none of our products had a mobile presence. Rendering the desktop website on mobile devices did have a significant impact on our conversion rates. Gradually we built and implemented the mobile-optimized version of our websites. We did this using a Django middleware that identifies the device using the user-agent received in the request and renders a corresponding page. It improved conversion rates to a great extent. We chose not to go with responsive design because the management didn’t want to radically modify a well-established and profitable website, which is quite understandable. Responsive design, however, promises a lot. It adapts the website’s layout to the user’s browser using CSS @media queries, fluid grid layouts and flexible images.

During the early days of responsive web design the common practice was to design a website for the desktop and then adapt it to smaller screens. This approach (calledgraceful degradation) enabled web designers to build for the latest and greatest browsers and carefully remove unwanted functionality to make it work for the ‘less common’ mobile devices.

As mobile became more ubiquitous, this approach has begun changing to something called as progressive enhancement or mobile-first design. Designs are now first made for the mobile device with a minimalist look and bare-minimum functionality. More features and functionality are added as one moves to devices with larger screens. This approach is useful for a number of websites like blogs, magazines and news sites since quite a few users prefer reading on-the-move and since long form reading is not too comfortable on the PC either. Some notable magazine-like-websites are Medium and Svbtle.

There are exceptions quite a few exceptions to the mobile-first approach as well. While the approach is quite suitable for sites like Svbtle or Medium where the primary objective is content-consumption, it doesn’t still satisfy the needs of content-creation/media-creation based websites. Take for example, a site like HackerRank where the primary motive of the user is to write code and submit it. It is quite difficult and almost impossible to type code on mobile devices.

When I deployed this blog a couple of weeks back, I chose the theme that first struck me as good. The theme was a svbtle-clone designed by wting. But soon I realized that the theme isn’t optimized for mobile. Now I am also wondering whether on modify this theme to be responsive or to challenge myself and design a new theme for pelican. If it does turn out to be good, I could probably send a pull request to getpelican/pelican-themes and get it added there. 🙂

PS: Svbtle is an invite-only network where hundreds of bloggers and their blogposts are featured. These authors write on a variety of topics on their blogs which are then aggregated and displayed on the homepage. The uniqueness of the site is its simple, minimalist look and clutter-free interface apart from the high quality of posts written by its members. Another similar network is Medium which is more like a minimalist magazine than an aggregator. Authors write content exclusively for Medium.