Twitter

Twitter seems to think it knows better than me what I want to be notified about. It prompts when someone I follow, likes, or retweets from someone I don't even know. And to make things worse, they won't let me disable it. Instead, I can choose to "See less often". This is like letting me tell them: "annoy me less often; otherwise, I will completely snap. Instead this way, you can slowly drive me crazy. Thank you".

What I want to be notified about is as few things as possible and only the most important. Most of the time I want to know if someone messaged me, unless it's spam. And maybe I want to know if someone mentioned me, but most likely it's less critical so it can wait. I wish Twitter would respect that.

Browsers

One of the worst browser features created in the last few years was the built-in browser notifications that let websites send you a notification when something "important" happens.

To this day, I've yet to see anything I would like a website to send me a desktop notification about. The few things I want to hear from a website are better delivered by email.

Thankfully they do let you disable that feature, but they don't make it easy. You can't just click the notification area and select disable these kinds of notifications. No, you have to go digging into the settings and try to guess what they call it. Or look it up online.

Instagram

Instagram has lately started showing a red "1" at random times on my iPhone. As if I got a notification or something happened. When I open the app, there is nothing to be seen. I have no idea what is causing it, but it is driving me nuts. I feel like they are just trying to trick me into using the app, but know nothing important can happen on Instagram, so they don't even try to show me anything. It's like a psychological trick to get me to open the app, and hopefully, by the time it's open, something pretty caught my eye, and I forgot why I opened it.

Slack & Discord

Both of these two services assume by default that you want to be notified of nearly everything. It's like going to a party and having everybody jump to you and try to tell you something you must know, while ringing cowbells, all at once. How could anyone think this is something people would want? Let us opt into the few things we find important in a simple way and leave the rest turned off.

In the end, it's just frustrating

I feel like companies have gotten really out of line with their aggressive notification practices. I would recommend them to take a step back and think about how they would feel if someone was standing behind them, tapping their shoulder, and then telling them whatever they sent a notification for—then deciding if they would respond to that in a positive, neutral or negative way. If it's anything but positive, then don't, don't send that notification. Please.

Norde Source essentially lets you take icon sets that you already have, and easily modify their color, size, and export to whichever format you need.

Recoloring icons

Traditionally if you want to change the colors for an entire icon set, you would have to load each icon into a vector design tool such as Adobe Illustrator, Affinity Designer, Inkscape, or similar, and change each color by selecting that layer and then picking the color you need. Then repeat that for every different layer you want to change the color of, for all the icons you want to edit. That quickly becomes a very tedious thing to do.

Using Norde Source, it only takes a few seconds to recolor an entire icon set, even when it has multiple colors. It detects each color in the set and allows you to override it quickly for the entire set. That makes recoloring icon sets that use a few different colors, a breeze.

Resizing

Resizing couldn't be any easier. Select the size you want, and all the icons update automatically to that size. Then when you export, they automatically get exported in the size you already selected and is represented in the icon grid.

Search

Find the right icon in seconds using the search bar. Each keystroke filters the icon grid further. And if you can't find the right icon in the current set, switch to another set to see if you can find one there, without having to retype your search term.

Exporting

Usually when you export in other apps, you get a huge settings menu that you then have to try to figure out to make sure the end result is what you want. Then you hit the export button and dig for the file in your file system, only to find out that one of the settings was wrong so you have to go through the whole process again. And of course, those export values got reset to defaults.

In Norde Source, the visual representation of the icons in the grid is always exactly what you get when you export. This keeps the app incredibly simple and easy to use.

Drag and drop

You can easily drag and drop one or multiple icons from Norde Source to the design tool of your choice. It retains the size and color you already set in Norde Source, eliminating the need to resize or color each one once you drop in your design software of choice.

Conclusion

Norde Source is a powerful tool to accelerate your productivity. Not only does it help you organize your icons but it makes editing them all at once a breeze. If you haven't already, I encourage you to head over and download a copy of Norde Source.

Nerd porn

A lot of open source projects suffer from too much of what I like to call, nerd-porn. It involves displaying as much information about what is going on at any given time as possible, which nerds love. Don't get me wrong though, I'm a nerd, and I like nerds.

But the trouble is that most of that information is not that useful except maybe if you are a developer debugging the product. But, as if that isn't enough, nerd-porn lovers also want to be able to tweak everything to fit their taste perfectly.

Adding features and settings is fun and often done without much second thought. In the end, it results in a bloated beast that causes a lot of confusion and frustration, especially among the type of users most open-source projects are missing, the average user who just wants to get things done.

All this clutter is followed by adding optional themes as a solution to the complaints people have about the user experience, which, in my opinion, can never fix the problems because they go much deeper than the superficial surface, and that is all that a theme can fix. But it can require a lot of refactoring and changes to fix the user experience.

I prefer serving the average user who doesn't have time to dive into the settings and tweak everything before he is finally able to use the product. Striving for ease of use removes the need for most settings. If you're interested in reading a case study where I redesigned an open source that had these issues, check this case study out.

Decision making

Many projects don't really have any real leadership which can lead them to end up being a bit aimless and unable to focus on what is essential for its success.

Getting people to focus on a clear goal is easy when money is involved. There is a big incentive to build for your user because he is the reason you are able to buy bread for your family.

But open source projects often don't have that incentive. They are worked on by volunteers who give away their free time and get very little in return.

As a result, contributors often only want to work on the fun stuff, like adding new features. But nobody wants to work on the boring, but arguably more important, things like optimisation or modifying complicated code to improve the user experience. Because after all they are doing this in their free time and most likely spent their day dealing with boring stuff at work.

In addition to all this, there is often a lack of a clear decision-making process. Nobody wants to be a dictator and, if there is no clear process in place, all the discussion leads to bike shedding.

Designers and developers

I think a part of the reason why more designers don't contribute to open source is that often it requires you to rethink the entire product from the ground up and make changes that require someone else to do a lot of work. And maybe even remove features that are blocking a good experience. That's actually how I start every project I work on, I dig in and question everything and make sure to strip it down to its bare bones and build it back up with a clear focus.

I think removing features is possibly one of the hardest things to do for an open source project because there will always be that one guy who really, really, really wants that feature and will be very vocal about it. For a project with a financial incentive, this is an easy decision to make. But for an open source project, this can lead to an endless discussion spanning many months. On top of that, someone may have put a lot of work into building that feature and might feel insulted if it is deleted. All this can lead to a lot of resentment and drain the energy out of the project.

Conclusion

I think the best way to solve these issues is to make the projects goals clear right from the start, who is it for? Is it for specialists or average joe? Who gets the final say? Who is in charge of making sure the discussion doesn't go on and on forever while making no progress? And how will you handle significant changes that are holding the project back?

Finally, I want to give a shoutout to Open Source Design, which I've been a member of for a long time, and whose goals are to improve open source design.

All you have to do to use it is to add the attribute loading with the value of lazy like shown below:

<img src="gillis-cat.jpg" loading="lazy" alt="..." />
<iframe src="some-page.html" loading="lazy"></iframe>

That's it, simple as pie! Now to demonstrate this I'll add a bunch of <br> tags below to create some space and then add an image of my cat. If you're using Chrome or Opera the image should not load until right before you get to it. If your internet is too fast you might not even notice it at all. While experimenting with this feature I had to open the developer tools in my browser and look at the network tab to see the image get loaded in as I scrolled down. Hopefully, if you are reading this in the near future, it will work in whatever browser you may be using.

Here we go. Scroll down!

Keep going!






















































































































































































































































Won't be long, keep scrolling!










































































































































































































































































































































































































































Almost there!

Finally! Maybe I made the space a bit too big. Anyway that's my cat. His name is Títan and he likes to eat tuna, play with toy mice, run around like crazy and of course cuddle on my desk as I work.

Getting better with design is similar to getting better at programming. The more you do it the better you get.

That being said as a consultant I usually try to help my clients get a better sense for design so that we can work together more easily. Here are a couple of tips that you can try as a first steps to get better:

1. First of all start paying attention when you use a product that you like or made a good impression on you visually. Pay special attention to sizing, spacing, colors, etc..

2. Start simple. After years of designing I still start things very simple. Usually on a white background with a good font and one high contrast color (besides black). Give elements the breathing room they deserve by adding spacing. Without going into details I would recommend you to go back to step 1 and look at the products you like for inspiration. I would also suggest you to base your gray tones on that single high contrast color. For example instead of making the text be completely black, add a hint of that primary color into it (indiehackers.com actually does this).

3. Don't overcomplicate things, especially at the start. For example let's take indiehackers.com as an example. If you were designing it from scratch you should probably just focus on the posts themselves in the beginning and try to get them to be as good as you can before adding other things that would clutter the interface and the user experience.

I hope this helps. Feel free to pm me if you want some tips on your product. That includes anyone else who might be reading this.

Who knows, maybe one day one of my designs will be there! :)

The greeting

To give a proper feel for the country and a smooth transition from the intro into the rest of the landing page is this amazing photo by Anders Jildén

Tour intro

Since the tours were very limited, we wanted each to be as impactful as possible right from the start. That's how we came up with this image on top of image layout which would make you feel the tour already. In the case of The South Coast tour, where you visit glaciers, waterfalls and dramatic black beaches. You see a large image in the background of a glacier texture with a serenic image on top of a black beach with a basalt rock formation overhanging a man looking out across the ocean. This sets the mood for what you will feel and experience on the tour.

After each tour we break things up with a little quote about the place, my favourite quote being the one for the Snæfellsnes peninsula tour where the famous book of Jules Verne, The Journey to the center of the earth took place.

The Why

Since Nostalgic wasn't supposed to be like all the other traditional booking websites in Iceland, we wanted to explain how we are different and why you should choose Nostalgic.

Photography

Because good photography was so important to setting the feel for the tours we wanted to build a community and encourage our travellers to share their images and experiences with us.

The tours

The most important pages are where you get all the details and reserve your spot. The reservation front and center in an impactful way. Followed by the main information about the tour.

Highlights

In order to give people a proper feel for the tour and it's destination we created this collage of text and images labelled with the stop order.

The map

An interactive map that blends perfectly into the page matching the brand and feel of the site. Zoom in to get as much detail as you want. The plan was to have special icons matching the destination type, like a waterfall, cave, and so on.

Testimonials

Happy customers is the end goal so displaying our pride was important to us. Right before the bottom booking widget we displayed our customers testimonials and some of their images from the trip along with proper credit of course.

The adventure ended before it began

Unfortunately not every project becomes a reality and sometimes it's better to move on rather than to force something to birth. This project was close to becoming a reality but ultimately did not quite make it there due to some critical factors falling through. Nevertheless I am proud of the ideas and design which is why I chose to display it on my site anyway. It was great working with the people involved in this project and I hope somebody gets inspired by the work produced.

Here are the two main pages in all their glory:

I realised recently that the new CSS Grid Layout could be used to solve this and make them look like a lot of mobile apps choose to display data like that. At least for tables that are not huge but still too big for mobile devices. I think four to eight columns would be optimal to make this work.

This idea of using grid to make tables mobile friendly came to me while using my online bank on my phone and getting irritated that it isn’t responsive. Then I thought that my bank probably has a lot of legacy code and didn’t want to make big changes. So my goal in this article is to make minimal changes to show how easy it can be with CSS Grid.

Minor markup changes before we get started

The markup I am going to work with in this article is pretty much the same as my banks. However I did add some classes and renamed others. Also in the "Account" column there was no markup separating the account name from the account number so I took the liberty to add tags and classes to them. I could have worked around those things but I wanted to clean it up a bit for this article . Here is the markup I will be working with. A pretty simple table:

