WebSite X5Help Center

 
Stuart Y.
Stuart Y.
User

Newbie responsive design question?  en

Auteur : Stuart Y.
Visité 1919, Followers 1, Partagé 0  

Hello,Having a bit of a problem using Website X5 PRO 2020.1

Might seem a bit dumb,but how do you set up the breakpoints correctly to make the responsive design website load up on a mobile phone?I have followed the instructions(badly!) and not sure how to set it up.Ive used x5 pro 12 and the responsive design works great on phones,tablets etc.but Im not sure how to do it on x5 pro 2020.1.Any guidance appreciated.Thankyou.

Ive added screenshots.Please can somone tell me the correct way to do this?

Posté le
9 RéPONSES
Paul M.
Paul M.
Moderator

Hello Stuart,

The WebSite X5 Guide should tell you all you need to know:

WebSite X5 Guide - Responsive Web Design

But in particular please read this article:

How to set breakpoints for a Responsive Website

If you've got any specific queries after reading through those, please get back to us.

Basically you set up different 'viewports' for each 'breakpoint'  -  think of these as the various resolutions corresponding to smartphones, tablets, desktops, etc.

You need to tweak each viewport until you have it looking the way you want in Step 2 Template > Template Structure (and Template Content)

You don't need to alter your FTP settings in any way.  And the URL's for each of the various viewports are identical...  in other words, there aren't different URL's for mobile view, desktop view, etc.  -  The exception to this is if you use an Entry Page to detect the resolution automatically, in which case you should follow these instructions:

How to set up a redirection according to the device resolution

But it's perfectly possible to have a responsive website without doing that.

Kind regards,

Paul

Search the WebSite X5 Help Center

Lire plus
Posté le de Paul M.
Stuart Y.
Stuart Y.
User
Auteur

Hello,Thanks for replying.So when I edit the breakpoint do I need to put the URL as "http://example.com/view1"

or just "/view1"?Also when I uploadt to the server is the URL "http://example.com/view1" and destination set to "/htdocs/view1"?When I have previously uploaded my website the responsive design works great within the browser,but if I try to view on a smartphone,it just continually tries to load a blank entry Page.Regards,Stuart

Lire plus
Posté le de Stuart Y.
Paul M.
Paul M.
Moderator

I actually think your 'problem' is related to something completely different, Stuart.

I see a fully responsive version of your website if I visit the following URL:

http://nickwilsonlandscapes.com/home.php

(Two menus in the header, mind you, but we can sort that later!)

This suggests to me that your server is currently set to serve up the wrong default file.

Please ask Fasthosts to set up your Default Document to point to home.php

https://docs.microsoft.com/en-us/iis/configuration/system.webserver/defaultdocument/

Lire plus
Posté le de Paul M.
Paul M.
Paul M.
Moderator

Also, the old version 12 files are still on the server.  It would be best to remove these as they might cause further issues at a later date.

Lire plus
Posté le de Paul M.
Stuart Y.
Stuart Y.
User
Auteur

Thanks.That website your viewing was uploaded using version 12,not x5 pro.Thats why working.I uploaded a new version of the website  using x5 pro to "idealpaving.com" to test it.The responsive design works fine in the browser,but not on a smartphone.Regards,

Lire plus
Posté le de Stuart Y.
Paul M.
Paul M.
Moderator

Thanks for the new link.

The site at idealpaving.com is fully responsive when resizing the viewport on a desktop.

So try changing the following setting in WebSite X5:

Step 1 > Settings > Advanced > Entry Page...  either switch the Entry Page off, or if you require it then change the setting in the top drop-down menu from 'Detect the resolution automatically' to 'Show the Entry Page'

Reupload the site to the server, clear your browser cache, and test.

Lire plus
Posté le de Paul M.
Stuart Y.
Stuart Y.
User
Auteur

Thanks ,but Ive done that already.What I need to know is the correct URL entries for each of the breakpoints(Please see attached screens).Also when I am ready to upload,do I put in the destination folder part of the upload screen, for example,"/htdocs/view1"("view1" been the folder I have created within the htdocs folder on the server)?Also,when it asks for the website URL on the upload page,do I type "http://example.com/view1"?Huge apologies for my ignorance.Regards,Stuart

Lire plus
Posté le de Stuart Y.
Paul M.
Paul M.
Moderator

You only need to do any of that if you are determined to produce an adaptive website design as opposed to a responsive website design?

Are you sure you really want to do that?

An adaptive design is inferior to a responsive design in many ways.  See this article for a comparison between the two:

https://uxplanet.org/adaptive-vs-responsive-web-design-eead0c2c28a8

It's true that older versions of WebSite X5 concentrated on adapative web design, but the software has come on in leaps and bounds...  it would be a bad idea (IMHO) to restrict yourself to that sort of layout.

Stuart Y.
Thanks ,but Ive done that already.
It appears that the 'Detect the resolution automatically' setting is still active?  If you change the setting to simply 'Show the Entry Page' then there is no need to set differing URLs.

Also, there is no need to alter any of your FTP settings in any way, no matter what method you decide to use.  So don't edit any working settings in Step 5 at all.

Lire plus
Posté le de Paul M.
Stuart Y.
Stuart Y.
User
Auteur

Thankyou for your help,much appreciated.

Lire plus
Posté le de Stuart Y.