search

epics-base / website

Issue tracker for epics-controls Website
https://epics-controls.org/
1 stars 0 forks source link

Layout for non-touch (non-mobile) displays #6

Closed dirk-zimoch closed 5 years ago

dirk-zimoch commented 6 years ago

The layout contains much empty space. I see that this improves usability for touch screens but it is annoying on non-touch screen devices, in particular on wide-screen laptops. There is a lot of vertical scrolling needed while at the same time there are huge empty margins left and right and the vertical size of menu items is much larger than useful for a non-touch display. Consider using @media (pointer: fine) CSS rules to make menus compacter for non-touch displays.

ralphlange commented 6 years ago

@dirk-zimoch: @keijokorhonen and @epicDirk were working on the layout, considering different screen sizes and devices. Please re-check and close the issue if things seem good enough now.

dirk-zimoch commented 6 years ago

I have the impression that several pages look more "compact" now, which is nice for wide viewports with little hight. Maybe the top menu and the footer could still be made more compact in the vertical direction. At the moment, the top menu is more than 6 times as high as the actual text in it. The same with the spacing inside the drop-down menus.

epicDirk commented 5 years ago

Yes dirk zimoch the menu and the banner take to much space (content is king!). The banner has at the moment aspect ratio of 1272:251 (2544x502 pixel). I will broaden (expand to left and right) the banner. My goal is aspect ratio of 48 : 5 (3840x400 pixel). Because i don't want to simply crop the picture i have to add additional content to the left and right for all the 7 banner of the website. The result will be that the banner is in height much slimmer. Further on i will try to increase the resolution of the banner so it will not look blurry on 4k screens and is more future-proof.

epicDirk commented 5 years ago

the first two banner are done but the typographic is not done: HOME ABOUT work in progress =)

dirk-zimoch commented 5 years ago

When changing the window width, maybe you want to clip the banner left and right instead of shrinking it with constant aspect ratio. There is not much "content" on the sides of the banner, so it would look nicer to keep it centred with constant height.

epicDirk commented 5 years ago

good idea! it will look fine around 40% of cropping. if u crop more than that it will look ugly. Because the cubes need some space around them to look impressive. I have to talk to keijokorhonen about the scaling and cropping on how we can combine both method's with certain limits.

CONTACT NEWS EVENTS

epicDirk commented 5 years ago

RESOURCES SUPPORT LOG IN

epicDirk commented 5 years ago

PROJECTS

ralphlange commented 5 years ago

The link labeled PROJECTS points to a file named USER. Which one is correct?

epicDirk commented 5 years ago

The link labeled PROJECTS points to a file named USER. Which one is correct?

its just the file name it will be projects

epicDirk commented 5 years ago

This is my suggestion of the new Layout with the wide banner and compressed space: picture and gif animation

The format of the Screen was: 2560 × 1440 pixels in a 16:9 aspect ratio also called: QHD (Quad HD), WQHD (Wide Quad HD),or 1440p

All banners are now finished in the wide format. 4k in width. The next step would be now to integrated them in to the webpage and adjust the Webpage according to the compressed layout.

The vertical format we chose for the webpage has advantages: -works better on vertical screens -has more conservative look like a dina4 page -the design is easy to control because it is restricted in width

but also disadvantages: -empty-space

PROJECTS with Typo and New Flags i added the flags of pakistan, iran and portugal

epicDirk commented 5 years ago

personally i browse the internet like this and there the EPICS webpage works even in the current state quite well (2560 × 1440 pixels in a 16:9 aspect ratio)

ralphlange commented 5 years ago

Personally, I browse the internet like this so I am on DIN A4 ...

Maybe the extra space could host some otherwise useless EPICS advertising, like a random user quote or catch phrase. ("7 is so much more than 3 + 4!") Such an wide-screen extra would be suppressed on the narrower screens.

epicDirk commented 5 years ago

i would like to leave it empty. Important information needs some negative space.

epicDirk commented 5 years ago

Here are the 21 New Banners. How to integrated them are described in this picture

keijokorhonen commented 5 years ago

The new banners are now in place and display the appropriate banner for small, medium and large sized screens using the srcset and sizes attributes on the HTML img tag.