Website for any sized screen

Is it possible to create a website that will scale to any monitor or do you have to create one for desktops and one for TV screens and one for mobile devices?
LVL 25
SStoryAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
Yes.  

Both are possibilities.

Without specifics of a site it is impossible to answer specifically.  The content and basic design determine what is possible.

Cd&
0
junipllcCommented:
If you are currently in the market for a site like that, then the term you are probably looking for is "responsive." Chances are if you have a site designed responsively it will change, or respond, to different screen sizes automatically. It even can change based on orientation --- for example, iPad being held in a portrait position vs. iPad being held in a landscape position.

Typically, responsive designs work based on the width, in pixels, of the current "window." It works based on CSS and media queries. So if a screen is only 768 pixels wide (iPad 2 portrait) the site's CSS chooses how to display the site for that size screen. if the screen is 1024 pixels wide (iPad 2 landscape) you can set the CSS to display the site differently. The same goes for phone-sized and desktop-sized layouts.

An example site that I worked on in Drupal a while back is http://forefathersgroup.com/ Take a look at that site and resize your browser window (to emulate different screen sizes). You'll see the site completely shift layouts.

There are frameworks such as Twitter Bootstrap that have the responsive design scaffolding built in so you don't have to build it yourself.

The above is just the most common solution I've seen to having one site for all devices. There are others, and like COBOLdinosaur said, it's not a one-size-fits-all solution.

Cheers,

Mike
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
InsoftserviceCommented:
agree with @junipllc.

you could do one thing that by js adjust your css width and height but even that's not 100% fool proof but it can reduce your issue at larger extent
0
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

SStoryAuthor Commented:
I am a developer and have designed many sites before the mobile craze, when you aimed at 800x600.  So is the basic idea to use percentages instead of pixels or are you saying to somehow get browser window size and using a different CSS for each one?

I am just curious of best practice and this is just HTML/CSS/Javascript/JQuery. No drupal, Wordpress, etc. So I need to know the best practice and some particulars.  At present the site has two narrow columns on the left and right, a header at the top and a center column that is 3 or 4 times the width of right and left.
0
junipllcCommented:
It's easier than that, but yet more complicated (I'm a 640x480'er myself).

The idea is to have a base CSS that is common to all layouts. Then you use media queries to target other CSS to certain screen sizes. For example:

@media (max-width: 767px) {
	.navbar {
		padding: 10px 15px;
	}
}

Open in new window

That code specifies that the enclosed CSS should only be active when the screen width is less than or equal to 767px (smaller than iPad portrait).

Responsive design is best learned by reading about it. There are a lot of resources out there for it, as it's the current practice. Ethan Marcotte coined the term, I believe, and this is a great primer article about it:

http://alistapart.com/article/responsive-web-design

It explains the basics and method behind it, and it's a pretty quick read too.

However, to do columns like you are, I'd recommend using one of the pre-built boilerplates that are grid-based (like Bootstrap or Skeleton). Then you just do something like this:

<div class="row">
<div class="span16">header</div>
</div>
<div class="row">
<div class="span2">left sidebar</div>
<div class="span12">content</div>
<div class="span2">right sidebar</div>
</div>

Open in new window

Don't quote me on the syntax, though. If you're using a responsive grid, then the columns will stack automatically on top and below the content on smaller screens. You won't have to touch a media query unless you want to.

Mike
0
COBOLdinosaurCommented:
You can use percentages, but that can tend to warp a design across resolutions.  The more trendy way to do it is using media queries with alternate CSS for critical elements.  If you are using a lot of graphics you may have issues in that some may not scale wll and you will either need to provide alternate versions or reduce the amount of graphic content.

For modern browsers going forward using percentages will fall out of favor and the viewport relative units (vh and vw) will be more practical. as older browser phase out the need for media queries will fall off as the CSS calc() function using vh and vw allow single stylesheet to resolve all resolution issues.

I think you will see responsive design with modern CSS become the way to go, but any developer who is still forced to support legacy browsers will have to tough it out for another year or two.


Cd&
0
SStoryAuthor Commented:
Thanks guys, I will try to check it out when things slow up. I am about to go on vacation and then come back to conferences, etc. It may be several weeks before I get the chance.
0
SStoryAuthor Commented:
I'm sorry. I went on vacation and then have had so much else to do that I haven't had time to get back to this project and the current static site is still functioning.  I am find with the suggested course of action.  Thanks for all of your great responses! I wish I could dedicate the time at present to go with them but am overwhelmed with some other demands right now.  COBOLDinosaur,  how much of what you are talking about is currently working in the more recent versions of IE, Safari,Firefox and whatever droid and iphone/ipad users use?  I guess I could detect really old browsers and alert the user that they need to upgrade their browser for the site to appear as it should.

Thanks again!
0
COBOLdinosaurCommented:
Viewport relative units support : FF19+  .. Chrome 20+ .. IE9+  .. Safari 6+ .. mobile everything since 2013/04 except Opera mini

calc() support FF4+ .. Chrome 19+ IE9+ Safari 6+, I believe Opera still does not support it mobile since 2013/04

For older browsers you just use a fallback with percentages or em.  There is o circumstance where you will get any method (old or new) that is fully responsive for every device/OS/resolution.  Unless you want to write a couple of thousand lines of script to modify rendering for all possible combinations, and make changes to the script for every new device/OS that come on the market.

The traffic stas for the site will tell you what MUST be supported.  All I do for obsolete technology is give them what they can support, and when they reach an unsupportable state I just put up a notice and invite them to join the current decade.

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.