10-hidden-css3-properties-you-should-know

CSS3 have made designing web more exciting with the introduction of new properties. While you might know of the popular ones, such as the box-shadow, border-radius, and transform, there are plenty more properties that you may not have heard of or tried, but would be glad to know of its existence.

W3C is constantly working on new CSS properties to make the web much better for designers, developers and users. In the meantime, let’s take a look at these 10 properties you may not know of but should really check out.

Recommended Reading: Beginner’s Guide to All Things CSS3

1. Tab Size

Most code editors are equipped with Tab Size control that allows developers to specify the code indentation width made with the Tab key. It was only recently that we were also able to customize the indentation of the code embedded on webpages.

pre {
	tab-size: 2;
}

Note that each browser may have their own interpretation of how long the tab-width unit should be. So, we may expect to see some discrepancies among different browsers. In terms of browser support, the tab-size property works in Chrome, Opera, Firefox, and Safari according to CanIUse.

tab size

2. Text Rendering

The text-rendering property will tell browsers how they should render the text within webpages. The text will be optimized for performance, legibility, or precision, which will eventually determine the text quality. Take a closer look at the kerning of the text in the following screenshot for a comparison between ‘normal’ text and optimizedLegibility text:

rendering size
IMAGE: AestheticallyLoyal

For more advice on good typography, check out Practical Typography.

3. Font Stretch

Some fonts provide additional faces aside from the regular Normal, Bold and Italic. Helvetica Neue or Myriad Pro as an example comes with faces such ‘Condensed’, ‘Ultra-condensed’, and ‘Semi-condensed’. This is where a new property called font-stretch is introduced; it allows us to apply these faces.

normal condensed

We may use font-stretch in conjunction with font property like for instance,font-style. Here is an example:

h1 {
	font-style: bold;
	font-stretch: ;
}

The font-stretch property currently only works in Firefox and Internet Explorer 9 (and above).

4. Text Overflow

The text-overflow property specifies presentation of content that is overflowing or truncated by its container. The default value is set to clip which simply hides the truncated text. Alternately, you can set it to ellipsis to depict the truncated text or content with horizontal ellipsis, as follows.

.content-box {
	text-overflow
}

In case you are wondering, horizontal ellipsis is the three dots at the end which usually indicates omitted content.

text overflow

5. Writing Mode

Not every language is written from the left to right direction. A few languages are instead written from top to bottom like Japanese or right to left like Arabic and Hebrew.

writing mode
IMAGE: AimiriFont

To accommodate these languages, a new property named writing-mode is introduced to let developers change the content writing direction through CSS. This code snippet, as an example, directs the content flow from the left to the right (regardless of the language).

p {
	writing-mode: rl-tb;
}

To change the flow of content, moving from top to bottom, set the property with the vertical-lr value:

p {
	writing-mode: vertical-lr;
}

6. Pointer Events

The pointer-events property allows us to control element behavior under pointer events like dragging, hovering and clicking. Using this, the affected link will do nothing when it is clicked; the link will be completely disabled, and will not even direct users to the address specified in the href attribute.

a {
	pointer-events: none;
}

Due to some critical issues however the pointer-events property is put on hold until the next CSS revision, CSS4.

7. Image Orientation

In an image editor such as Photoshop, you can change the image orientation by rotating or flipping the image. Now CSS3 allows you to do the same to the images on webpages through a new property called image-orientation. Here is an example on how we can flip an image horizontally using this property.

img {
	image-orientation: flip;	
}

You can also retain the original image orientation by specifying the property value to from-image, like so.

img {
	image-orientation: from-image;
}

8. Image Rendering

Similar to the text-rendering property, image-rendering defines the image quality on webpages, in particular when the image is forcefully resized. With the advent of this property comes a number of new values, and browsers have their own specifications in this matter. The crisp-edges value, for example, which preserves contrast and prevents blurry edges of images, is currently translated as -webkit-optimize-contrast in Webkit browsers and nearest-neighbor in Internet Explorer.

img {
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;/* Webkit */
	-ms-interpolation-mode: nearest-neighbor;  /* IE */
}

It’s an experimental technology, so we will likely see a few changes in the implementation.

9. Columns

The columns property allows developers to arrange web content into columns with ease. We split the content into two columns like this:

.content {
	columns: 2;
}

In the browsers that support this property – like Chrome and Safari – we will see the content arranged like so.

columns

Coupled with CSS Shape and a bit of creativity, you can have a fluid and more enticing content layout much like what you see in a fashion magazine on your websites.

10. Flex

The flex property aims to make building responsive grid more seamless while solving a couple of issues in the current mainstream method for web layout arrangement – the float property.

On top of that, by using the flex property, the web layout will take the full height of its container, which was quite cumbersome to deal with previously (take a look at our previous post on this matter: Equal Column Height With CSS).

Now, assuming you would like to build a web layout that comprises of three columns, you can have the markup arranged this way.

Column 1
Column 2
Column 3

Then, build them into columns using the flex property, like so.

#container {
	width: 600px;
	height: 300px;
	display: flex;
}
#container .col {
	flex: auto;
}

With additions of decorative styles like font and background color, we will get the following result.

flex

find-hidden-squares-and-experimental-inktraps-in-fatih-hardal’s-fh-giselle

The last time we chatted to Istanbul-based graphic designer Fatih Hardal, also known as Hardal, he was creating the experimental and visually pleasing FH Fraktur, a gothic typeface influenced by old architectural structures. Since then, Hardal has completed his undergraduate studies, started a master’s degree, and continued working with a heavy typography focus.

One of these recent typefaces, FH Giselle, was released in September this year. Hardal was inspired by Armin Hofmann’s Giselle poster made back in 1959 for the Basel Theatre’s production of the ballet suite, where the typeface gets its name from. The poster features a heavy use of contrast – from the stark monochrome to the polarity between the solid font and the blurry photograph – and it was this contrast that inspired Hardal when creating FH Giselle.

“I’ve been studying inktrap characters. I thought that would be appropriate for Giselle, so I did an aesthetic inktrap experiment,” Hardal tells It’s Nice That. “In my presentations, I look to past designs for examples, especially designs between 1940 – 1970. I admire them!” Being the first typeface that he created after setting up his new studio, Hardal Studio, he is especially motivated by the fact that his typefaces have been used across the world. “It’s a great feeling to have it used in other countries!” he says.

The font, coming in a singular weight, contains a number of striking features that makes it appropriate for display use. What instantly catches your eye is the aforementioned inktraps that create a sense of horizontal dynamism. Upon closer inspection, you notice that the corners are carved out at a 45 degree angle, a piece of visual treat that rounds off the angular characters when viewed from afar, but keeps the structural rhythm that Hardal creates with the letterform. “Together, they make a hidden square form,” he explains, something visible when the corners align. Although much more legible than FH Fraktur, the typeface is still as beautiful as his previous work. The use of thinner bars for the letters “E” and “H” and thinner strokes for his “M” and “N” is another notable addition to the unique shape of this typeface, almost like dragging a toothpick across paint.

“I spend a lot of time on my work. Unfortunately, there’s currently no type foundries in Turkey, so this is what I’m working on,” Hardal says. Outside of FH Giselle, Hardal also released the Ampersand typeface, a single weight serif font, back in May, and is currently working on another display serif typeface coming out in 2020. Hardal’s attention to detail and eye for how the pieces fit in a bigger picture is something to be admired.

the-hidden-secrets-of-ux

The Hidden Secrets of User Experience


It’s often said that the best design is invisible. After all, a user trying to accomplish a task on a website or app is likely thinking about their goal and not the site (in the same way that a person cooking dinner is thinking about the food and not the spatula). More often than not, the goal of the designer is simply to get out of the user’s way.

To the end-user, it isn’t always apparent how much work has gone into making something intuitive and elegant. In fact, they shouldn’t be thinking about the designer (or the design) at all.

The goal is really to create something that ‘just works’ in such a way that it doesn’t draw undue attention to itself – and it’s been said that some of the most elegant pieces of design in human history are so good and ubiquitous that we almost universally forget that somebody had to create them (the concept of the T-shirt, for example).

This ideal should be the goal of designers across many fields, and website design and user experience (UX) are no different. To that end, let’s look at some ideas and examples of ‘invisible’ UX optimizations that users will never think about…

The labour illusion

A team of scientists at Harvard Business School once conducted a study into the psychology of being made to wait for loading bars on websites. Our intuition might lead us to believe that being made to wait is invariably bad and that users will always want everything as fast as is physically possible, but the researchers found that this wasn’t the whole story.

Their study consisted of recreating and rebranding a popular travel booking website and presenting modified versions of it to different groups of participants – each person was instructed to try to search for and book the same holiday, and was later surveyed for their opinion of the website after completing the transaction.

Loading bars on websites study

50% of users saw only a loading bar, the other 50% an additional explanation of what the site was working on

Some users were shown their search results instantaneously; others were randomly made to experience a waiting period of anything from 10 seconds up to a minute. All of the users who had to wait were shown a progress bar, and some were also shown a visual display of the various processes undertaken by the service to populate the results page as an explanation for the delay.

