Retina-friendly

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Rebecka
Registered User
Posts: 14
Joined: Thu Aug 04, 2016 8:29 am

Retina-friendly

Post by Rebecka »

Before I begin, I understand that there are rumors about a new style for phpBB 3.3. If so, this can be ignored, otherwise continue to read.

It bothers me that the icons, smileys and images are blurry on my high resolution display (MacBook Pro from late 2012). I have installed phpBB 3.2.0-RC1 and I can see that you have updated icons (Font Awesome) which are just that - awesome! They look nice and crisp on my display. Images such as announces, forums, topics, sticky... Actually all the images in prosilver/images, looks blurry on my display.

The same applies topic icons, contact icons (shown in the drop-down under profiles in forums), smileys and 'Online' marker.

Please update this sooner rather than later.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1904
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Retina-friendly

Post by DavidIQ »

Sounds like you're zoomed in? There are several people here with such computers I believe so I'd be surprised if they had noticed this and didn't say anything.
Image

Rebecka
Registered User
Posts: 14
Joined: Thu Aug 04, 2016 8:29 am

Re: Retina-friendly

Post by Rebecka »

DavidIQ wrote: Thu Aug 04, 2016 12:39 pm Sounds like you're zoomed in? There are several people here with such computers I believe so I'd be surprised if they had noticed this and didn't say anything.
No, not zoomed in.

Take a look at this image from [CDB] Elegance:

Image

It's blurry/low res, not zoomed in.

ardenhag
Registered User
Posts: 1
Joined: Fri Dec 18, 2015 9:13 pm

Re: Retina-friendly

Post by ardenhag »

Yes I've noticed this too. I was surprised to see that only some gifs had been changed in prosilver so many like the topic and forum images were looking not so great on mobiles in comparison to ones that had like the navbar icons. Wasn't sure if it's a work in progress though?

Rebecka
Registered User
Posts: 14
Joined: Thu Aug 04, 2016 8:29 am

Re: Retina-friendly

Post by Rebecka »

ardenhag wrote: Thu Aug 04, 2016 1:39 pm Yes I've noticed this too. I was surprised to see that only some gifs had been changed in prosilver so many like the topic and forum images were looking not so great on mobiles in comparison to ones that had like the navbar icons. Wasn't sure if it's a work in progress though?
I figured I couldn't be alone in this. So many high resolution displays as there are today, more people than I have to see it. If they just look/think about it. I look at many other themes/styles and therefore notice how low resolution Prosilver actually is.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Retina-friendly

Post by hanakin »

the imagesets are still to be fixed I had a pr for it but it was never merged do to discrepancies with handling the feel of the icons
https://github.com/phpbb/phpbb/pull/3880
Donations welcome via Paypal Image

User avatar
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Re: Retina-friendly

Post by MattF »

Rebecka is correct. Retina screens are 2x the resolution they display at... A 4k screen's native resolution is approx 4000 pixels wide, but that makes evrything microscopic, so they scale it up 2x, for a resolution in normal ranges like 1920x1080, or 2560x1200.

For images that means on "retina" they are scaled up 2x. For small and low res images that means they get pixellated.

The solution is always to either use scalable vector graphics like SVG, or to create PNG and JPGs at twice the intended size, like 100x100 and then use CSS to display it at the intended 50x50 size.

For phpBB's current theme there is no solution because the images were designed at what you currently see, and AFAIK the original designs are not vector based EPS files, so they can't be upscaled for retina. But the new theme/styles we are looking into will support SVG so this won't be a problem.

I actually returned my 5k iMac because I was shocked by how crap the internet looked on it, considering most web content is old and just wasn't designed for the hack-ish way 4k/5k screens work today.
Has an irascible disposition.

Rebecka
Registered User
Posts: 14
Joined: Thu Aug 04, 2016 8:29 am

Re: Retina-friendly

Post by Rebecka »

hanakin wrote: Thu Aug 04, 2016 7:16 pm the imagesets are still to be fixed I had a pr for it but it was never merged do to discrepancies with handling the feel of the icons
https://github.com/phpbb/phpbb/pull/3880
They look great! Nice and crisp on my screen. *Thumbs up*

Not sure what causes trouble but I hope they will become a reality soon. :)

Now we just need new smileys too. The smileys look outdated in addition to not being Retina-friendly.
VSE wrote: Thu Aug 04, 2016 9:55 pm Rebecka is correct. Retina screens are 2x the resolution they display at... A 4k screen's native resolution is approx 4000 pixels wide, but that makes evrything microscopic, so they scale it up 2x, for a resolution in normal ranges like 1920x1080, or 2560x1200.

For images that means on "retina" they are scaled up 2x. For small and low res images that means they get pixellated.

The solution is always to either use scalable vector graphics like SVG, or to create PNG and JPGs at twice the intended size, like 100x100 and then use CSS to display it at the intended 50x50 size.

For phpBB's current theme there is no solution because the images were designed at what you currently see, and AFAIK the original designs are not vector based EPS files, so they can't be upscaled for retina. But the new theme/styles we are looking into will support SVG so this won't be a problem.

I actually returned my 5k iMac because I was shocked by how crap the internet looked on it, considering most web content is old and just wasn't designed for the hack-ish way 4k/5k screens work today.
I don't even have a 4K or 5K iMac (yet). I have a MacBook Pro from late 2012 with a screen resolution of 2560x1600. My screen resolution is so high that the current imageset is too low resolution. Think then of all the computer screens or mobile phones with 4K display. It's important that we update these images, I think. The new Font Awesome icons were an appreciated update.

As I said, I have a MacBook Pro from late 2012, but I don't think the Internet is looking bad. I experienced the contrary, that I got a facelift when I switched from a low resolution laptop in 2013 to this. When I can afford it, I will buy an 5K iMac. Most cameras can now shoot in 4K, so I want to have a screen that can display it. The thing is that most websites are high resolution nowadays so it's important that phpBB follow.

I'm really looking forward to the new style. I can hardly wait.

CHItA
Development Team
Development Team
Posts: 169
Joined: Thu Mar 12, 2015 1:43 pm
Location: Budapest, Hungary

Re: Retina-friendly

Post by CHItA »

We could just use EmojiOne or Twemoji both for smilies and emojis (we are using twemoji for emojis i think currently, but both packages are supported by the textformater, so it is fairly easy to integrate either).

User avatar
JoshyPHP
Registered User
Posts: 381
Joined: Fri Jul 08, 2011 9:43 pm

Re: Retina-friendly

Post by JoshyPHP »

@CHItA Yes, switching to SVG emoji is a one-liner.

Post Reply