Is there any more to responsive design that a dynamic gird

Question

In many cases when I hear customers who want to make their website\ web application responsive to mobile devices (tablets and smartphones).

It always ends with a base gird being "squeezed" to one column, and the navigation (usually tabs or a side navigation panel) is changed to a "drop-down" \ "slide from the side with a swipe panel".

• Is there any more to it that squeezing grids and handling navigation ?
• Is there a methodology that suppose to guide a UX specialist in determining how the web site \ web-application in question should behave in a table or in a smart phone besides trowing a bunch of examples with "squeezed" grids and navigation eye-candies?

Answer 1

• There are indeed more to RWD than just responsive grids and navigation. As long as UI is concerned, table and tabs representation on mobile devices are equally critical. On UX side, debates on whether a mobile-only side should be served instead of the normal website, and if serving normal website to all devices, whether certain content should be only available on desktop and not mobile devices, are some of the considerations for making sites available on mobile devices.

• I'm not aware if there's such methodogy. For me, I take reference from current trends and read up broadly. Chris Coyier's http://css-tricks.com is one useful site. As a designer, I believe that despite the availability and usefulness of tools and methodologies, we ought to try think out of the box at times, let our creative mind manifest without the restriction of such tools and methodologies, and come out with novelties.

Answer 2

It's not entirely true what you write ('ve seen button-based navigations as well, and sometimes even 2 columns of those buttons!), but let's just see the necessities:

Take an iPhone. Some phones are wider than that but let's just assume an iPhone is representing an average width/height of any mobile device. (see this Wired article, and this linked Flurry report for sizes of devices currently in use)

Most people seem to use their device in portrait mode (see this UXMatters article)

Imagine any kind of body copy half-width of that screen width. I guess it'd be uncomfortable, perhaps even unreadable for some people.

So therefore, body copy has to be of full width.

With navigation, you can essentially do the following:

• Place it at either at the beginning or the end of the page
• Hide it, leaving only a signifier (new term for affordances) - that means, a small icon or button or "NAV" or "MENU", when you click, it replaces part of the screen and shows navigation
• Expecting users to use learned behaviour and instead of a signifier, use a kind of a gesture - all "swipe from here to here with N fingers" stuff
• Combine these two, leave some affordance, but also allow gestures

With these, you have plenty of opportunities. Like, you could even employ Windows/Metro-esque panorama layouts:

The trick Microsoft uses is to use the edge of content as a kind of signifier / affordance.

Of course, that's not always a solution, and if we're talking about usual content pages - where users are likely to be interested in a given article - it's not always feasible to load next / more views.

The big idea of Mobile First approach was to remove clutter and think in chunks of information and context.

It's not about grids. As you see, you can have a large grid, of which at any given time, you only show a portion of.

It's about understanding that content is king, that the user came for the content, and it's okay that navigation needs more effort in order to keep the view focused and clean.

You don't go to a website to navigate. You just want to find what you're looking for and anything else that is there is essentially clutter, wether we, dreamers of those sites, like it or not.

Answer 3

Is there any more to it that squeezing grids and handling navigation ?

Depends on the project, but there certainly can be. Layout is a big part, but so is interaction and content. Both may need to be variable to offer the best UX per device/screen.

Is there a methodology that suppose to guide a UX specialist in determining how the web site \ web-application in question should behave in a table or in a smart phone besides trowing a bunch of examples with "squeezed" grids and navigation eye-candies?

One possible option is to go with 'mobile first' ideology where you focus on the mobile experience first and foremost. The advantage to this is:

• you've created a good mobile experience
• you've (hopefully) reduced content and UI bloat on the full site (which is a common issue)
• you've focused on the most critical features/functionality first.
• it's arguably easier to start with mobile and 'enhance' for desktop than to design for desktop and 'strip down' for mobile.