
Fluid first design by viewport
Summary
Javascript techniques can be used to make a website fluid. Making a website fluid saves design time and makes designing a team effort. It also enables to design by viewport which offers a more intense experience to the user.
A new length unit is introduced to use next to the rem unit. This new unit is used for elements which need to cover the same relative amount of area at different viewport sizes.
Design by viewport results in a more intense user experience because the contents of a page is presented by viewport.
Now play a bit with the size of your browser on : https://codepen.io/amdwit/full/WNNdBod
Have you scrolled down there to see the other viewports?
Fluid first
So what if we scale everything? Imagine having a page design and implementing that. It will be full width at a viewport width of let’s say 1440px. If we now scale the dimensions of every element linear to the change of width. Then a mobile browser in landscape at a ratio of 16:9 will show the same contents on screen as a browser on a 4k monitor with equal ratio.
What about breakpoints?
Changing the mobile’s orientation to portrait using smaller widths will, however, very much distort the design. So the next step of design will be to create a portrait design which will mostly be a reflowed version of the landscape design. We will use an orientation breakpoint to switch.
For elements with hover functionality we need to break on the ability to hover. When the width becomes to small for the menu we change to a burger menu with the help of a width breakpoint. A more complex (javascript driven) device breakpoint is needed to always show the navigation as burger menu on mobile regardless of width available.
So Fluid First still use breakpoints like Adaptive Design does. But breakpoints are used to adapt after scaling with designs for only those elements that need it. A lot of width related adaptations will not be done with the help of width breakpoints, however, but with smart use of Javascript to for instance try how many elements fit within a certain width.
How to scale
We can start by setting the font-size of the html element relative to the viewport width. I divide by 64 to have a font-size of 16px at a viewport width of 1024px. To keep my code snippets simple I will not take different browsers and zoom factor into account.
html {
font-size: calc( 100vw / 64 );
}Now we can define the font-size of a h1 heading as 4rem which then will translate to 64px, but only when the viewport has a width of 1024px. We will also define all font-size and element dimensions in rem or other relative units that ultimately lead to a dimension given in rem.
h1 {
font-size: 4rem;
line-height: 1.5em;
letter-spacing: 0.036em;
}If we also scale images and text bodies linear to the viewport width we see that the height is also important. So for these elements where the height is also important we need to scale relative to the square root of the viewport area. For this purpose I defined a new unit to be used next to rem.
const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
const ra = `${Math.sqrt(width * height / 4096).toFixed(2)}px`;
document.documentElement.style.setProperty('--ra', ra);This new unit ra (root area) will be 16 px on a 1M px viewport area (1024px x 1024px) . We can use this unit to set the font-size of a body of text which we would like to occupy the same percentage of the viewport area over different viewport sizes and ratios.
We can also use it to set the dimensions of elements that must keep the same aspect ratio and occupy the same percentage of the viewport area.
Another technique we can use is the fitting of text on resize in a certain container. A function will always make sure the font-size of a piece of text is always exactly set to have the text filling up its scaling container element. This is useful after font-size scaling with text containing long words which we do not want to break.
Accessibility
A long full width text is readable on a 2 inch wide mobile. But the same text also full width 20 times as big on a 40 inch wide screen is not so readable. So it is better to keep the font-size of longer texts around 16 px and the lines not too long.
p {
font-size: calc( 8px + 0.5 * 1rem );
max-width: 20em;
}To make zooming possible we need to use some javascript to calculate the zoomfactor to adjust the rem and ra units.
Viewport experience
Having the ability to scale our content in such a precise and meaningful way allows for a design where content is presented by viewport. (The viewport is the window in the browser that shows part of the page.) It means that the user opens a page with the title visible and the hero image of exactly viewport height. Nothing of the content below is visible and nothing is cropped.
Scrolling down the user moves the hero out of view and enjoys a viewport with only for instance some introduction text.
Then the user can scroll on the the next full viewport experience of for instance a heading and a matrix of images which fill almost the whole viewport under every aspect ratio and resolution without overflowing out of the viewport or covering a too small area.
Also a form can be designed to the viewport experience. But for usability the scaling will be more complex.
Content that is less suitable for design by viewport can be displayed scrollable with a minimal height of the viewport.
Offering such viewport experiences to the user will be more intense because the user will not be distracted by partially visible content or previous or following content also being visible.
Workflow
Fluid first enables a fast paced workflow. One design is needed for the developers to start. Design improvements can follow in later iterations after evaluation of the implemented pages. A next step can be to define the orientation breakpoint between portrait and landscape. Then the design for the other side of the ‘is enable to hover’ breakpoint could follow. Not for complete pages but only for the elements that are hoverable.
During development multiple design problems can come up. Can it be solved by automation or do we need a new design?
This puts the design proces under better control of the productowner as the design work is split into more parts. Each can be prioritised on the backlog.
Conclusion
Fluid first allows faster website development and enables design by viewport.
