Modern Design

I'll admit, the title may be a little deceiving but our purpose here is to move beginners in the right direction in web development and maybe even get them ahead of the game.

We'll touch on three areas that will move you ahead of a lot of the competition.

Pixels Should Be Dead to You

Modern design requires that you move from using pixels to define font-size, line-height, margins, padding, width and height measurements to ems or rems and dynamic viewport width and height percentages.

Converting pixels to rems is actually quite simple. Just divide the pixel value by the default em size which is 16px.

Eliminate Needless Media Queries

This mini site use 2 media queries and those could actually be combined into one.

We eliminated the need for resizing fonts and adjusting margins and padding with media queries by using the Clamp Function.

Using the clamp function we can define 3 sizes for our text elements at the top of the style sheet and eliminate the need to resize them at set break points with media queries.

The code:
clamp(minimum , preferred , maximum)

We set a minimum size, a preferred size and a maximum size. The preferred value must fall somewhere between the minimum and maximum to work properly. The browser will use the preferred value when that condition is met.

IMPORTANT!! Spacing is important in your preferred algorithm

p {
font-size : clamp(1.125rem , 1.125rem + .25dvw , 1.375rem);
}
Shorthand for:
p {
font-size : clamp(1.125rem , calc(1.125rem + .25dvw) , 1.375rem);
}

Translates to: clamp(18px , 18px + .0025 X viewport width , 22px)

dvw stands for dynamic viewport width. use it in place of vw. It's just more reliable.

For example, translating, 1dvw says take 1% (.01) of the viewport width .

Our minimum is set to 18 pixels and maximum to 22 pixels.

Using the formula 18px + .0025 X viewport width we calculate the font size at different viewing widths.

We start at mobile viewing width and work our way upward in viewport width.

• @320 DVW 18.80px in range ( 18 + (320 X .0025) )
• @360 DVW 18.90px in range
• @428 DVW 19.05px in range
• @640 DVW 19.60px in range
• @768 DVW 19.92px in range
• @940 DVW 20.35px in range
• @1024 DVW 20.56px in range
• @1180 DVW 20.95px in range
• @1280 DVW 21.20px in range
• @1366 DVW 21.41px in range
• @1920 DVW 22.80px browser will use max

NOTE: Even a lot of seasoned developers don't use the clamp function properly. Learn to build your algorithms and you'll start out ahead. You can check these values using Dev Tools to see if your preferred algorithm is working properly for font-size, line-height, margins and padding.(PRESS: CTRL-Shift-c) Then hover the page element you want to check.(Of course Firefox has to be different)

It might sound like it's all GREEK at this point, but I stress the need for learning to use the clamp function if you're serious about your web development endeavors.

No More Image Swapping

With the addition of new image file formats that are a fraction of the size of of pngs and jpgs the need for swapping smaller images for faster loading times is no longer necessary. See: Using Images

 

Top