I'm starting a new blog. And what a better way to start it than talking about how I've built it?
Usually developers write their first "Hello World" blog post describing all the languages, frameworks
and coding techniques they have used to build the blog.
But unlike all developers, I won't describe how I built it technically.
First because I used a quite ordinary set of tools: jekyll served from github pages.
Second, because I want to use this first post to set the expectation of what kind of topic intend
to write about in this blog.
In this post I'll discuss how I built my blog from a design perspective and give some tips about
designing personal blogs for developers.
Let's Talk About Design
The goal of any blog is to keep the reader's attention to be able to deliver a message or knowledge
effectively. For this reason you'll notice that my blog has a really simple UI. Some may
call it "minimalist".
It is minimalist in the sense that all that I've done in the UI was just adding a few sprinkles on top
of what browsers render naturally without any styling. You can see that not much changes if
you render my blog without CSS.
The few changes added on top of a raw HTML were added with the goal to improve as
much as possible the reading experience.
Here are the 7 main design elements that I used to build a better blog.
1. Limit Content Width
Perhaps the most important tip. Limit the width of the text.
Long lines are really difficult to read and to keep track of. When readers reach the end of the
current line they won't have the beginning of the line in their field of view if the line is too long.
This makes it difficult to know which line is the next.
It will cause frustration and can make readers lose interest in the content
only because the text is hard to read.
2. Don't Add Distractions In The Middle Of The Text
No pop-ups, no animations, no ads. Nothing. You want your readers to stay focused on the text to be
able to communicate your ideas effectively.
It is very likely that readers will already have other sources of distraction while reading your content.
Don't add another one.
3. Add Code Highlighting
Code highlighting is one of the best tools for software development and can be integrated
into your blog to make code blocks easier to read.
It is also important to add highlighting for inline code snippets. Something simple like
a text with different color using a monospace font is enough to make the inline code
distinguishable from the normal text.
4. Display The Post Date At The Top
One of the most frustrating experiences for a software developer is to read an entire blog post,
test the examples and ideas, fail to make them work and, after a lot of debugging, discover
that the post is outdated.
For this reason, any blog, especially blogs focused on software development, should include the date
of the post at the beginning of the page.
If you have an outdated post that you know that doesn't work anymore, add a disclaimer at the beginning
of the text. Another idea is to write a new post and add the link to the updated version on the old one.
5. Tag Your Posts
Tags are a simple way to give additional context about a blog post theme. But don't add too many of
them to a blog post.
Many tags to a single post means that the content doesn't have a clear focus or some of the tags
are irrelevant. Either case is bad for readers.
6. Avoid Default Visual Themes And Templates
A unique visual style to the blog allows the readers to quickly recognize that they are reading
your blog. The blog UI is part of your branding.
For this reason, avoid default themes or themes that are used by many other developers. Try to come
up with something new.
Keep in mind that the blog visuals should be simple. Remember, the goal is to improve the
experience of the readers and not to distract them with fancy CSS.
7. Call To Action At The End
If a reader reached the end of your content, congratulations!
It means that the reader enjoyed your content and you can use this opportunity to guide them to a place
where they can learn more about the topic.
You can add a link to a related post or a link to your social media where the reader can ask you questions
or give feedback about your content.
Reading Experience
Everything is designed for someone to accomplish a specific goal. When designing a blog for developers
we should think how the design will improve the reading experience and, as a consequence, help the
readers to learn as much as possible.
Are you designing a blog? What design element have you added to improve the reader’s experience?
Top comments (0)