<div class="table__wrap">
  <table class="table">
    <thead class="table__header">
      <tr class="table__row">
        <th class="table__cell u-text-left">Account</th>
        <th class="table__cell u-text-right">Balance</th>
        <th class="table__cell u-text-right">Limit</th>
        <th class="table__cell u-text-right">Available</th>
        <th></th>
      </tr>
    </thead>

    <tbody>

      <tr class="table__row">
        <td class="table__account table__cell">
          <a href="#" class="table__account-content table__link table__link"><span class="table__account-number">1110-26-000487</span> <span class="table__account-name">Checking Account</span>
          </a>
        </td>
        <td class="table__balance table__cell u-text-right u-font-mono"><span class="num_negative"> -250.000 </span></td>
        <td class="table__limit table__cell u-text-right u-font-mono">500.000</td>
        <td class="table__available table__cell u-text-right u-font-mono">250.000</td>
        <td class="table__transfer table__cell u-text-center"><a class="btn" href="">Transfer</a></td>
      </tr>

      <tr class="table__row">
        <td class="table__account table__cell">
          <a href="#" class="table__account-content table__link"><span class="table__account-number">1110-26-000487</span> <span class="table__account-name">Savings</span></a>
        </td>
        <td class="table__balance table__cell u-text-right u-font-mono"><span class="num_negative"> 1.000.000 </span></td>
        <td class="table__limit table__cell u-text-right u-font-mono">0</td>
        <td class="table__available table__cell u-text-right u-font-mono">1.000.000</td>
        <td class="table__transfer table__cell u-text-center"><a class="btn" href="">Transfer</a></td>
      </tr>

      <tr class="table__row">
        <td class="table__account table__cell">
          <a href="#" class="table__account-content table__link"><span class="table__account-number">1110-26-000487</span> <span class="table__account-name">Joint Account</span></a>
        </td>
        <td class="table__balance table__cell u-text-right u-font-mono"><span class="num_negative"> 150.000 </span></td>
        <td class="table__limit table__cell u-text-right u-font-mono">0</td>
        <td class="table__available table__cell u-text-right u-font-mono">150.000</td>
        <td class="table__transfer table__cell u-text-center"><a class="btn" href="">Transfer</a></td>
      </tr>

    </tbody>

    <tfoot>

      <tr class="table__row table__row--last">
        <td class="table__cell" align="right">Total (<acronym title="US Dollars">USD</acronym>):</td>
        <td class="table__balance table__cell u-text-right u-font-mono">900.000</td>
        <td class="table__limit table__cell u-text-right u-font-mono">500.000</td>
        <td class="table__available table__available--total table__cell u-text-right u-font-mono">1.400.000</td>
        <td></td>
      </tr>

    </tfoot>
  </table>
</div>

Prioritising the content

First thing I want to do is decide what content is important to a mobile user and what we can let go off. This is just to declutter the interface and set our priorities straight.

The table headers become rather useless to us on mobile since they will not be able to serve their job properly once I change the layout so I will hide them on mobile. For that I use the utility class I created called .u-visually-hidden--mobile that makes sure it's still there for people who use screen readers.

Rows become grids

Adding display: grid to the rows changes each row to a grid. I apply it on the rows so I can stack up some of the columns to save horizontal space.

Next I want two grid rows within each table row. To do that I add grid-template-rows: 1fr 1fr; to the table row class. 1fr means one fraction of the available space. This way both rows should be equal height and balanced.

My goal is to have only 3 columns so I will create a template for the columns as well. The first two will be the most important ones, while the last one consists of only the transfer button so it doesn’t need as much space. Which is why I’ll add grid-template-columns: 2fr 2fr 1fr;, first two columns get 2 fractions of the available space each and the last one only gets one.

@media only screen and (max-width: 650px) {
  .table__row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 1rem;
    align-items: center;
  }
}

Stacking the columns

The first column, Account, will stay in its own column. I then stack the account name above the account number and make the account number smaller to emphasise the hierarchy.

@media only screen and (max-width: 650px) {
  .table__account {
    grid-column: 1;
    grid-row: span 2;
    }

  .table__account-content {
    display: flex;
    flex-direction: column;
  }

  .table__account-number {
    order: 2;
    font-size: 12px;
    padding-top: 0.25rem;
  }
}

I want to try to limit the width to two or three columns and since "Limit" is not that important to be present on this screen — And because it mostly shows zeroes — I'll be removing it from display. They would usually be able to see the limit on their account page anyway so it's not a priority for this overview table. I think you can assume that people usually only have a limit on one account and know how much it is.

The "Balance" and "Available" columns are going to get stacked on top of each other with the following code:

@media only screen and (max-width: 650px) {
  .table__balance {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.75rem;
    padding-top: 0.125rem;
  }

  .table__available {
    grid-column: 2;
    grid-row: 1;
    padding-bottom: 0.125rem;
  }
}

They are very related content and stacking them should give you a quick overview. But there is a problem. I got rid of the table headers so there is no indication of what the numbers mean at the moment. To fix that problem I’m adding the following CSS:

@media only screen and (max-width: 650px) {
  .table__balance::before {
    content: "Balance: ";
  }
}

This adds the text “Balance: “ before the balance tag on mobile devices giving a clear distinction between the two values.

Finally I make the transfer button span two rows so it is vertically centered with the other content like so:

@media only screen and (max-width: 650px) {
  .table__transfer {
    grid-column: 3;
    grid-row: span 2;
  }
}

The results

It wasn't very complicated but the results are a neat and simple mobile friendly layout that is easy to use and understand. I've added a few cosmetic styles just to make it look a bit better but what I have shown here above are the important parts and the results are here in this pen:

See the Pen Responsive tables using CSS Grid Layout by Gilli Sigurðs (@gilli) on CodePen.

Why?

Now you may be thinking “But Gilli, why do we use tables at all then? Wouldn't it be simpler to just use CSS grid all the time". Here are some of the reasons to use tables:

• This is tabular data so using tables makes perfect sense.
• For Accessibilities sake since it should be more understandable for screen readers and shouldn't surprise the user.
• This approach can be used on an already existing codebase to make it responsive without having to rebuild everything. In fact you could probably get away with only adding CSS and not touching the html.
• People are already familiar with tables and expect them. However if the content is much more readable without it then by all means go for it.

Conclusion and caveats

Overall I think CSS Grid Layout is incredibly powerful to transform content completely and adapt it to whatever scenario you need to. I haven't used this solution in a production environment yet so there might be some more problems that I haven't thought of but mostly I haven't see any big ones so far, except for browser support of course. However here are a couple of caveats that you should keep in mind before using this:

• You can't dump any table with any content into it and be good to go. You have to actually think about the content for each table and how it should fit.
• It doesn't support huge tables without either creating monster stacks or hiding a lot of the columns.

Laura Kalbag

I like that she includes a bit about her in the footer rather than links. This is something I started doing on specific pages myself. She plays with color in an interesting way as well.

