

Let's avoid designing like this - kirillzubovsky
http://newhive.com/kirill/let-s-all-avoid-designing-like-this

======
ambrop7
L E T ' S A L L F I X T H I S P R O B L E M B Y U S I N G O V E R S I Z E D F
O N T S S O T H A T T H E R E A P P E A R S T O B E M O R E C O N T E N T.

(seems like I can't change font size in the comments, spaces and caps will
have to do)

~~~
spacemanaki
I thought you were just nitpicking, but then I tried to change the font size
on TFA and was unable to. Cmd-minus and Cmd-plus in Chrome on OSX does nothing
to the body text, just changes the size of the logos and social buttons.
What's up with that? I don't think I've ever seen something like that before,
is it some CSS gone bad or something worse?

~~~
Scaevolus
It's a responsive layout. Change the window size, and the font size changes
with it.

~~~
elou
Poorly implemented here, though a sound concept when done correctly.

Information Architects (the creators of iA writer) shared an interesting post
[1] on responsive typography that you may find interesting. One rational for
having smaller text on small viewports, in addition to saving space, is to
adjust for the distance that most readers view content on their phones from.
We tend to hold our phones closer to our eyes, sit farther from our desktops,
and hold tablets some distance in the middle. Having smaller text on a phone
therefore accommodates that. Trent Walton wrote a useful post on the subject
as well [2].

1\. [http://informationarchitects.net/blog/responsive-
typography-...](http://informationarchitects.net/blog/responsive-typography-
the-basics/) 2\. <http://trentwalton.com/2012/06/19/fluid-type>

------
asparagui
The purpose of this site is to maximize the time users spend looking at the
content. The problem lies in that you think the content is the article, when
it fact it is the ads. Once you take this into consideration, this is an
excellent layout.

~~~
kirillzubovsky
But the question is - would I look at more ads if I read more content? right
now I am reading 1 article, looking at all the content. but they have the
opportunity to have me read 5 articles, thus looking at more ads overall. In
fact, the current layout is so bad, I don't even read all the articles that I
land on from HN, simply because I get too frustrated with so much ads.

~~~
robertlaing
You're right to ask the question. But (a) the site isn't optimized for you,
and (b) Forbes is trying to make money. So your blog post comes across as (I'm
sorry to say) naive.

If you want to find out these kinds of answers for yourself, try running an
advertising-supported website for a few months — it could be genuinely
interesting.

~~~
kirillzubovsky
I completely understand that Forbes is trying to make money and I hope they
do. I assure you that I don't expect to read content for free, even if it's
free. However, I believe that by encouraging me to read more of their content,
in ways that would actually keep me on their site, overall would increase the
number of ads that I get to see. Right now I came and I left because I was so
put off by the clutter, but like I said at the end of the post, whenever I
visit qz.com , I always read a lot more because I don't feel interrupted. If
Forbes gave me more content and fewer ads, I would read more and would thereby
see more ads. Maybe I am just not in the target audience, since I very very
rarely click on the ads.

~~~
robertlaing
I don't know qz.com's financials, but the ad:content ratio of a profitable
publication is normally a lot higher than what they have. Which suggests
they're either strategically de-prioritizing advertising for the short term in
order to build up audience, or they are struggling to sell space.

In the long-term, I would expect that for you to continue to enjoy quality
content on qz.com, you'll probably be disappointed by an increasing amount of
advertising. Whether it's in-between scrolling articles, or in the form of
advertorial, or a banner at the top of the screen, it will come :( Such is the
way of the world.

------
subpixel
I realize this is a bit meta, but the article ends with praise for qz.com - a
site which doesn't load at all unless I disable Ghostery and allow third party
cookies.

By meta, I mean it speaks to this, also on the front page of HN today (and
also all about advertising) :
[http://yro.slashdot.org/story/13/02/23/2126246/firefox-
will-...](http://yro.slashdot.org/story/13/02/23/2126246/firefox-will-soon-
block-third-party-cookies?utm_source=rss1.0mainlinkanon&utm_medium=feed)

------
inkaudio
There are plenty of studies that show users typically ignore anything that
looks like an ad, google "ad blindness". Those ads on the right looks like the
typical online banner ad, distracting. Even if you're designing for high ad
viewership this is the wrong way to design it. If you buy ads like these
you're spending your ad money poorly. These types of bad ad design has lead to
a move to so called "native ads", you can google that too, which is really
just a return to the traditional offline method of advertising. Traditional
offline publishers could overlay their content with ads but they don't because
they know people will hate it. Granted it is a lot easy to ignore/block
internet advertising, but it is illogical to make things worse with this sort
of disdainful design. "Native ads" is really just a buzz word, people like
John Gruber of Daring Fireball have capitalize on traditional advertising for
years. His rss feed sponsorship is just like a radio show sponsorship where
the host/dj of the broadcast reads an ad to it's listeners. Think about it,
Daring Fireball makes more money from rss sponsorship then it makes from
banner ads. Companies buy the feed sponsorship because it works.

------
elchief
" I am not going to share something until I have read the article - put all
the social nonsense deeper down"

Dude, your site has comments and sharing at the top.

------
dgunn
A Forbes article has to sound really interesting for me to deal with their
website just to read it. They also break the back button and screw up my
history. They really are a shining beacon of user abuse and should be known as
an example of what not to do.

[edit] I'd like to add a question to the author of this post. What have you
done to my zoom? Your text is gigantic and won't become non-gigantic. It's
terrible.

------
lnanek2
He doesn't put the article's photo in green, but photos for articles are very
important. So much so that studies have shown you are better putting the photo
above the title. He may be a techie who prefers words, but that's not the
site's target audience. He may even say he prefers words, but still be more
attracted to an article with an image at the top sharing space with the text.

------
xymostech
If you actually want to, you know, read the article, you can run this in the
console once the page loads:

a = $("#abovefold").find("> .fleft");
a.parents().andSelf().siblings().add(a.find("hgroup, h1,
.contains_vestpocket").siblings()).add(a.find(".vestpocket,
.controls")).remove(); a.css("width", 900).css("margin", "0 auto");

Gets rid of all the crap.

~~~
niggler
How do you skip the ad that invariably shows up when you try to access the
article?

~~~
xymostech
Hmm, I don't see any ads, even with adblock turned off, once I run that line.

~~~
niggler
I meant that, even with Adblock, you usually have to sit through a full-page
ad with the "continue to site" link

------
overloaded
See also: <http://news.ycombinator.com/item?id=5123293>

------
wcarss
I recall reading that shorter columns of text help people to read faster and
raise fact-retention, because it brings the entire body of a line into a
single eyespan. Even without speed reading skills, you can typically read
thinly columned text quickly.

I'm not sure if that has _anything_ to do with why a site would choose this
layout style, and there's clearly a lot of extra cruft that just distracts
from the content. Probably enough to obliterate the gains.

But I wouldn't be surprised to find out that some consultant or designer or
developer told them thin columns of text had upsides.

~~~
narsil
Sometimes the extra cruft goes too far: head to
<http://www.forbes.com/home_usa/> and you'll notice a video in the right
column automatically starts playing with the audio on (assuming you don't have
AdBlock blocking it).

------
carsonbaker
This isn't about the article, but I would like to point out that New Hive is
really a _fantastic_ publishing platform. There's just an immense amount of
creative content on it. It reminds me of what I like to think were the glory
days of the Web: you know, when people were on GeoCities crafting pages about
their DIY electric car or whatever. It seems like today everyone is feeding
what they ate for lunch into some reverse-chronological blogging system and
calling it a post. Call me old-fashioned...

~~~
bbx
I haven't signed up for New Hive, I've just watched the video. I'm not sure if
it suits the purpose of a blog well. Are there templates available? Otherwise,
it'd be annoying to have to 'design' your page everytime you post a new page.
Also, everything is positioned in absolute, which totally breaks the flow of a
regular HTML page.

I'm obviously talking from a outsider's point of view, considering I haven't
used it yet. I'm just wondering how it'd feel like for a regular publisher,
posting content on a regular basis.

Anyway, the interface for setting up a quick design seems more suited for
'landing' pages, where the layout is almost as important as the content.

It really looks great though. I like the creative results this kind of
interface yields.

------
mwilcox
Let's also not design sites that disable scrolling with middle-click.

~~~
whatshisface
I hate to be "That Guy", but I can't say I like the fact that I can't reduce
fontsize with crtl+zoom.

Tangent: Can anyone who knows more about javascript tell me why so many
websites disable _default_ features? I mean, isn't that, like, _more work_?

~~~
zevyoura
If you pull up the web inspector, this site actually dynamically changes the
font-size property of the body text when you zoom in/out to maintain the same
size. It's very bizarre, I don't understand the intentions of the designer at
all.

~~~
skore
It's probably related to having it adapt to the screen size - changing the
size of your window also changes the text. Again, don't understand the
intentions of that either.

------
danielweber
Should we avoid pages that need special javascript functions to scroll?

------
shadeless
I'm glad I'm not the only one who is bothered by layouts like this, I found
that it's rarely discussed.

(Also this was funny to me because I also made a screenshot on a forbes link
earlier, but haven't had much to say -
<https://news.ycombinator.com/item?id=4960590>)

------
thesash
One of the things we like to think about in ux design is how we can design at
the intersection of user goals and business goals. In this case the business
model is to drive a high volume of impressions to a broad audience. Therefore
this is a viable ux, since the business goal is to drive volume, not
engagement. A site like qz is going to have to command a much higher cpm and
as a result will need to focus on retaining high value users as opposed to
just driving high volume impressions.

A great analogue to this is in eCommerce sites. Compare the number of products
presented on an amazon product page to the number presented on Barney's New
York or net a porter. Amazon moves higher volume of product, and generates
more revenue, but does that mean they present the best ux for shopping?
Certainly not, but that's not their focus, nor is it Forbes's priority to
provide the best possible ux for readers.

~~~
Helianthus
This is an attitude that treats users like cattle.

------
sunnybunny
It would be a mistake to assume that readers are all the news sites optimize
for. Don't forget that they get readers to get impressions, and impressions to
get ad dollars.

By increasing the real estate focused on creating more clicks, they increase
the chances they can get somebody's attention, send them to a new page, and
thus create another impression, and more money generated.

It's the same reason that news sites will have a "Top 10" article with images
and divide the content up into essentially 10 sections you have to keep
hitting Next to see more on. More page loads = more impressions = more $$.
Simple

Additionally, pages rank higher for SEO in SERPS when they have social proof
that the content is engaging. So yes, the social sharing is necessary.

So while I agree your comments on how to optimize purely for readers are
valid, you may be forgetting to take other things into account.

------
darkchasma
Well, that's the mobile version of the site, so there are going to be some
constraints. The non mobile has much more breathing room. Also, I'm not sure
why the image is in red as it's contextual if not relevant. It's not an
advertisement.

~~~
kirillzubovsky
Just to clarify, this is not a mobile version. This is desktop version zoomed
in, so I could see better.

~~~
darkchasma
It's the media selector set to mobile sizes, so for responsive design, that is
the equivalent.

------
niggler
The floating social buttons and banners on this article's page are possibly
worse than Forbes' layout. On the iPad they take up significant screen real
estate

------
pringles
Maybe this guy should take his own advice...

<http://i.imgur.com/ieNUA5Vl.png>

------
jonathanjaeger
Personally I prefer having the tweet button at the top even if I need to go
through the content of the article before reading it. I'm willing to bet that
more articles are shared with the share button at the top rather than bottom.

Similarly, I spend a lot less time scrolling through Mashable headlines after
their redesign. Ick..

------
shoopy
Forbes isn't crafted by UX designers for reading pleasure, it's mangled by SEO
experts to optimize user-hostile metrics for better placement in the Google.

------
donniezazen
It's not a permanent solution but I use Evernote Clearly to get rid of all
non-content related material and it also highlights and save in Evernote.

------
glomph
The website linked is satire right?

------
kbar13
any reason why the font is 38px?

