Tag Archives: Responsive design

Responsive web design and the problem with desktop websites

In the current iteration of Ponzu, almost all the views (except for feature phones) share the same code. That is to say that the desktop version, the tablet version and the smartphone version are the same HTML, Javascript and CSS with a little bit of CSS media queries to shrink down the interface for smartphones.

This is responsive web design.

Responsive design is a web design trend but is not without criticism. The most prominent criticism came from Jakob Nielsen, an expert in user interface design, in the blog post “Repurposing vs. Optimized Design”.

Nielsen point boils down to the following sentence;

It defies all common sense to expect the same user interface to be optimal for 3.5-inch screens and 30 inch screens, with no modifications beyond moving a few things around. Diversity in our interactive platforms requires diverse interaction design.

He lists the following as things that ought to be different for mobile vs. desktop design;

1. Most important, the content should be different: shorter and simpler writing is required for the smaller screen because the lack of context reduces text comprehension. 2. The IA changes to defer secondary content to secondary pages on mobile devices. 3. Interaction techniques change due to the differences between finger and mouse-driven input. 4. The feature set is reduced in mobile to lower complexity and to fit on the smaller screen.

Nielsen’s post met a lot of criticism from web designers, and he elaborated his points in a subsequent interview.

Similar points have been discussed in various blogs, and I find this article by Brad Frost, comparing the presidential campaign websites to be very informative, mainly because it compares the extremes.

Brad Frost summarizes the potential pros and cons of optimized-design vs. responsive site in the following.

Access

And while responsive designers can (and do) hide content from small-screen users, responsive design affords less opportunity to fork the content and create disparate experiences, which would deprive certain users of valuable information and features.

The main problem with Mitt Romney’s (optimized-design) mobile website is that only a fraction of the full website’s features are included.

Another common problem with separate mobile websites is URL management. Because desktop and mobile content live at separate URLs, device detection is required to route users to the appropriate site. Unfortunately, many websites don’t go deep enough in their URL redirection, so desktop users will get sent to mobile content and vice versa. This becomes apparent when mobile content gets shared by mobile users on social networks and then gets accessed by desktop users: Issues arise when a mobile URL is accessed from a desktop.
As we can see, having Web content all under the same roof and URL definitely makes it easier to give visitors access to the content they’re looking for, regardless of the device they happen to be using.

Interact

Obama’s (responsive design) navigation fails on a whole load of mobile devices: “And the menu failed. Never even opened. Suddenly, the site was without navigation… at all.”

Scrolling

Romney’s (optimized-design) mobile website has an acceptable page length.

Obama’s (responsive-design) pages contain a massive amount of content, often introducing entirely new sections far down in the flow. The result is extremely long pages that have serious problems.

Peformance

A typical page on Romney’s (optimized-design) mobile website is about 687 KB and, as a result, takes about 8.75 seconds to load. While that’s over the 5-second mark, the pages still weigh less than the average size.

A typical page on Obama’s responsive website is a massive 4.2 MB, resulting in a 25-second loading time.

The picture painted in Brad Frost’s article is that neither candidate got their mobile website right, even though Romney’s site appeared to follow Nielsen’s advice.

The question is how should we design the Ponzu conference system.

The problem is not about mobile. It’s about desktop design.

As I have discussed previously on this blog and others, my take is that desktop web design is too complicated. Rather than making mobile much simpler than current desktop design, my idea is to drastically simplify desktop design. By simplifying desktop design, it will become more adaptable to 3.5 inch mobile screens with minimal layout changes.

Tablets will be the motivation to simplify desktop design. In fact, I think that desktop websites should be designed primarily for tablet audiences.