Brad Frost

Brad includes a big section on the bottom of every page listing all the services he provides. His hero text “I make great web experiences and help others do the same." is interesting and caught my attention.

Kerem Suer

Uses Dribbbles platform to host his portfolio. Which basically just showcases selected work from Dribbble. Which means it’s mostly images.

Rogie King

This portfolio is lively and clearly communicates his strong illustration talents. It is a one pager so it doesn't go very deep into each project it showcases which is a bit disappointing.

Nick Slater

All the work is presented as an image collage. When you click on a image opens a slideshow with that image. The images that follow are the other projects. No text describing the projects what so ever.

Ryan Putnam

Describes himself as a designer, illustrator, and potter which is a cool combination. It's interesting to me that his contact form is hidden on his about page. There is an image collage with his design work but only clicking on some of images actually takes you anywhere.

Stas Kulesh

Strange first page of a map with.. his home marked? Or something like that at least. Which he says, in his intro, is in the heart of middle-earth. Oh after clicking on “Works” and then clicking on “About” it turns out this is an agency that Stas founded. Oh well. I’ll leave this in here anyway as an example of vague intros that don’t really explain what the website is about.

Aleksandra Marjanovic

Her loading animation gives me the feeling that she is an architect. But it seems like she does anything creative on or off screen. Her website is rather fitting for that although there is a bit too much going on for my taste.

Sarah Dayan

Straight forward and clear about what she does. She has a blog and a vlog. I like that when viewing a lettering project she walks you through every step from the first sketch to the end result.

Simone Tufvesson

You are greeted by a rapid hand animation covering and uncovering text saying she’s up for freelance. I wasn’t sure if this was a loading animation while the page was loading or not so I waited a while to see if it would change. It didn’t so you just have to scroll a bit. Her projects are well presented with videos, images, color palettes and text.

Conclusion

A lot of the designers I wanted to review used Dribbble, Behance or similar as their portfolio so I had to skip quite a lot. Others only list the studios they work at as their website.

Overall it was interesting to see all the different creative directions they chose to take. I like it when they use their portfolio to experiment and surprise. I’m planning to keep on reviewing more portfolios since this is a really fun way to get inspired and learn something new.

My client was creating those landing pages by copy-pasting some html code and editing everything manually. Which was obviously getting overwhelming for them since their partners kept growing and growing. They wanted a solution that was simple manage and allowed them to update one or all the websites without too much hassle.

The websites would live on my clients subdomains and be mostly identical but still have many features that would always be different, such as the name of the partner, logo, email, etc. And some features that would sometimes be different, such as the hero text, call to action and various other parts. Some features would mostly be the same though, like some generic signup text and other things.

The design

At first I was thinking about using color schemes and design features from each partner but after a little experimentation, and prior experience trying to accommodate for such a wide variety of unknown variables, we came to the conclusion that it would be very difficult to make it consistently good looking. Instead we decided to go with something more like with our own clean design that would be similar with the design of the product itself, so once a user would signup or login they would feel like they are in familiar territory.

The development

When it came to actually developing the sites my first thought was that I would be able to use Drupal for it. I have a long history with Drupal so I was confident I could make it pick up the subdomains as variables and use them to completely transform itself for each subdomain name, serving different content from one Drupal instance. I quickly developed a prototype that did exactly that.

After discussing pros and cons of my prototype and possible solutions with my client we decided that a static site generator would fit better into their current ecosystem. It would keep them from the burden of managing one more database that would be vulnerable to an attack that could damage their reputation.

I had never heard of anyone doing something like this using static site generators but I was thirsty for a good challenge so I didn't hesitate and got started doing some research.

Enter Hugo

Hugo was quick to make it to the top of my list. I had heard many people praising it and after digging into their documentation and forum I found out you could specify a different config file with a different publish path that would allow me to create multiple websites from a single source.

This would enable me use one config file for each website I needed to create and just change a couple of variables to create a completely different website with its own url, partner name, logo, subpages, contact email and other things that needed to change, all in a matter of minutes.

The main parts of the config files look something like this:

# ****  IMPORTANT!! - START  ****

# Change these variables to be partner-specific.

# The logo should be white and either a SVG or a PNG with a transparent background.
# If it's a PNG the height of the logo should be 128px (Which will then be scaled down to 64px to look crisp on retina screens)

partnerLogo = "/images/partnerlogo.png"

# filesystem path to write files to 
# This is where the partner website will be created and the routing system should be directed to.
publishDir = "public/partnername" # this should be same as public/slugname

[params]
  partnerName = "Example Name"
  partnerSlugName = "example"
  partnerSignupCode = "exampleSignupCode"
  partnerWebsite = "//www.example.com/"
  partnerContactMail = "info@example.com"
  ...

# ****  IMPORTANT!! - END  ****

  # OPTIONALLY EDIT - START

  ## Enable / Disable Sections
  enableDashboardSection = true
  enableVideoSection = false
  enableTestimonialsSection = false
  enablePaymentsSection = true
  enableSignupButton = true
    ... 

  ## Overwrite text
  ## The following text overwrites the default text located in data/text.toml
  ## It's not necessary to edit any of the following variables. Only do so if you want it different specificly for this partner.

  heroHeading = ""
  heroText = ""
  heroButtonText = ""

  introHeading = ""
  introText = ""

  dashboardHeading = ""
  dashboardSubHeading = ""
  dashboardFirstItemHeading = ""
  dashboardFirstItemText = ""
  dashboardSecondItemHeading = ""
  dashboardSecondItemText = ""
  dashboardThirdItemHeading = ""
  dashboardThirdItemText = ""

  testimonialsHeading = ""
  testimonialsSubHeading = ""
  testimonialsFirstQuoteName = ""
  testimonialsFirstQuoteText= ""
  testimonialsSecondQuoteName = ""
  testimonialsSecondQuoteText= ""
  ...

You may have noticed at the end there that all the variables were empty. This is because in most cases we don't want to change that text between individual partner websites. Instead the default text is located in a data file in data/text.toml

Then in the templates there is a conditional that checks whether the variable is empty. If it isn't then it uses the variable inside the partner file rather than the default data text file.

For example:

