responsive grid blog hero switch image

EverWeb Widgets

Text & Links

Blog Essentials

Making text easily to read and linking for visitor convience and SEO

Flyout Links

Text & Links

Blogs are all about text content so make sure it is easy to read. Use a sans-serif font with a minimum font size of 16px, color black on a slightly off white background - somewhere between # FEFEFE and #F8F8F8. The slight reduction of the background's "whiteness" helps to reduce glare and makes for more comfortable reading.
Avoid using colors - and never use pale colors - except for spans and links.
The font used here is the Google hosted "Stint Ultra Expanded" with the fallback font set to "helvetica". Always provide a web safe fallback font when using a non web safe or hosted font. The font is not very robust so the paragraph font size is increased to 18px.
Spans
Use spans with keywords to break up large chunks of text and help the search engines understand the key points. Follow the link below to find out about creating <span> tags. Most of the EverWeb Widgets that have fields for large text blocks have basic styling for span size and color.
Links
Items like bold text and text links have no place in modern web design. The use of these is a throw back to the bad old days before CSS was invented.
If extra links are required, use CTA style links like the "Quick Links" shown below. Visitors are more likely to follow a link if it is isolated, is big enough for finger tapping on touch devices and has interesting and relevant text.

Quick Links & Image Links

Image Links

Most of the professionally designed blogs have lots of image links since they encourage visitors to click through more than text links.
The links shown below have three links for the previous post, entries list and the next post.
They can be configured as links to any page - internal or external.
The images have a maximum width setting which, in this case, is 240px. The links stack on phones and become full width so the image file width doesn't need to be anymore than about 300px.
The links can be spread out or pushed together using the container's maximum width setting.
Lazy Loading
The images are tucked away at the bottom of the content area and won't interfere with the page download time since they are lazy loaded.

Toolbar

The Blog Toolbar show below can be placed anywhere on the page and can overlay an item above it - like a hero image - by checking a box and adding transparency to the background.
It has links to the comments page, previous post, entries list, next post and a spam protected "Email Me" link.

© EverWeb Widgets -