Notes

The new Smashing Magazine website

I am quite late to the game, but these days – during the last 8 or so days, to be precise – many people in the web industry speak about the public beta launch of the new Smashing Magazine website. Some are writing about the new technical features and how they switch from a mix of various platforms like WordPress, Kirby, Shopify and their Job Board software, to a single system called Netlify. Some just point to Vitaly’s excellent article about what they actually worked on and what changed. Sara Soueidan gives a bit of background to what her part of the work was in a nice blog post. But only a few really know about the human side of things.

Next to all the sweat and tears on the design and the technical side, there was a lot of thinking involved before decisions were actually made. And I mean a lot of thinking. It was not just about giving the users a new experience, a brand new design and an even faster and more performant website. A lot of things actually had to do with the people visiting the magazine and the event. The people reading the books and the people who are the community around Smashing Magazine. I myself have only be involved a few times and we had lovely, yet intense discussions while sitting together working. But also during lunch or after the “official” work was done in a cocktail bar in Freiburg. And topics there did not circle around web performance or how to find technical solutions that work best. The questions that came up were more questions like …

What do people, visiting our events and our magazine actually expect?

How could a possible membership for the magazine look like in term of, what should be included in different packages?

How can we give people, no matter where or on which device they visit the magazine, give the best possible experience?

… just to mention a few thoughts like this.

And you can think what you want from the design or from performance or the UX of the actual beta of the website, but I am writing these lines to actually express my highest respect for what and how much work and thoughtfulness Vitaly and Marcus (and the rest involved of course!). That is very cool, in my opinion, and I think we need more people who actually care that much.

Links:

Terminal Training

Yesterday morning I bought Remy’s new online course called Terminal Training. As you might guess it teaches you how to use the terminal from the very beginning on. In the description Remy writes

A video training course to cure you of any fear of the terminal. For designers, new developers, UX, UI, product owners and anyone who's been asked to “just open the terminal”.

I myself am not a heavy terminal user or fan. I don’t fear it neither. I know about the basics, but am far from being an expert. So I was thinking Is it too basic for me or too advanced in the later parts?, but I have to say it is just great. Remy takes you from the very beginning of explaining how to navigate the file system on your computer to more complex things and pitfalls which he teaches you to avoid.

Not only is this great content for a topic which is usually not known to be a very colourful topic with lots of tasty images and things to look at, but also the way Remy recorded the video and explains everything very clean and understandable is just fantastic. You can see Remy sitting in his kitchen (I assume) sitting in front of “[…] this new Macbook Pro […]”, recording the video with the build-in camera of the mac. As mic, if I see right, he uses his Apple headphones’ mic. Quality of video and sound is great and that shows, that you don’t need high quality gear to produce video tutorials worth watching, with good content.

Content

I copied Remy’s table of content to show you what his video covers.

1. “Just open the terminal”

2. Install all the things

3. Tools of the Terminal Trade

4. How (not) to shoot yourself in the foot

5. Making the shell your own

6. Furthering your command line

Pricing

I myself got the Master Package. Not because it has 17 more videos, which certainly is nice, but because I’m old-fashioned and like to download the videos also. The special launch price for this package is $99 and I think this is great value. There is a cheaper package for $59 that comes without the ebook and without downloadable videos, but might be ok for you to start with. A third price, $299, is meant to be for teams. All packages come with unlimited updates, which makes me guess that Remy is going to update the training at a later point.

terminal.training by/with Remy Sharp

Underlook

|
Photos of horses from underneath by Underlook.net
Giving a different perspective with his Underlook project: Andrius Burba. Copyright of the images above by Andrius Burba.

This morning, while having a coffee, I stumbled over a project called Underlook by photographer Andrius Burba. He took photos of animals from a very different perspective: from underneath. The results of the images are sometimes funny, sometimes just simply beautiful, but always interesting. Maybe because chances are rare, that you see a horse from underneath without being hit by their hooves. Maybe only because you don’t usually have this perspective. One reason for sure is, that he did great work catching those animals, like cats, dogs, horses and rabbits, in front of a black background (accept from the rabbits), which gives every image a very high contrast. I myself got caught by the horses somehow.

