Reordering content for mobile devices - distracting or helpful feature?

Question

With CSS3 its really easy to reorder the content depending on the screen size, which leads me to the question: Only because its possible, should I?

A use case could be directions - one could assume that a user checking out a website on a desktop computer is maybe less interested in a map with directions than a user checking out the same website using a mobile phone.

So for the mobile version of that website it could make sense to put the directions more to the top. That way, a mobile user could find fast what he is looking for.
But what if the user checked out the website at home using a desktop computer and now just wants to check if he arrived at the right place?
Remembering the website from his desktop computer, he may be irritated or annoyed when content blocks aren't where he expects them to be.

Are there any best practices, studies or experience towards that? Is it a good idea to reorder content depending on the screen size in such a radical way?

Answer 1

You are thinking from the user experience. But perhaps over thinking. The user will want a mobile design on the phone and a desktop design at home. Users will search for the info they are looking for, and good ux makes that search easier. By predicting their behavior correctly, they will judge your interface as intuitive.

You asked about best practices...

A good practice is to design for the phone first, then move to larger screen experiences from there. The reason being that the phone will have the use cases most limited by time, attention, screen space, and usability. Then when you billow out to a desktop space, things features will be arranged properly, for the most part - or at least you'll have an easier time with their arrangement.

If you are designing the mobile version of a preexisting desktop interface, you do not have this "mobile first" luxury, so just reimagine the mobile interface completely. Have your user's browser point to a wholly different address.

Another best practice is to conduct user interviews. Make a design and then see how they interact with it. When you do this, you usually see how your assumptions were wrong, and usually in ways you didn't expect.

Answer 2

I would try to keep content architecture similar on all platforms. There will need to be some adjustment of content, especially when you can use two to three columns on a desktop site and will likely use one column with a mobile layout, but generally try to keep site architecture consistent. There are special design considerations for mobile, for example you may want to have your navigation collapse on mobile platforms (think Facebook app and Bootstrap). That's the kind of mobile accommodation for which to use CSS.

The important thing is to be consistent with the content offered on all platforms. Karen McGrane, author of A Book Apart's Content Strategy for Mobile, says here that mobile sites should not exclude content. Tapworthy author Josh Clark also says that both mobile and desktop sites should have the same content. He also says that content placement should accommodate user needs and scenarios. Will users be in their driveway about to enter a destination address in their GPS (and checking their phone for that address) or will they be lounging on their sofa and using their phone or tablet because it's more comfortable than sitting at their computer?

The tricky part of our jobs is figuring out how to let the mobile user quickly find the info they need while also providing the info that they may be looking for while using their phone or tablet in place of a computer.

The limited space on mobile platforms forces us to really think about content and placement. This is a good thing. Optimizing content for mobile also helps us streamline content for desktop too.

Look at the user platform statistics for your site. Which pages were most accessed on phones and which were most accessed on tablets or desktops? This will help you figure out how to best arrange the content in each area. Your personas and use cases will help you figure out what your users will be looking for on different devices.

Answer 3

If you have troubles integrating a desktop component on mobile, the best solution would be to change the component to a specific mobile one.

In your case you can change the 'map with directions' with a button/map that launches on tap google maps directly with the navigation predefined. You can also detect the type of phone and change gmaps with apple, nokia or windows ones. Can't do that? Send them to maps.google.com with navigation predefined.

The best practice right now is to have the same website on all devices. I assume that you are working on an existing website and recreating that one (with bootstrap for example) is not an option. In my opinion you should try to give the same experience to everyone, consistency should go across all devices.

Hope it helps.