Asking for Suggestions on New Blog Layout - Caleb Jones

Last week I implemented the new blog design you now see. While I received some positive feedback, many of you reported you didn’t like it.

Since I’m here to please, I’m asking for specific suggestions on how to improve the look of this blog. Please clear your browser cache, reload the site, and leave a comment and let me know, BUT… there are two types of suggestions I’m not interested in and will ignore.

The first are general statements about how the design sucks or how it looks outdated or cluttered or whatever. These way-too-general comments do not help me. Instead of telling me it’s cluttered or outdated, give me very specific things I should move, change or delete. Give me specifics. I will ignore any comments with general statements that don’t include specifics, regardless of the reasons you use as to why you “can’t” provide specifics. (Sigh.)

The second are comments that tell me to go look at another blog and “make it look like that.” While I understand what you’re intention is, the problem with that is this blog requires certain elements that most of those blogs don’t require or don’t care about.

Whether you like it or not, whether you agree with it or not, this blog requires the following elements on its home page and article page:

  • A clear statement about what the blog is.
  • An email capture window with a statement about what the user gets if he provides his email address.
  • On its home page, it requires links to the most recent articles, ideally with images.
  • On the article page, it requires the three buttons that offer audio versions, PDF, etc, to registered members.

All other elements you see I’m willing to put into a menu somewhere and take off the actual pages if you can provide a compelling reason to do so.

Also, for you members, since this is an “Announcements” article, it will not include an audio or PDF version (since I doubt you need these things about articles that are just me asking for suggestions or trying to sell you something).

The plan going forward is to do a minimum of one full-blown article per week not including Announcements. This will be the same for the BD Blog very soon. The idea is to provide higher quality with a little less frequency so I can devote time to other areas while still giving you want you want.

So there it is; please clear your browser cache, reload the site, and give me your specific suggestions regarding how this blog looks. I’m all ears. Once I make all of the changes and most of you are happy with how it looks, I’m going to port the structure over to the BD Blog as well.

