Lost readability of homepage

[spartanatreyu]

The new homepage in it's current design is too hard to find what I'm looking for.

The main headlines at the top of the homepage are so large I have to move my head left and right to read them (screenshot)

Articles seem to have lost a feature image on the homepage (screenshot). I have to zoom the page out to 50% to see more than one row of articles at a time (screenshot). When viewing the page with no zoom, the combination of lost article images and massive scroll to see each headline makes it harder to differentiate articles apart from each other and they fade away into a scrolling wall of text.

[Dorza]

Agreed, structurally the new design is awful. Why is everything so spaced out and huge? I can see just two articles on a 1200px high screen before having to scroll. Whats with the huge gap between the title and the arrow? Theres so much wasted space on this design it's unreal. If you have a button that says "seriously, red" then surely there's something wrong with the design? It's like sitting in the front row at the cinema looking up at the screen trying your best to absorb everything whilst moving your head around to do so.

[2mhost]

Agree, I do not like the new homepage on my screen .. may be its meant to be read from phones? .. why the background is red? why everything is extremely big? why the signup form is moving like that? too much goods? or maybe I'm old fashioned? but the piece of info I'm looking for is buried and I can't find it easily

[k0R73z]

Before redesign, I visited this website daily.
Now i visit just for check was design changed back or not. Everything on home page are extremely big, many blocks have lazy loading so you just scroll white or red blank spaces.
I hope there is a way to come back to old design.

[theartofpeople]

I think the new design is very cool, but perhaps too much focus has gone into creating a cool design, rather than a design that will help people to read the content? I love the boundary pushing, but its all a bit much, all at once.

[ux-leap]

Sorry guys the design is just terrible, hard to read and follow, the font sizes are crazy. I feel the design overtook the purpose and form.

[Semo]

Headings stay huge, when zooming out. The new design is intangible wasteful with the given space. I have a 32" Monitor and it looks absolutely "not so cool", as it was before. (Perhaps I should downgrade to my ol' 14" SVGA tube to read your site).

I know you Design guys must push borders, because the sky is the limit, but it looks as if you designed the layout for a 86" Colossus Table, where the target audience consists of Hulk, HellBoy or an elephant instead for a usual user with a mouse in his/her hand.

Images describing or annotating the articles are missing, too. Sorry but I can't find the sense in it. The tiles are covering adjacent articles, when moving the cursor over them.

[WouterWidgets]

I agree, it's waaaay to big.
It's easy to say 'I liked it the way it was' or 'the previous site was better', but honestly, it was.

Regards

[vitalyfriedman]

Thank you so much for your feedback — we are listening and we are exploring options and suggestions for change. We know that some change will have to be made, we just need to see it through. Thanks for sticking around! @spartanatreyu @Dorza @2mhost @k0R73z @theartofpeople @rafal-leap @Semo @WouterWidgets

[theartofpeople]

You're welcome!

[vitalyfriedman]

Dear friends @spartanatreyu @Dorza @2mhost @k0R73z @theartofpeople @rafal-leap @Semo @WouterWidgets,

I've been playing with the layout a little bit, and I'd love to get your feedback. Please take a look:

Thoughts?

[mrpritchett]

I don't have any thoughts other than, "Damn, @vitalyfriedman needs a tab manager." :P

[vitalyfriedman]

Oh well, @mrpritchett — don't change the subject! :D

[tipsy]

Please don't just enlarge everything for high resolution monitors. Set a width-limit.

Edit: Also, the click-area for the top articles seems a bit extreme (there is no indication that everything is a link)

Edit2: What's the purpose of the Don’t Miss These Articles on Smashing floating text? I'm already here browsing articles, why are you telling me not to miss them? 🤔

Edit3: The Don’t Miss These Articles on Smashing looks a lot better in the gif @vitalyfriedman

[Semo]

