What is Responsive Web Design? | Full detail

Responsive Web Designing - 

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive Web Design is a method through which we automatically resize, hide, shirnk, or enlarge, a website, to make it look good on all devices. A web page should look good on any device. Responsive images that scale nicely to fit any browser size. Web pages should not leave out information to fit smaller devices, but information to fit smaller devices, but rather adapt its content to fit any device. 

What is a responsive website? 

The responsive web design term was largely developed by Ethan Marcotte. Responsive websites have three defining features: 

1. Media queries - "A media query allows us to target not only certain device classes but to actually inspect the physical characteristics of the device rendering our work", Ethan explains. Media queries thus allow developers to use condition checks to alter web designs based on the properties of the user's device.

2.  Fluid grids - When fiexible grids are created using css,  the columns automatically rearrange themselves to fit  the size of the screen or browser window, whether the user is on a 21-inch desktop computer, a 13-inch laptop, a 9.7-inch tablet or a 5.5-inch mobile phone. This enables designers to maintain a consistent look and feel after across multiple devices. Plus, it saves everyone time and money by allowing designers to up date one version of the website versus many.

3. Flexible visuals - Macotte refers here to using code that  prevents rich media files from exceeding the dimensions of their containers ,as well as viewports. As the ''flexible container resizes itself, ''he explains , so does the visual within it. Given that there are over 8.48 Billion unique divices in existence today, this functionality allow teams to creat timeless designs capable of adapting to any device, regardless of its size or shape.

Together, these three types of functionality allow designers to craft responsive websites. 

How does Responsive Web Design Work? 

Responsive web design works through Cascading Style Sheet (CSS), using various settings to serve different style properties depending on the screen size, orientation, resolution, color capability, and other characteristics of the user's device. A few examples of CSS properties related to responsive web design include the viewport and media quires.

Types of Websites (Static and Dynamic Websites) - 

A website can be of two types, one is static Website and other one is dynamic website. Websites that only use htmL and css are called static websites, and websites with scripting languages are called dynamic websites.

Static Website - Static website refers to a collection of webpages whose content is fixed and is the same for every user. Fixed content means no use of database in the website. Static web pages are often HTML, document stored as files in the file system and made available by the web server over HTTP. Static websites do not require any Web programming or database design. Additionally, making updates to static websites means going directly into the HTML and making the changes from there. 

Advantage and disadvantages of static website -

Advantages:

1. Less complex to develop web pages.
2. Usually faster in loading on browsers.
3. Static websites are cheaper in price for the development.

Advantages:

1. Non-interactive web pages.

1. Updates must be made directly within the HTML code. 

1. Cannot perform the complex funtionality required in many modern sites. 

Dynamic website - 

Dynamic website is a group of web pages whose content changes dynamically. Dynamic website access data from database. Therefore, when you alter or update the content of the database, the content of the website is also altered or updated. Dynamic website uses client-side scripting or server-side scripting or both to generate dynamic content. These sites also include HTML progrmming for the basic structure.

Advantages and disadvantages of Dynamic web site - 

Advantage:

1. It is much easier to add new content without accessing coding. 

1. Dynamic website has interactive webpages. 

1. Able to use it in more complex scenarios such as an online store, forum, social media plateform, etc. 

Disadvantages: 

1. More complex to develop. 
2. Greater risk of security issues. 
3. Costs are higher than for a static website. 

Thank You!