Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Website Pixel Width Revisited For 2017


  • Please log in to reply
14 replies to this topic

#1 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 6378 posts

Posted 29 July 2017 - 08:11 AM

Ten to fifteen years ago we had regular, recurrent and prolonged debates about the width of a website.

Back then, monitors were growing in width from 640 pixels to 800 to 1024. Back then, much of the debate about width was "how wide can I make it and still fit on a person's desktop monitor".

Instead, many of our concerns about width are focused on the puny width of a cell phone. At what width do we make a responsive site transform from desktop to mobile?

Today, many desktop monitors are so wide that reading long lines across the entire width is difficult for many people.

So, perhaps we need to consider throttling the desktop width to make long-line reading easy for most people. Of course, we could increase font size because huge fonts are easier to read at 2000 pixels wide then the tiny text of wikipedia. But, I don't think that's the answer.

I tend to look at large, extremely popular sites that monetize with ads for my guidance. Here are three of the most common approaches that I have seen

1) Wikipedia is totally responsive. They scale page width to fit your monitor or device and allow long lines to run thousands of pixels across the widest monitor you can find.

2) The New York Times seems to assume that you have a desktop monitor that is about 1000 wide - and their design centers in the middle of your monitor view. It will then respond to narrower monitors, but at about 800 pixels wide they are willing to allow their design to be lost of the right side of the monitor.

3) The Washington Post seems to assume that your monitor is about 1200 pixels wide and centers in the middle of your screen. Then, if your monitor is any less than their max width, it will respond smoothly - by abandoning columns - down to about 300 pixels wide.

My site is a little less than 1000 pixels wide and responds when the screen width gets down to about 500 pixels. Then images and column widths shrink to maintain a single column design.

I am trying to decide what to do with a new site.

What do you think? Have you seen any sites that you think handle different monitor and device widths well?

Edited by EGOL, 29 July 2017 - 08:12 AM.


#2 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14786 posts

Posted 29 July 2017 - 09:23 AM

These days we add the viewport code into the header and add instructions via CSS for how to stack, resize images, etc.

 

This allows you to instruct browsers to render pages in specific ways depending on screen size and even remove elements like sliders from mobile but allow them for desktop views.



#3 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3391 posts

Posted 29 July 2017 - 10:20 AM

Your bottom line is 320 pixel which is the size of the cell phone so The Washington Post has the right idea and really you have no choice. The least capable device is your target.

I have read, but have no data, which said the optimum reading width is that of a full size book such that your eyes do not have to move in order to read. If you have to move your eyes too much or head from left to right and back (carriage return/line feed) then you lose track. I can vouch for that. Some older sites which are totally fluid and go full screen are hard to read. You do lose track on some Wikipedia articles but then I never go full screen on my browser so I get around this. Reading at 300px is also hard since you are forever in CR/LF mode. Can't "grab" enough info.

WP and NYT still limit their reading area to about the page size of a full size book or letter page (A4). The rest is ads and/or related reading. Just checked WP and Guardian.

I think you have already described your site's size of about 1000px and I used that as an example for a site I am converting. I use 480px to go to one column and 800 to start shrinking columns. Above that I limit it to about 1000px.
 



#4 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 5484 posts

Posted 29 July 2017 - 10:28 AM

What bobbb said, pretty much.

 

The problem of screen resolution display is reasonably straightforward using the variations mentioned and I'm pretty sure that we've touched on them, if not recently. Although, one absolutely should treat it, not as a straight responsive exercise, but as a contextual typography one. I'll try to find time to detail my approach. Meanwhile a couple considerations:

Where it starts to get 'interesting' is with the proliferation of 4K and 5K screens (and the possibility the Sharp's 8K is a harbinger rather than a resolution too far).

* HDTV (1920x1080 or 1080p) is 2-megapixels per frame.
* Ultra HDTV or 4K (3840×2160) is 4-times the number of pixels/2-times the resolution of HDTV.
Note: the actual Retina 4K resolution for smaller Apple form factors (iPhone, iWatch) are somewhat less.
* Apple’s Retina 5K for the iMac (5120×2880).
* Sharps' 8K (7680×4320) is 16 times the resolution of HDTV.

The current best solution is to use scalable vector graphics (SVG) for images as they scale (d'oh!) unlike raster format gif/jpeg/png where onscreen pixels map to underlaying memory bits. Unfortunately SVG browser support is limited to more modern browsers and there are some individual quirks that need to be worked around. And for all those already uploaded gif/jpeg/png images one needs to seriously consider having several resolution copies, i.e. image-HD.jpg, image-HDx2.jpg, etc. and serving appropriately on context.

The most common response I hear in conversations is who cares about Apple... well, apart from that those 'few' iOS users buy about the same as all those Android versions combined... that the 'few' Apple laptop/Mac users buy as much high end value as all their Windows machine equivalents... Know your market segmentation. Oh, and it's not 'just' Apple anymore.

Closing thought: increasingly I've been at gatherings where folks are watching Game of Thrones, a sports game, what-have-you, on a big screen TV while using phones/tablets/laptops to look up questions and settle bets, even place orders... all while chatting (many overlapping conversations). The sit and listen/watch quietly aspect of entertainment is increasingly a quaint artifact of my youth.
Note: I increasingly hide in my bedroom with a book. Printed book. :)



#5 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 6378 posts

Posted 29 July 2017 - 10:35 AM

 

Note: I increasingly hide in my bedroom with a book. Printed book. :)

 

I know that you read a LOT, have been doing that for a lifetime, and a lot of that reading is printed books.

 

Just wondering if you are recycling these books or have them piled, chest deep, all through your house?



#6 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3391 posts

Posted 29 July 2017 - 12:42 PM

The most common response I hear in conversations is who cares about Apple... well, apart from that those 'few' iOS users buy about the same as all those Android versions combined... that the 'few' Apple laptop/Mac users buy as much high end value as all their Windows machine equivalents..

Funny I should be defending Apple but I have never heard "who cares about Apple" in the phone/tablet area. I look and still see iSomething as dominate and then presume IOS.

I only hear "who cares about Apple" in the the PC/laptop area and regardless of the "high end value" of Macs it's the "number of" which counts because it is for those billions of cheap PCs and eyeballs (and ads they will see) you will target your info web site for.

What are the numbers? 10-15% of PCs

So a billions dollars worth of Rolls Royce sold in 2016. That is still only 4000 cars and 4000 petrol tanks you can fill.
(4011cars X avg price of $300,000)

https://en.wikipedia...oyce_Motor_Cars

https://www.cars.com...-phantom_coupe/


Edited by bobbb, 29 July 2017 - 12:51 PM.


#7 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 5484 posts

Posted 29 July 2017 - 04:45 PM

@EGOL: I keep the one's I plan on rereading and trade in the others for more! :) So I have a couple hundred business/marketing and computer/DB/networking/programming/security books that make one office wall look interesting plus a couple thousand non-fiction books and ~10k fiction to provide my library appropriate decor.
Note: of the ones I've kept I've read almost all at least twice, a good many far more rereads than that. Yes, it's an addiction.
 
@bobbb: I wonder how many luxury class vehicles are bought online? How many Rolls web affiliates there are? One sale and can live for the year, two and kid's tuition is paid...

I meant more like PC users buying a $100 BBQ, Apple users buying $1000 one; PC users buying a $2-$5 dog collar, Apple users buying a $40-$100 dollar one... the luxury commodity market is actually quite broad, deep, and robust... it's just that when many/most webdevs think of retail it is more Walmart than Nordstrom they envision. Much the same as the way they stop at third party ads rather than direct; they constrain themselves with their mindset, impose their own glass ceiling.
Not that I mind, of course, as it removes them from competition. :)
 



#8 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 5484 posts

Posted 29 July 2017 - 05:53 PM

Ready for some fun?

Computers initially took font size from print, which is why we sometimes mention 'points' (there are always 72 points in 1-inch); however, computer screens actually display via pixels, which, unlike points, vary in size depending upon screen size and resolution. To add to the problem ye olde bog standard OS hasn't a clue about display size and simply defaults to 96 ppi then multiples by 1-1/3 to get pixels.
Note: thirds being a never ending number is the reason why some site designs 'broke' - different browsers rounded differently. Yay!

Naturally, the above assumption(s) and calculation is almost alway wrong.

Especially these days with such a disparity of screen sizes. 100 pixels on a smartphone is very different from 100 pixels on a laptop is very different from 100 pixels on a widescreen TV. Some examples:
* 60" HDTV (1080p): 37 ppi.
* 27" Mac: 109 ppi.
* 24″ Dell (1080p): 92 ppi.
* 14" ThinkPad: 131 ppi.
* 11" MacBook Air: 135 ppi.

Phones are no better. Many/most mobile browsers default to the original iPhone's 167 ppi even though some now exceed 400 ppi.

Some headache science: some years back research determined that reading speed and comprehension is best when the x-height (height of lower case 'x') of a font is 0.2° of visual arc at 16" for 20/20 vision, 0.3° for older fogies, and 1.0° for very old near blind fogies. Nah, I'm not going to make you do math.
tl;dr: Large x-heights are more readable.

There is a highly specific calculation but as both devices and users and usage vary greatly the following is a rough guideline to the differences involved using the Arial font:
Note: yes, each font tends to vary somewhat. Suffer.
Note: does not include Retina or similar 4K+ devices.
* 60" HDTV: minimum 26pt or 35px, recommended 33pt or 44px.
* desktop: minimum 12pt or 16px, recommended 15pt or 20px.
* laptop: minimum 9pt or 12px, recommended 11pt or 15px.
* smartphone: minimum: 12pt or 16px, recommended 15pt or 20px.
Note: if mobile browsers stop defaulting to the original iPhone resolution the above may well change.

Note: why keep mentioning that 60" HDTV?
Because if you bring your laptop to a conference room to run your fabulous presentation on their big screen...

