Today I happened to be taking a tea break and saw a post in Slack by Cory Miller sharing a challenge he’s embarking on of 30 days clicking publish. I paused; I found myself wanting to click away, but for some reason, I wasn’t able to, and I found myself in this editor writing this post.
I’ve slowly been getting back to writing again after falling somewhat away from the very thing that started me on this WordPress adventure – blogging. It’s been incredible to start discovering that again. This is the nudge I need, so I am taking it with both hands.
I have no plans, but I do want to continue the pace I have writing around the new theme space. I also have so many posts and ideas that I have postponed because of ‘what ifs’.. well, I have no excuse because if I am committing to 30 days of writing, I need material!
All too often, we stop because of assumed fear, but that means we might miss out on something awesome – there are enough barriers without becoming one for ourselves. There’s been so much that happened lately I personally want to miss out on less so here goes!
Have you ever wondered what something is called within Gutenberg? This guide is meant to help by giving the names and the expected behaviour of some of the basic design elements. If you want to build blocks and extend Gutenberg, knowing what to use or not is important. This is meant as a starting point, not a full description of all design elements.
Toolbars:
There are two toolbars:
The Editor toolbar: This controls document tools like undo and information. Also within this toolbar are preview, publishing and saved state.
The Block toolbar: This controls block specific behaviour, for example in a paragraph block bold/italic and adding a link. As a guide, place common settings that a user would want for every version of that block in the block toolbar.
Settings:
These are also referred to as 'advanced settings' when linked from the block toolbar.
There are two settings:
Document: This gives you global settings for the entire document like visibility and reviewing. Think of this like your settings panel for your content.
Format: This is per block and changes depending on the block and if it even has settings. These differ from the toolbar as are secondary block settings, for example adding a CSS class (in most blocks) and doing styling that isn’t as common.
More menus:
These come in 2 locations:
Document: These contain document settings such as switching display modes, position of toolbar. Anything that is not specific to a block or the document would go here, for example display modes or something like a spell check.
Block: When beside the block there are commonalities found in all blocks:
Hide Advanced Settings (if visible) or Show (if hidden)
Edit as HTML
Remove
Convert to Reusable Block
Convert to another Block and a list of those blocks.
As a guide you’d not be adding to these menus in a custom block. You’d ideally use something like the advanced settings here.
Add:
It's worth noting that insert is changing to add potentially. There are multiple ways to add a block in Gutenberg to content:
Toolbar (although this may be removed)
Above a block: a ‘+’ appears on hover
Below the block: a ‘+’ shows all the time to interact with
Library:
The library appears when you click to add and then you see all blocks available. You can also search for the block by name. Blocks are in sections both through tabs and in within each section there are categories.
Recent blocks
Recent blocks also shows all the blocks a user has been using frequently.
Document outline:
You can view information about a block by clicking ‘i’. This contains helpful document information like number or words written.
I set myself a little holiday project this year, to consolidate and create a theme to use across a few of my sites. With this move I merged my two writing blogs into one and began a long needed update to my portfolio. I wanted to do this using Gutenberg and the Gutenberg theme as a base. The Gutenberg theme is based on _s, open source and a community project, so a great starting point.
Gutenberg?
Gutenberg for those who don’t know is the new publishing experience for WordPress. It’s a block based approach to creating content that focuses on an easier experience for every user.
One of the big drives for me wasn’t just that I am working on the project, focusing on the editor – although testing is always a strong motivation of mine. I was using Gutenberg already on this blog, I wanted to take it further. How much could be done just in Gutenberg with a simple theme style guide? How reduced could the theme go?
A bonus reason in doing this project, was that I could add to the Gutenberg theme. It’s worth saying that Gutenberg doesn’t need a specific theme to work. The Gutenberg theme is designed to showcase what a theme could be with Gutenberg. It’s an experiment into how close can both the front and back look and has the styling for blocks rolled in.
Boundaries
I wanted from the start to strip right back everything and then have a solid base to grow from. I knew I wanted a minimal theme and that the footprint should be as light as possible. I also want this coming year to learn more about performance optimising on the front end, so this is a good starting point. Where possible, as much styling and functionality was to come from Gutenberg, without adding in the theme. As far as it could be, this would be a pure CSS design.
I set myself some fairly strict boundaries. Firstly, I wanted to make sure this was released and live on the sites by the 29th December, this post was the final step. I wanted to use just one feature colour, that I haven’t before so picked the Pantone 2018 color of the year, Ultraviolet. I also wanted to have an off-white background to make it easier to read longer posts. Typography wise, I restricted myself to one font, in this case Roboto.
Minimal Gutenberg
One of the big things I wanted to do was make as few changes as possible to the base of Gutenberg theme, to really make this as much just CSS as possible. This was fairly easy to do as the theme itself has styling for most blocks and as part of this exercise I got to commit some pull requests that added some additional styling.
I began sketching and this was what I came up with as a first version:
The following were the changes aside from colors and typorgaphy, that I made to the theme:
Social icon SVG menu: A good potential future block, but not one that exists today.
Removed menu and reduced header: I removed pretty much all the header and menu in the Gutenberg theme. I wanted this to come within the content so used a reusable block for this. Once Gutenberg has a menu block this can be changed to that, probably coming in the Customization focus.
Reduced footer: Again I wanted to use the social menu in the footer and remove as much there from the theme. In the Customization focus things like reusable layout blocks may become a reality, so this steps towards that.
Animation for link and text loading on page: These animations are subtle but they load gradually content. Gutenberg allows me to add a style to each block and using this I can gradually fade in a page’s content.
Distilled a lot of post meta: I only wanted to show the date for now.
What is up now will change over time and is very much a first step. I plan to iterate as I add content and Gutenberg nears release in WordPress 5.0. I now have a base to build up from and a great starting point. One of my 2018 goals is going to be to blog more, so it’s a great start to that goal.
The result
Overall, it was a pretty smooth experience creating this theme and putting Gutenberg at the heart. I do know Gutenberg, so therefore the headstart was something I had. I also am ok with any rough edges at this point, there’s a lot of experimenting here and I have that luxury with it being my own sites. This is very much a work in progress but that’s a good thing as I can now take time iterating.
On the testing side, I have several issues I can report and some enhancements to suggest. Doing this reminded me how important using the products you are making is. When you are actually working with what you are creating, there are insights to be gained that when busy designing the product, you just don’t get.
For those of you that want to explore it, the theme can be found here with all my styling changes. The vanilla Gutenberg theme can be found here, and is a better starting point, pull requests and issues welcome.
Every designer at Automattic is writing a monthly design post, this month my post was about triage practice. For me the process is an integral part of being a designer. Triage for me is a constant part of my journey within Automattic and in the wider WordPress community. It continues to be really important to me as a designer, it keeps my feedback and testing muscles healthy.
A few months ago I began a journey to learn Colemak. Yesterday I switched back to Qwerty. There were a number of reasons I stepped off my adventure into Colemak, but perhaps its better to start at the why I began that journey.
The luxury of trying
In my job I have the luxury of being able to experiment with what works for me. I had toyed with the idea of trying a different keyboard layout as a lot of colleagues had. They were split between Colemak and Dvorak.
The tipping point
There were a few factors that made me make the change
New MacBook key sounds: the keys are super loud, similar to a mouse in boots tap dancing loud, when I get a good conversational pace going.
Wrist pain: over the years I haven’t been great to my wrists with typing strain and they were reminding me of this factor.
Wanting to reduce my typing speed: a maybe unexpected motivation was to add more thought to my typing by reducing the speed.
It begins
I began my journey into Colemak possibly naively by going 100% in with doing it all the time. I did however use a cover. There was a problem with this though quite early on, the cover began warping and it kept leaving marks on my screen – not great.
I moved onto using stickers and this may have been where one of my downfalls began. The only stickers I could find meant you saw 2 letters – the ones on the keys and the stickers. This got even worse at night because the keys highlighted the Qwerty ones. I was rapidly finding things more and more of a struggle
The end coming
I found my spelling mistakes went through the roof. I have a lot of spelling issues as it is and my comprehension can at times be creative. However, it was compounded by trying to learn Colemak, to the point not a sentence would go by without issues. Just writing this in Qwerty already I am back to my usual pace of mistakes.
A different voice
One thing I did not expect to discover was a change in my writing voice. In the past my use of punctuation was somewhat lazy. It has on more than one occasion been suggested I should purchase a box of commas. As I was writing in Colemak this strange thing happened, I found commas.
Beyond my discovery of commas, the voice was slightly different. This was an unnerving effect. Not one I was sure I wanted. I did not feel it was a positive change either. In some respects I felt it lacked personality, it lacked emotion. Because I was having a lot of issues with typing the words, I became minimal to a point that wasn’t always good. It also tested my patience, although that was a nice thing to test at times, at others it could have created a bad response from me.
Mental model comfort
I never have learnt to touch type, I have this kind of weird half memory, half some fingers typing method. Its clumsy and inelegant to view, but it sure gets the job done.
I find touch typing very hard and the lessons to do it close torture. They make me panic, which has this awesome side effect of my Dyslexia going into overdrive. As I switched to Colemak, I began typing lessons that seemed like old scary ghosts back to haunt me.
Lessons learnt
I did try for several months but it came to a point where the benefits were not out weighing the gains. I had less wrist pain, yet the mistakes and brain hurdles I was causing myself were not worth the change. Even the keyboard sound was loud once I took the cover off and the covers don’t work yet well with the new MacBooks.
Reverting doesn’t mean other issues have gone away. I suspect my wrist pain will surface soon enough. Yet, I will combat this in other ways such as specific exercises and actually being better at breaks. I may have changed my keyboard layout but I did not get better at taking breaks. A keyboard layout isn’t a magic cure all.
What I have learnt is this:
Exercising my wrists and taking breaks is more important than switching a keyboard layout.
The ghosts of typing lessons need to be conquered. I plan on finally learning to properly touch type.
Experiments don’t have to succeed and I am lucky to be able to do them where I work.
I have more respect for those with slower typing speeds, for whatever reason. I want to try and keep the pace more considered and hold onto that respect.
One of the things about humans is we are whether we like it or not a herd animal. We have an instinct to move as a group and our primitive brain responds just like a herding animal. When creating interaction paths even in digital purchasing, you can use this aspect of human nature. Supermarkets are a shining example of how you can sell to the herd.
Human herd
Humans display herding behaviour in a number of ways. Whilst I’m not going to cover it too much in this post, herding behaviour is a really interesting thing to look into. Crowd psychology is something along with the Information Cascade, I’d really suggest as interesting reading. Supermarkets are masters of getting us to buy things. They do this in a vast number of subtle and less subtle ways – some good and some questionable. From the music used to the size of the basket and position of the goods. Psychological tricks and guides are at play in all areas of the supermarket.
One exit
The most obvious one is the path that supermarkets take you on. There literally is one exit. This is also clearly marked and you without thinking are guided through to it. The key here is without thinking. Each aisle is placed with thought but requires you as a human to not think about it. The supermarket equivalent of a and b testing is moving an aisle around. The aisles are clearly marked, there is no guessing. Big graphics guide you through if you look up, product types guide you if you just follow the shelves. The journey they are taking you on is carefully planned. Think of how a farmer guides their herd into milking or sheep into a pen using a sheep dog. This is what supermarkets are doing to us.
Positioning and highlighting
Where a product is displayed not only in aisle order but in shelve order is also key to purchase. A simple example would be placing more expensive things at eye level. Same goes with the ‘gut purchase’ shelves put at the end of aisles that highlight special offers. The way the shelf and aisle is designed too is important. Think about lighting for example shining down on specific things or designed to make it’s aisle’s contents more appealing. A good example of this is the fruit and vegetable section. This is often very different to the other areas of the supermarket. It’s more the ’market’ designed and usually has more natural spot lights. In a short but interesting article on ’The Psychology behind Supermarkets’, Dr Harrison uses the term “psychological funnels” for aisle and how they prepare shoppers for what is at the end. This is a really interesting way to see this and think about how you can use this with interactive paths. In part you are setting up a reward status at the end through focusing.
Engaging the primitive
Most of the techniques used to sell to us are aimed directly at our basic instincts. They aren’t designed to get us thinking, they are designed to get us to not think and just purchase. It’s an unconscious drive that they are trying to cause. The state of ‘just doing’ is one that leads you to make the purchasing decisions they want. To buy the product they highlighted, to go down the aisles they want you to.
Out of the real world
How does this apply to digital interactions? Well you still have paths. One of the most important things you can do is to know your user paths. What journey are you taking them on? What funnels are you leading them down to get to which reward? You can also use things like positioning and highlighting.
Friction caution
A big thing you need to be careful of is to make something subtle enough to not cause friction. Humans don’t do well with friction. If you think about herd mentality and what happens when something spooks the herd. Making something too obvious a herding technique and the herd will turn. The key is to make it natural and appear to be a choice. Whilst humans love to be guided, the idea that we aren’t being unsettles us. It’s when that idea is obvious we then loose faith, we refuse to bond or purchase as to us trust has been broken. That leads to all manner of seperation from the seller. As a result, often that can’t be regained. This has happened with a lot of brands in the past.
Psychologically questionable
It has to be noted that a lot of the methods used to make us purchase could be labelled questionable. However, it’s just like anything, also able to be used to avoid friction and help someone get to their purchasing choice. As with anything, it’s about using responsibly.
Further reading
How we are guided to buying what we do I find really interesting. I thought I would share some further reading.
There is a book also called Buyology that I’m reading at the moment and recommend if nothing else for some eye opening reading. It’s a little bit wordy to get through but there are some really interesting insights hidden in those words.
Every open source project is made up of more than code. It’s more than pixels, more than binary. People create the code, craft the experience, test and support. Open source really is people source and the trouble is we keep forgetting that.
Assumptions
One of the biggest things you can do wrong when interacting with someone is assume anything you don’t know. If you don’t know their history, don’t assume. Don’t even think you can guess – because you probably can’t. Assumption is another word often for judgement and nobody likes that.
Learning to just see the human and not try and make up the extra parts is a constant life learning process. As humans, our brains try and fill in gaps. When written communication is our only format those gaps quickly become vast chasms of wrong.
Unique snowflakes
Whilst we all may be cut from the same ancient genetic cloth to a variable percentage, that’s where the connection ends. I am not you, you are not me. We all travel this great adventure of life with different backpacks, we all take different paths. That’s part of the amazing that is the human race. The difficulties in trying to communicate with your polar opposite often becomes delight when you gain a different view through talking.
As the old idea goes, sometimes walking in someone else’s shoes means they fit better. In open source we should cherish the differences and protect them. Give space for everyone to be able to communicate. Some of us are shouters, some of us take a little time, some of us just need a bit of space for our voice to be heard. Giving that space for someone to be heard in their way, that is something we should all try and provide.
Impact of projects on lives
What we create has weight and impact on lives. This code, this non-existent digital flotsam. It has real physical and mental impact on real human lives. People feed their families with it. They have been enabled to make something that without projects they wouldn’t have. That’s kind of amazing to realise, but it’s also kind of deep to think about. Those interactions, the choices, they matter because of the impact on people’s lives.
The human behind screen
Non-verbal communication online really isn’t great for remembering your interacting with a person. Sure, you have this tiny static avatar, but it’s too easy to get caught in your own head and not see the human your interacting with. Real time methods are a little better, but it’s all various degrees of numbing to the fact your interacting with a real human.
Remembering and not assuming is the only way projects get through ups and downs. Remembering the project is made of humans and not assuming anything about those humans. A culture where respect is given to all is a hard one to ensure, but it’s one worth striving for. A project that recognises the lives beyond commits are just as important.
Saying thanks
When was the last time you said thank you to a core contributor? When did you say thanks to someone for silently manning the forums? Perhaps rather than focusing on #drama of any sort, thank someone. They don’t have to be only core either. Every open source project is deeper than those that have the ability to make a patch live. Recognising people rather than using a tag that just perpetuates the drama it points to, that’s a positive move in anyone’s book. In thanks, you are recognising a person. You are recognising that open source is made of people.
Next time you interact on Twitter or on trac, take a moment. Think about the person you are writing to. Maybe they’ve had a bad day, maybe they care about the thing you disagree with for a real reason. We all live complicated lives. When you respond, take a moment to really see the people, really understand that open source is about connections. You don’t have to agree with everyone – nobody does. The point is how you disagree. Open source is about people joining together to create something amazing. Without people, there is no open source.
I think one of the issues as illustrated in articles like ModemLoopers is an easiness to jump to the worst examples and broad stroke a solution. My own thoughts are a more flexible ‘per situation’ solution is the best one. Just like you don’t repeat the same design over and over again – responsive, adaptive… mobile apps all have their place it’s picking from the toolset and using the right one for the case.
Unique Snowflakes.
Before I go on, my thinking has cemented lately against a ‘one size fits all’ approach to pretty much anything. Take themes, yeah sure they kind of work out of the box for a range of cases – but should anyone be doing something that’s ‘kind of’? Those of us making this our profession certainly shouldn’t.
There has been a lot of talk about device independence and to me this is step one and the first thing as a designer you should do. Don’t think in terms of wiggling browser up and down to media query points. Think of it as a fluid mighty morphing site. The focus away from pixels is one I’m keen to keep in sight as in the great A List Apart article ‘Vexing Viewpoints’. After that come the more ponderous considerations of a mobile approach. Even the term mobile is being used by me with caution as doesn’t hit the spot fully either – we can’t assume (the mantra of the device free designer).
Responsive got itself a bad name.
A point against responsive that has happened in the past is the loading everything and kitchen sink. First up, if you are saying this let me introduce to you the ‘Mobile First’ approach. Secondly, if you’re not creating sites that are mobile first … let me introduce a concept to you MOBILE FIRST. Don’t give responsive a bad name, if you are going to do it – do it right.
I would like to add I love responsive. To me it is a movement (and yes I see it as one) which has turned my designer world upside down and raised all our bars. What I do not like is responsive without brains. This is what I think is the cause of much of the stick shaking at responsive. It’s not something you should see as a ‘feature’ either in my book – just do it like you’d bother to test in a range of browsers. Also, don’t charge extra for it. That’s just plain wrong as your costs should adapt with technology not be fixed and have bolt ons every time something should have – you’re not a mobile phone contract.
Templates are just another possible tool.
Modemlooper makes a case for using templating for showing different versions depending on devices. This isn’t a bad approach but it is hidden under the pile of kicking responsive in the head and that doesn’t really help. It does bring up a few issues. One of these being the blur in terms. Responsive can (and should) mean you remove things and move them about – that’s just doing responsive right period. The lines of adaptive and responsive are blurred by their very definitions and even ‘device independent’ doesn’t fully cut it as an explanation.
At the root of what a lot of he says is a matter of education needed to not create lesser but more appropriate experiences on mobile. Heck maybe we need a new technique called ‘Appropriate’ (or maybe we are all going to drown in terms soon). Mobile themes such as the drop and go plugins / themes have for a long time caused a wide range of misinformation over what should be a mobile experience. I would cheerfully click a button and see mobile themes like that vanish as they are brainless. We can do so much better than that as a mobile solution.
Modemlooper’s post does read a bit of a ‘throwing the baby out with the bath water one’ and whilst I do realise this post was written in a rant format it tars all with the same damning brush. This is the other point that really needs to be underlined. Responsive has its place – it did and still does. Brainless responsive (like brainless adaptive, like brainless mobile apps) doesn’t have its place.
The joy of tools we can all play with.
Performance junkies will chew on the ‘what method’ (looking at mobile first and all the best practices not brandishing broad brushes) is best over time and that’s kind of the cool thing with this device un-centric approach. It’s a revolution not just in the design world but the development world also. I don’t know the facts so I’m staying away from that one. My focus is on looking at the tools and seeing which one works from project to project. On using my designer brain and not just blindly applying anything.
Appy Elephant.
The elephant in the room is apps. Responsive has been argued as blindly ignoring apps almost to the point of seeing the world as ideally app free. I don’t think that ever was the case and whilst it has been levied against even me, it never was my thought process either. I love apps but I love (wait for it) apps that have brains… do something different from a responsive site and work for the purpose better than a responsive, adaptive, ‘hamsteraptive’ site (hedging my bets on any new terms there).
I do not believe just because you are on any thingy be it mobile or not you should get an experience just because you’re there. You can’t assume that every site needs the same mobile experience. You also while we’re at it can’t assume ‘ithingies’ are mobile. You can’t force a cookie cutter template onto them either they can’t get out of. You know what excites me in the app world? Apps that work for the mobile device when a site wouldn’t, that do something sites can’t / don’t / won’t. That bring something beyond a browser to the table.
Me?
Where does this leave me as a designer? It leaves me excited that’s what it does. It leaves me with so much to learn, so many new playgrounds and tools to build things with. So many platforms I can create on and build things that make sense for humans. It also leaves me as 2013 approaches dropping one part of the job description I’ve used for so many years. It started last year and I no longer see myself as a web designer. I am just a designer and it’s kind of liberating to realise that. I am just a device free designer.
