Responsive Web Design (RWD) makes use of the viewport meta tag which provides the browser instructions to control the dimensions and scale of the page.
A website designed with RWD uses fluid-based grids with Bootstrap, responsive images that scale to browser size, setting the max-width property to 100%, and CSS3 media queries for page layout.
The text size is set to a viewport width (vw) for responsive layout.
hello world
with “font-size:10vw” embedded as the 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.
Screen @media y (max-width: 800px) {
.left,.main,.right {
width: 100%; /* Width is 100%, when viewport is 800px or smaller */
}
}
Bootstrap is a free front-end 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, concept or process.
Illustrations can be of various types, in the context of Digital Marketing, these are infographics. Infographics are the visual representation of information, data, which 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 crude web pages with a “raw” visual aesthetic appeal that would make users uncomfortable.
A brutalist website uses basic fonts, large images, hand-coded HTML, and an unusual hover effect, with mouse scrolling.
By using an unconventional approach towards web design, developers open up possibilities for unique user experiences to grab the user’s attention.
The website code is rough and unpolished, the main section of the website has a simple inline style and basic markup.
It’s a dramatic difference from what you would normally see on most modern websites.
Typography-
Typography is an art that applies to the style, arrangement, and appearance of letters, numbers, and symbols, through the use of 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 the 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 the HTML elements can be done using the Bootstrap framework classes.
rounded profile pictures
The circular profile image provides a unique emphasis between the boxes.
Faces can be seen correctly in a circular image. Circular profile photos emphasize faces more than square ones; help users distinguish profile names from 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 –
Using contrasting colors makes the individual UI element stand out.
Such elements with the same color shades are less likely to attract attention. Contrasting colors are pleasing to our eyes as they allow visual elements to be perceived gradually. Mixing the colors in the proper proportion will make the user interface look elegant.
Tip 3. Strive for color harmony –
The attractiveness and choice of colors achieve harmony.
The website must have harmony of colors to achieve a good first impression.
Tip 4. Steal ideas from nature –
Natural color combinations are always almost perfect.
The seasons of nature provide a good mix of colors; such a combination of colors achieves a good design.
