MAIN SITE - DESIGN - The size of the font and the boxes are too big

[Brume-AL]

I'm connecting at work and I guess most of the elements of the website are too big. My zoom setup is on 100% and I use 1920x1200 rez. Have the same issue at home. Perhaps we could reduce the size of the fonts in the menus and reduce some boxes, too? See files attached.

[stgraveyard]

Bruno,

I don't understand. Screenshot one is the website viewed at 100% (1920 width). Screenshot 2 is either zoomed or viewed at a wider resolution, right? Also, what do you mean with the position remark? I don't see it...

[Brume-AL]

On screeshot 1, the website looks like I zoomed too much, but i didn't change anything, it's 100% display. I mean, it looks like I'd activated the accessibility option in Windows, which I didn't. On screenshot 2, I reduced the display in the browser twice. Have just pressed twice [CTRL] + [-] in Firefox and it looks better to me.

[stgraveyard]

Wow, that really is a sensitive thing for me :-)

You see, the second view, where you reduced the view, that is the way the site will look when the resolution becomes larger than 1920 px wide. Because our site contains info, I thought it would look best to have the width fixed to 1920 px, else we could make like 4 columns or something, but that would become a mess. So to make it all a bit nicer, I've added the Bees in the background, so it doesn't look as fixed as it is :-)

Now, this all being said, to me, the new AL looks the best at 1920, filling the complete screen. However, I have never worked on a fance apple monitor with a ultra hd resolution of 4000+ px. To me, AL looks optimized for 1920 px, while to you it looks like the accessibilty options are activated. This is very painfull :-D How are we gonna solve this matter @Brume-AL . As this layout hasn't changed in over a year ...

[stgraveyard]

The easiest solution here would be to make the text in the buttons a bit smaller, to fit you taste more. Would that solve the issue? Or do you want the black bars on the side as well in 1920 px?

[Brume-AL]

I didn't want to offend you, my mate. Hope I didn't ;) I see what you mean with the ultra hd monitor, but I wonder how many persons will be concerned in the next months (or years) by this resolution. I remember we found an URL which displays some stats about resolutions used on the world wide web, did you keep it? I have nothing against black bar in 1920 px. Most of the greatest websites still use black or white bars on the right+left. See The Verge, BBC News, etc. Also take a look at this website : http://www.macg.co/ (French, sorry). It's an expert in Mac computers and it's still use bars.

[stgraveyard]

I understand what you mean, but I will leave this up for the team before changing that. Reducing the site this way means it will be less optimized for future higher resolutions. I don't think this macg site looks good, on the contrary, I think it is in need for an update in the near future, because it has empty gray spots on the side. I personally thought it was a cool feature for the new AL to take full use of the 1920 width, as you don't see that much (or never). But maybe that is because it looks bad? Could be ...

I'm not saying I don't want to change it, but we should think this over really good Bruno, as this is the core of the design ... And as you can see by using the zoom, once we are in 2018 and everybody uses ultra high def mac screens, AL will look even better (for you) than it does today ... ;-)

[DWetherilt]

LOL - so the answer is, buy a Mac! :)

[stgraveyard]

I have been thinking about this and it is really starting to concern me. Changing this and the effect it has on all the build in hotspots for the responsiveness for lower resolutions, I don't know what effect it will have on that. Anyway, adding black bars on the side will certainly break my heart ... for a few weeks, but again ... I will follow the majority ...

[stsilversurfer]

Ok, so I have been avoiding this topic because I know @stgraveyard will cry but yeah, I agree with @Brume-AL

On the cellphone and tablet I think it looks good going 100% wide but on the desktop I find it looks better with some space on the sides.

[stgraveyard]

No problem guys. When I am back on the main site we will come to a good solution. I just want to add the following. Who of you has worked on a 4:3 monitor in the last 10 years? We are all IT guys. Most game fans, especially retro fans, are IT guys of some sort. Our public is IT guys in one way AL or the other. This crowd mostly has decent hatdware. So, that being said, i would find it really stupid to build a site that is dated in that respect. I don't understand why we would optimize for current hardware. Hell, Isee 4k monitors poppin up, special wide game monitors. Just think about it...it will be another few months before the cpanel ( us ready and we start again on the main site. I will ofcourse follow the majority on this matter...

[stsilversurfer]

I don't have a 4K monitor so I don't know what it looks like in that resolution, is it not 100% wide? If not, why do we have a different design on that size? Though if none of us has a 4k monitor it would be difficult to design for that.

[stefanjl]

I was thinking like Brume the first time i saw the new AL... it really looks big and i thought this was because it was optimised for mobilephones, but when i checked with my phone so did it seem to autodetect i was viewing AL using a phone as it said "Mobile" at the top... so i guess it is possible to have a more optimised version for desktops also? It looks like lots of empty spaces can be shrunk to make it more compact without loosing detail... the menubar buttons can be halfsize in height (only for Legacy skin) and so can the top picture... just some examples. I started using HD monitor for about 3-4 years ago :) And i noticed almost none webpages are optimised for full HD 1920x1080... they were either having lots of empty space to the left and right or they were to wide (the wideness made most forums difficult to read) so i used the taskbar to the right and made it wider... i also use the taskbar for shortcuts to programs i use a lot, webpages usually just fill the left and right with lot of ads if they want to call it optimised for HD, most common is of course just empty space to the left and right, like Github for example as you can see :)

