Display Different Content by Screen Size

[launch3]

I have a very old authority site. A couple of them actually.
I built it using .shtml pages with ssi includes way back when.

What I want to do is display different files based on whether the viewer is using a PC or Mobile.

Is there some sort of if/then/else statement that can be used within the html body for this?

ie: if screen width > 800 show <!--#include virtual="../content1.shtml"-->

if screen width < 400 show <!--#include virtual="../content2.shtml"-->

I have several ssi includes on each page that I would do this for.

Thanks in advance.

[incrediBILL]

You could do this with javascript or media queries in CSS.

Such as...

@media screen and (max-width:960px)
{
background: url('images/large.png');
}

@media screen and (max-width:700px)
{
background: url('images/medium.png');
}

@media screen and (max-width:480px)
{
background: url('images/small.png');
}

Etc.

Just alter your design so that the image is a background image of some element on the page.

[lucy24]

(max-width:960px)

:: insert boilerplate about browsers that don't recognize the "max-width" property ::

@media screen and (max-width:480px)
{
background: url('images/small.png');
}

Better make that

@media screen and (max-width:480px)
{
body {background: url('images/small.png');}
}

and so on. Both to make the validator happy and because, ahem, it doesn't work otherwise ;)

:: detour to experiment, using ::

@media screen
{ 
body {background-color: #CCC;}
}

@media screen and (max-width:1200px)
{ 
body {background-color: gray;}
}

@media screen and (max-width:960px)
{ 
body {background-color: #F66;} /* red */
}

@media screen and (max-width:700px)
{ 
body {background-color: #99F;} /* blue */
}

@media screen and (max-width:480px)
{ 
body {background-color: #696;} /* green */
}

WOW. Totally fascinating effect, though possibly not what you want. In all current browsers, the background color changes dynamically based on current window (not monitor) width. In both directions: making it larger and making it smaller. MSIE predictably ignores the whole thing, including the first line (the one for "screen" alone).

Caution: It only works if you order the backgrounds from largest to smallest. "max-width" in this context is interpreted as "up to..."

Alternative experiment: instead of the document's CSS, I put each color into a separate stylesheet and used

<link rel = "stylesheet" type = "text/css" media = "screen" href = "null.css">
<link rel = "stylesheet" type = "text/css" media = "screen and (max-width:2000px)" href = "one.css">

et cetera. Exactly the same result, except that this time MSIE loaded up all the stylesheets, so the last one overrode all the others.

Hot ###. I had no idea even css, let alone html, would respond dynamically like that. I thought you had to go to js at the least.

Anyway, this method should work terrifically well with mobiles, or any device that won't let you change the window width. But in a "real" browser it may or may not achieve the intended results.

How 'bout @media handheld instead?

[swa66]

Take care: if all your css if for screen media, you might get a surprise in how e.g. your printed view looks.
There's also the min-width media query to have less dependencies on the order of things, as well as those that target device sizes instead of viewport sizes.
Ref: [w3.org...]

media handheld does exist in the standards, but a smartphone like the iphone has a decent enough browser that it prefers the screen media for itself. "handheld" was introduced before Apple had changed the industry with its iPhone - it's for extremely tiny screens that aren't used anymore IMHO.

Actually apple itself suggested back when to use

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">

to target the iphone and ipod touch.
Ref: [developer.apple.com...]

[edited by: swa66 at 8:54 am (utc) on Oct 8, 2012]

[launch3]

Thanks for all your suggestions.

I was hoping to avoid css as it makes it much more complicated. Is there some sort of java that I can put into the html body? I don't know the correct coding, but something like this:

<script type="text/javascript">
if (screen.width < 960)
{
document.write(<!--#include virtual="../content1.shtml"-->);
}
else if (screen.width > 960)
{
document.write(<!--#include virtual="../content2.shtml"-->);
</script>

[edited by: incrediBILL at 5:27 pm (utc) on Oct 8, 2012]
[edit reason] disabled smilies [/edit]

[swa66]

I was hoping to avoid css as it makes it much more complicated.

Weird. I'd feel 100% the opposite.

[lucy24]

I was hoping to avoid css as it makes it much more complicated. Is there some sort of java that I can put into the html body?

I assume by "java" you mean javascript. (They just named it that way to confuse us.)

Can you explain what you mean by "more complicated"? You've got CSS already, so you're not adding anything, whereas javascript makes a whole nother layer of coding.

No matter what you do, the background image will be called from the CSS, not directly by the HTML. javascript can be disabled. CSS normally isn't.

If something like the

<link rel = "stylesheet" type = "text/css" media = "screen and (max-width:2000px)" href = "one.css"> 

construction --which I'd never tried before-- works reliably for the devices you're targeting, the CSS itself becomes the equivalent of an include file.

The other day I was snooping around someone else's site and found they had twenty-four stylesheets. By actual count. Having two is not going to send you over the top. I do for most pages. I try not to go to three.

[rainborick]

With server side includes, you must keep in mind that the page gets parsed for such includes before it gets sent to the browser, so you can't really use JavaScript to determine which <!-- #include -->s get processed. The only information that the server has about the user is the User_Agent/browser, which can give hints about screen size on some mobile devices, but rarely any absolute data.

Off the top of my head, I think the only alternative to CSS is to use JavaScript/AJAX to retrieve and display the appropriate content, along with a <noscript> section containing the default content. But I'd strongly encourage you to try to develop a CSS solution instead. Check out some of the responsive design tutorials and you should find some help. Good luck!

[incrediBILL]

I was hoping to avoid css as it makes it much more complicated. Is there some sort of java that I can put into the html body? I don't know the correct coding, but something like this:

Um, no, CSS actually makes thinks LESS complicated instead of having attributes strewn all over the source file which is bulky and grossly inefficient.

Javascript is processed in the page after it's already loaded into the browser so it won't function like that server side.

However, client side in the browser it could do something like this...

if(screen.width <= '480')
{
document.write( "<img src='/images/small.jpg'>" );
}
else
if(screen.width <= '800')
{
document.write( "<img src='/images/medium.jpg'>" );
}
else
{
document.write( "<img src='/images/large.jpg'>" );
}

Just an idea how it might be done off the top, didn't test the code, don't know if it's even valid.

[swa66]

document.write has been deprecated for quite a bit IMHO.

Seriously, why bother with javascript ?
There's those of us who turn it off (I do and I'm surely not the only one), it does not free you from having to deal with the quirks of the different IE versions in use (which is the only hard thing there is in CSS).

And those small screens: there's only safari (and a very far second chrome) to worry about anyway, they even share the same webkit engine so you'll not have any CSS issues and/or lack of decent CSS support.

[launch3]

I'm glad I asked my question here. I may not have gotten the answer I wanted, but I got the answer I needed to hear.

Patchwork on my sites isn't going to do the job. After 14 years, I need to bring them into 2012. Everything was ssi includes and coded with fixed heights/widths (tables & images) for one sized screen. Isn't going to fly anymore.

Complicated was probably the wrong word. Time consuming would be more appropriate. My sites need a serious update.

I will heed the words of others here...

css.

[lucy24]

Nothing wrong with includes. It just depends on what you're using them for. If you've got boilerplate that's exactly the same on all pages, includes remain the easiest way to do it.

My sites need a serious update.

You know that part in websitesthatyou-know-what dot com where he asks rhetorically "Have you ever seen another web page?" That's what mine looks like :)

But I'm glad you asked the question because I had lots of fun making my background colors change.

There do exist non-webkit mobiles, so be sure to test. I ran into a Windows phone the other day. Had to reword my htaccess to let it in. (It was someone I know, and I'd asked him to check a page. Good thing!)