Printable View
Is there a way to temporarily hide a mobile variant? The main (desktop) version needs to go live right away, but I'll need to do quite a lot of tweaks on the mobile version before publishing. Ideally I'd like to do this alongside work on the main version, but with the public seeing only the desktop version for now, and this status (live desktop variant, hidden mobile variant) should remain while I make and publish changes to the desktop version.
Save your site. Then save your site with a new name, for example Desktop only. Delete the Mobile Variant and publish.
If you have already published, delete the files from the Mobile Variant.
Thanks, would that mean that just the changes are republished or the whole site?
Correct because the copy you are working with does not have a mobile variant so there is no mobile update.
Sorry I wasn't clear. What I meant was: if IQuote:
Originally Posted by gwpriester
a) create a dual variant site (S1) and save
b) Save with a different name (S2), remove mobile variant from S2 then publish S2
c) edit S1, save again to S2, remove mobile variant from S2 then publish S2
- will I be republishing the whole of S2's desktop version, or just the changes that I made to the desktop version? Thanks
Good question. I am not sure.
Do you want to have the mobile site up at the same time? This gets very messy. You can stop sharing the mobile variant (you will have to do this page by page) but then any changes you make to the main variant will have to be made manually to the mobile variant.
I want to publish only the desktop site at this stage. The site will then need many many minor updates (structure and content) and I'd rather not have to republish everything if I just change a few words. The mobile variant will go live much later, but I would like to start experimenting with that now.Quote:
Originally Posted by gwpriester
A better alternative would be to have both versions on the live site, with just the mobile version in a password-protected directory. But this would necessitate a way to force all users to the desktop version, where they would see a message saying that the mobile version will be available soon. Not sure if this is possible?
Probably best then to just publish a main site and not the mobile variant until it is ready.
You could create a mobile variant but do not link to any of the pages and just have a small announcement on the mobile home page, site under construction or something to that effect?
Thanks but if I understand correctly this would mean that everyone with a small device would get directed only to the unready mobile version (graphics popping out of text panes and more all over the place etc) and would not see or be able to navigate the desktop version.Quote:
Originally Posted by gwpriester
Yes, it's possible to forget the mobile version until afterwards, but I really want to be experimenting with it as I develop the main version.
So I think I will probably do as you suggested earlier - use two sites, publish only from the second and delete the mobile version from the second site just before each publish, and it won't be the end of the world if I'm republishing the whole site each time. Just thought there might have been a simpler way.
You can paste this to your home page when ready.
<script type="text/javascript">
<!--
if (screen.width <= 480) {
document.location = "http://domainname.com/mobilename";
}
//-->
</script>
You can change the 480 px to 600 or 800 depending on your needs.
Don't think my original reply to this went through.. Thanks for the suggestion. But surely when I'm ready to publish both variants (deleting the mobile version before each publish in the meantime), the Xara coding would automatically redirect mobile users to the correct version. Or am I missing something?Quote:
Originally Posted by behzad
If you delete the mobile version then there is no reason why the main site should direct it to your custom mobile version, unless you put the above code into the index page of your main site. If anyone else thinks I am wrong, please let us know.
Perhaps my query wasn't clear. I need to hide the mobile version only while developing it. So I'm currently doing, as Gary recommended:Quote:
Originally Posted by behzad
Save your site. Then save your site with a new name, for example Desktop only. Delete the Mobile Variant and publish.
When the mobile version is ready to publish I will publish the complete version (desktop and mobile). So if I understand correctly, there should never be a need for extra code.
I like to hear what the other wizards will say about this.
No code, treat the design with Main and Variant as the Master.
Clone it on every publishing revision but remove the Variant before publishing.
When happy, publish the Master.
Acorn
Off course it can be done with a script ;). Here is an example.
The script is at the site head. It is not a very beautiful solution but works for me.
You choose the variant to force to view by specifying its width in the script (replace the 640 with the width of your main variant).
Maybe I should mention that it doesn't work when started from a local file in Chrome and Opera, but it works fine in preview.
Thanks Acorn - yes, this is indeed what I am doing.
Siran, thanks but I am again confused about when exactly I would use this code and what it would accomplish. Surely the only way to make sure that the draft mobile version never displays is not to publish it. And then when the mobile version is ready and I do publish it, there's no need for any code beyond that which Xara automatically generates.
I think you're chasing your own tail here yjs. Just stick with Gary's method. The other methods work equally as well but seem to be confusing you so go with what you understand ;)
Thanks but that's not quite the situation. Gary's solution indeed works but it is very time-consuming and does appear to require publishing the whole site for each minor change. So I'm in interested in a workaround (if completely reliable - i.e. draft mobile version would never display) where I'd insert some code into one of the variants. But I don't understand the workflow of the code mentioned, and how it would help. i,e. In which version (mobile/desktop) would the code be inserted and in what stage of the process? Would it need to be in all pages of the variant? What exactly would it do and for which browsers/user settings/scenarios might it not work? Sorry for being so dense but I really would like a simpler solution where I could work on both variants at my leisure and then just do some minor alterations to make the mobile version live.Quote:
Originally Posted by Egg Bramhill
It all depends. ;)
I have tested the code in Firefox, IE11, Chrome and Opera on Windows 7 (64 Bit).
The only other device I have access to is an Android tablet. Which I will test some time later, hopefully today.
There is no way I could ensure it is working on other systems as it very likely is browser dependent. The code already is that complex because of inconsistencies between Firefox, IE and Chrome.
If you want to give it a try consider the following:
If you are using the same page width of the main variant (the one you want to be forced to display) on all pages in your document you should put the code at the site head (so it is automatically added to all pages) and just adapt the 640 to your actual page width.
If you are using different page widths you will have to put the code to the page head (to each page separately) and adapt the 640 to the width of your individual pages. BUT that will not correctly work if you are using a supersite.
Alternatively to putting the code to the individual pages you could allow multiple page width in the code and put it on the site head. For example, by replacing the condition
withCode:parseInt(X.cssText.slice(pos+6))==640
you can force every variant that has a page width of 640, 680 or 720 pixels to be displayed. This off course would result in a mess if you have one variant of 640 and another variant of 720 pixels on the same page.Code:[640,680,720].indexOf(parseInt(X.cssText.slice(pos+6)))>=0
Now an attempt to explain how it works:
Xara creates and includes a CSS file (xr_all.css) when using variants. The script searches for the CSS and builds an alternative version of it.
This CSS file contains a block of text for each page on each variant (which makes 6 blocks of text on a two page document with three variants). This is what such a block usually looks like:
If the variant is the smallest for the page in the first line the "and (min-width: 560px)" would be missing and if it is the widest then "and (max-width: 799px)" would be missing.Code:@media screen and (min-width: 560px) and (max-width: 799px) {
.xr_mvp_1 {display: none;}
.xr_mvp_2 {display: block;}
.xr_mvp_3 {display: none;}
.xr_pbd {margin-left: -320px;}
#xr_xr {width: 640px; height: 266px}
}
The script just copies all these blocks of text and compares the width given in the line "#xr_xr {width: 640px; height: 266px}" with the width specified in the code.
If it matches then the variant is forced to be displayed by changing the first line to
which assumes that the browser width is always at least tow pixels wide.Code:@media screen and (min-width:2px){
If it doesn't match the variant is hidden by changing the first line to
which assumes that the browser width is never only one pixel wide.Code:@media screen and (max-width:1px){
If anything goes wrong (for example the #xr_xr line could not be found in the text blocks) then the script simply does nothing.
But if everything looks good the CSS included by Xara is disabled and the modified version is added to the document.
Don't hesitate to ask if you need a more specific explanation.
When you are ready with creating the variants just remove the code.
The test on the Android tablet was successful. Chrome and the built-in browser (Samsung) both displayed the correct variant.
Maybe someone could check on iPhone, iPad, MacOS, Linux or other Android variants.
THIS LINK should display variant one (480px) of page one, variant two (640px) of page two and variant three (960px) of page three regardless of the browser width.
Worked as I expected on iPhone & iPad by loading different page sizes Siran
Thanks Egg, good to know.
Siran thanks very much for the detailed explanation.
I'm again needing to hide a mobile variant under development while making lots of changes to a live desktop version It just occurred to me that each time I've finished working on the mobile version, I could just change that variant's width to something ridiculously low or high (say 30 or 3000 pixels wide....) which would publish it along with the desktop version but it would not appear publicly as nobody's device has those specs... then each time I want to work on the mobile variant I would just change the width to the actual mobile width. I haven't yet tried this, wondered if it's worth a try and/or if there's anything I should bear in mind?
From a quick try this seems to work and be quite simple - i.e. if you are working on a mobile variant which you don't want to display when you publish the desktop variant, just change the mobile variant with to 200 pixels before publishing, then change the width back to 480 pixels when you want to continue working on itQuote:
Originally Posted by yjs
Simplest way would be to work on the desktop variant. Once your happy do a Save As "desktop-only.web" then delete the mobile variant, and publish. Not good for SEO as Google likes mobile versions too but it will probably rank the same as a 30px wide variant.
You can then work on your original web file to edit the mobile variant until your happy with both & publish.
If I understand correctly this means working with multiple webs and deleting each time before a publish.Quote:
Originally Posted by Egg Bramhill
Using an ultra-narrow variant for the mobile draft means I can work intensively on the desktop version (which has changes several times a day) and publish directly. Whenever I want to work on the mobile version (prior to its launch) I simply open that version, widen, do my work then narrow it again unless it's ready for launch - in which case I just do a normal publish of the entire web.
I do like the idea of setting the Variant to a skinny width. I personally don't care what Google thinks, I would be doing it for sound design reasons.Quote:
Originally Posted by yjs
Acorn
No just two.Quote:
If I understand correctly this means working with multiple webs and deleting each time before a publish.
If that's the case, if your desktop version changes with such regularity but not the mobile version I'd suggest creating two separate independent versions of your site and not use variants.Quote:
Using an ultra-narrow variant for the mobile draft means I can work intensively on the desktop version (which has changes several times a day) and publish directly.
There's a desktop version that's live and active now, and the mobile version will follow. When the mobile version is live it will be updated along with the main one. I see this scenario very frequently: people have limited resources and first want to get a main site up and running asap, with the focus on giving everyone access to the data. If they're on a phone - so they have to scroll a bit. Only after the main data is available some graphics are reduced, tables changed etc. to produce a version that's easier to access on the smaller screen.Quote:
Originally Posted by Egg Bramhill
Not following your reasoning here yjs?
My solution is that you have a web file named "master-website.web".
It has two variants, desktop & mobile.
You only currently want to publish the desktop site.
So you do a Save As and call it "desktop-only.web"
You delete the mobile variant (very simple)
Save it & publish.
This published version only contains a single website, the desktop variant.
You want to make amendments to the desktop variant?
Open "master-website.web"
Amend the desktop variant.
Save.
Save As "desktop-only.web" which overwrites the previous version.
Delete the mobile variant.
Save.
Republish.
Now when you're ready to create/amend the mobile variant
Open "master-website.web"
Amend the mobile variant
Save
Publish.
That also sound possible but it means working on two webs and deleting mobile webs before every publish. For me that's more complicated.
Right now I'm simply working on the desktop version with the mobile version narrowed so I don't have to worry about it. I work on the single two-variant web and publish. Yesterday I wanted to play around with the size of a graphic on the mobile version so I widened it, played around and then narrowed it again... then went back to the desktop version to continue my work and publish as normal.