Responsive Web Design (RWD) makes use of the viewport meta tag which provides the browser directions to control page dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A website designed with RWD utilizes fluid based grids using Bootstrap, responsive images which scale as per browser size, by setting the max-width property to 100 % and CSS3 media queries for the page layout.
The text size is set to a viewport width (vw) to get a responsive layout.
<h1>Hello World</h1> with "font-size:10vw" embedded in it as style.
This way the text will adjust itself to the browser window.
Media Queries are also used in responsive web design, using which you can use different styles for the Page elements based on browser window width.
@media screen and (max-width: 800px) {
.left,.main,.right {
width: 100%; /* The width is 100%, when the 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 compatible features.
Responsive Web design Trends –
Illustration –
The illustration is a visual representation of text, 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, which can present information quickly.
Brutalism –
Brutalist web design adopts an unconventional approach to design websites; it defies the 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 "raw" visual aesthetic appeal this would discomfort the users.
A brutalist website uses Basic fonts, large images, hand-coded HTML and unusual scrolling effect, with a mouse hover.
By using unconventional approach towards web design, developers open up possibilities for unique user experiences to grab user’s attention.
The website’s code is crude and unpolished, the website’s head section has a simple inline styling and a basic markup.
It is a dramatic difference from what you would typically see on most modern websites.
Typography –
Typography is an art applied to style, arrangement, and appearance of the letters, numbers, and symbols, by using the appropriate font.
It is a visual representation of the written word. The chosen font and how you make it work with your various HTML elements in the layout theme will make a big difference.
Typography usage –
Using consistent fonts improves the look and feel of the website and the overall web design.
The correct placement of words and letters improves the readability of the website.
The styling of HTML elements can be done using the Bootstrap framework’s classes.
Rounded profile pictures –
Circular profile picture provides a unique emphasis amongst boxes.
Faces can be viewed correctly in a circular picture. Circular profile pictures emphasize faces more than square ones; they help users distinguish profile names from the content.
Colorful user interfaces –
Tip 1. Learn 60-30-10 rule –
The 60-30-10 rule comes from interior designing. Dominant hue should be 60 %. The secondary color should be 30 %, and 10% percent makes the accents.
Tip 2. Contrast is a friend –
Use of contrasting colors makes the individual UI element noticeable.
Such elements with the same color shades are less likely to draw the attention. Contrasting colors are pleasant for our eyes as they allow perceiving the visual elements gradually. Mixing the colors in right proportion will make the UI look elegant.
Tip 3. Strive to color harmony –
The attractiveness and choice of colors achieve harmony.
The website needs to have color harmony to achieve a good first impression.
Tip 4. Steal ideas from nature –
Natural Color combinations are always close to perfect.
Seasons of nature provide a good color combination; such a color combination achieves a good design.
