BullGuard Antivirus Sale - 60% Off with openElement !
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: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Topic: How to design responsive page for various media
    Posted: Jul 26 2021 at 9:31pm
I would like to know how to layout a responsive web page that would display properly on various screen resolutions. I am seeking both general design concept and OE how-to's.  

My page is a dashboard type, designed primarily for large screens but it has to display properly on smaller screens too:

1). On large screen, the page should look like having 3 columns. The left column has 4 'boxes' in vertical arrangement (4x1), middle column with 10 boxes (4 rows arranged in logical groups as 1x3, 1x3, 1x2, 1x2), and the right column with 3 boxes (3x1).

2). On small screens (smart phones), the page displays all boxes in 1 column (17x1)

3). On medium size (tablets/laptops), the page displays boxes in mixed format depending on the screen size. This can be a single column for boxes inside left column and right column. For the middle column, the boxes can be either in single vertical or (1x3, 1x3, 2x2) or other arrangements as long as it is legible.

I started out with creating 3 containers for these columns with proportional % widths, all in relative mode. With this and when the browser resizes slightly, the overall look changes significantly and the box groupings no longer look logical as intended.

I decided to change to left container and right container. Left container is still the left column while the right container now contains both the middle and the right columns. The widths are 30% and 68% respectively. With this layout, the display appears to retain that logical groupings as the browser resizes.

I first used the OE 3 default media found under Page/Responsive/Edit medias to edit my page to fit those medias. What looks to be proper on the editor for Smartphone does not really display properly on my smart phone; e.g. a singe line text label appears as two lines on my phone and the input text box goes to the next line instead of on the same line. I assume this has to do with my phone resolution and the default responsive breakpoints set by OE medias. 

This lead me to gather information from reports on popular screen resolutions. I tabulated those responsive breakpoints along with min-max pixels to apply to OE (Page/Responsive/Edit medias/Ajouter/modifier un media), as follows:

3840x 2160    Desktops: 3840 - 4095
2560×1440    Desktops: 2560 - 3839
1920×1080    Desktops: 1920 - 2559
1680×1050    Desktops: 1680 - 1919
1600x900    Desktops: 1600 - 1679
1536×864    Desktops: 1536 - 1599
1440x900    Desktops: 1440 - 1535
1366×768    Desktops: 1366 - 1439
1280×720    Tablets: 1280 - 1365
1024×1366    Tables: 1024 - 1279
800×1280    Tablets: 800 - 1023
768x1024    Tablets: 768 - 799
600×1024     Tablets: 600 - 767
414x896        Smart Phones: 414 - 599
375x812        Smart Phones: 375 - 413
360×640        Smart Phones: 360 - 374

For this dashboard page, I am going to layout the page to support all breakpoints above one by one. For other pages (and there many), I may just use some representative breakpoints. Here are the questions:

1). The min-max pixel range definitions in OE Edit media/Display in editor tab appear odd (0-480, 481-767, 768-1199). I understand these are defined as consecutive steps that browser switches to when it resizes. Should the range mins be the desired breakpoints (as I listed above - 360, 375, 411, etc..) since the editor shows the min size width?.

2). Following on the above, is it true if what looks proper in the editor should appear in the same format up to the defined max px screen?. e.g. a text label and input box on the same line on the min px screen will be on the same line on all screens up to the defined max px screen?.

3). Does the editor show representative or very close to actual look of what to be displayed on an actual screen?. How do I test/emulate this?.

4). My page is now designed for big screen. To fit in smaller screens I have to move things around. Will the change made for one screen size affect other screen sizes?. What things should I watch out for?. My page is now at 30% and 68% for two containers. How should I change those for smaller screens?. Should I move the boxes out of containers to fit the new screen?.

5). Is there a way to tell browser to use the specific breakpoint layouts instead of resizing it when the resolution is in the min-max range?.

6). Does OE keep inheritance (if yes, what properties and any exceptions) among screen resolutions or it simply follows what being designed in each?.

What are your recommendations to handle the design requirements above?.
Thank you!.




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

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 27 2021 at 1:32am
You can express width in % or fixed size

You can use Media Edition to change size according to screen size

You can create your own media size int Media Edition

You can strategically group elements to make them react properly to screen size.

You can express text size in em units

You can use media query CSS code

In some cases OE does not display the exact result and you have to use a browser to see it.



Edited by Hobby001 - Jul 27 2021 at 1:46am
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 27 2021 at 1:13pm
Originally posted by TC2020 TC2020 wrote:

1). The min-max pixel range definitions in OE Edit media/Display in editor tab appear odd (0-480, 481-767, 768-1199). I understand these are defined as consecutive steps that browser switches to when it resizes. Should the range mins be the desired breakpoints (as I listed above - 360, 375, 411, etc..) since the editor shows the min size width?.

They were defined to fit devices such as standard screen,  1920 x 1080, tablets and cell phones.  You can create as many as you want


Originally posted by TC2020 TC2020 wrote:

2). Following on the above, is it true if what looks proper in the editor should appear in the same format up to the defined max px screen?. e.g. a text label and input box on the same line on the min px screen will be on the same line on all screens up to the defined max px screen?.

If you absolutely need to maintain the two elements on the same line, you will need to resize them on smaller devices.  The Media editions are there to make it easier for users.  To be more precise you should use CSS media queries 


Originally posted by TC2020 TC2020 wrote:

3). Does the editor show representative or very close to actual look of what to be displayed on an actual screen?. How do I test/emulate this?.

There are sites available for that such as this one: https://responsivedesignchecker.com/


Originally posted by TC2020 TC2020 wrote:

