Solved

Consequence of not creating variation for large screen resolution

Posted on 2014-04-20
3
200 Views
Last Modified: 2014-04-30
This one's highly subjective.

I'm converting a functioning prototype application into ASP.NET MVC.  It features a complex graphic and a complex custom "list" (stack of divs with formatted text, not table, or li).  It's used for collaborative process design.  It's currently got 100K+ lines of C# and maybe 25K of JS.

It's the kind of thing that's likely to shared via Webex or similar utilities.

The JS and CSS currently all use fixed pixel dimensions, based on the assumption of a 1024x768 screen resolution...except that many of the element dimensions are dynamically created in JS anyway.  

The business model doesn't require a mobile version, for now, so I don't have to worry about smaller resolutions.

My concern is that the target audience does include IT project managers and business analysts, along with other knowledge workers.  And I'm seeing more and more of them use higher resolution monitors (like 1600X1200 or more).

The graphic has  a slider that can increase or decrease the size of the graphic and graphic labels from 50% to 200%.  Needs some fine tuning but mostly works ok.

I'm thinking I can build a similar slider to adjust the div and font sizes of the "list".

But the whole thing is still currently locked into this 1024x768 based-layout of fixed divs.  I suppose I could make that adjustable too.

I see and generally understand the many techniques available for detecting screen pixel dimensions, using % for dimensions, using alternate css for different screen sizes etc.

Having said all that, the question has three parts:

1)  Any thoughts about how many business and IT staff (not hard core engineers, particularly) are using their monitors at 1280X960 or more?

2)  Any thoughts on how much negativity would be engendered by not having the app adapted to higher resolution screens?

3)  Any thoughts on the relative effort of going ahead to make the app responsive to higher resolutions, given the total amount of code it contains now, the large portion of current code-based size setting, and the built in scaling functions?  (And I could convert first, allow for the sizing, and refine the sizing later)

As I said, highly subjective.

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
  • 2
3 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40011737
Making it responsive is a good idea.  However, that does mean you now have to think of each rendered page as a phone, tablet, partial desktop, full desktop and somebody using a very large screen or super high resolution.  

You can use media queries and make up your own versions for each https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.  However, there are some great base projects in bootstrap http://getbootstrap.com/ and foundation http://foundation.zurb.com/ where both are based on a css grid and multiple media queries you access by giving a div a class.  http:Q_28406542.html#a39982826
<div class="row">
    <div class="col-xs-12 col-sm-6">Stuff</div>
    <div class="col-xs-12 col-sm-6">Stuff</div>
</div>

Open in new window


Your 100K lines of C code or 25K lines of js only come into play where you are generating the divs.

Part of the consideration in doing this is not just hiding, unhiding and moving things around, but you want to think of images as well.  If they are on a 2000px wide screen, chances are it is ok to hide the lower res, smaller images for the slider and use larger images that can be near 100% of the actual width.  This will keep them looking sharp.

This is not a small task, but in the end it is worth it to explore.

At the very least, you can use a simple media query to detect a 1600px viewport and adjust the slider.
0
 
LVL 2

Author Comment

by:codequest
ID: 40021259
@Scott:  thanks for your input.  It helped me see that this is do-able and reasonably important.  Since this the project is a conversion/enhancement, I won't have a clean code architecture to work against, which would make adding multiple screen sized much easier.  So I'm going to make notes for this as I go along, and implement it in release 1.1+.
Big help on getting this resolved, though.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40021485
Glad it makes sense.

I would practice on a simple html site and convert that to bootstrap to get a feel for what needs to be done.  

Best of luck!
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

730 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