This blog is made for my weekly Nerds that I have followed during the Minor Web Development. On the right, you can find the articles (just scroll to see the rest).
Don't wanna be here? Send us removal request.
Text
Why is accessibility so important?
Why do we have to use semantics in our code? Why should we add alt tags to images, aria-labels to almost everything and labels our input fields? The answer is easy: to make it accessible for everyone. “Why?” you may ask. Because 100% of the people who use the web are disabled.
Bram Duvigneau has completely blind since he was born and can only notice light and dark.
He also used to be a developer who now teaches other blind or almost-blind people how to use, for example, a cellphone or a computer and gives talks to non-blind people how much it sucks to use the web when you’re blind.
And I know you’re probably thinking, “Blind people can’t see so how can they use a phone or a laptop?”. The thing is that in our computers and phones there is a submenu in our settings that is called “Accessibility”. And besides that, screen readers and braille keyboards and displays have been around since the early 80s.
During his talk, the biggest pain point is that when a screen reader is going through a web page, 9 out of 10 times the website does not make sense at all. Too many things don’t have labels, some websites have an autoplay video that overpowers the voice of the screen reader, links are labelled as “read more” but nothing specifies about what you’re going to read more about, navigation menus are disordered, headings are not named properly, etc., etc..
As sighted people, we are not bothered by the problems blind people “see” because we don’t experience them. Our daily web is completely different from theirs. The main reason behind that is that ours is visualised by images, colours, grids and animations and for them it’s completely text based (because screen readers will only read text, not colours) and the way it’s read for them depends on how the page is structured and heavily relies on the semantics of the HTML tags used.
Remember the Pyramid of Emotional Interface Design, where a website has to be functional, then reliable, then usable and if all of those have been achieved it could also be pleasurable? For blind people, the web is barely functional. If a website has a lot of text and almost no headings, or it’s an image page and—at the bare minimum— none of the images have alt tags, then it cannot be functional for them because they can’t find what they need.
But how do we, as sighted developers, make the web functional, or even pleasurable, for blind people? The answer is simple, really: just use semantic HTML-tags and structure the website in a logic way. I know it’s easy to use dirty hacks around frustrating bugs, but we’ve got to stop doing that. Even though we “solved” the annoying bug and we don’t see it anymore, people with screen readers still do and it frustrates them even more.
What we do need to use more is good heading structures, add true alt tags to images, a skip-to-navigation link, accurate hyperlink labels and no more “read more”-links, a logic HTML structure and especially use the right language tag in the <head>. Because even though it might sound fun to have an English website read with a Russian accent, it will only confuse screen reader users.
So let’s just all work together to work towards a better and even a pleasurable web that is not only accessible for us, but also for our blind audience.
0 notes
Text
Dutch Digital Day: Meet you on the other side
Who were there and what did people talk about?
Thanks to one of our teachers Joost Faber from the minor Web Development, I got a ticket to the Dutch Digital Day event at the Undercurrent in Amsterdam Noord. The event was about the big changes in the world, the wonder why? behind it, their huge impact on economics, society and the way we live and most importantly how its propelled by anonymous forces and a big pool of solution designers. Like the DDD website states, during the event the entire industry gets their injection of next-level inspiration.
The talks were very interesting! From a project that would give people a one-way ticket to Mars to start a community there to humanising Artificial Intelligence and embracing the good that could happen to using robotic fabrication in architecture to rebranding a killer gang to a loving and safe community. To highlight a few of the speakers:
Nell Watson talked about how we should humanise Artificial Intelligence and embrace how that would help us in the future with every day things. Like the industrial revolution in the 19th century was about enhancing human strength and the digital revolution in the 90s about enhancing the human mind, the next step was a revolution to humanising A.I. that would give them a mind, heart and soul like a human. She also noted that we should not keep ourselves from researching and enhance the technology just because Black Mirror shows ways how it could go wrong. Like she said, you have to be optimistic about it. Because only when you believe in the positive outcome, then you can work towards a positive future.
Aernoud Bourdez with his talk Think like a lawyer, Don’t act like one in which he subjected getting what you want with negotiating with just five simple guidelines and avoiding conflict in the matter. Another point in his talk was when is a conflict a conflict? The answer is: when there is blame involved towards another person. So how do you get what you want? Simple: cut the blame and go for the odd.
Another talk in particular was definitely outstanding was by Thijs van Vuure with What is it like to be a bird? He talked about that his passion for birds grew so much that he wanted to become one. Because of this passion he also found out that birds live ten times faster than humans do. And how do you know what it’s like to be a bird? The answer to that is that he recorded bird songs, slowed them ten times down to “human tempo”, recorded himself imitating the bird song on human tempo and then sped them up again to “bird tempo”. What he found is that birds really reacted to the bird-i-fied version of his imitations of the bird song.
Unfortunately I had to leave early and missed the talk of Neil Harrison (the cyborg) and Jennifer Kinon (director designer of Hillary Clinton in the elections of 2016). But the event was what it promised: I definitely got my shot of next-level inspiration of a future of immense possibilities.
0 notes
Text
Bluetooth…on the web?
We all have used the bluetooth on our phones, laptops, tablets, etc., to control other devices like speakers and lightbulbs. But what if I told you that you can now use your browser instead to interact with nearby bluetooth devices?
Niels Leenheer, the founder of HTML5test, came to talk about having fun with bluetooth on the web. He also brought a lot of bluetooth devices with him and a question he always gets is why would you use bluetooth on the web? The answer is simple: Progressive Web Apps.
Progressive Web Apps are great: you get offline support, and app like experience and they sometimes offer a better experience than native apps. But there is also a flip side. They are great for talking to servers on the internet, but not so great talking to devices you have at home.
Until now, the ability to interact with bluetooth devices has been possible only for native apps, but nobody wants to download them anymore. There are also many other technologies that you can use for talking to devices, but there is only one that is ideal: bluetooth.
And people always say “But bluetooth sucks! It’s old, blah blah”, but what they don’t know is that there are two different types of bluetooth: bluetooth classic (which everyone hates) and bluetooth low energy (that control drones and other cool stuff).
But how does bluetooth actually work? When we’re talking about bluetooth devices, we’re talking about central devices and peripherals. A central device talks to a peripheral, but not the other way around. The central device can be connected to multiple peripherals, but the peripherals can’t talk to each other.
Web bluetooth is also called Generic Attribute Profile (GATT). With GATT, a central device is called a client and peripherals are called servers. In bluetooth, a server means offering a service and a services contains characteristics and these characteristics contain values. You can compare it to an array of objects which respectively contains an object which has properties and those properties have values. Services and characteristics are identified by UUIDs, which means they don't have names, only numbers. These numbers are either 16 bit or 128 bit. Each of the values you can read or write to you can for example, get notified by its changes. And every value is an array of bytes, there are no fancy data types.
The Web Bluetooth API that has been in the making aims to change the native-only problem and brings it to web browsers as well. So long story short about what you can do with the bluetooth API: people can walk up to and interact with devices straight from the web.
After these boring general fact, Niels then to showed that he connected a bluetooth lightbulb to one of his PWA’s and changed the colour of the it through the browser. He also showed some code samples about how to start, how to add eventlisteners, etc..
The last part of his talk was about Niels showing us multiple different devices he connected to PWA’s and continues to impress us with what he did in his spare time. The web bluetooth API seems really interesting to me and I hope to have some spare time in the future to experiment with it.
0 notes
Text
The Hackaton at the Digital Design Master – How did it go?
With only having about 5 hours to prototype one of the ideas from the students of the Digital Design Master at the University of Applied Sciences Amsterdam, we sure Hackaton-ed our way to some sort of 0.1 version of a product.
The assignment given to us for the hackaton was to choose one of the 20 ideas of the students and the professor of the masters and work it out in a working prototype in only five hours. I choose the “Future of Sleep” project by Matt Jongbloet and was joined by five fellow students.
The project was about an app that would use futuristic technologies—technologies that can sense brainwaves and manipulate yours—in order for you to sleep better. I chose this idea,because it intrigued and challenged me to think about designing and developing an app that would use futuristic technologies that aren’t out on the market yet, let alone still being researched.
Since four people of our group went to design and prototype Matt’s idea, me and the other student left made the readme.md file. We asked Matt what he wanted us to put there and he left it to our own imagination. He wanted to see what our impression was of the concept, how we thought it worked and if it aligned with what he had in mind. So that’s what I did. I wrote about how I thought the idea worked and the goals that could/would be reached if the technology was already on the market and open for people to use, about the pros and he cons and the dangers that the technology could bring but also about the limitations I would set within the app so neither people or hackers could take bad advantages of it.
When we were done we asked Matt to read it and give us his thoughts and feedback. He was deeply impressed with what we wrote and even became so happy, he sent every one in the little project group an individual questionnaire about his concept to read our individual approaches to the idea. By the time most of us finished answering the questions, the five hours were over.
I think one of the most important goals within the hackaton was to involve the client in the design/prototype process. Before I started writing the readme file, I probably asked Matt four times what he wanted us to write. Once I had a clear idea of what he wanted, I got to work. When the work was done and was shown to him, it made me happy to see that it was exactly what he wanted. It gave me satisfaction to know that I did a good job at helping him with his project.
0 notes
Text
Why it’s fun to implement a personality in a website
Over the past 6 years we have seen a rise of websites that pretty much all look the same. If you were to ask yourself if you knew a website that was memorable, you’d probably come up with exactly none. Vitaly’s talk is about making your website fun and memorable when you implement a personality in it.
What really stuck with me during his talk is that storytelling is a big part in making your website memorable. In his website, Smashing Magazine, he implemented a cat Felix. If you look closely, you would be able to find 72 Felixes in not only the pages and the images, but also in the code, errors and other things.
Also his process of designing a website really astonished me. He starts off with writing CSS on paper, that way he gets the most important stuff down without wasting any time since you don’t want to write 700 lines of CSS on paper. He also starts off with designing and connecting the error alerts. That way you can start implementing the personality of your website in very subtle but still important ways. Like he said, you take the most annoying and frustrating thing in your website and you make them fun, pleasurable even.
Other important tips Vitaly shared with us were:
We need storytelling and great art directors
It’s time we make boring interesting
Stop playing safe
It all starts with one little thing, just a tiny idea
And the most important tip was: be strange!
0 notes