How to design responsive page for various media |
Post Reply | Page 123> |
Author | |||||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
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!. |
|||||||
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
||||||
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 |
|||||||
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
||||||
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
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
There are sites available for that such as this one: https://responsivedesignchecker.com/
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
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
Inheritance
comes from HTML concept OE simply use it
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 |
|||||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
||||||
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. |
|||||||
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
||||||
You can define a range instead of a max
Edited by Hobby001 - Jul 28 2021 at 2:10am |
|||||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
||||||
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. |
|||||||
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6194 |
Post Options
Thanks(0)
|
||||||
Can you copy / paste what you enterred in Media Edition?
|
|||||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
||||||
How do I attach an image to this post, so I can show you the screenshots?.
|
|||||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
||||||
What is Default media based on?. Is it my monitor screen resolution that OE reads and uses for it?.
|
|||||||
TC2020
Groupie Joined: Mar 26 2020 Location: Canada Status: Offline Points: 61 |
Post Options
Thanks(0)
|
||||||
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. |
|||||||
Post Reply | Page 123> |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |