[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now


Consequence of not creating variation for large screen resolution

Posted on 2014-04-20
Medium Priority
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.

Question by:codequest
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
LVL 54

Accepted Solution

Scott Fell,  EE MVE earned 2000 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>

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.

Author Comment

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.
LVL 54

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!

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

650 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