So much empty space on that page, let's put the facebook link in the worst place possible!
EDIT: It's funnier in this case because (based on my limited experiences) this sort of fixed positioned social media bar grew out of mobile websites that were constantly fishing for shares, but this particular site has realized they're annoying and put it in the top header instead. It's only on desktop that we get the fixed position floater.
Worse than that is the fixed promo bar at the bottom.
As with most such bars, it breaks scrolling one screen at a time using Space or Page Down. So I get to read:
"Now, I’m not saying that small typography is bad. An 18px font is perfectly legible"
[press Space]
"captions, cards and other UI elements, but there’s good reason to increase it a few more notches for body text."
Fixing this is entirely doable - nytimes.com has a fixed navbar but Space still scrolls <1 screen at a time. I would expect better from a screed like this which proclaims "Scrolling is a natural, established pattern on the web - people expect to have to scroll."
Nice catch. I wonder if there is tooling out there that can examine a document's CSS files, and smoothly resize a web browser between the document's media query "break points" as it renders, so designers/developers can more easily find these bugs that happen with browser sizes near those break points.
Why can't you literally just resize your actual browser and watch what it does?
That's what I do when I'm making a responsive website - I'm constantly changing browser width to make sure it works at all sizes.
It's not enough to just check for the @media sizes - you also need to check the sizes in between in case boxes get shrunk too small to fit their content.
+1, always do this... I tend to find that certain design constraints need breakpoints that don't match the atypical @media breaks that are used in Bootstrap and the like... just by nature of what's being placed... It's best to actually exercise and practice where you're breaking things down.
Also, since I tend to use React/Redux lately, I inject size/scroll into my state and use that as a basis for those decisions in controls as often as I'll use CSS/JSS alone anymore.
Responsive design means the browser resolution doesn't matter. Sites should be able to handle these dimensions by scaling appropriately and changing the layout.
If a website doesn't fit my preferred browser size, I leave the website. If you're expecting people to resize their browser window, you're in for some disappointment.
Personally, I have disliked the mobile-first mindset since the beginning because on my primary platform (the desktop) it results in too little content on screen. I much prefer "old" style interfaces like hacker news that give me lots of content on screen. As others have said elsewhere in this thread, I can (and do) use the zoom function when necessary.
I disagree with the article's assertion that larger text is more readable. In my own experience, I find that readability is reduced when scrolling occurs. Increase the amount of scrolling, decrease the readability.
There is no issue with "mobile-first". The problem is when designers think "mobile-only", forgetting that a sizable part of there audience still browse content on desktop.
Furthermore, given how web-pages are getting heavier and slower to load, I doubt any of these designers are really serious about designing for mobile at first place (I don't buy the "management wants tons of analytics" excuse).
> As others have said elsewhere in this thread, I can (and do) use the zoom function when necessary.
If a website doesn't allow you to zoom in the text, it's a design mistake,no more no less.
Back when I was doing a lot of brochure sites I often thought that there was a correlation between the quality of content and the amount of filler -- big text sizes, lots of graphics.
If I have a lot of meaningful content, say essays of 5,000 - 10,000 words or novella-length fiction, a 20px+ is going to make the page-length ridiculous. But sure, if you can only be bothered to churn out 100 words of copy and you want your page to not look like a content-desert then 20px+ font and giant margins are your friend.
While we're at it can we get past the current phase of using extremely light grey on white? What happened to web design sticking to everyone-can-read contrast levels?
I've actually resorted to using a chrome plugin that switches <p> tags to black when you click its icon just so I can read fancy shmancy designed blogs.
Edit: In case it's of any use to you, the one I'm currently using is Darken Text[0]. There's probably extensions out there that let you switch out colours automatically but my day job involves web dev/design, it'd be very confusing if I used an extension that messed with colours automatically
The new Color Tool from Material Design has an accessibility tab where it shows a text color's contrast with foreground and background colors for large and small font sizes.
If you, designers or developers, have any any doubt, please please please check the contrast on your site's text. :)
On my 24" monitor, you body text feels immense (at 1920x1080) and I have to scan my eyes left and right too much - annoying enough that I scaled the page to 80% to read it comfortably. It is important that column width not be too wide to avoid too much eye travel, while maintaining 60-80 chars per column.
This brings it down to normal text size comparable to a comfortable-to-read novel page size on my screen.
Comparing to WaPo, they unwisely have 100+ chars per line at that immense size. I've stopped reading the site at all because the balance of the width and font size combo is too much work. Most of the others have wisely kept to 60-80 chars per line, and scaling works to read them, but all feel a bit too large.
One question, are you also running your browser maximized on your 24" monitor such that it is about 20.5 inches wide?
If yes, consider trying running with your browser non-maximized, and set to about 1/2 the width of your 24" monitor. The lines will not be so long that way.
It's funny, my ex-wife always runs her browser full-screen (even on a 24"+ monitor) and would complain when sites wouldn't use the whole screen (this is before 1080p was nearly as common). I almost never browse full screen.. I use a 40" 4k display (essentially 4x 20" 1080p), and find anything full-screen to be difficult at best.
I guess I'm a contrarian. I hate the current trend of a narrow band of text with tons of blank space. I would rather scan my eyes more than have to scroll and scroll and scroll and scroll
It's all about what is trendy. What part of the population should we optimize for now? Some people like big text and wants to scroll. Other people might have problems with their carpal tunnel and can't scroll with the scroll-wheel on the mouse. Mabe they don't even have a mouse at all and scrolling has to be done with arrow keys and a bad angle on the wrist? It's hard to optimize for everyone so usually you just listen to the people that has been testing different layouts already and measure on how many adviews you get to deside what layout to choose. Because at the end of the day that is all that matters to most. Where do I get most money?
I've seen web developers do this a lot and it's an annoying trend. I'm glad there's a "Reader View" that Safari and later Firefox included so I didn't have to subject myself to some asinine design "philosophy" that made reading their info a chore.
Seems a bit excessive, perhaps we could use a document to store all these classes in an organized fashion and then just refer to them by some sort of tagging system. We could link to that document from multiple pages, even, and change it without changing the base markup at all.
Oh I understand the style, I just think it's backwards. The whole point of CSS is to move the styling out of the markup, and this obviously fails atrociously in that regard.
Each class is one CSS property, where it would be literally less verbose to just inline them. It's exactly the same thing as doing style="prop: value; prop: value;" since to change a given area of text from grey to black you'd have to edit every single element the same way.
The irony is somewhere hidden in that forest of classes, I believe what they've actually done for most of the text for many viewports is to scale it down to "75%" or "18px"...
I don't want to have to keep scrolling through seven pages of double-spaced text of which a mere eight lines takes up the whole damn page.
I got a monitor with more resolution so I can do more with my workspace, not so that you can take up more space. People like this are a big reason why I literally hate the web.
I question the focus of this article. It would be excellent advice for print that cannot be changed after it has been printed, but since every web user can (in theory) control the way things look on their device it would be better to focus on making that easier for people to do.
As an artist, I absolutely agree with all the design arguments about readability etc. But that stuff doesn't need to be on the server side. I really resent being forced to download tons of design data whenever I visit a web page instead of being able to set preferences and have the computer present text in the way I actually want to see it. Many websites are horribly crufty and ugly, and make my reading experience worse.
You know what else I hate? Web pages that are so in love with their print ancestors that the text is squeezed into a narrow column and almost 2/3 of my screen is white space. So I have to keep scrolling endlessly because you can't figure out how to flow text into two columns.
I'm glad it mentioned it (though buried/saved at the very bottom): line width! I'd rather have too narrow than too wide, but good design should have a pleasing font size and line width (and all the other factors) on very different device sizes these days. Seems like many sites often get it right on mobile, but then on a desktop browser suddenly things are proportioned all weird or don't work with whatever browser size. And that's to say nothing about a sudden change of layout, ads, ...
The article somehow misses the elephant in the room,
why still argue about pixel sizes, when it should be about display size with display resolutions being no longer be in a narrow range of low DPIs.
In an ideal world text sizes should be set in em and rem and body text sizes should be user adjustable to preference.
At the beginning of CSS era one principal mistake was made - someone decided that 1px is a logical length unit that equals to 1/96 of inch. Attempt to reason that was made here http://www.w3.org/TR/CSS21/syndata.html#length-units
Result of that particular decision is the mess we have with length units at the moment on the Web.
On monitor with physical 110 PPI resolution 1px is physically smaller than on "classic" 96 PPI monitor.
As a result no one can predict what will be the size of this:
div {
border: 1px solid;
width:100mm;
height:100mm;
}
everything but not 100mm square.
In Sciter Engine (https://sciter.com) I've fixed this by applying three simple principles:
a) all logical length units are distances measured on device surface. Thus 100mm div rendered on screen will be 100mm when measured by the ruler put on monitor's surface. Same is while printing on paper.
b) 1px is always one device pixel - so we have hairlines for example. And so dimensions of bitmap images can be expressed with their natural resolution.
c) 1dip logical length unit (device independent pixel) was introduced for the convenience. 1dip == 1/96in - that is close to 1px in browsers.
Without all these using existing browsers for UI of desktop applications is quite questionable.
Even for mobiles ... main pointing device is a finger. It shall be the way to say: "this button shall is touchable by finger - so be precisely of 0.5in measured EXACTLY on screen surface".
I'm somewhat ambivalent on text size since I typically zoom web content when I find the text size uncomfortable. There are some cases where there is a severe mismatch between the size of body/text and other elements, which poses a challenge for zoom. But for the most part, zoom is a sufficient tool.
Still, I could potentially agree with the overall sentiment that slighter larger default sizing might be good.
But I find the presentation of this argument ironic thanks to poor body contrast:
background-color: white;
color: rgb(60, 72, 88);
Pulling the body color numbers down to increase the contrast made it immensely more readable for me. Unfortunately, while browsers have decent zoom controls, they don't have contrast controls without plugins. So designers should be especially careful to not specify insufficient contrast. (Aside: I generally find light text on slate backgrounds even easier on my eyes.)
The problem would solve itself, at least on mobile, if every browser implemented text reflow after zoom, like Opera does. Firefox reader mode has a different purpose but can be used as a workaround, but only when it finds the text content and only for that.
With text reflow users can zoom to the font size they read best and the designer doesn't have to try guessing the right one.
Control + pretty much solves the problem on desktop.
Display DPI - the problem that could've been solved more than a decade ago, but still isn't. Once you get it right on all layers you'll never be bothered by it again. It sometimes makes me sad that we still have to work with or around it, even though it is trivial to solve.
I find it ironic that the author is claiming body text should be larger for readability while failing WAVE's and Google's accessibility checks for contrast ... a key factor in readability, especially for the elderly and visually impaired.
The two websites I read most are Hacker News and Reddit. My terminal font size is 11pt and my code editor font size is 10pt. Most macOS interface text looks like it's either 11pt or 13pt.
I have a retina MacBook Pro and I set the display setting to "More Space" (look like 1920x1200). Sometimes I might switch to "Default" (looks like 1440x900) for a while, e.g. when watching TV. But if I wanna do anything serious I need the screen space.
I've been using Safari as my primary browser recently, and it has a Reader mode, which I use when documents have hard to read colors or poor typography.
Any text coming out of Wolfram for the past 20 years has been borderline illegible by default because it is so small. I have never needed glasses, but this has annoyed me ever since I was a child.
I couldn't disagree more! I'm tired of this trend of headline-sized body text that has been popping up all over the web lately, as a result of what I assume to be mobile-first design philosophy that never heard of resolution independence. I'm constantly zooming out a couple of steps to shrink the text back down to something comfortable. Reader view helps, too.
Please stop doing this, designers! - not that any of you have ever cared what I think.
These trends come and go. When they annoy me, I really am glad for "reader" views that ditch all the fancy, unreadable flourish (and social media nag-bits that just don't fucking die).
One of these days, "retro" websites might seem cool again. Just gotta wait.
Ideally, text wouldn't be limited to 50% of the total screen. Can you imagine if every tv show you watched was squeezed between either two continuous advertisements, or blank borders?
At the very least, using the whole screen real estate, you could display two pages side by side, like a book. Less scrolling, faster reading, more comfortable fonts and sizes. BUT EGADS! WHERE WOULD WE PUT OUR ADVERTISING!!!!!
>On average, users will read only about 28% of the words on a web page, and usually scan as opposed to read due to the immense amount of information available on the web, and limited time available. Intensive reading is rare and requires more focus.
A website should not ever bother with body text size at all.
A website should display its body text in the size that the browser specifies, and that's it (with the exception of adapting for a generally smaller or larger typeface).
It's completely braindead that nowadays, on my old, small laptop display, I get websites displaying huge letters, because those supposedly are somehow the right size on other displays. The resolution of my laptop hasn't changed in ten years, so why the fuck does anyone think it's sensible to make the letters larger?
Yes, new devices have higher resolutions. And you know what the solution to that problem is? It's called CSS. CSS has the concept of a browser/user stylesheet, which provides sensible defaults for the respective environment for you to inherit, which should mirror stuff like display resolution, but also, indirectly, the eyes of the users.
That's kindof the whole point of CSS, that you can abstract from that, and have the respective renderer take care of adapting your content to the environment, so that your website reads equally well on a decade-old laptop, on a new and shiny tablet, or on a 100" monitor.
And it's especially braindead because the only fix on my side would be to pretend that I'd like to read 5 px text, in order to have those braindead website become readable again ... except that then, sensible websites would take that seriously and would display their text in 5 px letters.
There's too much self-satisfied spouting of poorly-grasped principles here to address, but for one, you basically provided the fix you feign so much frustration at not having available. Just use an add-on that allows you to specify a user stylesheet and do something like:
Now, don't pretend like you don't know that that is not a reliable selector for that purpose. Also, you don't need an add-on to edit the user stylesheet.
hey, hello, hi... have you ever read about em? just set the default size to whatever fits the resolution you are dealing with? viewport? responsive design? web? computer? anything? is this for real?
http://i.imgur.com/cmrn7wB.png
So much empty space on that page, let's put the facebook link in the worst place possible!
EDIT: It's funnier in this case because (based on my limited experiences) this sort of fixed positioned social media bar grew out of mobile websites that were constantly fishing for shares, but this particular site has realized they're annoying and put it in the top header instead. It's only on desktop that we get the fixed position floater.