My page looks wrong

[trnhockey]

http://www.speakingofradio.com/Schad...overs_main.htm

My page looks wrong on screens smaller by 1920x1080. I pieced out the header and footer from the main site and put them in Xara for this one feature "Schaden Digests". What do I do to make this look good at least on smaller desktop browsers? I clicked on "Auto Fit To Page" on both header and footer and that did nothing.

[Acorn]

You are using a fairly fresh XDA so hopefully the required changes will not be too painful.

I think you have chosen a 960px wide design page but the hung a number of items touching its edges and unticking Clip to page edges.
To achieve the wider page effect you should be using Stretch Full Width (Stretchy) for the Brown NavBar backing. The NavBar should be Text and not images (Just a demo?).
The top graphic should really be four items:

1. Speaking of Radio - JPG image
2. Conversations - Text
3. Radio Listeners - PNG image - to handle the Stretch background
4. Background - Stretchy Box

(The Footer is all an image so I think you Grouped as a single image just to demonstrate layout for us)
The Brown Footer should also be Stretchy.

You should increase the page width to 1280px.
I would add a White Stretchy Box underneath all content to make the site look wide.

Finally, in Web Properties > Export, set Scale to fit width, maximum 1920px.

When you then reduce the browser with, the web page sclaes down accordingly but still all is visible.

If you go too small and you don't like that then you need to consider adding a Variant.

I would also consider Optimising all images and if you have the option, enable WebP images.

Acorn

[trnhockey]

You are using a fairly fresh XDA so hopefully the required changes will not be too painful.

I think you have chosen a 960px wide design page but the hung a number of items touching its edges and unticking Clip to page edges.
To achieve the wider page effect you should be using Stretch Full Width (Stretchy) for the Brown NavBar backing. The NavBar should be Text and not images (Just a demo?).
The top graphic should really be four items:

1. Speaking of Radio - JPG image
2. Conversations - Text
3. Radio Listeners - PNG image - to handle the Stretch background
4. Background - Stretchy Box

(The Footer is all an image so I think you Grouped as a single image just to demonstrate layout for us)
The Brown Footer should also be Stretchy.

You should increase the page width to 1280px.
I would add a White Stretchy Box underneath all content to make the site look wide.

Finally, in Web Properties > Export, set Scale to fit width, maximum 1920px.

When you then reduce the browser with, the web page sclaes down accordingly but still all is visible.

If you go too small and you don't like that then you need to consider adding a Variant.

I would also consider Optimising all images and if you have the option, enable WebP images.

Acorn

Thanks Acorn, I will try these.

[trnhockey]

Thanks Acorn, I will try these.

Didn't work, still looks bad on smaller browsers. Is there anyone who can fix this thing so that it fits all browser sizes? If I send it to you thru We Transfer?

[Acorn]

Didn't work, still looks bad on smaller browsers. Is there anyone who can fix this thing so that it fits all browser sizes? If I send it to you thru We Transfer?

@trnhockey, if you had advised that there was an adaptive website, http://www.speakingofradio.com, that is stuffed with over 20 external JavaScript files and as many CSS files and that you wanted the sub-folder http://www.speakingofradio.com/Schad...overs_main.htm to be handled in a similar manner using an XDA then people might have had a better understanding of what you are after.

A Xara design using Variants will deliver a responsive presentation and to approximately match the main site, you will need a Main and two Variants.

"Didn't work" suggests to me you had not realised the enormity of the task or its solution.
If I am wrong then you need to detail every little 'not working' aspect that you have encountered.

This demo covers a single Main and Variant and the use of Stretch and Auto-fit to Page for the Footer bar.

CS Cons.xar

Are you taking over from Todd Nevel or will your work be integrated into his?
Currently I do not see how the Search will be handled by the XDA.

Acorn

[trnhockey]

@trnhockey, if you had advised that there was an adaptive website, http://www.speakingofradio.com, that is stuffed with over 20 external JavaScript files and as many CSS files and that you wanted the sub-folder http://www.speakingofradio.com/Schad...overs_main.htm to be handled in a similar manner using an XDA then people might have had a better understanding of what you are after.

A Xara design using Variants will deliver a responsive presentation and to approximately match the main site, you will need a Main and two Variants.

"Didn't work" suggests to me you had not realised the enormity of the task or its solution.
If I am wrong then you need to detail every little 'not working' aspect that you have encountered.

This demo covers a single Main and Variant and the use of Stretch and Auto-fit to Page for the Footer bar.

CS Cons.xar

Are you taking over from Todd Nevel or will your work be integrated into his?
Currently I do not see how the Search will be handled by the XDA.

Acorn

Hi Acorn, sorry, I obviously don't know what the heck I'm doing. I just had a web designer remake speakingofradio.com as responsive, the only area of the website was the Xara part for Digests ... http://www.speakingofradio.com/schad...s-1974-2005-2/ I spent the whole day yesterday redoing that area and now it looks good enough on desktops using iframes using my Xara pages. But, as I discovered when I was finished, it only created a whole new problem because now it looks like crap on mobile. So, I then created a mobile variant, and I'm fine with manipulating the 480 wide mobile pages, but I've discovered, it's not showing anything except the top of the page using iframes on the mobile variant. I don't know how to get all of the mobile iframe page to show. Do you happen to know??? Code for the iframe is ....

<iframe src="http://www.speakingofradio.com/Schaden_Digests/covers_main.htm" name="xara_iframe" scrolling="no" width="979" height="3542" frameborder="0">Your browser does not support iframes.

</iframe>

The Mobile variant page size is 480px by 2402px. On Firefox all I see is the first image on mobile, on Chrome I see the iframe only.

[Acorn]

You might be missing things as you are trying to fit a 979px wide page into an IFRAME width of less that 480px.
By hiding the scrollbars, what you see is locked in place.

I don't know why you are mucking about with IFRAMEs.

Acorn

[trnhockey]

You might be missing things as you are trying to fit a 979px wide page into an IFRAME width of less that 480px.
By hiding the scrollbars, what you see is locked in place.

I don't know why you are mucking about with IFRAMEs.

Acorn

I don't want to have to do all those pages again!