Solved

Web application / screen resolution

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

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

      Install BugTracker on Windows 2008 server Step 1:  Install windows 2008 server 32 bit OS and configure IIS. Step 2:  Install SQL server ( SQL server 2005 or SQL server 2005 Express edition. The installer for 2008  version isn’t very f…
Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
This video teaches users how to migrate an existing Wordpress website to a new domain.

813 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

15 Experts available now in Live!

Get 1:1 Help Now