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
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 22:37
Ok, I see the issue,

The media query editor does not write the min width code

For example your criteria seems to be only screen and (max-width: 767px)  plus min-width: 600px.

But the editor provides only screen and (max-width: 767px)

You will have to manualy edit the code to change it into only screen and (max-width: 767px) and (min-width:600px)
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 23:12
To tell you the truth, I use to write the code directly in the editor, It's easier for me than relying on the graphical interface you just demonstrate that does not work 100%
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: 03 Août 2021 at 20:47
After trial and error over the last couple days, I got this page responsive to all my screen resolutions as listed in previous post and elements lined up in my dashboard.

I think the key concept goes back to the use of % for dimensions (as emphasized in many videos). It is also important to avoid using Min width based on pixels as it makes things harder to work with especially when the page is designed in columns (say, two with 20% and 80%). If this min px is smaller than the px size derived from the assigned % width, then the % value dictates the width (on large screens). When min px becomes dominant (on smaller screens), then the assigned % numbers (for multiple column widths) are of no use and can mislead you because the real % on certain screen size is then the ratio of min px and screen width resolution. At this point things start to shift around and you may wonder why they do not align as you expect (e.g. 20%-80%). I used this min width in px and it was one of the reasons that I had many difficulties in understanding responsive design in OE. This is not because of OE but it's on how things work. It tends to be overlooked during design.

Having said that, OE is not always WYSIWYG and is misleading. Its editor window does not reflect your media size even though it displays the pixel size. Also, the editor does not tend to auto update on every change, so a page refresh is needed to really see the effect. If not, it can be very misleading. I use Chrome developer Options (F12) to check overall display on specific display size and also online tool (such as whats-my-browser-size) to check actual width. I checked my page on some actual devices and they look very close to what being shown by these two tools.

I posed a question earlier on what OE Default media refers to (as some reference to proportionally lay out the structure for my dashboard). I thought it referred to my  monitor resolution (3840x2160) but I think it's the browser resolution. So I have been designing my page with 2048x1017 instead.

I still have many things to figure out with OE but overall, I think OE is a very good tool for someone like me to do responsive web page. It would be great to have tutorials to illustrate various responsive design concepts with respect to media resolutions, px, %, etc..and how-to's dealing with OE element property settings to help users reduce trial and error, if possible.

Thanks to Hobby001 for all your help.

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: 04 Août 2021 at 03:00
As I could see in your project, you have very specific requirements.

Only few individuals needs to work with such a resolution (3840x2160)

I don't thik that you can find something free for that.

Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany Frankfu
Status: Offline
Points: 654
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: 05 Août 2021 at 19:01
Yes, and it would cause a tremendeous amount of data accross the internet.
Which sucks a contingent away with the first image.
Despite a possblle very long download time.
The customer would definitively not be much excited.


Edited by digizar - 07 Août 2021 at 14:07
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf
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: 05 Août 2021 at 20:22
Originally posted by digizar digizar wrote:

Yes, and it would cause a tmendeous amount of data accross the internet.
Which sucks a contingent away with the first image.
Despite a possblle very long download time.
The customer would definitvely not be much excited.

In fact their requirement is for private internal network app
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: 06 Août 2021 at 19:31
It seems there is some misunderstanding on the reference to 3840x2160 resolution. And no, it was not my goal to design a Web page to this resolution (but only to popular screen resolutions based on 2020/21 statistics out there). This resolution was brought up as a way to figure out what OE 'Default media' actually refers to since we always work with Default media.

I used an online website that displays the browser resolution in Chrome. In its full size, the web tool shows browser resolution of 2048x1017 (sometimes it says 2048x1152) on my monitor which is set at 3840x2160. From what the page looks like (being close to what shown in OE editor and my design dimensions) in Chrome in full size, OE Default media seems to refer to the browser resolution and not the monitor resolution and I am guessing here. If you know for certain, please share what it is.

As mentioned earlier, I think it's good to know what it is so you can plan your page to have a 'good' proportion (maybe, width/height=1.618) as a start. My page is a dashboard with some logical groupings and I want to keep them as close to what I design on the Default media as possible for all resolutions.

Dashboard provides an effective (and popular) means for data visualization with tables, graphs, images, etc... It requires certain level of precision in laying out the Web page and it can be done with OE. OE is a good tool. It is just short on documentation, so a lot of guessing and figuring out to use it (at least for me anyway)... and still many things to learn as I go along with OE.



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.