Updated 21 December, 2020 · back to Reference
Understanding the REM (root em)
Svija is unique among website builders in that a Svija page is always perfectly adapted to the browser window.
The page elements are never shifted or repositioned for differently-sized windows, but the content of the page changes size with the window.
This effect is made possible by the use of the REM unit for positioning the elements of the page.
As opposed to the pixel, which is always the same size regardless of browser window size, the REM varies with the width of the window.
Pixels in Illustrator · REM in Svija Cloud
In Illustrator, Svija uses pixels; Svija Illustrator documents are completely typical.
By default, page widths are:*
- 1200 px for the desktop version of a page
- 300 px for the mobile version of a page
In Svija Cloud, Svija uses REM units: everything done in CSS or Javascript is done using REM units.
For example, to animate the movement of page element by 25 pixels in Illustrator, it will be moved by 25 rem in Javascript or CSS.
Remember: 1 pixels in Illustrator = 1 REM in Svija Cloud.
*You are free to modify the defaults and to add other categories in Svija Cloud.
The REM: root em
In typography, distances are measured by the em unit: the width of the letter M. In this way, various aspects of a text can be described consistently, whatever the font size.
On the internet, the em unit is used in the same way: it measures aspects of text without taking into account the size of the font.
However, because the font size varies throughout a page, the “root em” was created to describe the page’s default font size.
In a web page, the “root em” describes the size of the police of the root element: the HTML tag.
Svija uses the existence of this unit to describe the size and position of all the elements of the page in terms of REM. When the window is resized, the REM changes at the same time and the content still fits the window perfectly.
Responsive web design according to Svija
In general, responsive design describes content that changes place and shape according to the window of the platform used to view the contents.
That is to say: an infinite quantity of possible combinations.
This philosophy, built in to most website construction tools, leads to a rather complicated system. These tools try to enable web design while taking into account that content constantly moves around.
The goal has been to take into account all possible platforms, as if there were an infinite number of them.
The reality is different
In reality, web site visitors fall into easily-defined categories:
- computer
- mobile
- tablet
Typical web site building tools sacrifice graphical quality to satisfy needs that are only theoretical.
Two and a Half Versions is Enough
Rather than create an infinite number of possible pages, we can meet the needs of 99.9% of visitors with two and a half versions of a site:
- desktop version + trackpad/mouse
- mobile version + finger
- tablet version + finger = desktop content + mobile menus
Remember: using Svija doesn’t require you to adhere to this philosophy. It’s just the way your site is initially set up, and you are free to pursue your own responsive strategy.
Other reference pages: