|
|
|
|
<!--201001,201010-->
|
|
|
|
|
<h1>how other people design blogs</h1>
|
|
|
|
|
september 2, 2020
|
|
|
|
|
web design<br>
|
|
|
|
|
<br>
|
|
|
|
|
Blogs are difficult to design, since there’s a lot of information to present, most of which needs to be visually deemphasized next to the actual blog posts.<br>
|
|
|
|
|
<br>
|
|
|
|
|
I don’t follow active blogs right now besides maybe <a href="https://www.justonecookbook.com/">Just One Cookbook</a>. In lieu of favorites, I’m looking at examples from <a href="https://makeawebsitehub.com/examples-of-blogs/">Examples of Blogs – Inspiration for New Bloggers</a>, straight from the top two first page Google results. They are going to be SEO in the flesh, but the principles are worth observing.<br>
|
|
|
|
|
<br>
|
|
|
|
|
(I'm not making money off this article, just critiquing or educating or whatever 'free use' thing. But just in case I'm not allowed to share screenshots of other blogs, I redrew them.)</br>
|
|
|
|
|
<br>
|
|
|
|
|
<h2>Keep Reading</h2>
|
|
|
|
|
How do you make the “keep reading” button obvious? <br>
|
|
|
|
|
<br>
|
|
|
|
|
“Keep Reading…,” “Continue >>,” etc, are all long words and phrases. ▶ reminds me too much of the Youtube play-button and audiovisual media in general. How do the professionals do it? <br>
|
|
|
|
|
<br>
|
|
|
|
|
<a href="https://skintdad.co.uk/">Skint Dad<a/> uses something I’ve definitely seen a lot: A stock photo link with a clickbait-style headline which is also a link. Stark, direct, no matter what you click on is driving you straight to the article.<br>
|
|
|
|
|
<br>
|
|
|
|
|
<img src="/static/img/ent/snippet1.png"><br>
|
|
|
|
|
(stock photo by <a href="https://unsplash.com/@snowjam?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ethan McArthur</a> on <a href="https://unsplash.com/s/photos/pounds?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>)<br>
|
|
|
|
|
<br>
|
|
|
|
|
You can do it with color, like <a href="https://www.miss-thrifty.co.uk/">Miss Thrifty</a>'s red >>.<br>
|
|
|
|
|
<br>
|
|
|
|
|
<img src="/static/img/ent/snippet2.png"><br>
|
|
|
|
|
(stock photo by <a href="https://unsplash.com/@calypso999?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Raul Varzar on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>)<br>
|
|
|
|
|
<br>
|
|
|
|
|
<a href="https://cupofjo.com/">Cup of Jo</a>'s snippets are very large, almost filling the screen. The headline, picture, and 'read more' are all links to the article. Links are highlighted with color, all-caps, italics, sizes, or font changes. There's also a link to the category (RELATIONSHIPS), a comment section, and different social media outlets for reposting the article.<br>
|
|
|
|
|
<br>
|
|
|
|
|
<img src="/static/img/ent/snippet3.png"><br>
|
|
|
|
|
(stock photo by <a href="https://unsplash.com/@tchompalov?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Vlad Tchompalov</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>)<br>
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<h2>Article</h2>
|
|
|
|
|
Since Skint Dad represents the 2020 SEO-optimized blog look really well, I’ll refer to him again for his article layout.
|
|
|
|
|
Check out those SEO keyword navigation links.
|
|
|
|
|
Line by line…
|
|
|
|
|
• Big headline
|
|
|
|
|
• Pale name, date, and a journalistic integrity disclaimer
|
|
|
|
|
• An in-your-face newsletter link color box because you gotta be building that mailing list. (Personally, I like getting infrequent newsletters from anticipated games, but newsletters are definitely a marketer’s darling in all industries and are going to be featured in one of the biggest, most brightly colored, bribe-laden pop-up boxes on any website. Like all things SEO, they apparently have really good conversion rates or whatever, but cumulatively overtime across the internet they are formulaic and more concerned with leading search engine interests and statistics than creative, individualistic user demand.)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Surprise! This Skint Dad writer is a she. :)
|
|
|
|
|
KnowTechie has another common layout. The category’s up above the headline. Putting tags in a pale, italicized font under the headline or article or using them more as categories in color-coded boxes above the headline is a good idea for presentation. More article snippets are clustered along the side and bottom without distracting too much from the article. I think it’s very suitable for tons of content related by theme, as opposed to using a timeline for small amounts of chronological content, but it’s still a nice idea.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
A Cup of Jo
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
There’s more white-space, but there’s still lots of similar elements from busier sites. The category is above the headline, the timestamp and social media sharing links are below the article between two thin red lines. There’s links to subcategories of the article’s category on the side bar and snippets of related articles below the article.
|
|
|
|
|
The sidebar is pretty narrow and focuses more on text and small icons than big pictures, so it holds a lot of info without making the page look as dense as other sites. It has a link to the writer’s about page, a newsletter sign-up box, social media links, a trending articles box, related subcategory boxes, and a disclosure box.
|
|
|
|
|
There’s also tons of comments, all under the article. I might want comments later, but for now, I don’t want to have to monitor all the user content under all the articles. As much as I like seeing what people have to say, I probably wouldn’t have many genuine comments to begin with. I have no context for how many weird scam bots or whatever I’d have to delete, though, especially since I wouldn’t want to use Captchas or accounts unless I have to. It’s better just to let it go until I have more experience and people interested in commenting anyways. If people really want to comment, I guess they would find my Twitter or email anyways, so it’s not really closing off communication too bad.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
I never really see these writer boxes or related posts under dev diaries. I wonder if they are a good idea? I’m going to be the sole contributor for now. Maybe a guest post or something might make sense here and there. If I got a publisher or expanded my team or something really shakes up blessfrey, I bet other people would be contributing. For now, though, it’s just me.
|
|
|
|
|
Leyla is not the sole writer, so seeing her specific background probably helps with understanding whether they want to seek out her articles more often as opposed to the other Motherhood Diaries writers. Blessfrey doesn’t have a lot of choices. You either enjoy reading my articles or you try another one of the countless dev blogs out there.
|
|
|
|
|
Although blessfrey has one writer, it does have lots of projects. I see a lot of value to anyone reading a random blog post to be able to see a summary of the particular project. Following Motherhood Diaries, I could even have a tab for latest posts related to that project. I’ll write about blessfrey mostly, but I probably will write about Cat Store, CheeryOS, game jams, and other projects at some point. A little About the Project box would help bring readers up to speed in a few sentences. If they want more, they can then go read the full ‘About the Game’ page.
|
|
|
|
|
If someone really wants to see a write-up about me, I hope a dev section on the presskit page is adequate. It’s so awkward to write about yourself.
|
|
|
|
|
Ideas
|
|
|
|
|
Instead of a mundane daily blog bloating my article count and creating the need for multiple pages of snippets per month, I can do a weekly roundup. Days of value can be pulled out, as well as well-written articles for other devs, but I doubt I’ll ever go over like 10 or something, which isn’t too bad.
|
|
|
|
|
Also, I need a presskit page. Why did I not think about that? So much less embarrassing than an “About Me” page, too.
|