JamieJakov Blog

CSS Quirks and Oddities

March 15th, 2018

CSS is a weird language. Some people don’t even want to consider CSS as a programming language. However to me it will always be one, maybe even THE one.

Of course CSS can only be used to style your webpages, but it evolved into the one thing that defines a pleasant user experience. Without styles there would be no layout, without styles there would be no hierarchy, animations, responsiveness, interactions, etc. Of course the majority of these can be executed with javascript, but it never going to be as performant as pure CSS.

However it has its quirks… Some things in CSS just dont perform the way you’d expect them to in certain situations. I stumbled upon this article by Medium about Lesser known CSS quirks & advanced tips, and there they go into detail about some of the weirder things.

Some such weird things are:

Vertical padding is relative to element’s width not height
Margins overlap, but only sometimes
Opacity can change the z-index stacking order
Height: 100% may not do what you think it does (because parent element’s height is not set)

One really cool thing I found though is the concept called the lobotomised owl selector. Yes, thats right, the lobotomised owl selector.

*+*

It allows you to setup a default behaviour for all layout elements on your page, so if a new one is added it can already respect those values even before its properly styled. I quite like this idea of setting up defaults, however it is really hard to implement on large project that has been deployed.

Webdesign in 2018

March 15th, 2018

Design is an ever evolving industry, and web design is no exception. The practices that were revolutionary in the beginning of the 21st century, seem archaic by modern design standards. Some may say it is hard to keep up, but there are always those that want to drive progress even further.

I aspire to be one of those people, that is why I jump at every opportunity to learn something new, whether it be code or design. Since I never really studied design, I may not have the keen eye that some of my friends do when it comes to layout, or hierarchy, or just plain taste. However I can tell good design apart from the rest.

Recently I stumbled upon this article on Medium titled 7 Practical Tips for Cheating at Design. Of course I read it and pretty much agree with all the point they’ve raised:

Use color and weight to create hierarchy instead of size
Don’t use grey text on colored backgrounds, make the text closer to the background color is what actually helps create hierarchy
Offset your shadows
Use fewer borders
Don’t blow up icons that are meant to be small
Use accent borders to add color to a bland design
Not every button needs a background color

If you notice, I highlighted #4. That is because I was shocked as to how much cleaner you can make an application by removing borders. I tried it at work and for my personal projects and the results were just great.

Here on my blog I never really had borders, so it was already decent, but I now I see why this is.

Its already 2018 and our standards keep evolving, so good design is no longer a feature, is a requirement.

Introduction to User Experience Design

June 20th, 2017

User experience (UX) design is a relatively new field and only came around with the mass adoption of computers and digital technology. It has evolved over the years and is now an essential part of the digital product development cycle. The core mission of UX is to craft digital experiences that not only empower, but also delight users. In this digital era, innovation never stops and with it more and more opportunities for creating user experiences arise.

The question is how does one get into UX design. Is knowledge of coding essential? Or a degree in design? In reality it doesn’t matter, anyone with a keen eye for detail and a passion to make things better can be a UX designer.

But what is UX? UX is both the end result experience a product offers and a set of methods with which to craft experiences. These methods include various user research techniques, crafting user-flows, layout design, and user testing.

In this article I will give a brief overview of a few concepts that will help define the needs of the users, how to work with and adapt to constraints, what it means to create a story that shapes the experience, the innovation aspect of UX and that good UX comes from a lot of testing and being open to input.

Seeing Through the Users’ Eyes

The most important aspect of UX design is to learn that the ways users interact with a product and the experiences they have with it vary wildly depending on their backgrounds and life situations. In order to create a pleasing user experience considerations of the users age, background, physical location, interests, and of course comfort level with technology, need to be considered and designed around.

▹ or ▿ ?

September 7th, 2016

This title may sound a bit strange, but the question behind it is very serious and has caused numerous debates between UI designers.

When a folder or a menu group is collapsed should the arrow point to the right, or downwards?

This is an example of the arrow point to the right when collapsed and downwards when expanded. However not everyone believes in this standard, so UI designers fight that the arrow should be down when collapsed and up when expanded. As you can see in the article image above, the 2 options are both valid, however option 1 (on the left) has dominated the technology space as Microsoft (with Windows), Apple (in macOS) and pretty much all the Linux OSs all use this notation for folders, groups of contacts, and any other kind of grouped lists.

The web however is a different beast and a lot of designers come from print, so they know how things should work in the real world, but no so much how the standards have been set in computers for the past few decades.