Responsive Web Design (RWD) makes use of the viewport meta tag that provides the browser’s instructions to control the dimensions and scale of the page.
An RWD-designed website uses fluid-based grids using Bootstrap, responsive images that scale based on browser size, setting the maximum width property to 100%, and CSS3 media queries for page layout.
Text size is set to viewport width (vw) for responsive layout.
Hello World
with "font size: 10vw" embedded in it as a style.
This way, the text will fit in the browser window.
Media queries are also used in responsive web design, whereby you can use different styles for page elements depending on the width of the browser window.
@media screen y (maximum width: 800px) {
.left, .main, .right {
width: 100%; / * Width is 100%, when viewport is 800px or less * /
}
}
Bootstrap is a free user interface framework for HTML and CSS.
Bootstrap provides templates for forms, buttons, tables, navigation, modal dialogs, image carousels, and JavaScript plugins.
Bootstrap provides flexibility for ease of use, responsive features, Mobile-First approach, and browser-friendly features.
Responsive web design trends –
He drew –
Illustration is a visual representation of a text, a concept or a process.
Illustrations can be of various types, in the context of digital marketing, these are infographics. Infographics are the visual representation of information, data, that can present information quickly.
Brutalism –
Brutalist web design takes an unconventional approach to designing websites; defies traditional web design.
Graphic design influences such websites; such websites do not have headers, footers, or menus.
Such websites have intentionally designed rough web pages with a "crude" visual aesthetic appeal this would make users uncomfortable.
A brutalist website uses basic fonts, large images, hand-coded HTML, and an unusual scrolling effect, with a mouse hover.
By using an unconventional approach to web design, developers open up possibilities for unique user experiences to grab the user’s attention.
The website code is rough and unpolished, the website header section has simple inline styling and basic markup.
It is a dramatic difference from what you would normally see on most modern websites.
Typography –
Typography is an art that is applied to the style, arrangement, and appearance of letters, numbers, and symbols by using the appropriate font.
It is a visual representation of the written word. The font chosen and how you make it work with your various HTML elements in your design theme will make a big difference.
Use of typography –
Using consistent fonts improves the appearance of the website and the overall web design.
The correct placement of words and letters improves the readability of the website.
Styling of HTML elements can be done using the Bootstrap framework classes.
Rounded Profile Photos –
The circular profile image provides a unique emphasis between the frames.
Faces can be seen correctly in a circular image. Circular profile images emphasize faces more than square ones; They help users distinguish the names of the profiles from the content.
Colorful user interfaces:
Tip 1. Learn the 60-30-10 rule –
The 60-30-10 rule comes from interior design. The dominant tone should be 60%. The secondary color should be 30% and 10% percent does the accents.
Tip 2. Contrast is a friend –
The use of contrasting colors makes the individual element of the user interface noticeable.
These items with the same color tones are less likely to attract attention. Contrasting colors are pleasant for our eyes as they allow us to perceive the visual elements gradually. Mixing the colors in the correct proportion will make the user interface look elegant.
Tip 3. Strive for color harmony –
The appeal and the choice of colors achieve harmony.
The website must have color harmony to make a good first impression.
Tip 4. Steal ideas from nature –
Natural color combinations are always almost perfect.
The seasons of nature provide a good combination of colors; such a color combination achieves a good design.