I have been recently contemplating the intricate relationship between my personal life and the work I do, particularly how these domains inevitably get intertwined and influence one another. It’s not always easy to keep these separate, especially when one’s vocation transcends mere occupation to become a genuine passion and source of fulfillment.| Ariel Salminen
Large Language Models are increasingly relying on information found on the web, but often struggle to handle most websites in their entirety because the context windows are too small. In an...| Ariel Salminen
As mentioned in my previous post, we recently introducing a completely new section for the Nord Design System, called Community Assets. These are product-specific assets from feature teams...| Ariel Salminen
Over the past six weeks, my colleague and I have been working on a new major update for the Nord Design System. The latest 4.0 version launched a few weeks ago now unifies Nordhealth’s two design system platforms into a single platform that can serve all of the feature teams across the entire organization and various business units within.| Ariel Salminen
I’m intrigued to see Figma announce their own Model Context Protocol server to help LLMs achieve design-informed code generation. I’ve been also prototyping one utilizing Figma Context MCP...| Ariel Salminen
If you’ve worked with CSS for a longer period, you’ve probably seen and used about a dozen different ways to center block-level elements on the page. These methods used to vary between a...| Ariel Salminen
Over the past month I’ve been slowly handcrafting a new website for myself to better showcase what I do and have a future home for experiments I may want to tinker with. Designing the whole thing in the browser using HTML, CSS, and a tiny bit of plain JavaScript has been truly a joy.| Ariel Salminen
Webfonts play a crucial role in giving our websites personalized feel, but they can also be a hidden culprit behind sluggish load times. If you’ve ever wondered why your beautifully designed site isn’t performing optimally, inefficient font loading strategy might be to blame. In this article, we’ll delve into practical strategies to enhance your webfont performance, ensuring a better user experience.| Ariel Salminen
One of the features that I’m quite happy about on my new website is the built-in search functionality and how the search index gets built for it. You can test it out yourself by pressing Ctrl+K and entering a search query into the input that is revealed:| Ariel Salminen
View Transitions are probably one of my favorite CSS features at the moment. You can enable them for any site today by adding the following code snippet into your CSS. This will immediately...| Ariel Salminen
Forget CSS3, images, semantics, better methods and that it doesn’t make any sense. I did this just for fun. Larger versions are here for illustration purposes only. Use if you want, but I can’t really figure any real world use for this. Nevetheless, this is the 16×16px Google favicon re-created with 256 list items and no images:| Ariel Salminen
This example makes it possible to have a fluid jQuery slideshow which scales responsively. This is the same method that I used on the new kiskolabs.com.| Ariel Salminen
I wrote a blog post about making responsive jQuery slideshow on 18 May 2010 (You can read it here). Since then much has happened and there’s now quite a lot of options where you could choose from. I did a short summary for this blog post about the options out there right now.| Ariel Salminen
Since you are here, you have probably noticed that there’s a new design which I have been working on for some time now. I wanted to focus on the content and make something much more simple. I also wanted my site to work with various devices from smartphones to TV’s. That’s why I used the so called “Mobile First” technique and made the whole site responsive from about 240px and up.| Ariel Salminen
I created this plugin while I were developing my own site and decided few days ago to release it as an open source version. Its basic function is to create responsive slideshow using images inside a container. The interesting thing is, that this is actually the very first JavaScript plugin I’ve done and that’s why I thought that I should write down some notes while I’m at it.| Ariel Salminen
While you can find two dozen blog posts and articles about various image replacement techniques using Google, I couldn’t find any article that would help when you want the replacement to be fluid.| Ariel Salminen
I created another responsive jQuery plugin during the Christmas holidays. It’s called TinyNav and it can convert <ul> or <ol> based navigation to a dropdown for small screen.| Ariel Salminen
I have been intrigued by the idea of making a typographic scale out of a musical scale that would not only be very readable, but also aesthetically pleasing. This whole idea started after the launch of my new site. At first, I ignored to see it, but weeks later I started to notice that the textual content of the site is actually pretty harsh for the eyes and the reading experience isn’t that great.| Ariel Salminen
There seems to be some confusion about these terms and what they mean, so here’s my thoughts on the subject and few links to back them up. I’m usually not very keen when it comes to debating over what something is called, but this time I wanted to make it clear, as I hear this question quite often.| Ariel Salminen
Recently I started testing how proportional scaling of bigger layouts would work in reality and if it makes any sense. It’s possible when using EM units and then changing body’s font-size when viewport’s height grows above certain point. Basically that means, that I have to change only one or two css properties between @media queries which are targeting larger screen sizes.| Ariel Salminen
CSS is designed primarily to enable the separation of content from presentation, including elements such as the layout, colors, and fonts. This separation improves content accessibility and provides more flexibility and control over the presentation. CSS is quite flexible language on its own, but as websites become more and more complex we sometimes need to have more control.| Ariel Salminen
Couple months ago while I were designing a website I remembered a technique I had long forgotten. I used to use this technique before I moved from print design to web design about eight years ago and it was, for me, an essential way to utilize modular grids better. Grids in design are kind of like the scales in music. They give you a way to anchor your layout elements and typography to a certain rhythm.| Ariel Salminen
During the last week I was at the Webshaped conference listening Stephen Hay’s talk about responsive design workflow. This post isn’t going to be strictly about that, but as Stephen’s way reminded somewhat the way I work myself, it made me want to write down some thoughts about my workflow and how it has evolved during the past two or three years and how it might still evolve in the future.| Ariel Salminen
If you’ve been building websites during the past two years you must know that the web doesn’t live on a desk anymore. The reality is that we now need to test our work on multiple devices, instead of just few desktop browsers. All this is easier said than done. It's easy when you have a dozen devices laying on the desk in front of you, but what about the rest of us? Devices are expensive and the landscape is ever expanding.| Ariel Salminen
I wrote an article to Smashing Magazine. It’s an in-depth guide about how to establish an open device lab. The article gives practical tips about things like location, how to get devices, what devices to get and what software to use.| Ariel Salminen
Not so long after the device lab was born I realized that we need a much better way to store and charge all the 40+ devices. There didn’t seem to be any existing solution available which you could just buy, so I started thinking what would be the easiest way to do something like that myself. After some research I ran into this device testing station by 64 Digital and thought it looked like a perfect solution.| Ariel Salminen
Remote preview is a tiny JavaScript based tool which I built for our test lab. It allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit enter, and new URL gets automatically loaded on each device. Remote preview works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.| Ariel Salminen
I were quite surprised few weeks ago when I found out with Matt, my colleague, that no one has tested thoroughly which mobile browsers support input type=file and how to reliably detect the support. After an hour of Googling we literally gave up and decided to find it out ourselves. The results are shared here to everyone for future reference.| Ariel Salminen
The history of typography dates back about 5,000 years. It starts from a series of pictograms, which then evolved to hieroglyphs in Egypt and later around 1,200BC to Phoenician alphabets. Almost 2,500 years later the Chinese invented first movable type which later revolutionized everything in the west when Gutenberg invented latin movable type. Many of the basic concepts of typesetting are still the same as 500 years ago.| Ariel Salminen
Responsive Nav is a tiny JavaScript plugin which weighs only 1.6KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance.| Ariel Salminen
Today, after over two years, I’ll be leaving my position at Kisko Labs. I’ve started working on a new responsive advertising solution for smartphones and tablets called Adtile. Another big news is, that we have just received a $2.7 million funding to bring this product to the market. There’s also a story about us on TechCrunch, so check that out.| Ariel Salminen
While I’ve worked over a decade building various web services and systems, it has only been the past 3 years that I’ve started learning more on how to work with plain JavaScript, instead of using jQuery or similar libraries as the starting point when it comes to interactivity. The fact that I’m learning a dozen new things every day now, has made working on Adtile’s JavaScript SDK feel more like building an open source project than actual work, and I have to say I like that a lot.| Ariel Salminen
Today, we are open sourcing the JavaScript code and the assets we used to build the responsive navigation on Adtile’s website. The code and examples are hosted on GitHub and can be found from here. There’s a live example too, under Adtile’s site, give it a spin. Read more about the features provided from the link below.| Ariel Salminen
I was recently interviewed by .Net Magazine (in issue 254) about how web experts manage cross-platform testing. There’s a quote from me in the article that I think is interesting:| Ariel Salminen
Manually adjusting line-height with media queries for optimum readability across vast number of screen sizes can be hard. What makes it even harder, is, that instead of the screen width, the line-height should be relative to its container’s width and its font settings in order to achieve proper readability and appropriate spacing.| Ariel Salminen
This is an experiment I did months ago, but eventually never ended up posting it here. I had already forgotten the whole thing until it few weeks ago suddenly started popping up on my Twitter and Facebook timelines via other people. It’s a simple one pager you can use for example as a cheatsheet for various dashes.| Ariel Salminen
I am Ariel Salminen, a designer and developer living in Helsinki, Finland. I have worked in the web industry for over a decade and have designed websites, applications, and large systems for start-ups and companies of all sizes. My core belief is that all content on the web should be accessible to anyone using any kind of device to access the internet.| Ariel Salminen
During the winter 2014, me and my family rented an apartment from San Diego, CA for few months through my work. While staying there, we had an AT&T hotspot device that provided the network connection. For us, relying on this device, meant constant drops of connection, network latency like we’ve never seen before, and websites that were completely broken because JavaScript wasn’t loading at all. A part of this can be explained by the poor reception at the location where we were staying,...| Ariel Salminen
Reid Miles was an American modernist designer, a genius of his time, best known for his work for Blue Note Records through the 1950’s and 60’s. During this period he designed almost 500 record covers for the label. This article is a tribute to Miles, who’s work continues to inspire me and many others.| Ariel Salminen
I designed the 6th edition of this website almost 5 years ago, which is an eternity by today’s standards. The previous version was one of the first responsive websites out there that was built mobile first from start to finish. Everything was also done progressive enhancement in mind, which made it last well throughout the years.| Ariel Salminen
I’m terribly excited to tell that we’re moving to San Francisco Bay Area in the beginning of 2016! I’m joining a new company, Idean, as a Senior Interaction Designer and Iisa will be starting preschool there, which makes this a tremendous change for the whole family. All of this is something we’ve been planning for a while already, so we’re thrilled that it’s finally happening.| Ariel Salminen
Back in 2004, when I had just started my career, sIFR was the hottest thing out there. It was developed by Shaun Inman and it embedded custom fonts in a small Flash movie, which could be utilized with a little bit of JavaScript and CSS. At the time, it was basically the only way to use custom fonts in browsers like Firefox or Safari. The fact that this technique relied on Flash soon made it obsolete though, with the release of the iPhone in 2007.| Ariel Salminen
We love typefaces. They give our sites and applications personalized feel. They convey the information and tell a story. They establish information hierarchy. But they’re also full of problems. Typefaces make our websites slow. They produce FOUT — or FOIT if you prefer. They render in unpredictable ways. Why should we live with inflexible type that doesn’t scale, when the core nature of our medium is fluid and responsive?| Ariel Salminen
For the past year(s) I’ve been chasing for answers. Looking for new tools, thinking about design processes and figuring out what design really means to me. At times I’ve felt so disconnected with our processes that I’ve wondered if my career choice was right.| Ariel Salminen
March, 2017. We were still living in the United States. It was a time of great anxiety for us. Just a couple weeks earlier I had been laid off from my previous job in California, Donald Trump had become the president, and we were suddenly living in this foreign country without valid Visas and no plans for the future whatsoever.| Ariel Salminen
Nosto hired me in 2017 to help reimagine what the company’s approach to designing and building digital products at scale should look like. I started this work by conducting a series of user research activities and workshops to reveal a lack of alignment and personal biases across business units, products and teams to understand how the design system could help them.| Ariel Salminen
I’m happy. I’ve been succesfully running my design studio for the past 8 months and recently moved into a new office space. Since then I’ve been setting up the workspace to suit the way I want to work and create things. This dedicated quiet space gives me the luxury to focus and get much more done than I could get anywhere else before.| Ariel Salminen
Vue Design System is a set of organized tools, patterns, and practices that work as the foundation for Vue.js application development. What initially started as a quick-n-dirty prototyping tool for a client of mine, has grown into a fully capable systems tool that provides an environment where the pattern library and live application can be perfectly in sync.| Ariel Salminen
LocalTapiola hired me in 2019 to help reimagine what the company’s approach to designing, building and shipping digital products at scale should look like. I started this work by conducting a series of user research activities and workshops to reveal a lack of alignment and personal biases across business units, products and teams to understand how the design system could help them.| Ariel Salminen
You’re reading the very first Duet Design System monthly update. As this is the first of its kind, we’ll do a short recap on what has been accomplished so far.| Ariel Salminen
You’re reading the second Duet Design System monthly update. This update focuses on accessibility and performance updates that we’ve been working on.| Ariel Salminen
You’re reading the third Duet Design System monthly update. This month marks a major milestone for us as we’re launching our new design system publicly.| Ariel Salminen
You’re reading the fourth Duet Design System monthly update. In this update we’ll share statistics and feedback we’ve received regarding Duet’s public launch.| Ariel Salminen
Ever read an article praising design systems and how they magically solve design and frontend challenges? I’ve sure seen this being repeated in one form or another. Maybe not with these exact exaggerated words, but the underlying message has been close. While there might be a spark of truth there somewhere, it can be quite misleading to make this kind of statements without explaining what’s really required.| Ariel Salminen
It’s August, 2018. I’m at the office, sitting by the window staring rain pouring down from the sky. A warm cup of tea in my hand, about to sip it, but the phone suddenly rings. I don’t recognize the number. I hesitate for a moment whether to pick it up or not. Maybe it’s again a telemarketer trying to sell me something?| Ariel Salminen
Following this tutorial you will learn how to server side render Duet Design System’s Web Components using Eleventy and other static site generators.| Ariel Salminen
You’re reading the fifth Duet Design System monthly update. This update focuses on new feature and component improvements we’ve been working on.| Ariel Salminen
You’re reading the sixth Duet Design System monthly update. This time the update covers both February and March as it looks like we forgot to push an update out last month.| Ariel Salminen
Following this tutorial you will learn how to utilize Duet’s Command Line Interface to create simple websites that can be shared via GitHub Pages, Amazon S3, and Azure Storage.| Ariel Salminen
You’re reading the seventh Duet Design System monthly update. This time last year we published our first Web Components package, version 0.0.1-alpha.1.| Ariel Salminen
You’re reading the eighth Duet monthly update. Last month we asked from our users how we’re doing and what we could improve. We’ll share some of the results in this post.| Ariel Salminen
Following this tutorial you will learn how to build simple page layouts using Duet’s Design Tokens, CSS Framework, Web Components and other features.| Ariel Salminen
You’re reading the ninth Duet monthly update. During the past month we’ve been busy improving the existing features, fixing bugs, and open sourcing Duet Date Picker.| Ariel Salminen
When we started working on Duet Design System early last year, one of our goals was to create similar component playgrounds as I had previously built for Vue Design System. While this seemed like an obvious decision at first, we soon realized that maintaining a code editor of our own required far too much effort, especially since Duet’s documentation is a custom built platform created for a specific organization’s needs.| Ariel Salminen
Why does it feel like the devices we use are getting slower over time? A smartphone I bought a few years ago seems to be losing its edge when browsing websites. My computer struggles to play audio. Even my car’s interface can’t keep up anymore after all the updates. Am I just imagining or were they always like this?| Ariel Salminen
Nordhealth hired me in 2020 to help reimagine what the company’s approach to designing, building and shipping digital products at scale should look like. I started this work by conducting a series of user research activities and workshops to reveal a lack of alignment and personal biases across business units, products and teams to understand how the design system could help them.| Ariel Salminen
You’re reading the first ever Nord Design System monthly update. We’re just starting our design systems journey at Nordhealth and have created this documentation platform to support these efforts.| Ariel Salminen
I’m happy to announce Three Plus Group’s and Finnish Net Solutions’ new name and corporate identity, Nordhealth. The name change is a result of a rebranding that I did for the company earlier this year.| Ariel Salminen
You’re reading the second Nord Design System monthly update. Since February, we’ve been busy rethinking our design processes and brand identity that was launched a few weeks ago.| Ariel Salminen
You’re reading the third Nord Design System monthly update. This month we’ve been focusing on onboarding new team members and also rolling out the new brand guidelines into the documentation.| Ariel Salminen
You’re reading the fourth Nord Design System monthly update. This month we’ve been working on making sure that everyone at Nordhealth understands how and why we’re building a design system.| Ariel Salminen
You’re reading the fifth Nord Design System monthly update. This month we’ve gained great momentum and have published four new packages, and made many improvements to Nord documentation.| Ariel Salminen
You’re reading the eigth Nord Design System monthly update. This month I wanted to give a little more insight into how we’ve architectured Nord’s packages and how they’re interconnected.| Ariel Salminen
You’re reading the ninth Nord Design System monthly update. During the past month we’ve been preparing the system for official launch and making sure we offer stable API and comprehensive docs.| Ariel Salminen
I was recently interviewed by Lovers Magazine about what led me into design and what type of things inspire me as a designer. I think it was refreshing to answer their questions and really dive into the deep end of what ultimately took me where I am today.| Ariel Salminen
Nord Design System was recently nominated for the Jamstack Conf Jammies award in “Project of the Year” category. Winners will be announced live at Jamstack Conf on November 7 – 8.| Ariel Salminen
I’ve been years watching everyone around me change. Seasons coming and going. People growing roots. Building houses. Giving birth to their babies. Becoming stable parents. And I’ve tried hard to change as well. Become that, understand it. I’ve been through these things, but I feel like I’m still the same scrawny kid full of dreams and restlessness.| Ariel Salminen
Once upon a time a child was born. This was no ordinary child, this was a child who was trapped inside a body she didn’t belong in. For the next thirty something years this made her wonder; would who she was, who she truly was, be accepted by others in the kingdom? Or would she be doomed to live her life forever as someone else?| Ariel Salminen
In the context of design systems, a Product Design Architect provides strategic and creative direction for the design system. This person partners with executives and other cross functional leadership to scale a design system across a family of products by defining adoption, contribution, governance, quality, and partnership programs.| Ariel Salminen
A Design Systems Lead role includes driving the vision, strategy, roadmap, build and implementation of a design system. This person has a systems-mindset to build and integrate consistent, efficient components across the product portfolio with emphasis on the complete systems life-cycle, from establishing a practice and vision that endures to design, build, document, and maintain a library used by many product teams.| Ariel Salminen
Dark mode is an user interface mode that displays light text on a dark background. Dark mode is helpful for those viewing device screens at night, in dark environments, or otherwise find darker UI more accessible. The reduced brightness can reduce eye strain in low light conditions.| Ariel Salminen
I’ve been leading various successful design systems teams over the past years and in this post I wanted to share a simple set of fundamental rules we’ve followed. These rules have allowed those teams to get to the highest level of productivity while benefiting both the company and the team members.| Ariel Salminen
Nord Design System was recently nominated for the Best Design System award at Grand One competition and won an honorable mention for the best developer experience.| Ariel Salminen
A frozen lake, stars gazing above| Ariel Salminen
I recently sat down with the team behind the Design System Guide to talk about Nord Design System and how it’s been shaping our work at Nordhealth. We discussed the challenges of building a design system in a fast-paced environment, the importance of collaboration, and the impact design systems have on the organization and people involved.| Ariel Salminen
On the terrace of my old home, I ponder in silence the fairy tale I now live in. The love that was born when I met you. In that beautiful part of Helsinki, surrounded by those adorable little shops that sell the most exquisite pastries and merchandise.| Ariel Salminen
This challenge has been recently making rounds on the Internet and as I’ve seen a lot of my friends and people I follow in the tech industry take part, I figured that I want to, as well. So this is me answering a set of questions about how and why I blog on this website.| Ariel Salminen
Sometimes I find vintage technology fascinating and since I couldn’t find a Design Systems Webring (remember those things from the 90s?!), I just created one. Feel free to join if you’re...| Ariel Salminen
We’re excited to announce the first major release of Nord Design System, v1.0. With this release, our design systems team is shipping a number of new tools and features to improve the...| Ariel Salminen