A responsive design is a process that forces a website to take action according to the device on which it is being viewed and delivers the suitable output for it. Responsive web design is the practice of building a website so that it works on different devices no matter what is the size of the device big or small. It focused on perceptive and satisfying experience specially for desktop computer and mobile phone user which they get benefited from responsive Instead of designing multiple websites for different devices that are sized in a different way, use of this move toward lets the web designers design just one site but specifies within the code as to how it should appear on varied devices website.
Things to think about:
Responsive website is built on fluid grid and we use media queries to control the design and its content when you scales down or upward with the browser or device, we do not miss anything.
Fluid website are built using certain percentage for width, which results that columns are relative to one another and browser allow tp scale up and down smoothly.
Adaptive website introduce media queries to target specific device according to size and shape like mobile, desktop and tablets.
Fixed website have a set of width where it can resize the browser even while viewing it on different devices that won’t affect on the website looks.
Ethan Marcotte wrote and talked about Responsive web design in his book where he told “ Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”
Adjusting Screen Resolution:
Through more devices we come across various screen resolutions, orientations and definitions. To handle various devices in different screen size which is developing in every day to day basis,are raising popularity from portrait to landscape.
Responsive web design is divided into three main components, including flexible media, flexible layouts and media queries. The first part, flexible layouts, is the carry out of building the layout of a website with a flexible grid, able of dynamically resizing to any width. Flexible grids are built by means of relative length units, most commonly percentages.
Flexible layouts doesn’t support the exercise of fixed measurement units, such as pixels or inches. The viewport height and width repeatedly change from device to device. Website layouts require to acclimatize to this modify and fixed principles. Providentially, Ethan pointed out a simple formula to assist identify the proportions of a flexible layout using relative values.
Media Queries :
Media queries were build as an addition to media types usually found when
targeting and including styles. Media queries give the ability to identify
different styles for individual browser and device situation, the width of
the viewport. There is different way to use media queries by importing a
new style sheet or by linking a separate style with HTML document. CSS3 are
put into new devices like iPad and new Android device which support media
features that includes device width, max-width, orientation and color. CSS3
features are getting supporting these devices that are working fine but old
version of browser is not supporting CSS3 feature. One of the majority
familiar media features revolves around formative a height or width for a
device or browser viewport. The height and width may be found by using the
width, height, device-height and device-width with media features. Each of
these media features may then also be prefixed with the max and min
qualifiers, construction a feature such as
Showing or Hiding Content:
Responsive design can provide the better or give usage to mobile –centric website. When the desktop user clicks will get consistent view on their screen if that link is for responsive website.
Search engine can easily rank responsive website as it will be easy for search engine to index the website content and help in business growth and even increase the traffic.
The responsive web design adopt itself to different shapes and sizes of the screens. It does not require any special coding for specific device. This type of website design helps in marketing survey and make you to gain visitors in your website as it is easier to implement. In short period of time your business can give profit as it launch the website as it becomes easier for search engine algorithm to manage the URL.