12

I'm looking for a constructive feedback on readability of my product

almost 3 years ago from , Product Designer

Hi there!

My name is Jaka and I'm a designer at ProteusThemes. We usually make WordPress themes for corporate businesses, but we took a step to the left and created a blogging WP theme with a focus on readability.

Why? My girlfriend wanted to start blogging and I as a WP theme designer was responsible for finding her a good blogging theme and set up a blog for her.

I was looking through a gazillion of free WP themes on wordpress.org, but all I found was rubbish (design speaking). Then I tried my luck on paid WP themes, but without any success, so I suggested to my teammates that we should create something like that since we are a pro wp theme makers :) Something simple with the focus on good readability.

Long story short the product is made - Readable

But the thing is if we want to advertise it as the most readable WP theme out there, the readability must be P-E-R-F-E-C-T!

I'm a self-thought web designer and I know that I don't know everything, so I'm asking you for help.

Can you please take a look at the demo, especially the single post and suggest me how can I (we) improve readability even more. I would love to advertise my product as the theme with perfect readability and of course I would like to learn some new things.

Thank you 100x times for your help!

PS: Surprise, surprise. My girlfriend doesn't want to write a blog anymore :/

EDIT: We fixed almost all major and the minor issues presented below. Thank you DesignerNews community for all the help!

Link to the final result

16 comments

  • Ismael Branco, almost 3 years ago

    you are using medium style guide. be careful with the kerning in the menu bar, it's to short.

    2 points
  • Sjors TimmerSjors Timmer, almost 3 years ago

    Great work, I've been looking for a theme like that myself. The line length on the about page seems to be too long: https://demo.proteusthemes.com/readable/about-us/ (and longer than on the posts)

    And there's an argument to be made that the line length on mobile view is too short for comfortable reading.

    Uppercase for labels seems to be a stylistic choice at the expense of readability (being very very picky here :)

    You might also want to test the readability of especially the small sizes of text in the colour #9a9a90 (like the post author text). Looks like it's too low: https://www.levelaccess.com/compliance-resource/color-contrast-checker/

    Here's a nice resource: http://webtypography.net/toc/ (and the author just published a book on the topic: http://book.webtypography.net/)

    2 points
    • Jaka Smid, almost 3 years ago

      Sjors, Thank you!

      • I fixed the about us page
      • I agree with you that length on mobile is too short. I make the lines on mobile longer by eliminating the non-necessary backgrounds and smallering the font size. I'm waiting now for our developers to implement the changes.
      • I will try to change the upper case labels and if they look good lowercased I will make a change.

      • All the #9a9a90 will be changed to something more contrast - #666..

      You are THE BEST. Thank you for your feedback and your time!

      1 point
      • Sjors TimmerSjors Timmer, almost 3 years ago

        No problem, I quite enjoy tackling typography as if it's engineering :)

        If you haven't come across it, there's an interesting bit of theory behind what the size difference should be between mobile and desktop type-sizes: https://ia.net/topics/responsive-typography-the-basics/

        Also this short guide from the UK government design team gives some good basic advice: http://govuk-elements.herokuapp.com/typography/ I think you're already following them all, but it's still a good guide :)

        2 points
        • Jaka SmidJaka Smid, almost 3 years ago

          Thank you for sharing your resources!

          I'm going to read them all and then create myself a checklist. Not only for this project but all futures as well. It's hard to have every single rule for good readability in the head since there are so many of them.

          Sjors, thanks again!

          0 points
  • Stefanie Fluin, almost 3 years ago

    Nice! Overall, I love how clean it is :) the actual paragraph text is crisp and easy to read!

    I'd go slightly darker on the date and category gray as it's currently failing accessibility contrast (http://webaim.org/resources/contrastchecker/). The green is a tad better, but might need contrast tweaks as well.

    1 point
    • Jaka SmidJaka Smid, almost 3 years ago

      You are the third one who notices that. I guess there really is a lack of contrast on those grey text.

      Stefanie, thank you for your feedback!

      0 points
  • Maak Bow, almost 3 years ago

    Nice enough. Things i don't like. IMHO 1.The body text on the tiles is larger than the text in the article, i get to content i want to read so you make the text smaller? 2. I love space around things but... On Mobile the horizontal space at the sides of the main text column and at the sides of the cards is too wide on small devices. This makes the text column too narrow and text wrap too much. Is not bad on a phaplet but on an iPhone 5 and 6 its not the best. Why is the article in a "card" anyway?. Having a grey background and then a white panel takes up space unnecessarily. ..on small devices. 3. I cant click the whole card to go to the article. By all means have a hover on the heading and the Call To Action as its what many users expect, but if i click anywhere on the card it should take me to the article. 4. I don't like the vertical spacing of the subheadings in the article. They aren't attached to the copy they are related to, they seem to be centered between two blocks of text like a quote. make them closer to the copy they are related to.,

    1 point
    • Jaka SmidJaka Smid, almost 3 years ago

      Maak, awesome observations!!

      I made a rookie mistake when I started designing Readable. I should go mobile first and that would save me a lot of troubles.

      1. Of course, it should be another way around. I see now that mobile readability has a lot of improvements to make.

      2. As I said, those cards looked so lovely on a desktop but on mobile, they are unnecessary using up a lot of space. I forward design improvements to our developers and I hope we could make those cards edge-to-edge on mobile.

      3. Of course, it makes sense. We will make the whole card clickable.

      4. Yes, I agree with you 100%. Damn, it's quite hard to write a CSS where every combination of text elements works well together. More an observation than an excuse.

      Thank you, Maak, again for your feedback. I feel like a fool a little bit but I think that's a good thing since I'm learning new stuff.

      0 points
  • Mike StevensonMike Stevenson, almost 3 years ago

    Looks good to me! Definitely readable. Nothing revolutionary, though. I'm surprised you had such a hard time finding a readable blog theme.

    1 point
    • Jaka Smid, almost 3 years ago

      Maybe I'm too picky I don't know.

      I looked at ThemeForest and if you are familiar with it, you know there are a gazillion of themes bloated with a gazillion of features but no theme that would be clean, light with solid, big typography.

      The closest theme I found was iA's alice.ia.net. But it is just a little bit too boring.

      Anyway, thanks for your comment, Mike!

      1 point
  • Duke CavinskiDuke Cavinski, almost 3 years ago

    I'm sure it's customizable, but you might have some issues with that green link color on white, as far as WCAG standards go (if that matters to you.)

    1 point
  • Dennis EusebioDennis Eusebio, almost 3 years ago

    Looks pretty solid to me. Not seeing any major issues with the type.

    1 point