BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - How to design responsive page for various media
  FAQ FAQ  Forum Search   Register Register  Login Login

How to design responsive page for various media

 Post Reply Post Reply Page  <123>
Author
Message
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Juil 2021 at 05:28
I guess there is no direct image paste to post here, but through link. Let me try this (as in your way).



Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Juil 2021 at 05:37
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Juil 2021 at 12:20
To post an image go to the full replay editor


Then insert image 



The image must be hosted on the WEB


Edited by Hobby001 - 29 Juil 2021 at 12:22
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Juil 2021 at 12:24
Can I get a link to your page?

If not done yet, try adding this to SEO Info and Medias?

user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1



Edited by Hobby001 - 29 Juil 2021 at 12:33
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Juil 2021 at 18:05
My page does not have that viewport meta but that declaration may not be helpful because users may need to zoom, especially on phones.

This is not a Website on the internet so I need to prepare the pages and provide you the link via your website contact form. There, maybe you will see the issues I am facing. 
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 29 Juil 2021 at 19:09
My questions so far have to do with my lack of understanding of the 'concept' of how responsive design is implemented in OE, so my question is:

Is the responsive design concept in OE based on:

1). WYSIWYG?
2). Element hide/visible setting?.
3). Both of the above, maybe with exceptions

For 1), I do not think it is true because change in one media ripples throughout. This may be because I do not do things in the right way? (and I hope this is the case).

For 2), I have not tried yet but from the tutorial videos, it looks like you either show or hide elements on specific screen size so they look proper. Effectively you would have multiple copies of the same element on a page and selectively show or hide it depending on the screen size.

For 3), maybe 1) is true except certain properties that inherit from parent pages

I hope the above makes some sense and relatable. Knowing the concept helps avoid senseless trials and errors. Thanks.



Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5718
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 30 Juil 2021 at 05:57
Originally posted by TC2020 TC2020 wrote:

My questions so far have to do with my lack of understanding of the 'concept' of how responsive design is implemented in OE, so my question is:

Is the responsive design concept in OE based on:

1). WYSIWYG?
2). Element hide/visible setting?.
3). Both of the above, maybe with exceptions

For 1), I do not think it is true because change in one media ripples throughout. This may be because I do not do things in the right way? (and I hope this is the case).


They stopped trying to make it 100% WYSIWYG when the number of screen size and resolution grew too fast.

You rely on previsualisation on browswers to control what you have done  <F12> in Chrome offers some possibilities

Originally posted by TC2020 TC2020 wrote:


For 2), I have not tried yet but from the tutorial videos, it looks like you either show or hide elements on specific screen size so they look proper. Effectively you would have multiple copies of the same element on a page and selectively show or hide it depending on the screen size.



Never needed to double an elemement, simply used media edition properly to reconfigure the element.

Hiding and display elements is required sometime for other reasons.

In the responsive menu tutorial it is hidden on smaller devices and replaced by the "hamburger" button used to call (display the menu)  The menu items are then reconfigured for finger accessibility on these smaller devices.


Originally posted by TC2020 TC2020 wrote:


For 3), maybe 1) is true except certain properties that inherit from parent pages



By parent pages, y ou meant layers I guess

Originally posted by TC2020 TC2020 wrote:


I hope the above makes some sense and relatable. Knowing the concept helps avoid senseless trials and errors. Thanks.


If you could zip a copy of your project with some pages not necessarily the whole project I would be in a better position to understand what you have done.

Just send me the link trough WEtransfer.com  they can generate a lnink that you can send me trough my contant page: https://denislafrance.net/index.en.htm#Contact


Edited by Hobby001 - 30 Juil 2021 at 06:00
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 30 Juil 2021 at 17:57
WEtransfer.com asks for recipient's email address and I do not know yours. I already sent the link through your contact form. Please check.

As mentioned, this is not an internet website but for a device. To access it, I would need your IP address to open its firewall for you. Also mentioned, you can send me your IP via my email in your contact form or via pigeons...

Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 30 Juil 2021 at 18:19
I do use Chrome to check my page. I set it to include all my screen resolutions above.

In case someone wants to know...

This is done by clicking the 3 vertical dot button at top right hand corner of Chrome. It opens up a menu. Click on More tools ->Developer tools. This opens up a window which you see 'Responsive' at the top. Click on that and drop down to 'edit...'. In that new panel, I entered all my resolutions and their labels with prefix such as Ax, Bx, Cx (x=[0..N]) for desktops, tablets, phones. This way, the drop down list will list the resolutions from large to small in proper order (so it's faster to check your page in going down the list).

With all required resolutions pre-defined, it's quicker to check the page. Otherwise, it's very tiresome from the process.


Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 30 Juil 2021 at 20:00
I already sent you the WEtransfer link to the source file. Please check.
Back to Top
 Post Reply Post Reply Page  <123>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.