6 ms·

Your website body text should also not be covered up by "social buttons" if you ask me. http://i.imgur.com/cmrn7wB.png http://i.imgur.com/cmrn7wB.png So much

Your website body text should also not be covered up by "social buttons" if you ask me. http://i.imgur.com/cmrn7wB.png 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.

tomjakubowski 10y ago
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.
- ars 10y ago
  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.
  - tracker1 10y ago
    +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.
- Domenic_S 10y ago
  I think that's called "holding alt while you resize the browser".
  - dceddia 10y ago
    Oh snap! How have I never known about this? Works just like holding Alt while resizing objects in Sketch or Photoshop. Very handy.
- manigandham 10y ago
  The tooling is already available. Either resize your actual browser window or use the devtools device emulator. Chrome has extensive support for this.
icedchai 10y ago
If you're at 800x600 like it's 1995, then you should expect that sort of thing.
- numerlo 10y ago
  If you believe that you are doing web design wrong.
  - icedchai 10y ago
    I'm not saying it's right, I'm saying it's typical.
    - blowski 10y ago
      Isn't the whole point of responsive that you don't design for 'typical' screen sizes?
- tpetry 10y ago
  Ever heard of tablets?
- manigandham 10y ago
  Responsive design means the browser resolution doesn't matter. Sites should be able to handle these dimensions by scaling appropriately and changing the layout.
- wlesieutre 10y ago
  I'm using a windowed multitasking OS (it's even called Windows!) and have multiple windows open at various sizes. Pretty neat stuff!
  - icedchai 10y ago
    Wow. I guess that means you can resize your browser then, meaning this entire discussion is unnecessary. ;)
Doctor_Fegg 10y ago
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."
- pwg 10y ago
  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 https://en.wikipedia.org/wiki/Bookmarklet
  - Doctor_Fegg 10y ago
    You are a hero. Thank you.
  - gerdesj 10y ago
    Very useful. Thanks.
- notatoad 10y ago
  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.
cypher303 10y ago
Yeah, those social buttons are fucking atrocious.

tomjakubowski 10y ago

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.

ars 10y ago
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.
- tracker1 10y ago
  +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.
Domenic_S 10y ago
I think that's called "holding alt while you resize the browser".
- dceddia 10y ago
  Oh snap! How have I never known about this? Works just like holding Alt while resizing objects in Sketch or Photoshop. Very handy.
manigandham 10y ago
The tooling is already available. Either resize your actual browser window or use the devtools device emulator. Chrome has extensive support for this.

icedchai 10y ago

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

numerlo 10y ago
If you believe that you are doing web design wrong.
- icedchai 10y ago
  I'm not saying it's right, I'm saying it's typical.
  - blowski 10y ago
    Isn't the whole point of responsive that you don't design for 'typical' screen sizes?
tpetry 10y ago
Ever heard of tablets?
manigandham 10y ago
Responsive design means the browser resolution doesn't matter. Sites should be able to handle these dimensions by scaling appropriately and changing the layout.
wlesieutre 10y ago
I'm using a windowed multitasking OS (it's even called Windows!) and have multiple windows open at various sizes. Pretty neat stuff!
- icedchai 10y ago
  Wow. I guess that means you can resize your browser then, meaning this entire discussion is unnecessary. ;)

Doctor_Fegg 10y ago

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

pwg 10y ago
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 https://en.wikipedia.org/wiki/Bookmarklet
- Doctor_Fegg 10y ago
  You are a hero. Thank you.
- gerdesj 10y ago
  Very useful. Thanks.
notatoad 10y ago
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.

cypher303 10y ago

Yeah, those social buttons are fucking atrocious.