@vitalyfriedman Thank you for your fast response and your elaborated layout. I like it better, that you put more articles into the same line. You reduced the font size slightly for people with a normal vision. Also you put more content into one line, so that one doesn't need to buy a free spinning mouse wheel mouse to get to the middle or after some boost-scroll-actions to the bottom of the page. But somehow I don't get why webdesign needs to have those over-exaggerating "Jumbotrons" in use as if articles wouldn't get the attention they might deserve. Right now it seems, that the webdesign tends nowadays to the other extreme of the early 2000's where the renowned micro-dotted-grid-fonts with size of 8pt or less ;-) where state of the art.
I would use the century old knowledge of old bookmakers and typographic artists and would set the font size to the ideal size they found out as being nice to the readers eyes. (I <3 typography !)
Thank you so much for your time and stay brave. :-)

[jdavies322]

Add me to the list of folks who are not fond of (1) the block-grid headlines-only home page layout, (2) the heavy-handed default red, the (3) lack of visual hierarchy.

I think the worst aspect is the removal of the featured image/screenshot and intro grafs, which in the old design served to instantly convey context and topic. I would often be drawn to click through based on the home page screenshot. Now our only visual hook is the author mugshot, which (no offense authors) conveys zero information about the article.

I think y'all may have focused a bit too much on implementing a flex-driven layout at the expense of readability and engagement basics.

[RadekHavelka]

I simply hate it. Its too big, too red (yes, I know the button ...), too messy - the details have been already mentioned above. The modification of font to reduce by one in size doesnt make it better in any way. Please, go back to previous design - that one I gladly showed to my colleagues to demonstrate clean, sharp, with excelent font usage, design. This one I showed just once, how things could turn REALLY REALLY BAD, if designers start to think about themselves and stop thinking about users.

[spartanatreyu]

I think there are two main improvements to be made here:

1. Bring back images on the previews of articles on the homepage. This comment by @jdavies322 goes into this more.
2. I can't see if you have (based on that gif above) but test the website on large displays (at least 27 inches) not just laptop and phone. Scaling things up 1:1 doesn't work on large displays. The best way I can describe the website for laptop users is: Zooming the website to 200 - 250%, wearing a hat and pushing the screen up to your head until it makes contact with your hat. It's impossible to comfortably read the headlines. It's like you said in the article here:

Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.…

This is in relation to lines larger than 75 characters but when the website is scaled this large, the text may as well be 400 characters long

[ux-leap]

Vertical scanning is always more difficult than the horizontal one and you are jumping from 7 rows to 3 than 4 than 7 than unbalanced 2 and so on. Changing font sizes and paddings won't help in my opinion the format/design all together is very hard to accept.

I don't understand why do you need so crazy design??? We are unable to navigate this page and cross-relate what is what...

This is simple, article first approach:

https://www.engadget.com/
http://mashable.com/
https://medium.muz.li/
https://techcrunch.com/
https://digiday.com/

[vitalyfriedman]

Dear friends @spartanatreyu @Dorza @2mhost @k0R73z @theartofpeople @rafal-leap @Semo @WouterWidgets,

How would you feel about this kind of layout for articles?

[Dorza]

I just replied to issue 315....

Id suggest putting the title block and the stuff beneath it back to the sane place...above the opening paragraph as is standard in ALL reading materials. Then put the "about the author" in the second column with the avatar the same size above the text and to the centre of the column. Yes I know 2 columns are boring in a flex/grid world and we want to explore these things but seriously somethings are just fine the way they are - 2 columns work as they are for readability and comfort.

As with the other thread everything is also HUUUGE!!!.

It's good and refreshing to see engagement with us on this but from your perspective and smashing mag as a whole it would be very easy to get caught up in "suggestions" from us all, one can end up going around in circles getting nowhere! What I would do is just the common sense thing... The design is fantastic visually, I really genuinely love it (a tad too much red on the home page however :) ). However structurally its just not right at all on the homepage or article pages and generally as I said originally its far to huge everywhere and spaced out. On the article pages with the title below the content the visual of the page is mega annoying and uncomfortable to read in my view personally.