4). My page is now designed for big screen. To fit in smaller screens I have to move things around. Will the change made for one screen size affect other screen sizes?. What things should I watch out for?. My page is now at 30% and 68% for two containers. How should I change those for smaller screens?. Should I move the boxes out of containers to fit the new screen?.

Well, you should plan for all the desired situation and use media queries or media edition but you will seriously have to plan.  Unless you use screen related dimensions like % for elements other than text and em for text but em does not display on editor


Originally posted by TC2020 TC2020 wrote:

5). Is there a way to tell browser to use the specific breakpoint layouts instead of resizing it when the resolution is in the min-max range?.

Media queries / media editions creates screen ranges that the browser will use to display elements

<F12> in many browsers such as Chrome offers some possibilities


Originally posted by TC2020 TC2020 wrote:

6). Does OE keep inheritance (if yes, what properties and any exceptions) among screen resolutions or it simply follows what being designed in each?.

Inheritance comes from HTML concept OE simply use it

Originally posted by TC2020 TC2020 wrote:

What are your recommendations to handle the design requirements above?.
Thank you!.

It seems like you are somone who can study and learn from experience.  You should seriously study CSS to be able to handle all your specs.  CSS allow to control not only sizes but also animations.

You may aso take advantage of javascript programming.

You can search the net for all sort of tips and tricks.  (that's how I learned)



Edited by Hobby001 - Jul 27 2021 at 1:16pm
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 27 2021 at 5:43pm
Before posting this thread, I created all the responsive breakpoints as I listed above with min and max values as well as media query modification in the code box (e.g. only screen and (max-width: XXXpx)) via Page/Responsive/Edit medias.

I also experimented with many of these breakpoints by rearranging elements on my page to fit in specific screen sizes. In doing so, I found certain changes for specific screen do have effect on other screens. Most of my elements are defined using % and they look right on large screen. If I increase this % for certain element on a smaller screen, this also reflects back on the large screen (it's not desirable and basically I was going around in circle). This lead to my many questions in this post to get better understanding on how OE works in this situation, such as inheritance or WYSIWYG per individual screen layouts. My page has boxes for tables, boxes for graphs, boxes for text, as well as images that I would like to maintain their logical groupings.

I will continue experimenting with different arrangements and see how they fit.

W3 is my go-to for various tips and I will look into media queries in more details. I assume the code box does not need "@media" but only "only screen and (max-width: XXXpx)" as shown by the default settings already there.

Thanks for taking time to respond.


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

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 28 2021 at 2:10am
You can define a range instead of a max

only screen and (min-width:100px) and (max-width:200px)


Edited by Hobby001 - Jul 28 2021 at 2:10am
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 28 2021 at 11:27pm
I have a text box with text set to large/18px font in my Default media view. When viewed the page on an actual laptop with 1366x768 resolution, this text appears relatively big. I changed this text to 14px font via OE Page/Responsive/Edit medias/Desktop 1366 (my breakpoint for 1366px-1439px screens). I just want to apply this change to this screen breakpoint only. However, OE also applied it to Default media as well as the rest of screen breakpoints.

What did I do wrong and how to correct it?. Thanks.


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

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 2:54am
Can you copy / paste what you enterred in Media Edition?
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 3:20am
How do I attach an image to this post, so I can show you the screenshots?.





Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 3:25am
What is Default media based on?. Is it my monitor screen resolution that OE reads and uses for it?.
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: Jul 29 2021 at 4:13am
Below is what I entered in OE Page/Responsive/Edit medias/Ajouter modifier un media/Configuration of medias boxes according to the headings below:

Name of the media          Code                    Min-Max Width       (Resolution)
=================    ====                    =============    ============

Desktops 3840        only screen and (max-width: 4095px)     3840 - 4095    3840x 2160
Desktops 2560        only screen and (max-width: 3839px)     2560 - 3839    2560×1440
Desktops 1920        only screen and (max-width: 2559px)     1920 - 2559    1920×1080
Desktops 1680        only screen and (max-width: 1919px)     1680 - 1919    1680×1050
Desktops 1600        only screen and (max-width: 1679px)     1600 - 1679    1600x900
Desktops 1536        only screen and (max-width: 1599px)     1536 - 1599    1536×864
Desktops 1440        only screen and (max-width: 1535px)     1440 - 1535    1440x900
Desktops 1366        only screen and (max-width: 1439px)     1366 - 1439    1366×768
Tablets 1280        only screen and (max-width: 1365px)     1280 - 1365    1280×720
Tablets 1024        only screen and (max-width: 1279px)     1024 - 1279    1024×1366
Tablets 800        only screen and (max-width: 1023px)     800 - 1023    800×1280
Tablets 768        only screen and (max-width: 799px)         768 - 799    768x1024
Tablets 600        only screen and (max-width: 767px)        600 - 767    600×1024
Smart Phones 414    only screen and (max-width: 599px)         414 - 599    414x896
Smart Phones 375    only screen and (max-width: 413px)         375 - 413    375x812
Smart Phones 360    only screen and (max-width: 374px)         360 - 374    360×640

Going from 360 up, each breakpoint is separated by 1px from the min width of the next higher breakpoint. I decided to use the popular resolution as the min width (e.g. 360, 375, 411, etc...) and lay out my page to fit this min width, thinking that it will fit properly in anything higher in the range. So far this proves to be correct.

As mentioned earlier with a text box example, my change in one breakpoint applied to all breakpoints including Default media. I hope it will not, and it's just my own doing or lack of. Otherwise I would be just going around in circle to fix something and break others. I am going to watch your tutorial videos again wrt changes in OE tablets/smart phones medias.

Thanks for all your help so far.


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 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.