Moki-Moki Market

Blog Emojis Fonts Graphics Plugins Textures Themes
Ooze

The Most Under-Valued CSS Rule to Improve UX

Rhyme With Me

The Single Most Easiest Way to Improve User Experience on Mobile layout

On your mobile layout there is naturally usually a limited amount of space to present your content to visitors. Here is a single CSS rule that will improve your site quality cunningly when enabled.

Meet overflow-wrap: break-word;

*Fanfares playing* The CSS rule is:

html {
	overflow-wrap: break-word;
}

The overflow-wrap property makes it possible to define that the visitor’s browser should break a line of text on the targeted element onto multiple lines even in otherwise not breakable place.

It is wise to set the property on html or body element since this way it automatically affects all aspects of your layout.

So, when you set this rule on long words such as BoogieWoogieReggaePartyRockNRollMan will be cut and forced to have a line break when the text is too big for its container and would overflow.

Demonstration

These pics demonstrate the problem and the solution of using overflow-wrap break-word.

The property is not used.
Now overflow-wrap property is set to break-word.

First there is no break-word value set which is usually left this way by developers on default. Finally overflow-wrap: break-word is active and the extra long word is forced to line break on the limits.

Enchance User Experience Fast N’ Easy

So be sure to toggle this rule on on your site’s mobile layout to improve the user experience in an easy and fast way. The property described in this article is probably one of the most undervalued CSS rule that exists.

Cheers!


Tag Cloud


Hot Picks

UFO Plugin Advertisement
UFO Plugin – Flying Saucer

UFO Plugin – Flying Saucer

A very simple plugin that when activated makes an UFO to glide over your site’s pages. Very nice way to cheer up your bored visitors!

Retro Windows 95 Pc Graphics
Retro Windows 95 Template Graphics

Retro Windows 95 Template Graphics

All-in-all the “Old Computer Instagram Templates” product is a good pick considering the affordable price and unique retro Windows 95 …

CyberChimps Responsive Pro WP Theme Download Link
Responsive Pro Theme

Responsive Pro Theme

CyberChimps tell you that with their theme you can setup a responsive website faster and easier than ever before. Sounds like an advertisement! Let’s see.

Modern Cool Portfolio WordPress Theme For Download Here
Modern Portfolio

Modern Portfolio

The design of the theme is clean white and minimalistic leaving almost all the available room for your own graphics. The header menu of the page is editable via WordPress navigation tool.

Clean And Simple Unicode WordPress Theme for Download
Unicode WordPress Theme

Unicode WordPress Theme

Mr. Udara Jay is a web designer who states creating the next generation WordPress themes. This time we’ll look does his “Unicode WordPress Theme”.

This tasty Avocado Emojis Graphic pack is for you to download!
Avocado Emojis

Avocado Emojis

Fresh Greetings From Canada Canadian designer Janette Lodermeier loves to create cute and colorful characters. This time she has to offer some fresh and impressive emojis in the form of […]


Design and Marketing Blog

Moki-Moki's resilient occasionally updated blog specializes in intriquing topics on fields such as web design, graphics design, search engine optimization, marketing, and business. Mr. Moki takes deep dives to fascinating and undervalued themes and pops out crystal-clear pieces of bewildering information.


Latest Five Entries

↑ Back to Top