31: Odd wrapping behavior as window and screen size decrease
Posted: 05 Dec 2014, 20:09
Hi Jools,
Here is a quirky behavior of the webpage, which I observe on my computer if I reduce the size of the open window (see pictures below) and which happens spontaneously when I view the webpage on my mobile phone.
First, with the old page, my experience was that the page needed a fixed width to display; if I were viewing it in IE or in FireFox, and if I reduced the window size, then the right side of the webpage disappeared out of view and I needed to use the horizontal scroll bar to view different areas of the webpage - this worked well because it preserved the visibility of the menu elements across the top and bottom of the page. This same behavior occurred on my mobile device, which compensated by allowing me to zoom in/out to see the missing areas of the screen as needed. That was good.
Currently, with the new page, what I'm seeing is this: in IE 10 and FireFox 34, as I reduce the size of the window, the web page elements are drawn into the center (as if some are left-aligned and some are right-aligned, and they try to preserve that placement as the window shrinks from side-to-side). As a result, the left and right side elements start to crash into each other (competing for priority),
(1) in some cases displacing each other and moving an element on one side of the page up or down to make room for elements on the other (e.g., notice how the species name search box moves down below the "My Fish, My Aquaria..." menu line),
(2) in some cases one element overlaps others (e.g., the top ad banner overlaps the PC logo),
(3) in some cases the elements get reduced from a list to a small icon which acts as a drop down menu (e.g., the menu "CotM, Cat E-Log,..." disappears and becomes a small drop down icon),
(4) and finally in some cases overlapping elements disappear (or seem to) entirely (e.g., in the smallest picture, all the quick links, notifications, etc are all gone).
These same behaviors are the default effects on my mobile phone since its screen is so small to start with.
Perhaps these are just the way the new code works, but it is distracting when the menus (are these what you're referring to when you say breadcrumbs?) disappear or get covered by other items.
Thanks for reading, and keep up the good work.
Cheers, Eric
Here is a quirky behavior of the webpage, which I observe on my computer if I reduce the size of the open window (see pictures below) and which happens spontaneously when I view the webpage on my mobile phone.
First, with the old page, my experience was that the page needed a fixed width to display; if I were viewing it in IE or in FireFox, and if I reduced the window size, then the right side of the webpage disappeared out of view and I needed to use the horizontal scroll bar to view different areas of the webpage - this worked well because it preserved the visibility of the menu elements across the top and bottom of the page. This same behavior occurred on my mobile device, which compensated by allowing me to zoom in/out to see the missing areas of the screen as needed. That was good.
Currently, with the new page, what I'm seeing is this: in IE 10 and FireFox 34, as I reduce the size of the window, the web page elements are drawn into the center (as if some are left-aligned and some are right-aligned, and they try to preserve that placement as the window shrinks from side-to-side). As a result, the left and right side elements start to crash into each other (competing for priority),
(1) in some cases displacing each other and moving an element on one side of the page up or down to make room for elements on the other (e.g., notice how the species name search box moves down below the "My Fish, My Aquaria..." menu line),
(2) in some cases one element overlaps others (e.g., the top ad banner overlaps the PC logo),
(3) in some cases the elements get reduced from a list to a small icon which acts as a drop down menu (e.g., the menu "CotM, Cat E-Log,..." disappears and becomes a small drop down icon),
(4) and finally in some cases overlapping elements disappear (or seem to) entirely (e.g., in the smallest picture, all the quick links, notifications, etc are all gone).
These same behaviors are the default effects on my mobile phone since its screen is so small to start with.
Perhaps these are just the way the new code works, but it is distracting when the menus (are these what you're referring to when you say breadcrumbs?) disappear or get covered by other items.
Thanks for reading, and keep up the good work.
Cheers, Eric