But check yourself what you like most in Underlook

Good Bye Fontblog

|

During my morning read of several blogs in my RSS reader (yes, I am using RSS still), it was sad to read that the German Fontblog closing the doors. For 13 years I read many articles on this blog, which was started by the Fontshop AG in 2004. In 2015 I already was sad when I read, that Yves Peter said Goodbye to Fontfeed, a blog he was running. So the only one still existing in that range now is the Fontshop News now – correct me if I am wrong.

I mean, yes, I can see that writing for your blog eats quite some some time. Especially if you write longer blog posts and articles. But it is sad to see their statement, that conversations and discussion will still be led in social media. They write …

Solche Diskussionen gibt es auch heute noch. Wir führen sie in den sozialen Netzen, schneller, einfacher und demokratischer, denn jeder Empfänger ist auch Sender […]

Translates to something like …

This discussions still exist. We just have those discussions in social networks, faster, easier and more democratic, because each recipient is also sender […]

Sadly this is what many people tend to do and think nowadays. Social media is faster, reaches more people and people can interact easier.

Not completely right in my opinion. Not every medium is a platform for discussions and rich conversations. What about Twitter? 140 characters – really? Even Facebook or Google+. It is no platform, where I want to read a long article on Typography (maybe just a matter of taste, I know). I don’t want to go into detail and criticise social media – I use it myself, a lot – but it is sad to see this all or nothing mentality. Why not using the blog as source for thoughts and writing and then social media to point people to it. Even discussions can be led with using things like Webmention, for example. And this across many social media platforms leading all to be shown and collected on your own blog. It’s far from being perfect, but maybe a start into the right direction?

So yes, even though many new blogs pop up and people start to write more in their own blogs again, even though many new newsletters are created every day, I fear that those personal platforms and ways to express your thoughts and ideas are fading away.

Abstract: The Art of Design

Watching Abstract: The Art of Design on Netflix at the moment. Season 1 contains 8 episodes right now. Everybody a well-known name in their discipline. I quite like the way it is done. I watched Christoph Niemann and Paula Scher so far. Totally in love with the work of both.

Other episodes in season one are with:

If you want to see Paula Scher live, watch out for beyond tellerrand Berlin announcements. Just saying … ;)

V for Wikipedia

|
Screenshots of the app V for Wikipedia
Great reading experience, useful app: V for Wikipedia by Frank Rausch

I don’t stumble across or download a lot of new apps these days. In September last year though, at the Typo Days in Cologne, I have seen an ace talk by Frank Rausch, who later also spoke at beyond tellerrand in Berlin (<- links to the video of his talk). In his talk he spoke about his app and how he dealt with typographic hurdles and difficulties, when it came to displaying all the information that Wikipedia provides in a good to use and good to read, but also beautiful way. As I was curious, I bought his app right after the talk and am happy to suggest you to do the same.

His app, called V for Wikipedia, is not only one of the best designed apps I have seen for a while, when it comes to typography and how he displays information from Wikipedia, but it also is a lot of fun to use with extra feature, you don’t have when using Wikipedia directly. It is so much fun to use, that since I got it, I must have convinced at least 25 people (if not more) to also get it, only by showing them how I use it, when we are out in a city. I love the “Nearby Places” feature and often use it, when I am somewhere for an event and want to check what else is interesting around me, to explore a few places. Of course the reading experience is fantastic as well, as I said earlier. V for Wikipedia supports a lot of different languages and it is super easy to switch from one to another – in my case often between Englisch and German.

Visit Frank’s V for Wikipedia website and check all the features in detail to get an impression. But honestly, if you use Wikipedia usually, you’ll love this app. And if you don’t use Wikipedia, you’ll do from now on ;)

Interneting is hard

