Solved

Consequence of not creating variation for large screen resolution

Posted on 2014-04-20
3
196 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
  • 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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to dynamically set the form action using jQuery.

760 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now