search

zeljkoprsa / waterlee-boilerplate

Magento HTML5 Responsive Theme Boilerplate
Creative Commons Zero v1.0 Universal
293 stars 102 forks source link

[Issues / Suggestions:] Canvas Slides - Width / Boarder / Positioning / Function #84

Open azeemism opened 9 years ago

azeemism commented 9 years ago

1). Minimum screen size is different on all three browsers tested (listed below in order of greatest overlap to least overlap:)

IE: v11.0.9600.17842 Firefox: 39.0 Chrome: v43.0.2357.132 m

2). aside.right-off-canvas-menu cannot be closed at minimum screen width on all three browsers tested above, because the toggle close arrow is overlapped and there is no scroll bar available. The addition of a scroll bar counters the use of a mobile friendly canvas slide so the recommendation is to set the minimum screen size to show the full canvas slide. The aside.right-off-canvas-menu width is 354.781px (see point 3 below)

3). Recommendation for minimum screen width & aside.right-off-canvas-menu width 320px. This would cover the minimum device width for iphone 3, 4, 5. (Ref _juice.scss from http://juicynex.us/juice/ )

4). aside.right-off-canvas-menu is positioned slightly too far to the right so the border is overlapped and cannot be seen.

5). Right and left canvas slides can benefit from a more similar appearance and positioning.

- Suggestion Position: Like the filter canvas the cart canvas should not move the logo or menu bar, this way both left and right menus slide in at the same level for a conformant shifting standard, knowledge of place or branding is always present with the logo never shifting, and access to the menu or top icons is always present.

- Suggestion Appearance: Once either slide is displayed, the visible left margin for the left-to-right slide and the visible right margin for the right-to-left slide should be visible by the same amount.

6). The canvas slide is a great idea/asset for mobile devices, but at some point on larger screens (non-mobile devices) the slide becomes distracting and loses its functional appeal. Just as the interfaces for the top menu bar or the search filter changes on larges screen sizes, so to should the aside for the shopping cart (aside.right-off-canvas-menu). IMO, the interface would benefit more through a switch from a canvas slide to a hover state when the filter canvas slide disappears at 768px. (Example menu and cart hover state: http://ultimo.infortis-themes.com/demo/default/women.html )

zeljkoprsa commented 9 years ago

@azeemism We are already working on some points. Thanks for the support!