9 ms·
Slightly off topic: I know everyone here is all about naked websites but I couldn't help but add these three lines of CSS to the body: max-width: 630px; m
by oliv__ 11y ago
Slightly off topic:
I know everyone here is all about naked websites but I couldn't help but add these three lines of CSS to the body:
max-width: 630px;
margin: 0 auto;
padding: 0 15px;
Makes the whole thing much more pleasant to read! (And even looks good on mobile)
Here's a screenshot: http://imgur.com/UFHJp8a http://imgur.com/UFHJp8a
- sccxy 11y agohttp://bettermotherfuckingwebsite.com http://bettermotherfuckingwebsite.com
- teekert 11y agoI always wondered about this one, you hear it a lot: "A little less contrast Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice #EEEEEE if I wasn't so focused on keeping declarations to a lean 7 fucking lines." But my monitor is not perfect, nobodies is so why make stuff less well readable, I don't understand it. It annoys me to no end when I have to copy paste stuff into a text editor just to get a white background because someone decide a background should never be white and people seem to agree. If I want less contrast I'll tone down the background lighting of my screen.
- effie 11y agoThere are lots of people who are annoyed to no end that the background of most websites is white and their browser does not offer simple way to change that. Plugins like stylish help to both groups. Just set the background color to what you want in custom css style, cope with the broken graphics and enjoy the web.
- teekert 11y agoSo, when your background is too bright... why not reduce monitor brightness? The letters will stay as black as they are (hey its 2016), your background gets less bright. This has other advantages too. Why must a website creator choose how much (maximum) light my screen emits around the letters?
- Freaky 11y agoJust because I want a less bright background for reading text doesn't mean I want my monitor to be incapable of displaying a bright white - it's not only used for reading text.
- effie 11y agoI do reduce often, but this makes everything else on my desktop too dark so I can't read it. So I have a keyboard shortcuts that run xrandr --brightness <intensity> that I use frequently, but it is not the ideal solution for everyone. Better solution of this problem would be if websites detected brightness+contrast preference set up in browsers, like they detect language or browser window size, and changed their CSS accordingly. It would be great accessibility and UX improvement of the Web. We should make some standard for that and push it up into browser projects. Anybody experienced with such a task?
- fizixer 11y agoGrey text is one of the silliest trend I have seen. If you've changed the background from white to light-grey, that's enough. Stop changing text from black to dark-grey (especially the non-bold text)!
- jeffpersonified 11y agoThis is not a tend. For instance, finding pure black in fine art or elsewhere is next to impossible and if you do it's a modern trend (not the opposite).
- Dylan16807 11y agoBut this is text. Black ink.
- ams6110 11y agoLook at a printed book or magazine. The ink is dark. But it's not black.
- roywiggins 11y agoThe contrast ratio (how bright whites are to black) is the important thing, and the contrast ratio of printed text in sunlight is a lot greater than your average LCD.
- Dylan16807 11y agoNeither is 0,0,0 on your typical screen. Black is the goal in the case of printed text, and should be the goal on a screen too.
- seivan 11y agoI wouldn't call it a trend for a trend sake, it's much softer on the eyes, making it easier to read. But I would have preferred 1.25 line-height :)
- Ezhik 11y agoThis makes me think, is it possible to set that as the default stylesheet for pages that don't have CSS?
- 3pt14159 11y agoWhile I agree with most of this websites recommendations I thought this line ironically looked too long. echo "200 fucking characters long. Keep it to a nice 60-80 and users might actually read more " | wc -c I was right. 89
- chrisan 11y agoIt's on github if you want https://github.com/diafygi/gethttpsforfree https://github.com/diafygi/gethttpsforfree
- oliv__ 11y agoI don't have a github account.
- tosseraccount 11y agohttps://github.com/diafygi/gethttpsforfree/archive/gh-pages.zip https://github.com/diafygi/gethttpsforfree/archive/gh-pages....
- chrisan 11y agoIt's easy to sign up! Maybe something small like this will get you started :) https://github.com/join https://github.com/join
- desireco42 11y agoYou can get one the same way you got one here.
- oliv__ 11y agois that right?
- nielsole 11y agoSomeone already turned this into a pull request: https://github.com/diafygi/gethttpsforfree/pull/66 https://github.com/diafygi/gethttpsforfree/pull/66
- kelukelugames 11y agoWhat is the padding for? Doesn't make a difference for me.
- oliv__ 11y agoMobile.
- kelukelugames 11y agoCan you please explain? I want to improve on CSS, but have under developed eye for design.
- theIV 11y agoIf you don't add padding, the text will touch the very edge of the screen when in a mobile browser. [edit] see oliv__'s response, it's more detailed than mine :)
- 50CNT 11y agoThis stuff belongs in the domain of graphical design. Rule of thumb is to provide padding towards the edges around text, a little more to the sides than to the top, eg. [padding: 1em 2em;] depending on the font used because of inherent vertical padding in writing. If the text hugs the container, it seems cramped, and we get distracted by the lines of the bounding container. I recommend giving "The Elements of Graphic Design" by Alex W. White a read, where he talks about issues of space and typography and why certain conventions exist. CSS is after all a way to express graphical design relations in code, which isn't very useful if one is unaware of the principles driving clear and useful design.
- oliv__ 11y ago@kelukelugames Sure. The padding adds 15px of space on both sides of the body so that the text doesn't "stick" to the edges when the size of the screen is less than the defined max-width (i.e: on mobile). Doesn't make a difference on desktop though.
- prof_hobart 11y agoI may well be an exception, but I actually find it easier to read with wider columns. I don't like narrow columns being forced on me, and if line length bothers you, can't you just set your browser to the width you like?
- qewrffewqwfqew 11y ago> just set your browser to the width you like? Thank you for saying it. This "fixed-width-in-pixels" thing that has taken hold completely baffles me.
- Dylan16807 11y agoAnd then a site adds a sidebar and it all breaks.
- qewrffewqwfqew 11y agoThe variation I keep seeing today is sites that lose any left margin at all when the browser is less than 1000px wide (or 930 or whatever magic number the designer had in mind that week). It's pretty special seeing text butted up hard against the left margin. I'm glad the proliferation of web standards has advanced to the point that this is acceptable!
- ergothus 11y agoYou aren't alone - I fine huge gutters on the left/right to be very distracting. If I have my window set to be very wide, I WANT TO USE THAT WIDTH. However, I realize that I'm in the minority - I don't find narrow columns easier to read, I don't consider analog watches "more attractive" than digital, while I love physical books I don't feel I lose any experience in going to a nice eInk reader, and I find most icons to be worse than a short text label. For these sins I am prepared to simply suffer a tiny bit until society catches up to me :)
- nitrogen 11y agoYou could try resizing your browser window. Not everything has to be maximized.
- cheapsteak 11y agoResizing windows is one of the most annoying interactions to perform on a computer You have to zero in on that edge with your mouse. There's only a window of ~10 pixels so you have to try to be precise, and it seems to be a rather expensive graphical thing to show because I always see ugly, jolting artifacts, and I have a GTX 970
- nitrogen 11y agoI'm usually using Linux, so I forget how painful this is on other systems. On Linux (and similar), you can just Alt+Middle-drag (or Alt+Right-drag, depending on Gnome vs. KDE) anywhere in the window. The closest corner will move. Edit: I also highly recommend using mice instead of touchpads for all computer interactions. I cringe when I watch a coworker using an Apple magic touchpad, because they have to move so slowly.
- spurgu 11y agoAfter using Linux for 10 years and having recently switched to OSX I seriously miss this feature. Does anyone know how to get it for OSX? Also, Alt+Left-drag to move the window is super nice (not having to aim for the title bar).
- electrotype 11y agoBookmarklet : javascript:(function(){var%20nbr%20=%20prompt("pixels","400");var%20a%20=%20document.getElementsByTagName('body')[0];a.style.paddingLeft=nbr+"px";a.style.paddingRight=nbr+"px";})()
- effie 11y agoThat's cool, thanks!
- michaelwww 11y agoor go with oliv__'s suggestion: javascript:(function(){var a = document.getElementsByTagName('body')[0];a.style.maxWidth=630+"px";a.style.margin="auto";a.style.padding="0 15px";})()
- uuoc 11y agoYou know, not running your browser maximized on your widescreen monitor would solve that problem, for every site you visit, with no CSS required.
- oblio 11y agoBut... why? I maximize all the windows I use. Less window management hassle.
- uuoc 11y ago> Less window management hassle. Actually, no, you still have to perform the "find the window" function and the "bring the window to the top" function, for both maximized as well as non-maximized windows. And once any given window is sized, the 'management hassle' for 'find and raise' is identical between both modes (maximized and non-maximized. The screenshot you posted is of a Mac, so because of that I am going to assume you are using a Mac (because otherwise you would have posted a screen shot of some other OS). This explains why you believe that window management is a hassle. Mac's window management support is on par with MSWindows window management, which is to say, they both suck for handling more than a handful of windows at once, and they both suck for doing much more than "find something - bring it to the top" (and even that function on both is awful as well). Which is really sad given that Apple is the company that brought the whole multiple overlapping windows GUI model into the popular view (Apple Lisa). Additionally, because you are using a Mac, I am going to assume you are likely using a Mac laptop (simply due to the sheer number of Mac laptops sold vs. Mac desktops, there is a significantly higher probability you are on a Mac laptop). This leads directly to a second reason why you believe window management is a hassle. On almost any touchpad/trackpad, with the current UI hooks used by Mac (and Windows as well), window management is a hassle and sucks terribly. This is because all the UI hooks are designed around a mouse with a separate button (or buttons) that can be independently held down separately from creating mouse motion. On any touchpad/trackpad that lacks separate mouse buttons that can be independently held down with your second hand, performing any kind of "hold mouse button down while moving" operation is made significantly more difficult and a major hassle. This is due to the need to reposition your fingers on the pad to perform large movements, and the act of repositioning loses the "hold button down" mode, so you have to repeat the "hold button down" action just to reposition your fingers. But this is not a flaw with multiple window UI's, this is a flaw with Apple deploying a touchpad without separate buttons and failing to update the UI interface to better mesh with the physical constraints of a single touchpad without external buttons.