I think sometimes the basics are the best approach even if sometimes from a designers perspective they don't necessarily release creative freedoms, particularly with things like flex and grid around nowadays and the possibilities they provide. Thing is people are accustomed to reading pages in a given way. If books were suddenly printed from top to bottom not left to right imagine the chaos that would ensue :).

[rzamoramty]

@vitalyfriedman I think the problem is that everything in the home and article layouts is screaming for attention. There's a reason Medium is so popular, it focuses your eyes on the article, so you can read distraction free.

I know you gotta put ads, but strangely ads are not the most distracting things in the layout. The big buttons, the summary, the table of contents, the huge side bar on the right that leaves a wide white space when its empty; those are the worst offenders.

Seeing this, I had to think for a few seconds just to realise where to start reading.

I read your magazine to unwind from work, but now I feel I'm working to find and read the articles.

[Dorza]

@vitalyfriedman in relation to your response on issue 315 what's huge is the everything on the page:

That's a 1920 x 1200 desktop screen, chrome 58 on Linux mint. The top content is just huge, padded out wide and in your face + a lot of wasted space in my view. When you scroll down to the single column area that's fine. The top is unbearable sorry just like the home page. I have a largish size screen to fit more content on without needing to scroll, I can scan a lot of information in one go, that's being taken away from me on your site. It's up to SM what they do obviously but I'm put off by what I'm seeing, sorry.

[vitalyfriedman]

Dear @Dorza, oh I love constructive criticism, so please don't take my reply in a wrong way!
We are listening, and we are committed to getting things right! I respect your perspective, and so let me see what we can do to make it better.

We are a very small team, and there are a number of issues to solve, but please stay patient. I'm keeping this task on my to-do list!

[tache]

I am sorry to say that the new site design does not work. Very hard to understand what is going on. Where I could easily skim to see topics and the content start, now I do not know even where to start. Sadly, after multiple attempts, I cannot see myself keeping it my must reads. In fact it is leading me to abandon the site.

[RadekHavelka]

Sadly, I have to agreee with @tache - on Ipad, it takes several seconds before the horribly ugly red turns to white, when user chose to do so, which doesn't make it any better, my eyes hurts. I cannot see more than two article HEADINGS on the homepage without scrolling, which makes it rather useless, as scrolling is not smooth at all, again, takes several seconds to start to react. Reading articles even on PC is messy as hell. Doing this to magazine dedicated to website / app development is like killing all the animals in ZOO for meat ... This site was on my list of daily reading, now I'm having problems to convince myself to visit it once a week :(

[vitalyfriedman]

Thank you so much for your constructive feedback, @RadekHavelka @tache @Dorza and everybody else — we are listening, and we keep refining and adjusting the site. Still quite some work to do, but bear with us, and thanks for your time and your patience!

[vik144]

ISSUE:While scrolling title is overlapping content.
I don't know if I need to make a separate issue but since the author is active here, I will post an issue. This is in Firefox developer edition. Design is great but its okay to follow traditional layouts for article pages.

[vrdriver]

Hi Vitally, while I agree with much of the sentiment on this issue, I appreciate that new designs and changes can be good. But, I'm struggling with the new layout and feel completely lost on the new page. :/ First thing I did was change the red to white and check my zoom level - and then I zoomed right out. (on a 1080p screen).
As we all know, content is king. So whether it may feel cluttered, but I'd love to see more content on the screen, with reduced font sizes and more content etc, not scrolling over 10 articles... Also, the hover zoom-up thing lost me, as it chopped off the text on the boxes next to it - that was just a little unexpected.
Anyway, I don't want to sound like I'm complaining. I know you're listening and it's hard to please everyone. I just thought I'd share my 2 cents. Cheers,
Steve

[vitalyfriedman]

Dear @vrdriver — oh we are listening. There are many things on our agenda to fix until later this year, so please stay tuned. Will address the issue of large... everything, too. We are listening indeed!

[pubso]

Just my two cents to the discussion regarding article layout: