Gilli.is

Direct flights to Iceland

Sun, 28 Apr 2019 00:00:00 +0000

I couldn't find any list of cities that offer direct flights to Iceland, so I decided to make my own and share it. Here is what I found. ## Europe ### Paris Iceland Air ### Amsterdam Iceland Air ### Hamburg German wings

Inspiration: Emergence

Wed, 25 Jul 2018 00:00:00 +0000

I'm genuinely inspired and amazed by the design of this website for this investment fund. The portraits, the colors, the layout, everything, simply amazing.

Nice guide for using SVG on the web

Thu, 02 Aug 2018 00:00:00 +0000

Just came across this while searching the web regarding some SVG issue I was having. It's a nice reference guide to using SVG on the web. I had forgotten that you could use the `` element for SVGs still be able to manipulate it with CSS and javascript.

Webmentions

Wed, 25 Jul 2018 00:00:00 +0000

Sounds like webmentions could possibly enable us to take back and own our identity a bit more on the internet.

Using HSL for web development

Fri, 17 Aug 2018 00:00:00 +0000

Sara Soueidan goes into detail on how using HSL instead of HEX or RGB simplifies creating matching color sets and how powerful HSL can be.

Web design museum

Tue, 25 Sep 2018 00:00:00 +0000

I just stumbled across the web design museum. I remember a lot of them but somehow they always looked better in my memory. Who knows, maybe one day one of my designs will be there! :)

Contraste app

Tue, 16 Oct 2018 00:00:00 +0000

I just stumbled upon this nifty little app that sits on your desktop and let's you quickly and easily test text contrast.

Blobmaker

Thu, 10 Jan 2019 00:00:00 +0000

I stumbled across this cute little blobmaker tool in my RSS feed today. It's a clever little app that helps you create blobs that you download as SVGs. This solves a small problem but it can be surprisingly frustrating to create blobs like that manually so I bet somebody created this to scratch their own itch.

A logo I made got featured

Wed, 10 Apr 2019 00:00:00 +0000

It's always a nice feeling to see your work get shared. I just noticed some traffic to my website coming from a a little logo inspiration website featuring a little logo I made for a client. I don't normally do much logo work but once in a while a client twists my arm and this one was the result of one of those cases.

The three year rule: How to stay motivated

Thu, 01 Apr 2021 00:00:00 +0000

A nice article on how to stay motivated and let go of the expectation of instant feedback. Great things take time.

Theraputic motorcycle repair videos

Tue, 06 Feb 2018 00:00:00 +0000

Maybe it's just me but I find it very relaxing and theraputic to watch someone fix something. I also like fixing things myself and have a great interest in motorcycles. This guy I found on Youtube has a great collection of videos where he is fixing up old bikes and cars. I recommend checking out this playlist of his where he is bringing a 1971 Honda CB 350 back to life.

Baseline soft launch

Fri, 30 Apr 2021 00:00:00 +0000

I've quietly launched my new product, Baseline. Still testing things out so I haven't made much noise about it yet.

FOSDEM Open Source Design videos are online

Wed, 07 Feb 2018 00:00:00 +0000

The FOSDEM Open Source Design videos are online. The presentation is a bit rough but if you have any interest in design and open source software I recommend checking them out.

Baseline Embed Test

Thu, 06 Jan 2022 00:00:00 +0000

I've added a feature to embed brand guides from my personal project, (link: https://baseline.is text: Baseline), and wanted to test it out here on a typical blog, with width constraints and other limitations. Here it is:

Japan hotel

Wed, 07 Feb 2018 00:00:00 +0000

My wife and I have been thinking about visiting Japan and this interesting hotel just popped up in my RSS feed.

103 Bits of Advice

Tue, 03 May 2022 00:00:00 +0000

I stumbled upon this excellent collection of advice on things the writer wished he knew when he was young. The experience and mistakes of the writer really shine through his tips. I only know because I've made a lot of those mistakes myself, which gives me confidence in the rest of the advice.

SimplyCredit Partner UI

Fri, 05 Sep 2025 18:11:45 +0000

SimplyCredit

When the guys at SimplyCredit first approached me I thought“ Why would anyone need help paying their credit cards?”. Because over here in Iceland it is very unusual to have more than one credit card. Let alone a credit card issued by something other than a bank. Many even go for a prepaid credit card that they have to transfer money to, before purchasing what they want, because they are afraid of someone stealing their card and buying a Porsche online. But it wasn’t before long before I got very excited to help them tackle this problem and putting the _simply_ in SimplyCredit. ## In the beginning, my brain hurt I’m not going to pretend to be smarter than I am. So I admit wrapping my head around APR’s, credit scores (something we don’t have in Iceland), hidden fees and simply understanding how this whole system really works was not easy. But coming into things like this with a fresh perspective is a gift. It gives you the opportunity to look at everything with a completely new angle. Questioning everything that your client takes for granted and “standard practice” (TODO insert link about the harmfulness of this). I’m never shy of asking “why?”. Some people are afraid of asking why because they think it makes them look stupid. But asking why, even when you know why, can help everybody uncover biases. Asking why can help uncover old traditions that may not apply anymore. I could go on. On top of that, if I have trouble understanding a system then in all likelihood there are might be others who still don’t fully understand it even after being involved in it their whole lives. So me asking why can help everybody fill in the cracks. We were building a completely new way of paying your credit cards and wanted it to be easy as pie. It should fix the annoyances of credit card and be hands free for the most part. This kind of a service is meant to free your time and take your mind off things rather than being a hands on tool requiring your constant attention. !TODO insert image And so we set off on an iteration journey that would span many years. We constantly questioned and iterated on the user experience to simplify it even more and clarify things for our users. This kind of work is never finished. — ## A lot of problems There were countless complicated problems that had to be solved which I could write an entire book about. Maybe I will write that book one day but for this case study I will try to keep it focused. Our main problem from the start to the end was: Card enrolment. ## Card enrolment The process to enrol your card seems simple at first. Here is the list wrote down in the beginning: 1. Display cards to user 2. Select cards to enrol 3. Log into card accounts 4. Validate successful login Sounds simple. For the first iteration I came up with a simple UI that consisted of a credit card shaped box with the name of the card. (image: alt:Image of card) On click it would give you the login window for the card account (image: alt:Image of login) And when logged in it would make it clear that this card had been enrolled so you had nothing to worry about. (image: alt:Image of successful login) However things are usually not this simple in the world of finance. Here is another list I made with some of the complications that arise by signing on a credit card like this: * Can’t know for sure if the card number is correct so they have to be able to correct it. * This is where the money goes so it is important it goes the correct way. * Different cards have different length. * Cant know for sure any of the info such as APR and due dates are correct, so they have to be able to correct that as well. * ## Mobile finance We carelessly assumed that people would like to take care of financial things on a desktop or at least a tablet. So the for a while the dashboard looked like this: (Screenshot of desktop dashboard) (screenshot of mobile version) However as soon as we hit beta and got some real users it hit us that majority of our users preferred to use their phones and during the next iteration we skipped the desktop version altogether and wen’t with a single column mobile friendly design that is still entirely usable on desktop. (Screenshot of new dashboard) Logging in gives you a clear overview of where things are at. You don’t have to go any further as you will see that everything is running smoothly. Your payments are taken care of and your balance is in good standing. (Insert image) But if you do GO TROUGH NOTEBOOK DUDE + Improve your credit score + Target audience + Statement design + Made wrong assumptions about percentage that would use it from desktop. Apparently people use mobile for important finance things. + Designed hundreds of screens but in the end it only consists of a few. 1 Start with a brief overview of the product 1.1 First part should be about the market that the product belongs to. Ex. "There is no shortage of tools to sync your important data these days.." and so on 1.2 Then talk about the product itself, how it came to be and how I got involved. 2 Then talk about how you started analyzing the product and discovering its problems. 2.1 Talk about the problems you faced 2.2 Show some wireframes you came up with 3 Show and tell 3.1 Go over the process you used to find your design solution. 3.2 Show screenshots # TODO ## Iterations - evolution of small elements

Flex Partner UI

Wed, 18 Dec 2019 00:00:00 +0000

(image: screenshot-2019-08-16-at-12.44.39.png) (image: screenshot-2019-08-16-at-12.44.45.png) (image: screenshot-2019-08-16-at-12.44.50.png) (image: screenshot-2019-08-16-at-12.44.54.png) (image: screenshot-2019-08-16-at-12.44.57.png) (image: screenshot-2019-08-16-at-12.45.00.png) (image: screenshot-2019-08-16-at-12.53.53.png) (image: screenshot-2019-08-16-at-21.09.37.png) (image: screenshot-2019-08-16-at-21.09.41.png)

Flex

Wed, 22 Jan 2020 00:00:00 +0000

Landing page (image: screenshot-2019-07-08-at-14.39.41.jpg) Intergrated branding (image: 1-2-3-4.png) Enroll your cards (image: screencapture-localhost-4200-card-consumer-646f95f7-c0ea-4877-a665-db0eae8c1410-card-management-_acc_znvwgnsf0dbxpfdkw6xpvg-2019-03-15-16_34_42.png) Recommended transfers (image: recommended.jpg)

Ella

Fri, 25 Apr 2025 00:00:00 +0000

(image: 001-desktop-hd-copy-19-2x.png) (image: 002-desktop-hd-copy-20-2x.png) (image: 003-desktop-hd-copy-21-2x.png) (image: 004-desktop-hd-copy-22-2x.png) (image: 005-desktop-hd-copy-23-2x.png) (image: 006-desktop-hd-copy-20-1-2x.png) (image: 007-desktop-hd-copy-24-2x.png) (image: 008-desktop-hd-copy-25-2x.png) (image: 009-desktop-hd-copy-26-2x.png) (image: 010-desktop-hd-copy-27-2x.png) (image: 011-desktop-hd-copy-28-2x.png) (image: 012-desktop-hd-copy-29-2x.png) (image: 013-desktop-hd-copy-30-2x.png) (image: 014-desktop-hd-copy-31-2x.png) (image: 015-desktop-hd-copy-32-2x.png) (image: 016-desktop-hd-copy-20-1-copy-2x.png) (image: 017-desktop-hd-copy-33-2x.png) (image: 018-desktop-hd-copy-34-2x.png) (image: 019-desktop-hd-copy-35-2x.png) (image: 020-desktop-hd-copy-36-2x.png) (image: 021-desktop-hd-copy-37-2x.png) (image: 022-desktop-hd-copy-38-2x.png) (image: 023-desktop-hd-copy-39-2x.png) (image: 024-desktop-hd-copy-40-2x.png) (image: 025-desktop-hd-copy-41-2x.png)

remoteStorage

Wed, 21 Jan 2015 00:00:00 +0000

I was approached by Sebastian from [5apps](https://5apps.com) to redesign a widget for RemoteStorage that was in need of an overhaul. 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](https://github.com/remotestorage/remotestorage.js/issues/795#issuecomment-93741581) with it as well. At first the widget looks like this. Simple call to action in one of the corners. (image: 1-connect-remote-storage.png) 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*. (image: 2-choose-storage.png) 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. (image: 3-sign-in.png) 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) (image: 4-connected-via-rs.png) 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](https://github.com/remotestorage/design/issues/3) as well.* (image: 6-logo-only.png) Finally here is a little gif to showcase the interaction with the app. (image: rs-interaction-5.gif) It was a pleasure working on [another open source](http://axe.is/syncthing) 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](http://opensourcedesign.net) 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.

Syncthing

Thu, 03 Sep 2015 00:00:00 +0000

[Syncthing](http://syncthing.net) is an open source tool that syncs your data directly between your devices, without needing to go through any third party. ## 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. (image: Syncthing-example-1.jpg) ## 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 (image: Syncthing-main-1.png) 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* (image: Syncthing-folders.png) #### 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. (image: Syncthing-size-hover.png) #### Devices The devices column consist of the [identicons](https://en.wikipedia.org/wiki/Identicon) 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. (image: Syncthing-folder-edit.png) ### 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. (image: Syncthing-main-alternative.png) (image: Syncthing-alternative-add-device.png) ## More work to be done There is still [a lot of work](https://github.com/syncthing/syncthing/pull/2425) 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.**

Sarpurinn

Thu, 29 Jan 2015 00:00:00 +0000

Like I mentioned in that study the usage of Sarpurinn follows our linear tv and radio broadcasts closely. Users want to catch-up on shows they missed while on air. However the main difference between this and the website is that live streams are also are obvious and easily accessible in the app, while on the website the each station got their own brand pages where the live streams reside. (image: sarpurinn-example-1-main.jpg) ## 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. (image: Sarps-app-Forsida-Tablet-3-2.jpg) 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. (image: sarpurinn-example-2-schedule.jpg) ## Krakkasarpurinn - A lockable section for kids (image: Sarpurinn-example-3-krakkasarpurinn.jpg) 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](http://www.svef.is/frett/item4901/Vefir_%C3%AD_%C3%BArslitum_vefver%C3%B0launanna/) in 2014

RÚV

Wed, 21 Jan 2015 00:00:00 +0000

The website [ruv.is](http://ruv.is) was in need of a major overhaul. The design was dated, slow, not responsive and people had difficulty finding what they were after. Since we were planning a redesign we decided to do a complete rebuild as well because it was running on Drupal 6 and support would soon end for it. It would give us a chance to reorganize things and make it simpler to maintain for the small team running it. ## 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. (image: ruv-example-1-hladbord.jpg) And below it a continuous scroll of all the latest news, similar to [Quartz](http://qz.com/) 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. (image: ruv-example-2-newsfeed.jpg) 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. (image: ruv-example-4-article.jpg) 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. (image: ruv-example-3-sarpurinn-front.jpg) 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](/sarpurinn) 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: (image: ruv-example-5-code.jpg) 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](http://beta.ruv.is), indicate good things, although there are a lot of things yet to be fine tuned and tested.

Nostalgic

Wed, 19 Sep 2018 00:00:00 +0000

Nostalgic wanted to transform this experience by vetting the tours it would offer personally and guaranteeing the quality would meet expectations. With very limited selection and proper details about each destination included in the tour along with beautiful photography of the place. ### 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 (link: https://unsplash.com/@andersjilden text: Anders Jildén) (image: slice1.jpg) ### 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. (image: slice2.jpg) 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. (image: quote.jpg) ### 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. (image: slice4.jpg) ### 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. (image: slice5.jpg) ## 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. (image: tour1.jpg) ### 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. (image: tour2.jpg) ### 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. (image: tour3.jpg) ### 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. (image: tour4.jpg) ## 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: (image: nostalgic.jpg) (image: tour-full.jpg)

Autorefi

Thu, 25 Apr 2019 00:00:00 +0000

### Enter zip to start Since the service is only available to a specific region we don't want to waste anyones time. Thus the first step is to enter your zip to make sure the person is eligable. (image: 1.zip-2x.png) Once we have cleared the person as an eligible applicant we proceed to create an account and gather all the required personal information. (image: 2.user-account-2x.png) (image: 2.personal-information-2x.png) There can be joint applicant's on the loan that we need the information for. So in case the user chooses to add a joint applicant we collect their information on the next screen. (image: applicant-joint-info-during-signup@2x.png) ### Car information Now we're done with all the necessary applicant information we move on to the car information. (image: car-information-if-used-v2@2x.png) ### Document upload (image: document-upload@2x.png) The document upload was made to be flexible and quickly communicate the necessary documents. Once you upload a doc you choose what it's for and if you still need something it will say so between the upload field and the file list. (image: document-upload-upload-finished@2x.png) ### Review Once we gathered all the necessary information there is a chance to review. If anything doesn't look right, it's just a click away. Both by each section in the review and on the right half of the page where you can go back anytime, at any step of the process. (image: review-application@2x.png) ### Dashboard All is not over when the review is done. The user is able to come back and check up on the process, or even make new applications. Once there is an offer ready an email is sent out as well as it being visible right there in the dashboard. (image: loan-dashboard-notification@2x.png) ### Offer On the offer page the user can compare the exact loan they want, with every difference clearly visible. How much they pay per month being the most obvious along with changes in APR depending on the length of the term. (image: offer@2x.png) ### Results Products like these allow credit unions to team up to give them an compatative advantage. It allows an otherwise tiny credit union that people are unaware of able to make an offer to a customer that otherwise would never have heard of them. These kind of products are a real joy for me to design and build because they offer me a proper challenge to use my head to create a great experience that is simple and effective to use for the user.

Norde Source

Mon, 17 Feb 2020 00:00:00 +0000

Let's imagine you just purchased an icon set for a project you are working on. However, the icon set is black with blue accents which doesn't fit your brand, because your brand colors are not black and blue. Usually, there is no quick way to change that, especially for an entire icon set. You would have to manually edit icons one at a time, change the color, and export them individually. That's where Norde Source comes to the rescue. (link: https://norde.io text: 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. (image: norde-source-screenshot.png) ## 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. (image: kapture-2020-02-17-at-14.30.15.gif) ## 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. (image: kapture-2020-02-17-at-14.47.55.gif) ## 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. (image: kapture-2020-02-17-at-14.57.47.gif) ## 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. (image: screen-shot-2020-02-17-at-15.01.19.png) 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. (image: kapture-2020-02-17-at-15.10.57.gif) ## 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 (link: https://norde.io text: head over and download a copy of Norde Source).

Baseline

Sun, 01 Jan 2023 00:00:00 +0000

Baseline is what I like to call a brand design platform. You start by creating a brand guide in a few easy steps that automatically take care of a lot of the heavy lifting usually involved with creating a brand guide. For example, it extracts all the colors from a logo and presents it to you for confirmation. (image: screenshot-colors.png) (image: screenshot-typescale.png) ## Baseline Studio Once your brand guide is ready to go, you can start designing branded content with a single click of a button. Baseline has a lot of pre-made templates to choose from. All you have to do is select the one you would like to use, and Baseline will apply your brand (logos, colors, typography, etc.) to the template, giving you an automatically on-brand design. Then, all you have to do is modify the text, and you are ready to go. In this example, we select a template, then choose and apply the Netflix brand to it. The result is a Netflix branded design without us having to do anything. All we have to do now is edit the text. It couldn't be any simpler. (image: apply-brand.gif) Having Baseline apply your brand like that saves a lot of time since you don't have to adjust the whole design to your brand, which can be a tedious process. (image: screen-shot-2021-05-02-at-23.28.29.png alt: screenshot) It's still early days, so the template collection is rapidly growing, but that's not all. It also comes with vector illustrations that also automatically apply your brand to them when used. Also included are thousands of stock photos, device mockups like iPhone and Macbook with easy to replace screens to show off your app or website, and you can, of course, upload your own assets to use. (image: screen-shot-2021-04-10-at-21.16.14.png) (image: screen-shot-2021-04-10-at-21.15.58.png) (link: https://baseline.is text: Go try Baseline out for yourself)

Old freelance work 2010-2013

Mon, 09 Feb 2015 00:00:00 +0000

I wanted to highlight some old work I did when I was freelancing between the years 2010 and 2013. I thought they deserved a home here since I am retiring my old portfolio and will be focusing on writing case-studies rather than image only portfolio. I feel that just putting images of work doesn't say much about my skills or the work and thought that went into making it. So this one last time I will be publishing my work on my page without going into the details. However if you want to check out some of my work in process you can visit my [dribbble page.](https://dribbble.com/gilli) ##[Explorable](http://explorable.com) - Research and information (image: explorable.jpg) ##Imovation - Payments and couponing (image: imovation.jpg) (image: imovation-2.jpg) ##Abundance the book (image: abundance.jpg) ##Galaxy.is - E-commerce (image: galaxy-1.png) (image: galaxy-2.jpg) ##[Thorhildur.is](http://thorhildur.is) - Psychologist (image: thorhildur.jpg)

JPMorganChase

Mon, 01 Sep 2025 00:00:00 +0000

## The Challenge JPMorganChase is the largest bank in the world, with nearly as many employees as the entire population of my home country, Iceland. The sheer scale of the operation presented a unique challenge: to design a solution that was powerful enough to handle complex financial operations but simple enough for anyone to use without a training manual. My goal was to create a user interface that felt self-explanatory, turning complicated tasks into a seamless and intuitive experience. ## Onboarding **The Problem:** The first hurdle for any financial product is getting users set up. Users needed to connect accounts, input property details, and add tenants—a process that could quickly become overwhelming and lead to abandonment. **The Solution:** I designed a guided onboarding system that broke down the setup process into small, manageable steps. A progress tracker visualized the journey, showing users exactly where they were and what was next, which helped build momentum and reduce friction. (image: desktop-37.png) (image: desktop-15.png) (image: desktop-16.png) By guiding them step-by-step, we ensured users could get fully set up without feeling overwhelmed. (image: desktop-17.png) ## Properties **The Problem:** For landlords managing multiple properties, keeping track of essential information like addresses, photos, and key documents can be a scattered and disorganized process. They needed a single, reliable place to store and manage all the details for each property in their portfolio. **The Solution:** I designed a centralized system for property management. The interface allows users to easily add new properties and edit their details, including uploading images to create a visual portfolio. Each property has its own dedicated page that acts as a hub for its information, displaying high-level metrics like revenue and expenses, giving landlords a clear, organized overview of their assets. (image: desktop-8.png) (image: desktop-11.png) ## Tenants **The Problem:** Efficient tenant management was crucial. Landlords needed an easy way to screen tenants, collect data, and keep track of payments without getting bogged down in administrative work. **The Solution:** I designed a streamlined tenant management system that automated data collection and presentation, making tenant screening effortless. This allowed landlords to quickly assess applicants, invite and manage their roster of tenants with ease. (image: desktop-14.png) (image: desktop-12.png) ## Transaction Categorization **The Problem:** Manually categorizing hundreds of transactions is tedious, repetitive, and prone to error. Basically a major pain point for users, and something everybody tends to procrastinate. **The Solution:** The transaction categorization system I designed turns this chore into a simple, one-click action. The system intelligently groups similar transactions and suggests a category. All the user has to do is click "Accept." Each time a user confirms or adjusts a suggestion, the system learns and improves its future automatic categorizations. It feels more like a game than a task. (image: categorization.png) The user can simply accept the suggestion or modify the tag, turning a tedious task into a quick and satisfying one. (image: categorization-active.png) ## Dashboard **The Problem:** Users needed a high-level overview of their financial health without digging through spreadsheets. They needed to see their current standing and understand future projections at a glance. **The Solution:** The dashboard provides a detailed financial overview with a forecast for the coming months. This clear visualization gives users a comprehensive view of their finances, helping them make informed decisions and plan for the future. (image: dashboard-active.jpg) This project presented a series of complex challenges, which is what I thrive on. It was incredibly rewarding to tackle these problems and design solutions that are simple to use without sacrificing functionality. It has been a privilege to work with a company like JPMorgan Chase, where your work has the potential to have a huge, positive effect on a lot of people.

The Best Designers Know Nothing About Your Industry

Thu, 04 Sep 2025 00:00:00 +0000

I keep seeing job ads looking for some dream designer who has experience and knowledge of their particular niche and think that their perfect designer soulmate is out there somewhere. The designer soulmate is out there, but they probably have no experience in your field. A good design relationship is about people, not products, fields, or niches. (image: bramley-parker-1830-1600.jpg) ## A good designer is a good communicator To be a good designer you need to be adaptable and able to quickly learn what you need to know about any particular field your client is working in. You need to be a good communicator and able to extract the information you need out of people. You then need to be able to process that knowledge, learn from it, and apply it to the project. ## The client should be the expert A designer only needs the client to know their field, and then be able to extract what they need to know from the client's expert knowledge. Good design is teamwork. No good designer will make great work in a bubble. When I start working on a new project, the first thing I do is immerse myself in the field that my client is in. I learn everything I can about the field, their goals, their problems, competitors, and generally ask a lot of "stupid" questions. ## Stupid questions It's key to ask a lot of questions, some might call them stupid questions because often they might seem obvious, but I've learned a lot by asking a question I thought I already knew the answer to. More often than not, I learn things are not actually quite how they seemed, and I learn some key point that will help me produce great work. ## A fresh perspective I believe a fresh perspective is always positive. Not being already knowledgeable in a field allows you to question a lot of the assumptions the experts have made. Questioning why something is the way it is is always positive. It can make the difference between a great product and a product that is no different from all the other products. Being already an expert in a field can be detrimental to your work, as you might already have too much knowledge that might not directly apply to what your new client is doing. That’s not to say that it’s a bad thing to be experienced in a field, as long as you ask all those stupid questions again, you should be fine.

Native image lazy loading

Tue, 14 Jan 2020 00:00:00 +0000

This feature has been longed after for a long time, by me at least. Until now you needed to use some library if you want to lazy load your images in all browsers, and you still do if you want to to work in all browsers. However you can start using lazy loading for images , as well as iframes actually, if you don't mind it only [working in a few browsers](https://caniuse.com/#feat=loading-lazy-attr), since browsers that don't support it will just ignore it and load the image normally. All you have to do to use it is to add the attribute **loading** with the value of **lazy** like shown below: ``` ``` That's it, simple as pie! Now to demonstrate this I'll add a bunch of `
` 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!

(image: gillis_cat.jpg) 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.

Landing pages and Hugo

Wed, 14 Mar 2018 00:00:00 +0000

A client of mine came to me with a problem. They have multiple partners that use my clients product for their customers and each of those partners needs a landing page to promote and onboard their users. 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](https://gohugo.io/) 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:

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.

Designers and their portfolios

Sun, 05 Aug 2018 00:00:00 +0000

I’ve been checking out a lot of designers portfolios lately out of curiosity to see what others are doing and how they present themselves. I decided to write small reviews on some of them and share with you. ## [Laura Kalbag](https://laurakalbag.com/) 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](http://bradfrost.com/) 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](http://kerem.co/) Uses Dribbbles platform to host his portfolio. Which basically just showcases selected work from Dribbble. Which means it’s mostly images. ## [Rogie King](http://rog.ie/) 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](http://www.nicholasslater.co/) 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](http://ryanputn.am/) 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](https://sliday.com/) 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](http://archaleks.com/) 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](https://www.sarahdayan.com/) 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](http://tufvesson.work/) 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.

Selecting the last two elements with CSS

Thu, 09 Apr 2015 00:00:00 +0000

`nth-child()` is a very handy pseudo-selector, but sometimes you need to approach things from the other end, starting from the last item. That's where `nth-last-child` comes to the rescue. `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](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child) and also [css-tricks.com](https://css-tricks.com/almanac/selectors/n/nth-last-child/)

Responsive tables using CSS Grid Layout

Sun, 09 Sep 2018 00:00:00 +0000

Tables can be a big problem on mobile devices. [There are a number of articles](https://css-tricks.com/responsive-data-tables/) covering the subject of how to make them responsive all with their own drawbacks. 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:

Account	Balance	Limit	Available
1110-26-000487 Checking Account	-250.000	500.000	250.000	Transfer
1110-26-000487 Savings	1.000.000	0	1.000.000	Transfer
1110-26-000487 Joint Account	150.000	0	150.000	Transfer
Total (USD):	900.000	500.000	1.400.000

## 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, (link:https://caniuse.com/#search=css%20grid%20layout http:// text: 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.

My problem with responsive images

Wed, 15 Jan 2014 00:00:00 +0000

Currently responsive images work by checking the window width and giving you the corresponding image based on that width. Which is fine when you have an image that fills out the widest width possible, like those big hero images, but that's not always the case. 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: (image: 1x4.jpg alt:images in a 1x4 layout) 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: (image:2x2.jpg alt:Images in a 2x2 layout) 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](http://httparchive.org/interesting.php#bytesperpage) 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.

How to get better at design

Tue, 05 Feb 2019 00:00:00 +0000

I recently answered a post on (link: https://www.indiehackers.com text:Indiehackers.com ) about how non-design founders (Such as developers and business people) can get better at design. That's something I always try to help my clients do so that they can make better decisions. This allows us to work better together and help them become more self-sufficient. After all my job is to help them succeed not bleed them out. Here is what I told him: **** 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.

Out-of-stock badge for Drupal Commerce

Thu, 10 Jan 2013 00:00:00 +0000

***In this tutorial I will show how to create an out of stock badge for Drupal Commerce (Or Commerce Kickstart to be specific) using a simple rule, the add to cart form and some CSS. If you are currently using the add to cart form in the product list this tutorial might not work for you.*** (image: sold-out-1.jpg alt:Sold out) 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](https://www.drupal.org/project/commerce) * [Commerce Stock](https://www.drupal.org/project/commerce_stock) * [Rules](https://www.drupal.org/project/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](http://drupal.org/node/1689458#comment-6619434) 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](https://www.drupal.org/node/1689458#comment-6761182) 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. (image: add-to-cart.jpg alt:Image saying "products not available) ## 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;
}

(image: complete.jpg alt:Image showing a product that is sold out) 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](http://twitter.com/gillisig) if you have any.

Why designing for open source can be so difficult

Tue, 11 Feb 2020 00:00:00 +0000

After being involved with design and open source projects for many years, I've noticed a few common reasons why designing for open source projects can be very difficult. Open source projects (especially FOSS) face a lot of issues that more conventional projects don't because they lack a clear business model, the structure, and the incentives that for-profit proprietary projects have. (image: corliss-steam-engine-1600.jpg alt:The Corliss gear-cutting machine from https://www.oldbookillustrations.com/) ## 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](http://gilli.is/projects/syncthing). ## 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](https://css-tricks.com/what-is-bikeshedding/). ## 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 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](https://opensourcedesign.net/), which I've been a member of for a long time, and whose goals are to improve open source design.

Creative energy

Thu, 12 Feb 2015 00:00:00 +0000

Creative energy is what you use when you are working on things that require you to use your brain to solve various tasks and problems. If you deplete your creative energy you burn out. Here are some of the things I try to have in mind to keep my creative energy up. ## 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](#stress) 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](http://en.wiktionary.org/wiki/bikeshedding). * 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](http://www.developertea.com/episodes/6528) has a really good experiment to demonstrate how multitasking takes longer, I suggest you give it a listen. Instead of multitasking try [single tasking](http://focusmanifesto.com/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](http://blog.ted.com/2013/04/24/9-ways-that-sound-affects-our-health-wellbeing-and-productivity/) 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](http://www.extremeprogramming.org/rules/overtime.html). To reduce stress: * Put yourself and your family first. Family emergency trumps company emergency. * [Rest](#rest). * [Focus](#focus). * [Keep up good morale](#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](http://rocketsalad.net/appreciation-is-not-a-rocket-science-2/) * 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.

Notifications are out of control

Sun, 13 Jun 2021 00:00:00 +0000

It seems that notifications these days have lost their meaning. Companies do not seem to respect people's time and constantly want to shove their "content" down their throats. It amazes me how far they go to draw people's attention to them at all times. This post was born after waging several notification-wars with various apps I use. (image: alas-mercy-1600-1.jpg) ## 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.

Do's and don'ts for presentation and critique

Sun, 11 Sep 2016 00:00:00 +0000

*Design presentation can be a very delicate process, especially the initial presentations for a new project. If handled incorrectly it can cause a lot of stress for both sides, feelings can get hurt, bad morale can build and lack of progress overall.* *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**