Create the Perfect Website Layout System

create-the-perfect-website-layout-system

If you are web developers or web designers who are looking for ways that can create sites that work on any device, this article is for you. In this opportunity, we are going to discuss about how to create the perfect website layout system. Take a look!

Multi-Column

You may not see multi-column as the most-used CSS columns in many websites. This is quite surprising, since it’s one of the most highly flexible techniques. In fact, this would be terribly suitable to be used by those who want perfection for lists of links, like navigations, footers, search results or photo blog.

However, multi-column may not be beautiful to be used for long passage article. This is because CSS columns will require people to scroll down and up again while reading.  The only wat to present your article nicely in CSS columns is by convincing your users to scroll horizontally.

To create a simple horizontally scrolling multi-column layout by setting the height of the article to a maximum of 100 percent of the viewport, and by telling it to use columns of no less than 20em. These few line is what it takes to create good multi-column:

article {
columns: 20em; /* never be smaller than 20em */
height: 100vh; /* be as high as the viewport */
width: 75vw; /* be 75% of the width of the viewport */
}

Flexbox and the Viewport

It may seem a bit like float, but much more powerful. With Flexbox, you can tell items what to do with any leftover white space. You can leave it at one of the ends, you can distribute it evenly between (or around) them, or you can choose to stretch the items – which basically gets rid of the white space. You can use this code to simply fit as many items on each row as possible.

ul {
display: flex;
flex-wrap: wrap;
font-size: 2.5em;
}

Viewport-relative units

You can use the vw unit, instead of using em and media queries to make sure our layout works in different viewports. However, in terms of text, viewport has a serious usability problem with using the viewport width as a unit for text though. At one point it can become too small to read on very small screens. The problem gets bigger when the user can’t increase the font size.

To avoid the font size becomes too small, you can use a calc function: font-size: calc(1em +1vw).

Viewport Calculations

To fit any text into any viewport with CSS, there’s a brilliant CodePen, such as explained in this line below:

font-size: calc(4vw + 4vh + 2vmin);

With this specific calculation, this one sentence, set in a certain font, will always fit in any viewport.

Quantity Selectors

By applying this technique, you can order the browser to behave in a certain manner. Instead of designing every possible layout for every possible screen size, you let the browser and the content figure it out together.

Container Queries

We can’t use element queries, but we might be able to use container queries. However, you cannot style the element itself; you could only style its children which cause something like this:

article:media( min-width: 30em ) screen {

}

Quantity Selectors

Quantity selectors are quite handy for search results, where you don’t know if there will be one single result or hundreds of them. Moreover, you can also change the way they look through the number of results. The selectors that make this possible look quite complex at first. At first, I didn’t understand how they worked at all. You can apply a fantastic job in explaining quantity selectors in this article:

article {
flex-basis: 100vmax;
}
article:nth-last-of-type(n + 2),
article:nth-last-of-type(n + 2) ~ article {
flex-basis: 50vmax;
}
article:nth-last-of-type(n + 6),
article:nth-last-of-type(n + 6) ~ article {
flex-basis: 33.33vmax;
}

New Parallax Scrolling Effects Are Here to Beautify Your Website!

Print

If you are a web designer who is looking for a dazzling design, parallax scrolling is the answer. With its new features, it surely will add unique effects that will impress your visitors. In fact, with its unique effects, Parallax will certainly generate a superb user experience. So, take a look on how Parallax new features can do for you and see how it would take you by surprise.

What Makes Parallax Scrolling So Great

Maybe some of us has heard about parallax and has become one of its loyal fans. It is true since parallax has become highly popular in the past couple of years. It is also one of the most influential web designs nowadays. In technical terms, parallax scrolling treats the site background and the frontal content of the site separately. A parallax effect will make the background and foreground move at two different speeds. These two different movements will create a sense of depth, dimensionality and motion.

The benefits do not stop there, as there are many reasons that cause this effect so trendy:

  • It enhances the experience of site visitors in a more engaging and vibrant user experience.
  • Parallax scrolling is also provided with longer visit times, by making the scrolling much more interesting and pleasing. Visit times will depend on the relationship with the site visitor.
  • Parallax is a web design trend that will fit in any site design. This site is currently very prominent long pages that encourage scrolling than clicking.
  • Parallax scrolling is very beautiful which can make the whole site looks alive on the computer screen.

In conclusion, Parallax makes your website looks more stunning and powerful. Now with so many new effects in Parallax, you can boost your performance even better. Below are new effects that you should know:

Reveal Scroll

Reveal scroll which is full with suspense will raise the viewers’ curiosity. But, on the other hand reveals what everyone wanted to know. It’s a mesmerizing effect that draws site visitors in, creating a more dynamic user experience.

Zoom In Scroll

If you want to have better focus to a specific item in your site, you can use the zoom in effect. You can also show multiple perspectives to your page layout. Zoom In puts your site into motion, but the effect is so subtle and sleek that it maintains elegance.

Fade In Scroll

This effect makes your images or stripes appear more vivacious and accentuates the colors. In fact, this will add a rhythm to the scrolling action as this effect really plays out gradually.