Print Page | Close Window

Ensuring existing website is mobile friendly

Printed From: openElement Website
Category:

openElement


Forum Name: openElement General Discussion
Forum Description: A place for general discussion and questions about the software.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1932
Printed Date: Apr 19 2024 at 9:26am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: Ensuring existing website is mobile friendly
Posted By: troy
Subject: Ensuring existing website is mobile friendly
Date Posted: Sep 17 2022 at 4:11pm
Hi everyone. 
I'm not sure if this is the correct place to post this question, I've not posted before.
I wrote a website using open Element several years ago when desktops were the main way to surf the net. Now most people search online on thier phones. The website does not view well on a phone. Is there a way to add or alter the existing OpenElement code for it to view better, without having to rewrite the lot from scratch. Please help. Thanks.


-------------
Troy



Replies:
Posted By: Hobby001
Date Posted: Sep 18 2022 at 11:20am
There are tools within OE to design a responsive WEB site.

You must learn some techniques to understand what it's all about.

I made some videos to help this process:   https://denislafrance.net/index.en.htm#formation" rel="nofollow - https://denislafrance.net/index.en.htm#formation



-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: Hobby001
Date Posted: Sep 18 2022 at 11:23am
Keep in mind that Media Edition is a feature that was added to allow a preview of your site on several devices.

You should add a link to your site to this post so we can see what level of work will be required


-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: troy
Date Posted: Sep 18 2022 at 12:19pm
Hi Hobby 001,
Thanks for your response.
I had a brief look at your tutorials and will look in greater detail later. They do appear to give instructions from building the site from scratch. Is there anything that can be done to an existing site? 
The site in question is http://www.juleshomevisits.co.uk. " rel="nofollow - www.juleshomevisits.co.uk.  ; I wrote this for my wife's business 5 or 6 yrs ago.im not very proficient in Web design, so please forgive my mistakes. Comments on how to remedy the display would be much appreciated. 
Troy 


-------------
Troy


Posted By: Hobby001
Date Posted: Sep 18 2022 at 5:51pm
Your site used an old static model

Responsive requires a totaly different approach.

You may be able to copy-paste elements from the old to the new site but idealy you will build a new site.


-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: troy
Date Posted: Sep 18 2022 at 6:19pm
Hi,
That's rather what I feared. 
That's what I will have to do then. 
Does the new OE version include responsiveness by default,  or do I need to enable something? 
Thanks a lot for your assistance.



-------------
Troy


Posted By: Hobby001
Date Posted: Sep 18 2022 at 6:50pm
Simply download and install OE 1.57 R9 from the OE site 

Then add the following patch  https://openelement.uk/Files/Other/update_openelement_fr.exe" rel="nofollow - https://openelement.uk/Files/Other/update_openelement_fr.exe

It's not possible to use one of the templates from the OE create site page  but OE keeps working


-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: webdesigner1
Date Posted: Sep 19 2022 at 5:05am
There is another option. 

Many sites used to, and some still do a "user agent" type detection then serve either mobile.yoursite or http://www.yoursite. " rel="nofollow - www.yoursite.  ;

You can just design a static 480px wide OE site as the mobile version and it works fine. 

Cloudflare has a built-in, and very easy-to-use user agent redirect type. 

You would simply add a mobile.yoursite.co.uk a record and build a mobile version of the site with the same content in a 480px wide format and use Cloudflare to redirect mobile users to said domain name. 


Posted By: Hobby001
Date Posted: Sep 19 2022 at 9:15am
Originally posted by webdesigner1 webdesigner1 wrote:

There is another option. 

Many sites used to, and some still do a "user agent" type detection then serve either mobile.yoursite or http://www.yoursite. " rel="nofollow - www.yoursite.  ;

You can just design a static 480px wide OE site as the mobile version and it works fine. 

Cloudflare has a built-in, and very easy-to-use user agent redirect type. 

You would simply add a mobile.yoursite.co.uk a record and build a mobile version of the site with the same content in a 480px wide format and use Cloudflare to redirect mobile users to said domain name. 

Let's say you use that and obtain a version for PC, a version for tablet and a version for phone ( I would consider that as a minimum).  Every change to the site will have to be done on each of the 3 versions.

If you build your site as responsive, a single change will be requied since this single site will adapt to every screen.


