New Look, New Domain, New Realization: Mobile First Means Simple & Elegant

It has been more than three years since I launched my personal blog.

In the time that has since passed, the world of blogs has been turned on its head. Many of the readers who typically would surf on over to the blog are discovering content through social platforms such as Twitter.

The new reality for blogs is that they need to utilize those social platforms and come to terms with one simple fact — conversation now happens in many places. Blog comments are no longer the only measure of engagement. More importantly, many of the readers are using their smartphones or iPads to access blogs and blog content.

When mulling over these changes, I began to wonder how a blog designed primarily for a mobile-first experience might fare. Of course, there would be a web-based version, too, but it would be not the primary focus. Mobile first meant — a great reading experience that allows readers to focus on things that matter — words, photos and videos — not the design flourishes and other elements such as social sharing icons.

Mobile first meant that the layouts would adapt themselves to the display. The iPad version would adapt to that device’s screen size while the iPhone/smartphone version would be even more barebones. The beauty of thinking about “mobile first” is that you get to use the latest in browsers, forget about backward compatibility and at the sometime are able to deploy newest technologies and hacks.

Of course, all these were simply thoughts in my head up until four weeks ago when I got access to the Om.Co domain. It was the next best thing versus Om.com. My big thanks to Dot.Co folks for helping me get the super-short web address! The new domain made me think perhaps it is time for me to re-envision the site and implement all the crazy ideas I had about a “mobile first” blog. 

A conversation with Adam Debreczeni, an exceptional young designer/hacker who in the past had helped me with GigaOM Tumblr, resulted in the idea of a new kind of a blog experience. It was a collaborative process, where we spent more time talking about what we wanted to achieve. The ground rules we set were:

 

  • Presentation of written and linked content should be the primary focus.
  • No interruptions in the article flow.
  • No sidebars. They are good for showing links but distract the users from content.

I wanted to have a blog that hid all the complexity and features in a “simple” interface. In addition, I wanted the design to take its cues from the native apps.

Font: The focus, was to be on the content. And content meant using a font that was sublime. We settled on  Crimson font-family (which falls back to Georgia, Times New Roman, and serif if the user’s browser don’t support CSS3 @font-family property.)

Images: Images have a large border with a subtle darker color difference to highlight the image without having it dominate the written content.

Social/Share: The social sharing buttons have become quite prevalent and we wanted to get away from that. So we used a more subtle social media sharing and commenting footer that noticeable, yet unobtrusive.

Sidebar: The sidebar takes its cues from the Twitter iPad app. A user could click on one of the icons, which would expand to display the content and push the blog post content to the side.

Top Navbar: The only traditional element we kept in the design is a simple traditional navigation bar that links to my essays, travels and the mentions I get in the media.

 

And while we are far from being done, I would like to show you the new site that Adam put together in a couple of weeks. We will be rolling out more updates in the coming days. Let us know what you think and join me in congratulating Adam in delivering on the most difficult of client asks – simple.

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: