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.

Responses

  1. Steve Rubel says:

    December 10th, 2011 at 5:55 pm Reply

    Love this. As usual, inspiring.

  2. Rahul says:

    December 6th, 2011 at 11:51 pm Reply

    Om,

    Loving the redesign. It’s clean, minimal and truly brings the content to the fore. Looking forward to reading more from you at the blog :)

  3. Jason says:

    December 6th, 2011 at 8:58 pm Reply

    I like the new design, though loading your home page on my 1st gen iPad running the latest version of iOS had some rendering issues when I scrolled up and down on the page.

    While aesthetically pleasing, I’d argue that the sidebar design is an example of “Mystery Meat Navigation” (http://leonpaternoster.com/2010/08/when-is-mystery-meat-navigation-acceptable/ http://en.wikipedia.org/wiki/Mystery_meat_navigation).

    This style of pictogram navigation without explanatory text has become fashionable again (including, I would add in some of my favorite apps, such as Reeder), but there are some real usability problems with using icons without supporting text.

    Should a user have to click on each icon to figure out what each button means? For example, my first guess would be that the envelope icon represents a link to email you, but that’s not the case.

    1. Om Malik says:

      December 6th, 2011 at 11:41 pm Reply

      Jason

      The point of the mystery side bar is that you don’t need all that stuff. You are here to read what’s on the screen or watch what’s there instead of trying to fiddle around and waste your time. I am not interested in an extraneous stuff.

  4. buzzintech says:

    December 6th, 2011 at 2:22 pm Reply

    The new site looks great. Getting mobile friendly is very important. I got to this post via my twitter account and I read this from my iPhone when I was on a treadmill. It pleasant to read. I could even manage to type a short comment. Also, I got into some wordpress error while submitting it :( Just wanted to get this to you (now via my laptop)

    1. Om Malik says:

      December 6th, 2011 at 11:43 pm Reply

      The wordpress error. Somethings we can’t control. :-) THanks for liking the piece. I will try and make commenting better. Stay tuned.

  5. Buzzintech says:

    December 6th, 2011 at 1:50 pm Reply

    Well said. The mobile friendly blog was great read on a treadmill;)

  6. Andy says:

    December 6th, 2011 at 1:04 pm Reply

    Simple. Straightforward. Puts the focus on the content. Even the social icons are minimalist. What’s not to like? Actually, it’s almost anti-hipster, which I love…but so anti-hipster, that it’s hipster? No, I don’t think it crosses that chasm. Sorry for the internal dialogue spilling out…overall, very nice!

    1. Om Malik says:

      December 6th, 2011 at 11:43 pm Reply

      “anti-hipster” made my day.

  7. Aanarav Sareen says:

    December 6th, 2011 at 12:22 pm Reply

    This is super clean! Like the large font and fewer distractions.

    1. Om Malik says:

      December 6th, 2011 at 11:44 pm Reply

      Thanks

What do you think?

Please log in using one of these methods to post your comment:

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

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

Follow

Get every new post delivered to your Inbox.

Join 14,733 other followers

%d bloggers like this: