Solved

Web application / screen resolution

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

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
New Relic: Our company recently started researching several products to figure out what were the best ways for us to increase our web page speed and to quickly identify performance problems that we may be having. One of the products we evaluated wa…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
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.

747 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

10 Experts available now in Live!

Get 1:1 Help Now