25 Comments on “Asking for Suggestions on New Blog Layout

  1. There’s good reason as to why I liked the old “minimalist” design you had by far. The layout, the larger size of the text, very non distracting and easy on the eyes, really just everything about it was cool and unique to you and your sense of style. In a sense it was part of your brand. At least I see it that way.

    It was also the same on all three of your blogs, and that continuity and familiarity holds it’s own appeal for the reader.

    If there are certain new elements you feel are required, is it possible just to add them to the classic style you had? That is without disrupting that classic style drastically?

    This new design, is a too much information at once design. It has a very cluttered and in your face presentation about it and I eagerly can’t wait to finish up reading posts here and shoot over to the Blackdragon blog where things are still normal. Though you say not for long and that’s disappointing.

    Then again, they are your blogs and you have your reasons, but like I said, the classic “minimalist” presentation you’ve had thus far was fantastic!

    It’s kind of like McDonald’s changing it’s logo or something.

  2. The last version of this blog wasn’t minimalist at all, so I’m not sure what you’re referring to. There was tons of shit on the top and tons of shit on the sidebar, all of which I’ve removed.

  3. Hi Caleb,

    This new layout is pretty cool and functional but IMHO lacks one major thing: a comfortable measure for paragraphs. I find it WAY too large for reading on a computer screen. This problem doesn’t occur when reading on a phone / tablet, of course.

    I suggest that your web guy center the text on the screen and add this to the CSS:

    p, ol, ul {
    max-width: 33em;
    }

    It makes all the difference in the world.

    Also, minor thing, the line-height of the e-mail capturer is IMHO a little too tight. I suggest to drop a little the font-size and increase a little the line-height.

    For more advanced and complete stuff, buy “The Elements of Typographic Style” to your web guy 😉

  4. It’s as though you commissioned music of some kind for your audio recordings, and the music is bad. Listeners tell you it’s bad, and you demand specifics: “Which note is flat? What other notes would you add and in what specific places?” Non-musicians lack the skill to pinpoint exactly all that’s wrong, and musicians won’t do it for free.

    Just hire a more knowledgeable designer next time, that’s all. They aren’t cheap, though given how bad other PUA sites look, you can easily outdo them all in the eyes of someone new to the manosphere.

    And also, with you getting rid of the sidebar, the Recent Comments section is nowhere to be found. I think that’s bad for engagement and also leaves no chance that anyone would ever respond to anyone on old blog posts.

  5. Okay, I will list everything I find mediocre 🙂

    One thing I feel very strongly about in new version is thematic icons on home page, 18 of them in total, which are put right between the site headline and articles we’re all here for. My suggestion would be to put all these icons into hidden table under “Article Archive”, summoned by mousing over it – so that you can either choose a theme from table or go straight to Article Archive. In mobile mode list of contents, this could be made as an additional “Article Categories” line, right under “Archive Article”, for example.

    “Previous Article” is waaay down, under comments even. No one will search fot it there. It belongs right under article (over “Categories” perhaps).

    In mobile mode, list of contents looks way too simple (also, “Enable Dark Mode” line is out of place, was that intentional?). Will look better centered and using different background, especially black semi-seethrough one (Dark Mode black&red combo is amazing, btw). Plus, in mobile version, there is no border between list of contents and article, looks strange.

    “Search” is currently quite cumbersome, calling another screen for input. Optimally, input line should appear next to magnifying glass icon (maybe showing only when mousing over it), similar to “Enter Your Email Here” above.

    In mobile mode, “Back To Top” is reduced to a pointer, which is both easy to miss and obstructs some text. Some kind of small icon would look better.

    In mobile mode, “Listen to Audio Version”, “Download PDF Version” & “Listen to Extended Audio Content” buttons are all of different size.

    EDIT: Very uncomfortable comment editor, in another window and without options availiable when you first submit the comment. + “Leave a Reply” in Dark Mode is still a huge white block.

  6. Alexander – Great suggestions, thank you. Regarding some of them:

    One thing I feel very strongly about in new version is thematic icons on home page, 18 of them in total, which are put right between the site headline and articles we’re all here for. My suggestion would be to put all these icons into hidden table under “Article Archive”, summoned by mousing over it – so that you can either choose a theme from table or go straight to Article Archive. In mobile mode list of contents, this could be made as an additional “Article Categories” line, right under “Archive Article”, for example.

    Yeah, after looking at the site for a few days I think I agree with you. I’ve already removed the icons from the mobile version. Your idea about putting the icons inside Article Archive is a good one. Will do.

    “Previous Article” is waaay down, under comments even. No one will search fot it there. It belongs right under article (over “Categories” perhaps).

    Will do.

    “Enable Dark Mode” line is out of place, was that intentional?

    Originally yes, but subsequent changes made it look weird. I will fix.

    In mobile mode, list of contents looks way too simple. Will look better centered and using different background, especially black semi-seethrough one.

    This doesn’t make any sense. I don’t know what “too simple” means and the list of contents (do you mean lists of blog articles?) on the mobile version is already centered and very easy to read. Please clarify.

    Plus, in mobile version, there is no border between list of contents and article, looks strange.

    Unclear what you mean. Are you asking for a boarder to be placed around every individual article entry? I’m looking at the mobile version on my phone right now and it looks pretty clear to me where the borders between articles are in the article list. Please clarify.

    “Search” is currently quite cumbersome, calling another screen for input. Optimally, input line should appear next to magnifying glass icon (maybe showing only when mousing over it), similar to “Enter Your Email Here” above.

    I honestly don’t see a problem with this. I think it looks clean on both versions, and allows for longer search strings to be input. So I won’t change it unless I hear a bunch of other guys complain about it.

    In mobile mode, “Back To Top” is reduced to a pointer, which is both easy to miss and obstructs some text. Some kind of small icon would look better.

    Good idea. I will fix.

    I’m also going to add a “Jump To Bottom” arrow as well, since I always find myself scrolling down to the last comment on blog posts.

    In mobile mode, “Listen to Audio Version”, “Download PDF Version” & “Listen to Extended Audio Content” buttons are all of different size.

    Ah, I didn’t notice that. Yes, looks bad. I will fix.

    Very uncomfortable comment editor, in another window and without options availiable when you first submit the comment. + “Leave a Reply” in Dark Mode is still a huge white block.

    I have no idea what you’re talking about. Please clarify. (And I don’t see any “huge white block” around Leave a Reply on my Android phone in Dark Mode.)

  7. Thanks for your answer! I will try to clarify points that raised confusion. I felt a bit at loss for words, since some things would be much easier to clarify via taking screenshots and there is no option to insert images other than by linking them on outside site. Anyway:

    “List of contents” in mobile mode – referred to popup menu with “Start Here”, “Podcasts…”, “Article Archive”, etc. These can be accessed via ‘three line button’ ( = ) near “Search”. In PC view (if you make window much smaller), resulting popup menu has inactive scroller border – in mobile view, there is no border at all. With background colors of popup menu being very similar to blog (white on white, dark on dark) and no border, it does not look that good. It is a minor thing, though. The popup menu itself would look better while centered (optimally both horizontally and vertically), but see for yourself.

    When using comment editor (try it!), instead of using same ‘reply window’ what you use while writing reply (with all formatting stuff), a popup with crammed information appears. It is not horrible, but after using similar layouts, I expected to edit my message in same window as before. Also, popup looks rough compared to normal blog layout.

    “White block” referred to reply window in Dark Mode, which, compared to overall comfortably dark layout, hurts eyes a bit. It is a minor thing, but trying dark instead of white would work well. As in “Name”, “Email” & “Website” lines right below reply window. Yellowish also looks surprisingly well to me (an example can be seen when choosing a previously filled data in “Name”/”Email”/”Website” lines).

    If anything was left unclear – I suggest using screenshots to make sure.

  8. Perhaps calling the old design “minimalist” was a poor choice of words. Yes you did have stuff on the top and on the sides, and honestly that was great. It wasn’t too much or too little. The articles resided perfectly on the left-hand side.

    The previous larger font was supreme though, hands down! As was the replies in boxes, rather than quotes (” “).

    The new design reads like sales pages. Nothing wrong with that if you’re reading an actual sales page, but for blog presentation it’s a little off putting.

    Again I’m sure you have your reasons for redesign, and your material is still top notch. I just think your previous layout was superior to this one and I wouldn’t be surprised if there are others who feel the same.

    As for a specific suggestion, it would be to switch back to your classic layout.

  9. My only complaint is that when I load the page (or tab to it), the post title isn’t even visible; all I see is the headers, which are identical for all your posts.  If I have ten tabs up with ten of your posts, it’s annoying to have to scroll each one of them down just to know which one is which.

    Imagine a magazine where when you turn to the first page of the article, you don’t see any sign at all that there’s an article “starting” on that page!

    So my suggestion is to somehow move the title up high enough that, before the reader scrolls down, one can see the title and it looks like the start of a blog post.

  10. I felt a bit at loss for words, since some things would be much easier to clarify via taking screenshots and there is no option to insert images other than by linking them on outside site.

    The inability to post pics on my comments is purposeful. It causes too many problems and invites childish content and trolling.

    I think you’ll have to email me screenshots (theonlyblackdragon@gmail.com), since most of what you said doesn’t make any sense to me. There are no “popups” on this blog other than the search feature, and I have no idea what you mean by an “inactive scroller boarder”, etc.

    I think what you’re saying about the comments is that the commenting feature on dark mode looks ugly, because (I think) of the color of the buttons and the white background inside the comment box. I agree with you and I will fix this. But on the other stuff, you’ll have to send me screenshots of what you’re talking about because I don’t understand.

    As for a specific suggestion, it would be to switch back to your classic layout.

    Thank you for your suggestion. I’m not doing that.

    My only complaint is that when I load the page (or tab to it), the post title isn’t even visible; all I see is the headers, which are identical for all your posts. If I have ten tabs up with ten of your posts, it’s annoying to have to scroll each one of them down just to know which one is which.

    I am on a 14 inch laptop using Firefox, and I justed opened about six tabs with six different articles, and the tab titles are all correct, and if I click to an article, without me scrolling at all, I see the logo of the site, then the brown bar, then the image of the article with the title in the image. I can even see about two sentences of text at the beginning of the article, with zero scrolling.

    What is the size and resolution of the screen you’re using?

  11. I think the new design looks clean and modern. Back in the days, the sidebar was on the left side, then on the right side, and nowadays the ultra-clean design without sidebar is the new standard with the dark mode being the latest addition of modern layout. So design wise your blog is very up to date.

    My suggestions are:

    1. Make the top menu disappear while reading so you only have text and nothing else. Make it reappear when the reader hovers with the cursor over the top of the screen or when he scrolls up a bit.

    2. Maybe increase the font size a little bit. The older design had the same font size but was more narrow. Without the sidebar, you have more space and thus the lines become wider which slows down reading pace.

    3. The color blue in your logo gets swallowed by the black in dark mode. So a dark mode version of your logo with slightly lighter blue would be cool.

    4. I don’t think the color red for the menu font and archive page (dark mode) fit into the color scheme of the CJ blog. Reserve it for the BD blog where it fits perfectly. For the CJ blog, I would change the color to the light brown you have in your logo.

    5. The favicon of the CJ blog should be in blue&brown to distinguish it from the red&black BD blog favicon.

    6. When you quote someone in a comment the quote gets a slightly different background color in the light mode but not in the dark mode. I would add this to the dark mode so it’s easier to distinguish between a quote and an answer. The quotation marks are great but with a background color, it would be even better. A dark grey would be perfect.

    7. The related posts pictures should be a little bit smaller, like in the old design. And the word “comments” should be white in the dark mode. Right now it’s dark grey on black and thus almost invisible.

    8. The category icons have a different color scheme than the rest of the blog which makes it look too chaotic. Instead of yellow for the icons, I would use the same brown as in the logo. And for the icon background, I would choose the same blue as in the logo. And for the dark mode also a bit of a lighter blue so it won’t get absorbed into the black.

    9. There are too many category icons that aren’t easy to distinguish from each other.

    “Alpha 2.0 Business” overlaps with “Personal Effectiveness” and “Business/Investing News” which in turn overlaps with “Investing”. They could be reduced to 2 or 3 categories instead of 4.

    “Libertarianism”, “Politics”, “Economics” and “Western Collapse” all overlap more or less and could be reduced to 1 or 2 categories instead of 4.

    Same for “Fun” and “My Life”.

    10. I second Pseudonymous User:

    And also, with you getting rid of the sidebar, the Recent Comments section is nowhere to be found. I think that’s bad for engagement and also leaves no chance that anyone would ever respond to anyone on old blog posts.

    Maybe there is a way to get the “Recent Comments” section back. It increases user engagement with older articles.

    11. In the mobile version, the text gets stretched out to the edge of the display. I would keep a little distance like you had with the old design.

    Other than that, I really enjoy the update.

  12. Frankly, the new desktop version is alright for me. The mobile version is another story.

    Comparing it with the BlackDragon blog, one striking difference is that on the latter

    the full title of a post features on the screen right when you open it, without scrolling.

    It could seem like a detail but frankly it does make a difference in the experience,

    like you go to the cinema regularly and one day out of the blue the pre-film commercials

    last 50% longer. Just shrinking the font and logo in the top banner a little may solve the problem,

    maybe shrinking the font size of the title too, which is much smaller on the BD blog.

    Also when holding the phone vertically the illustration pic cannot be viewed in full, which for some pictures

    will ruin the point/message/joke. This one should be easy to fix.

    Still when holding the phone vertically, the text really goes from the screen’s leftmost pixels to the extreme right,

    no margin, which is not ideal.

     

  13. I’m using this on Chrome mobile on Android.

     

    When I go to tab view, the new logo is black and red. Is that on purpose? It’s a bit hard to differentiate between CJ blog and BD blog since they both use the same colours. I know the shape is different, but it’s easier to tell the difference with colours than shape. The old CJ blog was beige and blue (IIRC), while BD blog is red and black.

  14. 1. Make the top menu disappear while reading so you only have text and nothing else. Make it reappear when the reader hovers with the cursor over the top of the screen or when he scrolls up a bit.

    No, I like it the way it is. I find myself clicking it often when while scrolled down deep into an article. I assume others will as well.

    2. Maybe increase the font size a little bit. The older design had the same font size but was more narrow. Without the sidebar, you have more space and thus the lines become wider which slows down reading pace.

    I’m going to make the reading column more narrow (again).

    3. The color blue in your logo gets swallowed by the black in dark mode. So a dark mode version of your logo with slightly lighter blue would be cool.

    That will take some time; an entire new logo will need to be created. I will do that later.

    4. I don’t think the color red for the menu font and archive page (dark mode) fit into the color scheme of the CJ blog. Reserve it for the BD blog where it fits perfectly. For the CJ blog, I would change the color to the light brown you have in your logo.

    Ehhh. I might do that later. It really depends on how many guys use Dark Mode. The vast majority of readers will not (but I’m wiling to be proven wrong).

    5. The favicon of the CJ blog should be in blue&brown to distinguish it from the red&black BD blog favicon.

    Will do.

    6. When you quote someone in a comment the quote gets a slightly different background color in the light mode but not in the dark mode. I would add this to the dark mode so it’s easier to distinguish between a quote and an answer. The quotation marks are great but with a background color, it would be even better. A dark grey would be perfect.

    What I said for #4 above. For the time being, I’m not going to bust my ass to make all kinds of cosmetic changes to Dark Mode unless they look really terrible (like with Alexander’s suggestions).

    7. The related posts pictures should be a little bit smaller, like in the old design. And the word “comments” should be white in the dark mode. Right now it’s dark grey on black and thus almost invisible.

    As above.

    8. The category icons have a different color scheme than the rest of the blog which makes it look too chaotic. Instead of yellow for the icons, I would use the same brown as in the logo. And for the icon background, I would choose the same blue as in the logo. And for the dark mode also a bit of a lighter blue so it won’t get absorbed into the black.

    I’m moving all the icons off the main page and into a menu. Not changing how they look though.

    9. There are too many category icons that aren’t easy to distinguish from each other.
    “Alpha 2.0 Business” overlaps with “Personal Effectiveness” and “Business/Investing News” which in turn overlaps with “Investing”. They could be reduced to 2 or 3 categories instead of 4.

    “Libertarianism”, “Politics”, “Economics” and “Western Collapse” all overlap more or less and could be reduced to 1 or 2 categories instead of 4.

    Same for “Fun” and “My Life”.

    I disagree with just about everything you just said. I like the specific separations, and I don’t view any as overlap.

    10. Maybe there is a way to get the “Recent Comments” section back. It increases user engagement with older articles.

    I’m willing to do this but I have no idea where to put it where it would A) make logical sense and B) not add any to any more screen space/clutter.

    11. In the mobile version, the text gets stretched out to the edge of the display.

    Intentional. That’s the new blog style now. Other modern blogs are like this too. It’s trying to simulate a Kindle type experience.

    the full title of a post features on the screen right when you open it, without scrolling.

    Intentional. I like it that way and it’s part of a more modern style. I will keep it unless I get a lot more complaints about it.

    when holding the phone vertically the illustration pic cannot be viewed in full

    Yes, that’s bad. I will fix.

    Still when holding the phone vertically, the text really goes from the screen’s leftmost pixels to the extreme right, no margin, which is not ideal.

    No, there is a small margin, which is standard for blogs these days when viewed this way. Compare to some other modern blogs and you’ll see.

    When I go to tab view, the new logo is black and red. Is that on purpose? It’s a bit hard to differentiate between CJ blog and BD blog since they both use the same colours. I know the shape is different, but it’s easier to tell the difference with colours than shape. The old CJ blog was beige and blue (IIRC), while BD blog is red and black.

    Will fix.

  15. the full title of a post features on the screen right when you open it, without scrolling.

    Intentional. I like it that way and it’s part of a more modern style. I will keep it unless I get a lot more complaints about it.

    Just to be sure in case you read my comment quickly, I said that on the BlackDragon blog the title of a post can be viewed in full right when opening it, and it’s a nice thing.

    With the new version of the CJ blog, all I see when opening a post on the mobile is the top banner and the upper parts of the first words of the title. Again it is a detail, but it makes a difference in the experience imho.

    As for the margins, I saw no other blog with margins that thin, manosphere or otherwise.

    Still think the margins could be just a little wider, not much but a little and it would make reading much more comfortable. I even postponed reading the last business history post in order to read it on my laptop, which I don’t prefer, mainly because of that. But that’s me.

  16. With the new version of the CJ blog, all I see when opening a post on the mobile is the top banner and the upper parts of the first words of the title.

    What device and browser are you using?

  17. A Huawei P10 with Chrome

    Okay. That explains it. I can see post titles on my Galaxy S8+, but I have a longer screen than you do, and the title is almost at the bottom of my screen. Your phone is probably short enough where it’s cutting it off at the bottom. I’ll have them fix it.

    We’ve also increased the margins on mobile devices, as you requested. Clear your cache and take a 2nd look.

  18. A Huawei P10 with Chrome

    Okay. That explains it. I can see post titles on my Galaxy S8+, but I have a longer screen than you do, and the title is almost at the bottom of my screen. Your phone is probably short enough where it’s cutting it off at the bottom. I’ll have them fix it.
    We’ve also increased the margins on mobile devices, as you requested. Clear your cache and take a 2nd look.

    Ok, great. Thanks for the reactivity

  19. In light mode, the background colour of the quoted comments hurts my eyes: it’s too similar and/or the double transition from white then grey for comments then clearer with the background colour of quotes strains my eyes. A (blue)grey with significant darker shade would be better as it would progressively transition from white to light grey to a darker background (still light enough). Such as:
    HEX
    #d5d8dc
    RGB
    213, 216, 220
    HSL
    210, 9%, 85%

    HEX
    #d6dbdf
    RGB
    214, 219, 223
    HSL
    210, 12%, 86%

    HEX
    #ccd1d1
    RGB
    204, 209, 209
    HSL
    184, 6%, 81%

    Or alternatively you could use the same goldish brown as the menu for the background of the quotes.

  20. My previous comment is about the desktop version on my laptop 15.6″ @ 1980×1080 on microsoft edge.

    I am looking at the blog on mobile now, since the white border are much smaller than on PC, in the comments section the color transition of the quotes to lighter than the grey comments doesn’t hurt my eyes as much, especially in portrait mode since the white margins are really thin then. But still, it’s not good in my opinion.

    Aside from this point, the new site is a huge improvement on mobile.

Leave a Reply

To leave a comment, enter your comment below. PLEASE make sure to read the commenting rules before commenting, since failure to follow these rules means your comment may be deleted. Also please do not use the username “Anonymous” or “Anon” or any variation thereof (makes things too confusing).

Off-topic comments are allowed, but Caleb will ignore those.

Caleb responds to comments in person, but he only does so on the two most current blog articles.

Related Posts

Begin typing your search term above and press enter to search.