Oliver James has created a very nice and useful resource to learn about the Internet called Interneting is hard. It is not, like Jeremy’s Resilient Web Design, about the history of the Web, but nicely written tutorials for beginners.

Image with example of text and image combination
Clean typography and illustration style support the good reading and learning experience.

Many chapters, well illustrated and easy to read and understand makes this source a really good starting point for anyone starting from scratch. The hands-on examples help to understand and learn what you just read. And the best part: it is totally free!

Check Interneting is hard

Gelato Affogato

|
Gelato Affogato
Yummy!

Inspired by Erik Spiekermann and Brendan Dawes lately: Gelato Affogato after lunch using vanilla ice cream and Letterpresso beans for the coffee.

Playing with Tuna

|

Last night I was playing around with Tuna as I said earlier this week. I really like the typeface and I used the option of MyFonts to temporary use it locally on my machine to test it. I quickly changed the css to use Tuna. It would certainly need some fine tuning and playing with weights here and there, as well as some more line-height for the text bodies with more text, like in the blog posts.

A few examples as screenshots side to side. On the left side you see Tuna in use and on the right side the actual Quatro Slab with Fira Sans. Again, these are only quick sketches and also screenshots are all shrunk to fit my blog width. But I wanted to get a first impression.

Click on the images for a large screenshot made on a retina display.

Screenshot of the masthead of the home page
Masthead with Tuna thin italic for the quotes.

I really like the thin italic version of Tuna. It look more elegant than the italic Fira Sans.

I am not sure about the main navigation and might play around with different weights here next. I think it might use the forced bold variation of regular in this screenshot anyways, which is wrong of course Also on the call to action buttons, I think a bolder variation would be better of course.

But as said, I wanted to get a quick, first impression.

Screenshot of the events home page with speakers grid
Events homepage with speakers grid and intro text.

I was not sure about the main headline, but I have chosen the light italic version for h1. It looks completely different to the very bold Quatro Slab but somehow I like it.

I also like the speaker grid variations of the text. The read names in regular and the topic in italic.

Again I am not sure about the event navigation as it is right now. Needs some tinkering to find out what looks best.

Screenshot of job list on beyond tellerrand job board
beyond tellerrand Job Board with job list

I like the look and feel of the job list – which also looks similar to the blog list. The overall feeling is lighter without being actually much lighter than the Fira Sans version. Except form the main headline, where I have chosen a thin and light version as said.

Screenshot of news on home page
Latest news on the landing page.

I also like how h2, the green one, looks. Maybe I go with the bold version here, just to have some more contrast and a bit more “fun” for the eye.

In general I quite like the look and feel with Tuna. I think a bit more line-height for the text is needed and some tinkering with weights for the headlines and buttons as well as details like the teaser text in the masthead. I really like to hear from you: What do you think?

Plugins for IndieWeb and Kirby

If you use Kirby and are interested in the IndieWeb topic, you might like what Sebastiaan Andeweg is working on and releasing on GitHub at the moment.

Micropub Plugin

He released a Micropub endpoint for Kirby. In a blog post, he explains what basic a micropub endpoint, which he added to his toolkit (se further down) does. For Kirby, he has written a Kirby Micropub Endpoint.

Webmention Plugin

In addition, he published a webmentions plugin, which is also based on Bastians first version of the webmention plugin for Kirby. Webmentions are:

Webmention is a simple way to notify any URL when you link to it on your site. From the receiver's perspective, it's a way to request notifications when other sites link to it. Webmention is a modern update to Pingback, using only HTTP and x-www-form-urlencoded content rather than XMLRPC requests. Webmention supersedes Pingback.

Read more about what webmentions are on the IndieWeb site

IndieWeb Toolkit

Last but not least Sebastiaan is working on an IndieWeb toolkit. Is is meant to be used next to the Kirby Toolkit by Bastian Allgeier.


And if this all is not enough, you can use his IndieWeb news aggregator called IndieNews, which aggregates the news directly from https://news.indieweb.org/ ;)