Adding a Single Page Mobile Site to a Multipage Main Site...

[Tazz]

Hi everyone,

I have a quick question about the subject in my title.

I have a multi-page MAIN site, which is great, and I like the classic ability to take your mouse and click navigation buttons on a desktop version of a website to open specific pages and navigate your way around...However, I prefer the user friendly ability on a MOBILE site to scroll down a single page and see all the content that matches the MAIN site, but without having to click from page to page. Does that make any sense haha? It sounded so simple in my head but writing it out looks confusing.

So when I create a MAIN site with multipages, i.e. Home, About Us, Services, Contact...I fill each individual page with content and then make a navigation/bar/buttons, that when clicked, direct me to each individual page. Then, I create a MOBILE variant for that site, and when I click on the mobile tab, it opens up with all the same matching individual pages and content as the main tab has; A duplicate with a smaller page template. At that point, if I try to delete a page in the mobile variant, it of course deletes the page from the main tab/site as well. So is there any other way to turn the mobile into just a single page version, without doing the same to the main site or am I asking something beyond the scope of the software? I know there are the super site options with the horizontal/vertical scrolls, but wondering if it's possible without that option?

One of the reasons I ask this to just give more perspective, is I'm working on a site right now, that has a home page that is perfect on a desktop version. It has the perfect layout for a horizontally size monitor like normal, but to then turn that home page into a vertically sized cell phone screen, the content at that point just doesn't fit right at all...obviously, as your basically turning the monitor on it's side. I've run into this a few times with designing sites. It would be so much easier to just have the mobile friendly all as one page, so that the content of page two could fit up nicely to the content of page one, without having to redo the entire first page on the mobile site to make it fit!

Thank you,
Tazz

[Acorn]

Hi everyone,

I have a quick question about the subject in my title.

I have a multi-page MAIN site, which is great, and I like the classic ability to take your mouse and click navigation buttons on a desktop version of a website to open specific pages and navigate your way around...However, I prefer the user friendly ability on a MOBILE site to scroll down a single page and see all the content that matches the MAIN site, but without having to click from page to page. Does that make any sense haha? It sounded so simple in my head but writing it out looks confusing.

So when I create a MAIN site with multipages, i.e. Home, About Us, Services, Contact...I fill each individual page with content and then make a navigation/bar/buttons, that when clicked, direct me to each individual page. Then, I create a MOBILE variant for that site, and when I click on the mobile tab, it opens up with all the same matching individual pages and content as the main tab has; A duplicate with a smaller page template. At that point, if I try to delete a page in the mobile variant, it of course deletes the page from the main tab/site as well. So is there any other way to turn the mobile into just a single page version, without doing the same to the main site or am I asking something beyond the scope of the software? I know there are the super site options with the horizontal/vertical scrolls, but wondering if it's possible without that option?

One of the reasons I ask this to just give more perspective, is I'm working on a site right now, that has a home page that is perfect on a desktop version. It has the perfect layout for a horizontally size monitor like normal, but to then turn that home page into a vertically sized cell phone screen, the content at that point just doesn't fit right at all...obviously, as your basically turning the monitor on it's side. I've run into this a few times with designing sites. It would be so much easier to just have the mobile friendly all as one page, so that the content of page two could fit up nicely to the content of page one, without having to redo the entire first page on the mobile site to make it fit!

Thank you,
Tazz

Tazz, a possible approach would be to design a very long single index page for the mobile Variant with everything you wanted to cover and place a script in the Website Head, like:
<script>
if $(window).width() < 550 {
location.replace("index.htm")
}
</script> - this does not work.

Any volunteers?

Acorn

[Tazz]

Thank you as always Acorn, you have helped me a lot in the past.

So I take it from the red "this does not work", that it doesn't work? haha

I haven't tried it yet, from caution of goofing something up, but, If I put all the content on the long index page in the mobile variant and leaving all the other pages blank, and having a menu button with navigation to anchor points down the different sections of that index page, would that work? I know the index page and the (anchor) theory would work fine, but I'm not sure what the blank pages would look like or cause when seen online, or would you even know they exist?

Just brain storming here.

Tazz

[Tazz]

Never mind....I need more coffee. Of course you would see them duh. Scrolling down the site you would get to a bunch of blank sections/pages.

[Acorn]

Never mind....I need more coffee. Of course you would see them duh. Scrolling down the site you would get to a bunch of blank sections/pages.

Tazz, this works:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>

<script>

function redirect(url, width) {
var landingPageUrl = url; // Sets the required Variant landing page
var variantBreakPointWidth = width; // Sets the width when the Variant switches in
var w = window.innerWidth;
var url=window.location.href;
url = url.substring(url.lastIndexOf('/') + 1);

if ( w < variantBreakPointWidth && url != landingPageUrl ) {
window.location.href= landingPageUrl ;
}
}

redirect("index.htm", 720); // Allows for an interdicted page URL to be used on load

$(window).resize(function(){
redirect("index.htm", 720);
});
</script>

This all goes in the Website Head.
As the page is forced to the index, a return to the Main site will always be to the Main index page.
If a site page other than index is entered in the Variant, it will be redirected to the index page..

Acorn