Client wants this website "full width". How?

Hi,
Hope everyone is well in these trying times. After theater took a hit due to Covid, my client wants to plan a production for this spring and wants changes to her website. I can handle the changes she wants except for one. She wants the same website to fill the width of the screen. She is happy with the mobile version (shrink screen width to see it). The desktop version needs the background to disappear and the main part to go to the width of the screen.

Thanks for the help

John

http://headwalltheatrecompany.org/

Quote:

---

Originally Posted by craftech

Hi,
Hope everyone is well in these trying times. After theater took a hit due to Covid, my client wants to plan a production for this spring and wants changes to her website. I can handle the changes she wants except for one. She wants the same website to fill the width of the screen. She is happy with the mobile version (shrink screen width to see it). The desktop version needs the background to disappear and the main part to go to the width of the screen.

Thanks for the help

John

http://headwalltheatrecompany.org/

---

Something like this?

Attachment 127998

Here's an idea - there will be may variations for sure though.

1. Set the page width to (say) 1200px for the desktop

2. Use Web Stretchy (Full width) for the theatre image (looked OK on a 4K screen)

3. Create a header background banner (grey rectangle stretchy full width)

4. Maybe place your logo just off the page, make it sticky, and it will sit on the left-hand side of the browser window

5. Rearrange your content across the 1200px width page

6. Assuming you have v16.3 or above use Utilities/Export Options/Scale-to-fit-Width (set the maximum around 1400px) - this should give you a smooth transition from desktop to mobile.

Hope this helps with the thoughts.

Gary

John, from the top:

Orange bar - Stretch to width.
HTC - five styles! - Bold, Italic, Regular and two spurious non-breaking space.
Social icons - drop onto the same line as the NavBar.
Top bar - make Sticky and set the backdrop and indents to Stretch to width.
Splash image - Stretch to width, fixed at Top.
Page shadow - remove.
Pasteboard background - change colour to blend with menu bar.
Next Up - make White and align with Theatre and on top of the dark areas in the splash image.
Faces - square off to the same size, strip off border (Lesley) in the same style as the Past Performances images.
White base - lose all that white with a lighter shade of the background instead.
Subscribe page - restore menubar and splash and edging.
Footer - add one that balances the page top as in the News page.
About page - there is a difference between a Message and a CV. Titles should all be in the same position

Mobile - Past Performance page - there is a coding problem here as it is skewed to the left.

Up the page width to 1240px and refit the material.
In Web Export Options, up the max scaling to 1600px.

Acorn

Personally I'm not a great lover of full screen width websites and I'd attempt to dissuade the client from such a course. That said, if they insist it's easy in Xara using the fairly new Web Properties / Website / Other / Web Export Options / Scale to Fit Width.

There are advantages using this method as on PC's if the browser is at a minimised size the site is still presented wholly within the browser.

There are also disadvantages in that the screen renders at full size before a slight delay of rendering it to fit the browsers size. A further disadvantage is that due to the scaling of images up beyond their native resolution they can become very pixalated although this can be overcome at the cost of increasing image filesizes.

I agree with all of Gary & Acorns advice re using stretchies and limiting the total page width. This is just a demo to show it can be done.

I attach a mock-up .xar of your site at fit to width with + a mobile variant.

DEMO

Hello to all,
I am sorry I haven't responded to these suggestions yet. I am up to my ears in issues at home. I didn't want you to think I was taking any of your time and sincerity for granted. Thank you all. I will get to this soon.
Regards,
John