<h1>
  {{ if .Site.Params.heroHeading }}
    {{ .Site.Params.heroHeading }}
  {{ else }}
    {{ .Site.Data.text.heroHeading }}
  {{ end }}
</h1>

I was really impressed with Hugo and its flexibility when it comes to bending it to your will like that and use it for something it wasn't really made for. The main drawback with the way I did this is that you can't include inline links in those variables.

Given the number of partners we needed to create these websites for,we created a little bash script to take care of actually generating and updating all the sites. So if we need to update the design or fix a bug only one command is need to update tens, or perhaps hundreds in the future, of websites in one go.

I'm happy to report that the client was extremely happy with the how things were set up and was quick to set up 15 partner websites right away.

I've compiled several do's and don'ts that I have found helped a lot to improve this process in my career. I will continue to refine this document as time passes.

When presenting a design

• Do start by clarifying what the goals of the design were.
• Do give a quick overview of the design and present your arguments for the decisions you took. If it was based on data then present the data and clarify why you think the design will work with the data.
• Do remind the client who the design is for. Its not for them, its for the users. I like to ask them to try to stay away from personal preferences on color and other trivial things. Put yourself in the mindset of an average user and focus on things that would make it easier for them to use the product.
• Do make it clear what you still think needs more work, to avoid misunderstandings about the current state of the design.
• Do list the items next on your to-do list.
• Do specify how you want the comments to be made. For example by making comments on InDesign or as an issues on Github or card in trello or anthing else. Make it clear
• Don’t bring up your credentials to win an argument. For example by stating you are a designer so you are more likely to be right. Instead focus on solid arguments preferably backed by some research.
• Do make it clear how you believe your designs fit to the goals that were defined in the beginning

When criticising a design

• Do think before you comment. Does your comment provide useful information to the designer. Unless something looks exactly like something else and/or like a penis. Then I recommend staying away from polluting the conversation with comments like “The logo reminds me of a road sign because it is circular”.
• Do focus on constructive criticism. It is hard to do right and takes a lot of thought and good communication. So don't rush into it.
• Do try to focus on making arguments that will improve the experience and stay away from personal preferences on color and other trivial things.
• Put yourself in the mindset of an average user and focus on things that would make it easier for them to use the product.
• Don't get into arguments with someone whose opinion you don't respect.
• Do ask a lot of questions to try and understand the designers rationale if something is not clear.
• Don’t use harsh language and say things like “Why didn’t you do..”. Instead offer suggestions for improvement in a friendly way. Design is an iterative process and a designer is not a know-it-all superhuman who is able to design the perfect design in first go.
• Don’t claim to be the user. It’s easy to fall into the trap of thinking you are the user because x,y,z but the truth is every user is different and humans tend to be too self-centric.
• Don’t bring up your credentials to win an argument. For example by stating you are a designer so you are more likely to be right. Instead focus on solid arguments preferably backed by some research.

Overall the key to success in these matters is comminication. Being careful what you say and how you say it no matter on which side you are is my biggest recommendation.

This list is a work in progress so I will update it as I remember more things that can help

nth-last-child works pretty much the same way as nth-child does except it runs in relation to the last-child.

For instance nth-last-child(odd) selects every odd number starting from the very last number and counting back from there.

Recently however I was in a scenario where I needed to select only the last two items in a list. Thats where I had to get a little creative and came up with this solution:

li:nth-last-child(-n+2)

The "-n" does the magic here by flipping the counting around. So it counts down from two (which is the "+2" part) and stops after 1, instead of starting at 1 and counting up (and thus selecting every element in the list).

If you are interested in learning more about nth-last-child, mozilla has some nice documentation and also css-tricks.com

Rest

Creativity cannot be force, contradictory to what a lot of managers like to believe. Working 16 hours instead of 8 does not produce twice the results and, more likely than not, will do the opposite. It could mean that the last 8 hours will not only be a waste but also the hours you plan on putting in the day after. Exhaustion will also hinder your creative though and can cause you to be sluggish, grumpy, lazy, unfocused, stressed and unproductive.

Rest can be anything, as long as it's not what you do all day at work. Take a break, get away from the keyboard and rest until you are ready to get back to it. Know your limits.

For me this is often the time when I have a great idea relating to some problem I am trying to solve. Even though I try not to think too much about work when I am resting.

But when I am exhausted that never happens. If I push myself too much and deplete my creative energy then I am pretty much done for. I won't have a sudden idea pop into my head and the quality of work I produce is lacking. I make mistakes and I am unfocused.

So put yourself first and go get some rest!

Focus

Focus is extremely important in the creative industry and if any manager wants their team to be productive, they should do whatever they can to enable focus for themselves and their team.

Focus on the goal

• Before starting a new project give time to think it over and plan it properly. Don't rush yourself, take the time you need to be confident that you are on the right path.
• Do your best to kill bad ideas.
• Don't get sidetracked by unimportant details.
• Don't be afraid to throw away features that have been developed, if you see that they distract you from the real goal.
• Don't attach your ego to your work.

Focus on your task

Avoid interruptions. Interruptions really hinder productivity. It takes a lot of time to get back that focus you lose when you are interrupted. Be it by a person, a device or anything else. Losing focus eats away at your creative energy.

Stop multitasking. People have come to believe that if you are not doing 10 things at once then you can't possibly be productive. It's true that many things happen but it is very unlikely they are of much quality and most definitely don't happen in less time. this podcast has a really good experiment to demonstrate how multitasking takes longer, I suggest you give it a listen.

Instead of multitasking try single tasking. By single tasking your way through one thing at a time you are able to focus and be extremely effective. Your results will be of better quality because you're able to see everything more clearly and notice problems earlier.

Noise is a lot more damaging than most people think. To be truly able to focus you need to be able to control your environment in a way that reduces any background noise and conversations happening around you.

Think

Put away your tools, find yourself a quiet place and give yourself time to simply think. This can often look to others and even yourself like you are not being productive, because you are not sitting by your computer and hammering away at your keyboard. But believe me it is one of the most productive things you can do. Her are a few things you can think about:

• All the assumptions you made and if there might be a better way.
• If you are using your time in an effective way.
• If you can somehow improve the flow of information between you and your team so that everybody will be on the same page.
• And countless other things that help you to be more effective.

Learn from your mistakes. After a project make time to think what could have gone better.

• Did you waste too much time pondering minor details.
• Were things not planned or designed well enough before starting
• Were you lacking essential tools needed for the project?

Stress

It can be hard to produce great results when you are under a lot of stress. Often stress is caused by unnecessary factors relating to the things I have mentioned in this post, like bad morale, lack of focus, exhaustion and also unsustainable pace. To reduce stress:

• Put yourself and your family first. Family emergency trumps company emergency.
• Rest.
• Focus.
• Keep up good morale.
• Plan ahead.
• Be realistic about deadlines, don't promise what you can't deliver. Personally I double my assumptions to make room for error.

Morale

Without good morale you and your team are likely to end up frustrating each other and depleting each others creative energy. Working with people you like and get along with is probably one of the biggest boosts in productivity you can find. I don't think this can be said enough. Here are some tips to help it improve:

• Give constructive criticism and be ready to accept it.
• Put yourself in others shoes.
• Show appreciation
• Listen well before speaking out.
• Don't be passive aggressive.

The key to good morale is good communication.

These are the tips I can think of right now to keep up your creative energy and overall productivity. I decided to write them all down so that I can look them over once in a while and see if I am doing everything I can to keep my creative energy up. I will be editing this post later on when I remember and learn more.

Beautifully simple to use

When opening the app you are fronted with a list of all the channels RÚV has to offer split into two buttons for each. The left one directing you to the tv-schedule where you can find shows in the order they were broadcasted. And on the right side a button to go straight to the live streams for each channel. You will also find a special kids section at the bottom as well as the play queue and favorites.

Once on the tv-schedule page you can easily switch days at the top or scroll down to search for your show. Easy access and simplicity were at the forefront when designing the app. Let the user get to his content the quickest way possible and stay out of his way.

Krakkasarpurinn - A lockable section for kids

We also made a special kids section called "Krakkasarpurinn" which can be locked, in case you only use the app for your kid and don't want him to wander around the app and potentially see some content not meant for kids. The dark look was also switched out for a brighter more kid friendly look. We wanted to serve the kids especially since they are the power users of iPads these days. In Krakkasarpurinn the shows are categorized by each series instead of dates so that they can go straight to their favorite show and watch "ALL OF IT" for hours on end (Note: this actually has not been implemented yet but will be soon).

Play queue and Favorites

Any episode can be added to a special play queue in order to build a list of things to watch later or binge watch, without having to find each episode after the other.

For quick access you can also add shows to favorites and easily find them again, in case you only follow a certain shows that you repeatedly come back for.

Great demands met

There had been a great demand for us to make an app, after all RÚV is the largest broadcaster in Iceland, and so far the receptions have been very good. The major complaints we have received are regarding Chromecast support, which is planned for the next release. It was even nominated as the best app of Iceland in 2014

The widget can be added to apps that want to give users the ability to connect to their own RemoteStorage. The user simply enters their special RemoteStorage address which looks like an e-mail address and syncs up.

They were in the process of enabling Dropbox and Google Drive integration so users didn't necessarily have to connect to a RemoteStorage backend. Thus making it more easily usable to those who already have Dropbox and Google Drive.

But the old design of the widget couldn't easily accommodate these changes so 5apps decided to sponsor an redesign and improve the UX.

Results

This project was smaller and more specific than my usual projects. But fun and demanding nonetheless.

I went through a lot of sketches and iterations through the process trying to make it as smooth and frictionless as possible. I'm happy with the results and, better yet, the client was very happy with it as well.

At first the widget looks like this. Simple call to action in one of the corners.

Click on it and you are greeted with a short introduction and a link to read more. Below that are your storage options, RemoteStorage, Dropbox and Google Drive.

If you click on the RemoteStorage option you are given a login screen where you enter your storage address. The other options require you to authenticate through those providers.

After connecting to your remote storage, you have your address displayed along with a timestamp from the last time your data was synced. And then two buttons, one to sync and one to logout. (I later changed that logout button to a power button)

Once you get back to working on your app the bubble disappears and only a little RemoteStorage icon sits behind. Sidenote: that logo has been redesigned as well.

Finally here is a little gif to showcase the interaction with the app.

It was a pleasure working on another open source project. Overall I think we are seeing an increasing demand for design in open source projects. Project owners are waking up and designers are forming groups.

Open Source Design is one of those groups who I am a proud member of. I met Sebastian there and got the lead for this project. I encourage any designers interested in open source to join us and help contribute to a more open world.

Research, discovery and design

Once I got acquainted with the company and team I started to get to know our users by using analytics and speaking to them in person. I wanted to find out how they were currently using our site and what problems they were faced with. I found out that majority of our users think of RÚV as their own, since it is publicly owned, and feel very passionately about it. But most of all I found out that they came to ruv.is with a very specific goal in mind, majority of which split into three groups:

• Check the headlines and read the latest news.
• Watch and listen to live streams for our tv and radio channels.
• Watch and listen to recordings from our tv and radio channels in Sarpurinn, our media portal.

It was abundantly clear that if they came with one of these three goals in mind they were usually not very interested in any of the other ones.

It was also clear that we needed to do more to show our users relevant content to keep them engaged the site. Our bounce rate was quite high, around 50%, although this is not unusual for a big news website like this.

But most of all we needed to make the user experience simpler and the interface more consistent. We also needed make it easier to maintain for the small team working on it. This meant creating a style guide and a more modular approach to how it was all built.

The news

Vast majority of the users come to the front page looking for news. Once there they check a couple of articles and leave. Our user testing told us that people felt that the front page was updated rarely and the same articles lingered there all day. This was something we already suspected so it confirmed our assumptions. The main headlines didn't get much space and the rest of the page only showed a couple of articles from each category of the site, some of which were not actively updated. So even though there were hundreds of articles being published each day it didn't feel like it to the user.

We decided to give the main headlines a lot of space on top with a big collage consisting of 9 of the latest headlines that our news reported wanted to feature.

And below it a continuous scroll of all the latest news, similar to Quartz and Facebook. This would allow the user to see the latest news as soon as they were available and then scroll down as long as they were interested. They could also filter this feed based on their interests. Here is how it looks like.

There it is in all its glory with advertisements for our own content, since it is illegal for us to put commercial advertisements on our web, and real content from various stakeholders and departments.

Clicking on any of the articles opens them in place. Allowing the user to quickly read it and then continue down the stream to find other interesting articles.

Sarpurinn, the media portal

For those of you who know the BBC iPlayer, Sarpurinn serves the same purpose. It is a internet tv and radio service that makes the shows previously broadcasted on our tv and radio channels available online, only a few minutes after the shows broadcast ends.

We did a lot of research for it and found out that most users who came to Sarpurinn would end up going out of it to our tv-schedule page and follow the links there back to a specific show in Sarpurinn. This was because they already knew what they wanted to watch, something that had already been on tv earlier that day or the day before. Rarely would they ever just come there to find "something". With this in mind it was clear that we should focus on making the linear tv and radio schedules available right at the start once you arrive in Sarpurinn. So we came up with this:

The linear schedule is the first thing you see on the left, making it easy to find your show according in the schedule without having to leave the front page of Sarpurinn.

Right next to it is the latest content that just became available, in case you are there for the show you just missed on tv.

Below it we added a powerful search feature where you can either simply type the name of the show you are after. Or click on the first letter that the show begins with. But by default it continues to show the user more of the latest episodes.

I also designed the apps for iOS and Android based on this research, although slightly simpler in usage and focus entirely on the tv-schedule.

Building a framework for Drupal is not easy

I created a modular CSS "framework" that enables us, who were building the web, to quickly style the features we are building, one element at a time. For example to make a white box with a gray border you would simply add the classes ".fill-white" and ".border". Pretty straight forward. However since it's built with Drupal that means you don't necessarily have access to place classes on all the elements that you would want. For example, we use Panels and a pane is output like this:

In the settings I can only set classes on the "section" tag. Which means the modular CSS had to account for this and kind of ruined the whole modular approach in a way. Because I had to account for every instance where we would not have direct access to every tag we wanted. This complicated things a lot but since we had simplification and reusable elements in mind when designing the website, I still managed to account for most of these cases pretty nicely, but I would have loved more control over the HTML.

Building a modular front end for Drupal is no simple task and I often wonder if this is the best way to do it when it comes to Drupal.

Conclusion

Overall this was a very exciting project from which I learned a great deal about users, Drupal and working with the same team for years. Our preliminary results, based on our open beta, indicate good things, although there are a lot of things yet to be fine tuned and tested.

In my experience I often need a larger image when the window size is smaller. For example if you have four images side by side across the screen, it would look something like this:

But as you reduce the screen size the images might get to small to be side by side like that. So you decide to change the layout of them to 2x2, like this:

Notice how the images are actually a quite bigger than they were in the beginning.

My idea on how to improve it

I think it would be optimal if the browser would simply check the size of the image container (the tag wrapped around the image). If the image container is small then get a small image. If the image container is big then get a big image. All you had to do would be to supply the different image sizes and make the browser aware of where to get them.

This would make it trivial to add images anywhere without having to think about how the window size will affect the image, whether it will get bigger or smaller, for each and every one. And also if you suddenly decide to change the layout, you don't have to specify the sizes of the images all over again.

After all, images account for sixty two percent of the data we send over to the clients and I just want to send the smallest possible amount of data whenever I can, no matter if the client is using a desktop, tablet or mobile.

However the problem with my solution is that we can't exactly expect the browsers to delay choosing the images until the HTML, CSS and Javascript has all finished loading can we? We could possibly though load the smallest one by default and then lazyload the rest.

I remember setting up a clothing store using Ubercart a couple of years ago, and the most frustrating thing about it for me was that there was no way to show an out of stock badge for products with attributes. You had to click on the product and choose the attribute you wanted, only to find out that the product was out of stock. This seems like a really bad user experience and would probably cause the user to become frustrated and leave, causing you to lose a potential customer.

Now I am working on another clothing store and decided to go with Drupal Commerce, unfortunately I faced with the same problem again and couldn't find any way to display an out of stock badge for products with attributes. However this time I managed to create my own out of stock badge due to the enormous flexibility of Drupal Commerce using Rules and a little bit of CSS hacking.

Getting started

First of all you are going to need the following:

• Drupal Commerce
• Commerce Stock
• Rules

Once you have made sure you have these requirements we can continue. I am using Commerce Kickstart in order to give me a good starting point so there might be some requirements that I am forgetting, but basically I think these 3 modules are all you need.

The key ingredient

Here is the magic rule that you will have to import (admin/config/workflow/rules/reaction/import):

{ "rules_out_of_stock" : {
    "LABEL" : "Out of Stock",
    "PLUGIN" : "reaction rule",
    "REQUIRES" : [ "rules", "entity" ],
    "ON" : [ "commerce_product_presave" ],
    "IF" : [
      { "entity_is_of_type" : { "entity" : [ "commerce-product" ], "type" : "commerce_product" } },
      { "data_is" : { "data" : [ "commerce-product:commerce-stock" ], "value" : "0" } }
    ],
    "DO" : [
      { "data_set" : { "data" : [ "commerce-product:status" ], "value" : 0 } }
    ]
  }
}

This rule is the courtesy of akalata and was found here

When enabled, this rule will disable product variations that are out of stock. So let's say you have a sweater with 3 different sizes: "Small", "Medium" and "Large". Once one of them reaches 0 in stock, the rule will disable that variation leaving only Medium and Large to choose from. So when the last available size runs out of stock the add to cart button will say: "Product not available"

Another rule found on the same page and created by kirie is also pretty useful alongside this one since it enables the variation again once it is back in stock. Just in case you forget to enable it when adding more stock:

 { "rules_stock_enable_product_when_back_in_stock" : {
    "LABEL" : "Stock: enable product when back in stock",
    "PLUGIN" : "reaction rule",
    "TAGS" : [ "Emoda" ],
    "REQUIRES" : [ "rules", "entity" ],
    "ON" : [ "commerce_product_presave" ],
    "IF" : [
      { "entity_is_of_type" : { "entity" : [ "commerce-product" ], "type" : "commerce_product" } },
      { "data_is" : {
          "data" : [ "commerce-product:commerce-stock" ], "op" : "\u003E", "value" : "0"
        }
      }
    ],
    "DO" : [
      { "data_set" : { "data" : [ "commerce-product:status" ], "value" : 1 } }
    ]
  }
}

The Add to cart form

In it's current form the rule is already providing better UX because it causes the variations that are out of stock to disappear from the select list so users don't have to select it on it only to find out that it is out of stock, because it simply isn't there anymore.

So now that we have the rule implemented it is time to make the add to cart badge show up on the product list's so that we can implement the CSS hack and manipulate it to serve as a out of stock badge.

Start by going to "admin/structure/types" and click "Manage Display" for the variation type you want to create the badge for. Next click on "Product list" and find either "Product" or "Product variations" in the list and click on the select list for it's format and choose "Add to Cart form". Finally move the field so that it is positioned right below the product image.

Now save and check your product list. The add to cart form should now be visible below the product image like in the example image here to the right, although most likely it doesn't look very pretty.

The CSS Trickery

Now that we have the add to cart form there we can begin hacking it to serve as a out of stock badge. You will have to add some CSS into your theme in order to hide the add-to-cart form when the product is in stock and only display it when out of stock.

Add the following code to the bottom of your themes stylesheet: (NOTE: If you are not using Commerce Kickstart the following code might not work for you, however you should be able to figure out what is going on and implement it yourself, given that you know some CSS)

.view-collection-products .field-type-commerce-product-reference {
padding: 0;
margin: 0;
}
.view-collection-products .field-type-commerce-product-reference form.commerce-add-to-cart .form-submit.form-button-disabled {
margin: 0;
margin-top: -120px;
background: #FF4747;
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;
}
.view-collection-products .field-type-commerce-product-reference form.commerce-add-to-cart {
padding: 0;
height: 1px;
}
.view-collection-products .commerce-add-to-cart.in-stock {
display: none;
}

That's it! Now your products in the product list should look something like the image here to the right. However the text still says "Product not available". So all you have to do is change that to "Out of stock" or something like that, which I did it quickly using the Locale module since the website I was working on was in Icelandic anyway.

Now if you are using Commerce Kickstart you might want to use these styles as well since it will create the badge on the "All Products" page as well.

.page-products .field-type-commerce-product-reference {
padding: 0;
margin: 0;
}
.page-products .field-type-commerce-product-reference form.commerce-add-to-cart .form-submit.form-button-disabled {
margin: 0;
margin-top: -120px;
background: #FF4747;
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;
}
.page-products .field-type-commerce-product-reference form.commerce-add-to-cart {
padding: 0;
height: 1px;
}
.page-products .commerce-add-to-cart.in-stock {
display: none;
}

This is the first tutorial I create so I would love some feedback and stories from people who try this out. Shoot me a message on twitter if you have any.

Getting started

When I first started using Syncthing I got rather confused. It is fundamentally a simple product, each of your devices has a unique ID that you use to connect them. Then you create folders and share them with the other devices. Simple.

But some usability issues caused it to be rather unfriendly to new users, there was a lot of information and settings to adjust. I like to call information overload like that "nerd-porn". It consist of showing a lot of information and settings that only nerds like and consider useful.

But for a normal user it is the opposite of useful. It gets in their way and confuses them because it requires them to get intimately familiar with the product before being able to use it. And as a result deters them from using the product, because most people, myself included, simply don't have the time for that.

But in this case I stuck around and found it to be a very powerful product.

Problems

One of the main problems for a new user was knowing where to start. There was no clear indication how you go about connecting to other devices and starting to sync your files. After all most people just want to set it and forget it.

The folders and devices also looked exactly the same. There was no clear differentiation between the two, so you were forced to read, figure it out, and then remember it. This was something I kept forgetting myself so I had to spend some time to remind myself which side was which, especially when I hadn't opened up the UI for a while.

Information overload was another problem like I mentioned earlier. For a normal user all this information is not required when you just want a quick overview of your setup. Extra information like Folder Path, IP address, Version, Last File received, etc.., belongs on its own page after you specifically ask for it.

These problems got me excited to get started in simplifying it all so I headed off and started sketching out some ideas in my notebook.

The initial design

What I came up with looked like this. With information relating to the local device up top, consisting of the name, traffic, RAM and CPU usage (which probably won't be relevant as the product matures) and the number of connected Global Discovery servers, which help you find your other devices. And then right next to it notifications and settings buttons.

Below the area was split up into two parts. On the right side, folders along with useful information. And on the left side connected devices along with only the up and down traffic.

Folders

I thought it would make sense to have the folder represent the way you are used to viewing folders. In a kind of a table. Making a clear differentiation between folders and devices. I stripped away a lot of the information relating to each folder. And left only what would help the user get a brief overview of the status. The columns consisted of Name, Size, Status, Devices and Actions

Name

Because folders need names ;)

Size and Status

Before there was a Global state and Local State each followed by the count of items in the folder and the size of the folders. I felt that this was mostly nerd-porn and would confuse most users.

So I reduced it to Size which represents size of the folder on the current device. That allows you to quickly see the size of the folder, and combined with the Status column shows you whether it is in sync with the rest of the devices.

However if you want to see the Global size, you can hover over the size column and a popup will appear with the global size.

Devices

The devices column consist of the identicons that were already in use in the old design. Combined with a color representing the syncing state of that device. Green means that the device is in sync. Yellow means that the device is syncing. And Red means the device is offline. Finally, hovering over the icon reveals the device name.

I never felt fully convinced that this way was the best way to represent devices and I think most likely it will be revisited in the future. The problem is that requiring a hover to see the name is not optimal. But then again in most cases you probably just want to know whether all devices are up to sync or if some of them are syncing. I think getting it out there and letting people use it is the best way to find out if that is the case or not.

Actions

Finally the Actions column has a button to rescan the folder and thus force it to update itself if needed. And an edit button which allows you to make changes to the folder settings.

Devices

I wanted the devices to be simple and easy to understand. Just add a device link it with a folder. Initially they were next to the folders with a colored identicon representing their state and up and down traffic displayed right beneath them.

However it then occurred to me that we could simplify it even further since the state is already displayed in the folder section and the traffic is not actually that useful. So I took it a step further and removed the devices section. But added a button to add devices in the Actions column.

More work to be done

There is still a lot of work left to be done. If you want to get involved and help out with the project. Reach out and get started.

Stay tuned for more articles where I will cover working with the community, iterations and development.