Solved

Web application / screen resolution

Posted on 2014-01-05
2
318 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
[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 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

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 …
These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
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.

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