When Mobile-First provides a bad desktop experience

There are 5 comments.

The new website for DSB

This is the new website for DSB — the danish state railways — And it’s using all of the latest bells and whistles. It’s flat, it’s completely responsive, built mobile-first with em-based sizing and breakpoints. The JavaScript is even structured with Backbone and Require.js.

This is how they tell us to build websites. technically, it’s very well put together. The front page weighs in at less than 1 megabyte and only 26 HTTP requests.

It has one problem though: In it’s eagerness to provide a nice and fast user experience for people on tablets and phones it forgot about the desktop user. You know, the guy with the 13-27″ display, sitting at work, trying to figure out when the next train leaves for Copenhagen.

An up-scaled mobile web app

On desktop, this is essentially an up-scaled mobile web app. On a 27″ cinema display you still get a lousy hamburger menu, and the UI components don’t scale well once you go beyond about 900px wide. It becomes big and clunky and you lose any sense of overview.

A quick comparison …

Here’s the trip planner on dsb.dk in a 1700×1200 browser window.

The trip planner on the new DSB website

Takes up 1700x968px.

It takes up 1700x968px. Almost the entire screen. The trip planner on GoEuro, that has the exact same features, takes up 823x171px. DSB’s scaling mess takes up 11.69 times as much space … 1169% ..!

GoEuro.com trip planner

This trip planner (The blue box) takes up 817x168px. Less than 10% the size of that on dsb.dk

If you compare the mobile versions, it gets a little better, but DSB still has way too much scrolling going on, because everything is too big and takes up too much space.

DSB and GoEuro websites side-by-side at mobile screen size

Don’t get me wrong — I’m not bashing responsive design

Everything I build these days is responsive and, if you read my about page, you know that I prefer to go Mobile First.

I know responsive is the way to go, because when it’s done right, it’s more effective in every aspect (Performance, conversion, retention et cetera). I’m not advising against it, I’m very much advising for it. Go out and build responsive websites, the world will be a better place.

However, when it’s done wrong it can be pretty bad. Often much worse than a non-responsive website. One example I like to pull out, is that Apple, the creators of the damn iPhone, doesn’t even have a responsive website. And it’s not like they don’t have the money to get one, or the developers/designers to build it.

 

  • http://www.couponrani.com yebhi coupons

    Amazing, would be to really good small bit of document which has been see through very long original. Implement equally explore our area.

  • http://bigwiki.bigsabotage.org/index.php?title=Saving_Cash_Is_So_Easy_With_Wonderful_Coupon_Recommendations coupondunia coupons

    This really is exceedingly appropriate spot as heightened contained in the internet site. Love speaking about encompassing.

  • http://glocalhalal.com/wiki/index.php?title=Conserving_Money_Is_Very_Easy_With_Wonderful_Promotion_Recommendations snapdea coupons

    Wonderful, this may be a exceptional little bit of formulate which I have face found in endless reasonable length of time. Accomplish on top of that take a look at the actual property.

  • http://www.gardrealms.com/wiki/index.php/Spending_Less_Is_Really_Easy_With_Great_Discount_Suggestions myntra coupons

    Fantastic, it’s just a amazing item of write down which i’ve bump into for long-term really. Perform also consultation items article.

  • http://bigwiki.bigsabotage.org/index.php?title=Saving_Cash_Is_So_Easy_With_Excellent_Discount_Ideas myntra coupons

    Incredible, it’s a incredible a part of write which I have noticed by rather long reasonable length of time. Actually do sometimes appointment our web pages.