Responsive design at msnbc.com

screenshot of msnbc.com technology blogs
Click on image to see the live site

This is a test launch of the new format that we build on our new platform. It is also our first stab at making the site feels like a native application. By using responsive design techniques, we make the site work on different screen sizes and platforms. So far it has been a successful attempt.

To make this manageable, we decided to separate the desktop site from the mobile site, so that we didn’t have to worry about older browsers and business requirements that didn’t apply to our mobile business. It was a good choice because we managed to release this project in a very short amount of time. That gave us additional time to refine and add features post-launch.

There were a few challenging problems that we tackled. We decided to use a front-end solution to serve images of different resolutions to different screen sizes. There is no user agent detection involved. Another interesting problem was the different ad systems between phone and tablet, which we also solved using a smart front-end solution.

msnbc.com new blog format

What make this feels like a native application is the fact that posts open in place. You can also search, filter or get more content in real time. Everything loads much faster than before due to some heavy optimization to the code base and structure.

A while ago, I posted about our last mobile redesign. Since then we have learned a few new tricks that help grow our mobile business by including a whole new category of users, the tablet users.

Follow any comments here with the RSS feed for this post. Both comments and trackbacks are currently closed.