-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: webdesigner1
Date Posted: Sep 22 2022 at 7:16am
Yes, but the OP wanted to preserve his original template-style website and make a new mobile version. Since he can't really do that with the original site this is an easy stop-gap. 


Posted By: Hobby001
Date Posted: Sep 22 2022 at 9:57am
I agree with you but he will have to create a new version of his site for that therefore I would create a new responsive one anyway.

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: troy
Date Posted: Sep 25 2022 at 9:10pm
Hi, thanks to you both for your replies. I do understand the possibility of creating different versions of the site for different screens, but as you said yourself that would only serve as a temporary measure.
I have viewed the tutorial on adaptive website building created by Hobby001. It is I must admit too advanced for me to understand fully. I have followed the initial steps including adding the relevant SEO code to instruct the sizing dependant upon the viewing device. I set the default to 100% (full screen), and have created a mpre or less duplicate of my original websites homepage. When I preview it in default everything is fine, but if I click adaptive and tablet/ smart phone and preview that, much of the homepage from the right side is missing. Is this OK and will be sorted out when published, or have I got it all wrong? Is it supposed to view correctly? If i alter elements to make them fit on the tablet/ smartphone preview, they then don't display correctly in the default full width screen. As I have said initially I am like many on this forum a real novice and in need of constant guidance. I apologise in advance if I appear stupid, but I am uncertain of almost everything and don't want to remove a functioning website, if not adaptive , to replace it with something even worse.


-------------
Troy


Posted By: webdesigner1
Date Posted: Sep 26 2022 at 2:37am
You may want to review the OE wiki. It is currently only on wayback- it is linked in another post. 

At some point, we will bring it back here to functionality on an active server. 


Posted By: Hobby001
Date Posted: Sep 27 2022 at 2:26am
I am away, might be able to answer wednesday

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: Hobby001
Date Posted: Sep 27 2022 at 8:39pm
Originally posted by troy troy wrote:

Hi, thanks to you both for your replies. I do understand the possibility of creating different versions of the site for different screens, but as you said yourself that would only serve as a temporary measure.
I have viewed the tutorial on adaptive website building created by Hobby001. It is I must admit too advanced for me to understand fully. I have followed the initial steps including adding the relevant SEO code to instruct the sizing dependant upon the viewing device. I set the default to 100% (full screen), and have created a mpre or less duplicate of my original websites homepage.


What does mpre stands for?

Originally posted by troy troy wrote:


When I preview it in default everything is fine, but if I click adaptive and tablet/ smart phone and preview that, much of the homepage from the right side is missing. Is this OK and will be sorted out when published, or have I got it all wrong? Is it supposed to view correctly? 


Missing right side meand that all this content is not responsive.

Originally posted by troy troy wrote:

If i alter elements to make them fit on the tablet/ smartphone preview, they then don't display correctly in the default full width screen. As I have said initially I am like many on this forum a real novice and in need of constant guidance. I apologise in advance if I appear stupid, but I am uncertain of almost everything and don't want to remove a functioning website, if not adaptive , to replace it with something even worse.

May I suggest that you simply follow my video tutorial and make a new web site exactly as shown.  Doing this will make you learn how to create a responsive web site.  You will learn how things reacts when they are responsive.

Responsive means that:

  1. Page width will adapt to screen width, no mather the device used.

  2. Element will also react to different page width by

    1. changing width

      or

    2. hiding/displaying different content

      or

    3. be displayed a different way.

  3. Text size / content will adjust depending device.
If not done yet, take all required time to review each of these english video tutorial:   https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo



-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: Hobby001
Date Posted: Sep 27 2022 at 8:48pm
The other option is to get someone to do it for you.  You might have to spend some money for it but you will get the resulting OpenElement files that you will be able to edit  after.

Consider the following fact:  Web browsing is now mainly done trough cell phones and tablets.  Internet browsing by PC is gradually decreasing.

If your site is not responsive, customers will look elsewhere for services.

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: digizar
Date Posted: Sep 30 2022 at 2:38am
What does mpre stand for?

more LOL


-------------
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com


Posted By: troy
Date Posted: Sep 30 2022 at 6:48am
Sorry it was a typo. Mpre was meant to be more. In other words I had created a more or less copy of the original site. Nearly the same, but with tiny differences.

-------------
Troy



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net