Solved

RWD or separate page/site for mobile?

Posted on 2013-12-29
3
367 Views
Last Modified: 2013-12-30
The application that I'm re-writing, which is more interactive-analytic as opposed to content consuming, requires a main screen with a three part view:  a single wide div on the left and two narrower divs on the right (say 67% left, 33% right).  There will be menu presets that will re-size these three divs in relationship to each other (i.e. make one of the two on the right larger), and some drag-resizing after that, and zoom sliders for each window (or at least the left window).

Part of the requirement is that the main screen will be used in interactive group sessions, so the basic div layout needs to stay relatively fixed to maintain a common visual/cognitive view for all participants.  So, no free-floating divs.

Plus there needs to be a lot of little controls within each div, e.g. to click or double click on an element to call up context menus or show information popups.

I can see this basic layout working from a PC down to a 7-inch tablet.   I'm having a hard time imagining that this is going to work in the same basic way on a phone.

=> I don't know that RWD (i.e. Bootstrap) is going to help much, because it's not a matter of content flow (but then, I may be making mis-assumptions about RWD).
=> Phone use would have to rely on browser-provided pinch-and-zoom to be able to effectively read (and interact with) the content of the three divs.
=> It seems like the little controls within each div would have to be configured differently for the phone (i.e. at 48 dp per control they would be too big)
     =>  but maybe pinch and zoom could overcome this.
=> a "pure phone" approach might sacrifice the "3-div view" for viewing each div one at a time, with alerts about when to look at the others (or something like that).
=>  Session participant will also likely be talking on the phone
=>  Phone participants could be given lower text-input capabilities.

On the other hand, webex provides a phone app, so maybe it's possible.  Not sure how much interactivity that has;  I'll have to look into that.

I'm thinking what I need to do is design my app primarily for PCs, take into account the touch orientation of a small tablet, and then make concessions for use on phones where it doesn't cripple the needed analytic/interactive features that are possible at the PC level.  But if the PC/Table design doesn't translated easily to phone, then write a separate GUI for phones.

Any thoughts, suggestions or pointers to articles that would help me think about this would be appreciated.

Thanks!
0
Comment
Question by:codequest
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 39745756
Here is a good article.

Designing for phone is often a different animal than tablets/phablets

http://blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 250 total points
ID: 39746608
greetings  codequest, , , There are several many "flexible design" frameworks, that can do a good or acceptable div shuffle and size in today's  variations of web device sizes. And there are CSS and javascript methods that you can use to do it yourself. But I found that for some interactive and complex web GUI, that has very many important user inputs (choices), I have to think in design for two or maybe three very different GUI for input sizes and user "view area" with hidden touch to "slide out" info areas like menus. I just can not do that with some automatic div shuffle and size, for instance changing a "three div across" display to a "one div across" display with two hidden touch to "slide outs" divs, , stuck to the right side. For me, sometimes I just have to "write a separate GUI for smaller display size". Unfortunately each one has it's own unique design setup, so there is not "any one size fits all" recommendations.
0
 
LVL 2

Author Comment

by:codequest
ID: 39746640
@mplungam:  Thanks for the input.   That was a good starting point.   Turns out that googling "RWD vs Mobile Site" produced many solid articles on the subject, with many points that spoke directly to my choice.   However, I did not even know to do that search, so the answer above was a help.

@Slick812:  Thanks for the input.  Those detailed implementation issues are a helpful addition to the general research (the comment about "sliding div" was particularly illuminating about the nature of RWD).

So my thinking at this point is that the user experience will be very different for a phone. This is really a business application that will be used by people who work at desks. I believe I can make it work for tablets reasonably well.  But phones are not going to support the many controls and frequent text inputs that are required for full participation.

So the mobile site will become more of a "viewer" site than a "contributor" site, and can wait for release 2.

Again, thanks for inputs, big help.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question