Hacker News Reader

Comment by wlesieutre | Hacker News Reader

Your website body text should also not be covered up by "social buttons" if you ask me.

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.

View on HN

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."

This little bookmarklet [1] takes care of those fixed position items nicely:

javascript: (function%20()%20{var%20i,elements=document.querySelectorAll('body%20*');%20for%20(i=0;i<elements.length;i++)%20{if%20(getComputedStyle(elements[i]).position==='fixed'%20||%20getComputedStyle(elements[i]).position==='sticky')%20{elements[i].parentNode.removeChild(elements[i]);}}})();

Anything on the page styled as position: fixed or position: sticky is deleted. Cleans those things right up.

[1] https://en.wikipedia.org/wiki/Bookmarklet

You are a hero. Thank you.

Very useful.

Thanks.

scrolling via space works perfectly for me on chromeos - the last line of visible text is the first line of visible text after hitting space.

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.

I think that's called "holding alt while you resize the browser".

Oh snap! How have I never known about this? Works just like holding Alt while resizing objects in Sketch or Photoshop. Very handy.

The tooling is already available. Either resize your actual browser window or use the devtools device emulator. Chrome has extensive support for this.

Yeah, those social buttons are fucking atrocious.

If you're at 800x600 like it's 1995, then you should expect that sort of thing.

If you believe that you are doing web design wrong.

I'm not saying it's right, I'm saying it's typical.

Isn't the whole point of responsive that you don't design for 'typical' screen sizes?

Ever heard of tablets?

Responsive design means the browser resolution doesn't matter. Sites should be able to handle these dimensions by scaling appropriately and changing the layout.

I'm using a windowed multitasking OS (it's even called Windows!) and have multiple windows open at various sizes. Pretty neat stuff!

Wow. I guess that means you can resize your browser then, meaning this entire discussion is unnecessary. ;)

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.

Sad! In all seriousness, I guess I wasn't clear enough. I should've added "/s" after my ";)"

Reply on news.ycombinator.com