Solved

Web application / screen resolution

Posted on 2014-01-05
2
315 Views
Last Modified: 2014-01-09
I am rewriting a web-based 2006-era asp.net application, using the latest available technology.  It's not a website.  It involves multiple participants interacting with a single page that displays three panels of information.  It will be used predominantly in business-like situations.

I have concluded that the application will have to behave very differently on phones (if it can be useful beyond view-only on phones at all), so I'm writing the initial release for for PCs and tablets only.

The original design was specifically intended to operate in 1024x768 resolution.  That is still a reasonable target for visibility and functionality.

My question is about what might be helpful to do for larger, higher resolution screens.

On my development system when I reset my resolution to 1600 x 1200, the current 1024x768 display of course become smaller and located in the upper left-hand corner.  I can make it more readable by increasing the browser zoom.   And I'm assuming that the user can figure out how to run the application and one copy of the browser and do everything else in another copy.  The application could provide ample instructions for doing so

Suppose though I wanted to do something to automatically adapt the display to users' current screen resolutions.  I can generally see that I can use @media to detect screen size and resolution, so that's a start.

What I'm not sure about is how to modify the CSS to scale the page parts and fonts to be  larger.  

Is it a matter of specifying complete, different sets of CSS rules for the different media sizes?  (And maybe that's the answer).  Or is there some other approach?

Any input on this would be appreciated.

Thanks!
0
Comment
Question by:codequest
2 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 350 total points
ID: 39758324
The 'responsive' design CSS files that I have been dealing with usually have three sets of CSS parameters to set the size of some major elements.  Much of the rest is done in percentages so it will automatically scale with the size of the screen.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 150 total points
ID: 39758326
I would start with using http://getbootstrap.com/ or http://foundation.zurb.com/.  They are both responsive css/js libraries. I have grown to like bootstrap better.  Essentially they are covering all the set up for you so you don't have to reinvent the wheel.

At the core is the css grid http://getbootstrap.com/css/#grid  This allows you to use classes like below that creates a 2 rows of div's if using a phone, a larger left column if a tablet and 2 equal size columns if a medium or larger screen.
<div class="row">
   <div class="col-xs-12 col-s-8 col-md-6>stuff</div>
   <div class="col-xs-12 col-s-4 col-md-6>stuff</div>
</div>
xs =less then 768px
sm=768px
md=992px
lg=1200+px

You do have to think through each page more than you are used to, but this gives the user a better experience.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

A Change in PHP Behavior with Session Write Short Circuit (http://php.net/manual/en/book.session.php#116217) (Winter 2014)** With the release of PHP 5.6 the session handler changed in a way that many think should be considered a bug.  See the note …
Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

861 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

23 Experts available now in Live!

Get 1:1 Help Now