Ok, in the last few posts on responsive design, I’ve taken a look at some issues that seem to come hand-in-hand with this approach.

Please understand; we like responsive design. I use media queries and fluid grids. Here at Moovweb we use them in our projects. But after working on responsive projects, we’ve all become a little more realistic about what RWD can accomplish. It a great tool to have in your toolbox, but it can be a little hacky, and it’s an incomplete solution for taking a complex site mobile.

Like all design techniques that came before it, we should borrow from what works and try to find better solutions for what doesn’t.

In the third part of the series I took a one such solution: Responsive Web Design with Server Side components, or RESS.

By coupling device recognition with server component selection, RESS eliminates both the user experience issues that comes with delivering a single-front end to all visitors, as well as the slow load that results from over-downloading.

A RESS solution

A perfectly simple use-case for RESS would be on a site’s menu navigation.

Much thought goes into the site navigation. It’s often the backbone of a visitors experience and so quite understandably it’s the focus of much deliberation and testing. Listing each and every section of the site is overwhelming and debilitating - choice paralysis sets in earlier than you might think - so nav items are limited to the essentials.

This is why hover drop-down menus are a common fixture. They split the choice into two smaller decisions, while still allowing a user to drill down to their destination with still just one click.

However, as we all know from running across these menus on a phone or a tablet, they are absolutely maddening to interact with on a touchscreen.

What RESS allows you to do is deliver that hover drop-down navigation to your desktop visitors, while delivering a more appropriate and accessible menu to those using a touchscreen.

Delivering separate HTML

Here’s an example of a drop down menu we could deliver to a desktop visitor. It’s a great simple CSS-based drop down hover menu that I borrowed from Code Issue.

**HTML A**
  • A

    *   <a href="#">A1</a>  
    
  • B

    *   <a href="#">B1</a>  
    
  • C

    *   <a href="#">C1</a>  
    

 

That works well, but now you need to deliver a menu more catered to touchscreens for your mobile visitors.

For many of the same reasons hover drop downs are used on desktops, accordion menus are a popular choice on mobile. They allow the visitor to expand the navigation with a simple touch, and easily find what they are looking for.

Using RESS here’s an example of an accordion menu that could be served to mobile visitors. It uses Uranium.js tabs, and has all of the same links that are available to desktop.

**HTML B**
<div data-ur-set="tabs" data-ur-closeable="true" data-ur-id="5">  
  <h2 data-ur-tabs-component="button" data-ur-tab-id="first_accordions">A</h2>  
  <div data-ur-tabs-component="content" data-ur-tab-id="first_accordions">