The results, surprisingly, showed that the site was consistently reviewed the most favorably by users who had experienced a wait of up to 50 seconds but had been shown an explanation throughout of what the site was working on – even more so than the users who had received their search results immediately.

The researchers conducted other experiments, such as a simulated dating site that in some cases would deliberate for a time over the production of a ‘perfect match’ – in each case, users consistently responded more approvingly to the site that had taken a little longer but had provided some transparency about what it was doing.

They ultimately coined the term ‘labour illusion’, a concept with a subtle but important difference from operational transparency (an idea with which it sometimes overlaps). In other words, even if a task doesn’t actually take that long for the website to perform, there may actually be value in providing the impression of a system that is working hard to fulfill the user’s request.

Especially in the case of travel bookings, romantic matchmaking, and price comparison websites, a user might be slightly distrustful of a site that returns the answers too quickly. How thorough was it, we might wonder, in finding the very best deal for us? In a strange way, we are perhaps reassured that our query is being taken seriously by the system and chewed over with the appropriate meticulousness.

Airbnb’s machine learning secret

Another example of behind-the-curtain magic making a big difference to the user experience of search results has been employed by accommodation service Airbnb. It’s something a user would scarcely think about – you just type in your search for where you’d like to stay and then potential hosts come up. Simple, right?

In reality, there is an enormous amount of technology working behind the scenes to deliver the goods. After all, Airbnb offers a two-sided marketplace that wants to provide value for both guests and hosts – and there are many reasons why a host might not accept a request from a user looking for a place to stay (timing conflicts, amount of notice given, and so on).

To keep both sides happy, Airbnb implemented machine learning in 2015 as a means to make predictions about the preferences of individual hosts and the types of requests they would be most likely to accept. They recognized that for guests, sending a lot of requests and getting repeatedly turned down would be a bad user experience – and hosts wouldn’t want to be constantly receiving requests from guests they couldn’t accommodate.

Accordingly, Airbnb’s machine learning model pays attention to which enquiries each host does and does not accept and uses that data over time to predict the types of requests that are likely to be preferred. Thus, a potential guest searching the service for a place to stay is shown only those hosts who are most likely to respond favorably to the user’s request.

It is an elaborate system of data collection, mathematical weighting and complicated algorithms that matches Airbnb’s users to the perfect hosts – but none of it is obvious to said users, who rarely need to think about the how and the why of things that ‘just work’.

The dark side of UX

Of course, techniques that affect user experiences in ways that users don’t notice could be used for good or evil. Sometimes, unscrupulous UX designers can use hidden methods to manipulate or trick users into acting against their own best interests – signing up for services they didn’t actually want or clicking advertisements disguised as part of the page.

These so-called ‘dark UX’ techniques can take many forms, and at their most insidious can use the visitor’s own psychology against them – whether by exploiting the tendency of many people to skim-read content and hit the ‘continue’ button or by reeling users into a free trial that quickly becomes a paid subscription they can’t cancel.

Of course, if users do work out that that they’re being exploited it can spell trouble for the company caught employing these techniques. LinkedIn, for example, was found guilty of essentially tricking its users into email spamming all of their contacts in 2015 and ordered to pay a $13 million penalty.

As any Spider-Man fan will tell you, great power must come coupled with great responsibility. Much of what UX designers do is often visible to the end user in the form of carefully coloured call-to-action buttons, the arrangement of navigation elements and so on – but the world of ‘invisible’ user experience practices is an unintuitive secret to most.

Where ‘dark practices’ are concerned, at least, users generally work out what’s happened after a fashion – but when UX is done properly and ethically they should never know how it works or even think about it, and therein lies the beauty of the craft.

The practical details of Airbnb’s algorithm or a travel agent’s loading icon don’t have to be apparent for a user to appreciate their effectiveness – in much the same way that diners in an exquisite Michelin star restaurant don’t need to know the specifics of what happens in the kitchen to appreciate the craftsmanship inherent in a wonderfully prepared meal.

The reality is that apparent simplicity is sometimes the product of a great deal of behind-the-scenes complexity, and in an ideal world the user should never be encumbered with that knowledge. Much like the inner workings of a magic trick, the ‘how’ of a great piece of design is often a secret for only its creator – and perhaps a few fellow professionals – to know and appreciate.

—–

This post was contributed by Angle Studios – expert Kent web designers and UX specialists with over 15 years of experience delivering high-quality website and branding services for businesses across Kent and London, UK.


Userbrain - Testing early and often finally becomes reality