Solved

Web application / screen resolution

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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 …
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
This video teaches users how to migrate an existing Wordpress website to a new domain.
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.

829 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