Figure & Figcaption
Images are a staple in blog posts. They provide context, break up the text, and draw eyeballs. It's often useful to be able to set some text right beside an image, and the semantically appropriate HTML for that is the figure and figcaption tags. This is a bit of a throwback to last month's HTML buddies!
Your challenge: design a beautiful and/or unique figure and figcapation pairing.
- There normally isn't much interactivity to a figure/figcaption, but could there be? Should there be?
- Incorporate your figure/figcaption design into a larger context. Perhaps variations on design and placement. Maybe last weeks typesetting challenge could provide a home.
- Images can be such a challenge for front end developers these days. Maybe this is a good excuse to play with technologies like responsive images, alternate image formats, or lazy loading.
You know what's pretty great for blogs? WordPress. You know what's makes WordPress way more powerful? Jetpack. One example of that is how much Jetpack can do with your images. With the flip of a switch you can host your images on a CDN! Here's some resources they recommend:
- Did you know you aren't limited in any way to using multiple images within the figure? That's covered in Richard Clark's HTML5 Doctor article.
- Searching around right here on CodePen might stir up some ideas.
- Looking at the almighty MDN, there is an interesting fact noted that the figcaption must be the first or last child. Hmmmmm.
Typesetting a Blog Post
Typesetting, the act of selecting and setting type, can be a challenging job on the web. But also a fun one! The web is a typographic medium. That is to say the web is absolutely covered in type and there is opportunity abound to do it well. Perhaps one of the most fun typographic challenges is the setting of a blog post. Headers, paragraphs, quotes, lists... there is a lot there to balance, make readable, and explore aesthetics.
Your challenge: take this blog post and typeset it.
- There are no real rules to CodePen Challenges, but this challenge might be fun if you give yourself the boundary of not touching the Markdown of the blog post at all. CSS only!
- How could you turn this challenge on it's head? Can you make the blog post barely readable somehow? Or have a reading experience that is completely unexpected?
You know what's pretty great for blogs? WordPress. You know what's makes WordPress way more powerful? Jetpack. One feature of Jetpack is that it offers Markdown support for all your content in WordPress. Just flip it on and all your posts, pages, and even comments are in Markdown. Here's some resources Jetpack recommends:
- Try out a typesetting web tool like Type Nugget or Typecast.
- There are some Google Font choices in the assets Panel, but you might explore more Google Fonts and lovely pairings of them on sites like Beautiful Web Type, Fontjoy, or Font Pair.
- As ever, searching Dribbble for a term like blog post leads to loads of inspiration.
Cards are a staple design pattern in so many content-based sites. They might even be the primary pattern for displaying articles for the browsing user. They are an important pattern not only because of how common they are, but because they need to support variety and be resilient to vastly different content.
- Search around Dribbble for article card designs. Are they up for the job of dynamic data? Can you make them responsive?
- As useful and practical as card designs are, what could you do to make them less boring? Could you evoke a deck of cards? Could they have an interesting interaction or animation? How weird can you get with them?
You know what's pretty great for blogs? WordPress. You know what's makes WordPress way more powerful? Jetpack. One cool thing Jetpack can do is power your "Related Posts", which are, of course, a card design!
- Even though a card is a pretty simple component, its still composed of still-simpler components. Check out the theory behind Atomic Design and piece it together to make a card.
- Read Dave Rupert's Pitfalls of Card UIs. Stir up and ideas on how to approach card design?
- Nathan Curtis has a lot to say about card design as well in his article Cards and Composability in Design Systems. And here's another.