Text Spacing Problems Require Close Attention for Mobile Web Design

A common method of enhancing the presentation of a web page's interactive elements is to have them dynamically respond when the user rolls their mouse cursor over them. This is a useful way to visually indicate to the user that a certain button will register as "pressed" once the user clicks with their mouse because it would otherwise indicate whether the button is no longer underneath the cursor's current position. Some websites include rollover buttons that change their shape and size while the cursor is highlighting them.

However, many would argue that this should generally be avoided in idealized web design because of potential spacing problems that would be avoided if the dynamic element encompasses nothing beyond changed details within the button's regular space. It may be okay if the button only expands horizontally a short distance, but that assumes that the website has been designed to accommodate the button's expanded form so that any text that might be located next to it will not get awkwardly pushed down. It is less acceptable for a button to be enlarged vertically because that will almost assuredly push down all of the content or aesthetic elements located underneath it. This occurrence can be all the more jarring if the rest of the page then snaps back into position once the button shrinks back to its default shape and size.

Easily the worst way to design a web button is to have it shrink in size when the user hovers over it. If either this or some other change to the button's shape would leave the cursor hovering over empty space, then the user will be highly inconvenienced because the cursor will have to be moved again, and the button might end up changing its shape multiple times before the user can settle on it. If a website's design would benefit from additional information appearing next to a button when it is highlighted, then the best method would generally be to have it appear from the button's space as a detached pop-up that does not affect the placement of the content underneath. For more information click here https://v.redd.it/o81o9xxj4pz31.