Welcome to WebmasterWorld Guest from 54.162.184.214

Forum Moderators: not2easy

Message Too Old, No Replies

Device Pixel ratio 1 is now a minority

Exchanging graphics against high res versions

     
7:02 am on Aug 29, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member jetteroheller is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 22, 2005
posts: 3052
votes: 6


Just noticed in my log files, device pixel ratio is only 1/3 of visitors.
even dpr=2 has more, the rest has 3 or 4.

So I just think to have my logo in double resolution of the img width and height.
So I just think to exchange after loading the everything else from the page
when dpr>1 the pictures by high res versions.

Just tested my logo, looks really much better in 672x204 instead of 336x102 on
my 5" 1280x720 dpr=2 smartphone.
7:45 am on Aug 29, 2017 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:11514
votes: 701


Resolution is only getting higher. My monitor is 4k, so is my TV. Many notebooks offer 4k as well.

Graphics that formerly looked good no longer do on high res screens. I've had to redo many images.

My 5.9" mobile phone res is 1440 x 2560 pixels (~513 ppi pixel density) and it's over a year old.
9:55 am on Aug 29, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member jetteroheller is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 22, 2005
posts: 3052
votes: 6


I have a cheap US$ 75 smartphone, but even this has on 5" 1280x720 and my logo looks much better in the higher resolution.

I have since 1997 my own CMS. I have a standard for all graphics. Usual, all graphics are

filename_dir.jpg 80 pixel height for directory
filename.jpg typical 600x450 for the page
filename_print.jpg the original from the camera

So I am just thinking on a javascript,
which exchanges dir pictures against normal pictures and normal pictures against the original pictures from the camera.

BTW, when Your monitor is 4k, did You ever see a web page which uses all the width?
As I change my site for the smartphone criteria of Google,
I developed a system from elements with 600 pixel width each.

A javascrript distributes the elements on the screen in 1 to 6 columns. 6 columns fill the width of a 4 k screen.
10:13 am on Aug 29, 2017 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:11514
votes: 701


when Your monitor is 4k, did You ever see a web page which uses all the width?
My 4k computer monitor is 32" wide and most webpages look at bit stretched if I fill the screen with only that. But I usually have at least 2 things dividing that screen.

IMO the eyes have an uncomfortable time reading horizontal text that is too wide, but maybe that's just me.

My 4k TV is WiFi and has a web browser so I can (but usually don't) surf the web. The screen is 70" wide and really murders most webpages. My TV does some magic by adding extra definition on low-def images, but a webpage still looks bad that wide. I can't have more than one browser window open at a time on the TV... although there's a picture-on-picture thing I've never used.

I haven't seen any sites fill the available space will columns like you describe. That sounds pretty cool.
10:57 am on Aug 29, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member jetteroheller is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 22, 2005
posts: 3052
votes: 6


The text as all the content is in 600 pixel width columns.
So the javascript creates 12 different layouts depending on screen width.

12 because there is also an extra placement on the right for a 160x600 AdSense ad.
So depending on place 1..6 columns with or without a 160x600 AdSense on the right.

The only disadvantage of the system is printing.

Only logo and content is placed by css. All other elements are placed by javascript.

I had before a nice system with onbeofreprint and onafterprint to show my pages optimal for print.
But Google Chrome does not support onbeforeprint, onafterprint.
All elements moved by javascript are ignored by css.
So I had to remove my print system, because of the problems with Chrome.
6:13 pm on Aug 29, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14716
votes: 614


IMO the eyes have an uncomfortable time reading horizontal text that is too wide, but maybe that's just me.

It's not just you, but also it's not the width per se. Your eyes would happily keep reading a single line forever. (Imagine a scripted scroll that went side-to-side rather than top-to-bottom.) It's that your eye-and-brain combo then has to jump diagonally downward to find the beginning of the next line. That's why magazines and newspapers are printed in multiple columns even though it would be simpler and cheaper to set type right across the full width of the page. And that's why the width of a text area is best defined in ems.
8:18 pm on Aug 29, 2017 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:11514
votes: 701


Your eyes would happily keep reading a single line forever.
Happily... forever? Well I don't know about that. There's only one thing I can think of that I would happily do forever and it doesn't involve my eyes.
6:00 pm on Sept 2, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member jetteroheller is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 22, 2005
posts: 3052
votes: 6


Just finished the code and tested for the first site from me.

What a difference on a 5" 1280x720 display.

So now busy to make this available for all my sites.
6:44 pm on Sept 2, 2017 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:11514
votes: 701


Good work
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members