Responsive Web Design (RWD) makes use of the viewport meta tag which provides the browser instructions for controlling the dimensions and scale of the page.
A website designed with RWD uses fluid-based grids with Bootstrap, responsive images that scale according 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 a responsive layout.
hello world
with “font-size:10vw” embedded as the style.
This way the text will fit 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 (max width: 800px) {
.left,.main,.right {
width: 100%; /* Width is 100%, when viewport is 800px or less */
}
}
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 –
Drawing –
Illustration is a visual representation of a text, concept, or process.
The 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; challenges traditional web design.
Graphic design influences such websites, such websites do not have headers, footers or menus.
Such websites have intentionally designed unpolished web pages with a “crude” 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 capture the user’s attention.
The code of the website is crude and unpolished, the main section of the website has a simple inline style and basic markup.
It’s a dramatic difference from what you’d 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 you choose and how you make it work with your various HTML elements in the layout theme will make a world of difference.
use of typography
The use of 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 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; they 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 make the accents.
Tip 2. Contrast is a friend –
The use of 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 us to perceive visual elements 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 make a good first impression.
Tip 4. Steal ideas from nature –
Natural color combinations are always close to perfect.
The seasons of nature provide a good combination of colors; such a color combination achieves a good design.