Notes

A New Kirby Website

My favourite CMS – Kirby – got a new website. I like how it turned out and think Basti and the Kirby team did a good job in summarising and visualising how flexible the CMS is.

Screenshot of the new Kirby website showing the different use cases
A nice way of showing the flexibility of Kirby CMS

Next to the teaser/header image, showing the Kirby panel, you can click on different use cases or “user groups” (eg. “Your company”, “Your products”, “Your magazine” etc.). If you click on a different scenario, the header with the panel image for the different scenario changes, but also the file structure below the image adapts and the text file screenshot. I like this.

Screenshot of the footer navigation on the new Kirby website showing the different target groups
A continuous way of showing the many different target groups for Kirby

I also like the visualisation of the continuous story/journey you are on, done though a thin grey line leading from the use case navigation down to the footer with the target groups.

All in all I think that this is well done and fitting for Kirby. The overall appearance feels light and still has its own handwriting (or Basti’s? 🤔 … 😁). The new site leaves enough neutrality to find your own role amongst the mentioned roles – or even create a new one – but takes you by the hand, so that you are able to find your way and be guided.

Congrats to the whole Kirby team for the relaunch and now on to fix all the little bugs 😆

For the next week – until April 23rd – you can safe 20% on Kirby licenses … buy a full basket of licenses to safe $$$ for future projects 😊 )

⇾ How to Design a Landing Page (Paul Boag)

This is a quick guide by Paul Boag to help you creating a landing page that works for you. He covers:

  1. Define Your Calls to Action
  2. Understand Your Audience
  3. Outline Your Messaging
  4. Draft Your Content
  5. Design Your Content Flow
  6. Elicit the Right Reaction
  7. Launch, Monitor and Iterate

⇾ Visit: How to Design a Landing Page (Paul Boag)

⇾ Modern CSS Upgrades To Improve Accessibility (Stephanie Eckles)

Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device.

A post by Stephanie Eckles, which covers:

  • Focus Visibility
  • Focus vs. Source Order
  • Desktop Zoom and Reflow
  • Sizing Interactive Targets
  • Respecting Color and Contrast Settings
  • Accessibility Learning Resources

Worth reading!

⇾ Visit: Modern CSS Upgrades To Improve Accessibility (Stephanie Eckles)

Your Memorable In-Person Conference Experience

April 10th, 2021, Zach Leatherman asked:

Share a memorable in-person conference experience!

(I’ll go first)

At @jqcon (~2010) I remember @kswedberg checked me in, gave me my name badge, recognized my name (!), and told me that I was doing some cool things on the web and I still think about it 😊

My reply:

”Simply too many wonderful, funny, exciting, inspiring, interesting, motivating, positive, lovely, heart-warming, funny, memorable, open, intense, enjoyable, important, eye-opening, surprising, mind-changing … experiences that I will never forget and forever be thankful for. ❤️”

I miss all this too much …

Happy Easter Days

Photo of a path in our forest on a sunny spring day

A little sunshine and time with your beloved ones is what I wish for you. Take care!

⇾ Web Development History

Richard MacManus has started a blog about “Web Development History”.

He says

As the name suggests, it’ll be an ongoing chronicle of internet history — but from a development perspective.

⇾ Visit: Web Development History

⇾ Handling Text Over Images in CSS

permalink

Ahmad Shadeed has written a very useful and insightful article about which option you have got to deal with text that is placed over an image, using CSS.

⇾ Visit: Handling Text Over Images in CSS

⇾ Building Dark Mode

permalink

Toggling light mode to dark mode is not simply inverting colors or making everything that is white black and vice versa. There are lots of things to consider, when creating a dark mode for your website. It also is not simply a design decision, but can be very useful. Robin Rendle explains why …

⇾ Visit: Building Dark Mode

⇾ How to Favicon in 2021

permalink

“How to Favicon in 2021: Six files that fit most needs” – Andrey Sitnik about a smarter approach to use a minimal set of icons instead of a huge list of files (via Manuel Matuzović).

⇾ Visit: How to Favicon in 2021

Arpona Sans by Felix Braden

I really do like Tuna, as stated in an earlier post, in which I tested Tuna for my beyond tellerrand Website. I also bought Pulpo and used it at my events – on printed materials as well as on screen at the main stage.

Image shows sketches by Felix Braden of letters for his typeface Arpona Sans
A final sketch of letters used for digitalisation

Now Felix Braden released a new contemporary sans serif family he called Arpona Sans, which is – like he says – inspired by the work of Edward Johnston and Eric Gill for London Underground.

Arpona Sans in use on various books

Arpona Sans is a versatile font, usable for branding, in editorial design, as well as for web and app design. If you take a look on the microsite for Arpona Sans, you can see a few examples for Arpona Sans in use and can have a look how it even plays quite well in running text. Next to this you’ll find much more background about the creation process, which is lovely to read.

Right now you can grab your own copy of the family at MyFonts for 60% off (until April 18th). If you are using Adobe’s Creative Cloud, you can use it included in your Creative Cloud license.

Links: