How to Design a Blog for a Good User Experience

Blog concept in word tag cloud isolated on white backgroundBlog design is one of the most important parts of your website interface. User experience is an important part of keeping readers engaged as well as good search engine optimization. Most people just think themes when thinking about a blog layout, but the layout and design is more than just the theme. You also must consider color themes, navigation, ad placement, headers, footers and fonts. You also must consider the layout for mobile users, because these users are also a big part of a blog’s traffic.

Learn what’s best for user experience and your software.

Color Themes and Your Audience

You might not think that color matters, but it’s an important part when you consider your audience. Your blog will probably have a typical demographic. For instance, if you decide to start a gaming blog, your obvious typical reader will be a gamer. Gamers appreciate the black backgrounds with neon colors in the foreground. However, if you start a medical site, this color combination is probably not good for your readers.

Another issue is black backgrounds with white forecolors are harder to read. If your audience is older or you require readers to read several pages of content, it’s best to stick with a light or white background with a dark font forecolor.

Headers and Footers

The header section is the top portion of your blog that contains the logo and usually some or all of your site’s navigation. Users intuitively look at the top for some kind of navigation options to dig deeper into your blog. If you don’t have an intuitive design, then you can confuse users and cause them to bounce from your site. Users who do not like your site after finding it in the search engines can affect your search engine rank if the bounce and look for another site.

Footers are not as important as your site’s header, but footers complete your blog. Footers contain disclaimers and some support links for users to find your “About” page or your “Contact” page. Some blog owners forget to test their blog and ensure that the footer renders properly. A broken blog design ruins your blogs look and feel for your users.

Font Style Sizes

Font sizes and characteristics continue to change. Blog designs are like fashion: they continually change with the latest design becoming popular and a part of other designs. Font designs were small several years ago, but font size preferences for designers have gone the opposite direction and now display large and prominent so they are easily read by readers. Larger fonts make your content easier to read, so they are preferred now over the smaller font sizes.

Font styles also make the blog harder or easier to read. It’s best to stick to one of the standard web browser fonts. There are thousands of fonts to choose from, but if you choose a font that is difficult to read, it can be a turn-off for your readers. Stick to the basics with fonts, so users don’t leave your blog based on poor font choices for your design.

Understand web design from the ground up.

Mobile Design and Responsive Themes

Mobile design and responsive web themes are becoming a must-have for blog owners. Tablets and smart phones are increasingly popular web traffic. This type of web traffic is actually overtaking old desktop traffic.

Responsive design is given to the layout and scaled images that fit smaller screens. Originally, web designers detected screen sizes with JavaScript, and only one or two screen sizes were necessary. But now there are tablets, smart phones and even “phablets” to think of. Responsive design works with CSS and HTML 5 to respond to the user’s screen size using media queries. Because users with small screens usually have reduced bandwidth, you need to reduce the size of your images and code to make it more user friendly.

Learn how to implement practice responsive designs

Pre-Made Blog Web Design Code

If you want to create blog themes and designs, you can incorporate a pre-made CSS and JavaScript package called “Twitter Bootstrap.” Bootstrap is a free tool that provides you with CSS and JavaScript to lay out your blog design and create responsive queries without writing these from scratch.

Although it’s named Twitter Bootstrap, this tool does not involve Twitter. It’s given the Twitter name because it was created by Twitter developers. Twitter bootstrap is quickly becoming a popular way to design blog themes and layouts, and it’s a free tool you can download off of the web.

Learn Twitter Bootstrap as a beginner

Search Engine Optimization (SEO)

Search engine optimization is always an issue for designers if you want a blog to rank well in the search engines. SEO is about good code design. The blog should have good titles, good meta tags and be free from critical coding issues that make it difficult for search engines to parse your code. There are plugins to take care of this feature, but you can also design your code that implements best practices. You also want to design a layout that keeps ads at a minimal at the top of the blog. Google releases the page layout algorithm update that takes ads into account when they are above the fold.

SEO is a part of a good web design, and it should be manageable enough for the blogger to edit the design to update for any changes needed. For instance, if the user feels like the algorithm is not ranking a site well due to ad placement, he should be able to edit the ad layout to move them around to a different position.

Blog design takes a creative ability and some understanding of what works well for users. User experience is important when you want to attract and keep readers. Use this as a guide and learn how to create designs that create the best experience for bots and users at