None of which actually answers the OP question but it isn't as simple as it might appear.



#9 Ken Fisher

Ken Fisher

    Light Speed Member

  • 500 Posts Club
  • 806 posts

Posted 30 July 2017 - 06:48 AM

1232 px desktop. Then it drops into percentages for other devices. I have a lot of text. Anything wider was far too hard to read with wider screens. Learned somewhere to keep a certain number of words per line for optimum reading.

 

12? Accounts for a navigation element on one side of the page

 

Suppose I could view without a full screen, but I doubt many of my visitors do on desktop, which is still a good size and important group..



#10 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 6378 posts

Posted 30 July 2017 - 08:37 AM

 

Especially these days with such a disparity of screen sizes. 100 pixels on a smartphone is very different from 100 pixels on a laptop is very different from 100 pixels on a widescreen TV. Some examples:

 

I didn't realize that there was such a diversity of scales.   Thanks.



#11 earlpearl

earlpearl

    Hall of Fame

  • Hall Of Fame
  • 2502 posts

Posted 30 July 2017 - 01:26 PM

You guys are having a great conversation on topics on which I give virtually no thought to.  thanks. 



#12 Grumpus

Grumpus

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 6612 posts

Posted 03 August 2017 - 03:17 AM

The big thing here in responsive design is to ultimately stop thinking in terms of pixels, and think in terms of percentages. If you do that, then everything else is much easier.

Another trick is to design using the Rule of Eights. I'll explain that a bit more in a moment, but before I do that, I'll also mention that this is becoming more and more difficult to do because fewer and fewer people understand it - including those developing new devices which don't follow that rule. Apple seems to be the biggest culprit here - with the iPhone 6 having a screen resolution of 1334x750. :stars-head:
 
The Rule of Eights is a simple one. Unless you're on one of these renegade devices like a stupid iPhone (et. al.) no matter what you are using, the screen size is divisible by 8. 320 - 640 - 1024 - 1440 and so on. Now, when you make your design - no matter what size screen you're originally developing for - you want all of your element sizes to be divisible by 8, as well. This idea of 1500px as the max width is WRONG. If you want to be up there near that 1500 number, 1504 is the right answer (it's divisible by 8).

All of your images should follow these rules, too. Each div, including the padding around them, also needs to be 8. Don't pad left and right by 5 or 10px, do it by 4 or 8px. Because if your div is 50% of the screen and your padding is 4 or 8px on both sides - making it 8 or 16px of total padding - then your internal div size is going to also be a number that is divisible by 8, no matter what Rule of 8 maximum screen size that you're dealing with.

By following the rule of 8 - then the math always works when scaling for a different (standard) screen size. You won't lose any scan lines (which make images blurry by having to skip things and hide remainders during division) and they'll look crisp and clear.

Fun Fact For Kim: For mobile accessibility standards, the minimum default font size is supposed to be 16px. Is that because it's the minimum readable size? Nope. 16px is pretty darned big on a small screen, and it's readable on a big screen. The reason it is chosen as a number is because it follows the Rule of 8. This way, if we scale it down a bit for smaller resolutions, it won't get (so) blurry. The scaling math will always work on standard screen sizes. Granted, you won't be able to read a font that is 25% of 16px - so you need some extra code in there to bump it back up again... but I CAN easily cut it down to about 50% of it's original size (if it's a clean, legible font like Arial or Verdana) when going from a 1600px screen default to an 800px one.

If you design by the Rule of 8 for your primary design size, then you really only need to make one or two more resolutions to deal with - the points at which you have to start stacking side-by-side things into columns. I tend to run at a max width of 1200px (anything wider is hard to read on a text/content heavy web site) with break points at either 0-480 or 0-640 pixels (depending upon the design) and then a middle set of instructions for the 480 (or 640) - 800 pixel range.

The Rule of 8 is your friend. Apple is going off the farm - undoubtedly for some nefarious reasons, but just about every other device you can buy will follow those rules unless you explicitly tell it not to (e.g. your desktop will often support non-standard resolutions). If you are looking at a web site and the fonts and images tend to look blurry - check your resolution. It's almost always because you're set at one that doesn't follow the Rule.

 

G.



#13 EGOL

EGOL

    Professor

  • Hall Of Fame
  • 6378 posts

Posted 03 August 2017 - 08:21 AM

 

Another trick is to design using the Rule of Eights

 

Thank you, Grumpus,  I've never heard of this before.  Never thought about it either.  It makes total sense.



#14 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14786 posts

Posted 03 August 2017 - 08:33 AM

Grumpus is a genius!

 

The big thing here in responsive design is to ultimately stop thinking in terms of pixels, and think in terms of percentages

 

 

Yup. 

 

This allows users to change the font size to what they need via their browsers.  

 

Never knew about the rule of 8.   :rolleyes:



#15 bobbb

bobbb

    Sonic Boom Member

  • Hall Of Fame
  • 3391 posts

Posted 03 August 2017 - 10:09 AM

Whoa! Time to look at my own stuff.





RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users