It is of course correct to optimise the webpage to a standard... in this case HD standard (1920x1080) the next standard is 4K ( 3840x2160)... too bad no one seems to have an 4k monitor to check it out as i am curious how it looks like.

Here is a pic of how AL looks on my setup... and also this pic show a bug i noticed when pointing the mouse cursor to the questionmark circle... the text in the box is cut to the left side... it happen on other parts of the AL and not only in demo menus (i use chrome) http://www.ym2149.com/al_2.jpg BTW how do post pictures at github? and the links i do dont seem to work for me?

And here is a picture when i use firefox and have reduced the size to 80% http://www.ym2149.com/AL_80percent.png I like that the search field to the right is always visible this way :)

This is a difficult subject to discuss, i have no designing skill... or at least no education for it. But i do of course have opinions :)

[stgraveyard]

Hello Stefan,

The way it works, the AL website does not track hardware or browsers (most of the time) but WIDTH. So when the width is lower than eg. 600px, we switch to mobile or tablet. I have enhanced the site for all most common resolutions right up to 1920 width (Full HD), which in my book, looks the best. So in other words, when you place your toolbar to the right of the screen, you are not using the full 1920 width, and you get a more 'downgraded' version of the layout. It is funny you say 'we could also optimize AL for desktop', because, like you also noticed, most websites out there optimized for full HD have whitespaces to the left and right. Meaning that for my part, AL is the most optimized website for FULL HD ON THE PLANET! ;-) Now, if you like this or not, that is of course something else. But as you can see, this thread is still open and I know @Brume-AL wants AL with the empty parts on the sides. I looked into this 2 months ago, but it wasn't an easy fix. Also because I have been spending days, weeks, months testing in all resolutions and when I change the core width, I need to test every single page again in every width. I just couldn't do that before release 1. So what I am planning is making some kind of 'widescreen' option, that would switch AL to the way it is now, and a 'normal' version, which turns AL in a site with blanks on both sides. And I want to provide the option that users can save their favorite setting. Anyway, I have been working on a full HD laptop for 2 years and since 2 months I have a full HD desktop and I think it just looks awesome. Everything on the screen is filled with info. But that is just my opinion and I am biased, as I have been looking at this design for the last 3 years (shit, it has already been 3 years!!!).

anyway, I love your opinions, keep them coming and keep in mind that in both pictures you have sent, you are not looking at a full hd version of the site!!!! When has a toolbar to the side making the width lower than 1920, the other is reduced to 80%. When you go to full width, you get more graphics in the top border! (CHECK IT OUT).

[stgraveyard]

Oh, and on a 4K monitor you probably get black borders with 'BEE' watermarks in the background as seen on the second screenshot posted by Bruno above.

[stefanjl]

I checked how Atarilegend would look in 4K using the DSR function of Nvidia drivers... it is mainly supposed to be used for games but works in desktop also.

Here is AL 4K in Chrome (100% scale): http://www.ym2149.com/atarilegend_4k_chrome.png

And here is AL 4K in Firefox (100% scale): http://www.ym2149.com/atarilegend_4k_firefox.png

[stgraveyard]

Thanks for sharing. The first pic in chrome is as expected. Very cool to see. The one in fireforx is definitely not 100% scale, as the search field is gone. It seems Firefox does an automatic upscaling, but since you have the bar on the side, it is not the full width of 1920 upscaled px?

Very interesting to see!

[stefanjl]

Both are 100% in scale but as you noticed so does firefox do some sort of automatic upscale, and since i have a wide task bar so is not the search field visible and it practically looks just like in 1080p.

[stgraveyard]

Indeed Stefan, great to see this. Well, the bar on the side does make a difference, but it is up to you to decide if you want it or not. If you have full width of 1920px, you will see 'tentacles' in the top art and a search field.

I really like it that firefox does autoupscaling. You can do the same thing in chrome by zooming in, I guess...

[nguillaumin]

Personally I like it as it is, for once a website that takes full advantage of my 1920px monitor rather than waste space :+1: . I'm actually amazed by the amount of work that went into the responsive design :astonished: to make it work well across a range of resolutions.

I would perhaps just had very slim left & right borders (like 10px/20px large) to avoid for the boxes to be too close to the screen edge, I think that could feel a bit more natural. For example:

That would also balance it nicely with the existing spacing between the boxes.

[stgraveyard]

Thanks Nico, this means a lot to me. As a NOOB developer (I didn't toch any php code or HTML in the last 10 years), it was a lot of hard work to make everything as responsive as possible. I hope to show you the other skins at one point in time as well. As I created and tested over 3 skins.

Thanks!

I also think AL completely rocks on 1920 monitors and to me, is an example that should be followed! ;-)

Regarding the spacing, it does look good. Maybe for the November update, who knows ;)