Responsive Design
Responsive design is a concept of web design that is the aim at the creation of web pages that can be view on both small and large screen devices responsively without any breakage. To mean the web pages should be able to adapt to any screen size. This is always achieved by the use of responsive layouts, responsive media contents and media query attribute found in cascading styling sheet (CSS).
Responsive design works in a way that a website’s code detects screen sizes and flex themselves and their contents in order to fit the screen size without any breakage. Actually, when web designers are creating responsive websites they use grids and flexible calculated percentages for media and not fixed widths and parameter arguments. The use of calculated percentages and grid layouts – the x-axis and y-axis of the grids – enables the creation of fluid and flexible page layout that will be able to size and resize itself no matter the screen size of the device it is viewed on. The use of fixed-width will cause breakage whenever a web page is displayed on a smaller or larger screen than that which it was developed or tested.
There is also the use of media queries. Media queries are an attribute of CSS (cascading style sheets) that developers use to outline specifications on how they want the web pages to behave at a particular point of the screen. With media queries, there is an attribute called “max-length” which developers use to define breakpoints and within this attribute, other attributes that will affect the general behavior of the web content. This breakpoint will then respond to the device’s screen, if its screen falls within a certain point within the range of the breakpoint then a piece of code within that break pointing will be executed.
Responsive design mostly concentrates on HTML and CSS part of web development. This is because basic mobile phone browsers are not able to execute JavaScript codes. Currently, with the introduction of CSS3 and HTML 5, the creation of responsive web pages has become easier than before due to the introduction of other attributes like flex-boxes that enable developers to resize, move, hide, enlarge and shrink content on a web page.
The first ever responsive design website or website that could adapt to with through browser viewpoint was launched in 2001 by audi.com. In 2008 the terms like flexible, fluid, elastic and fluid were introduced to describe this kind of responsive layout. The term responsive design or responsive web design was brought to life in 2009 by Ethan Marcotte. Today most developers have dueled on responsive and mobile first development since most of the internet users own mobile phones than desktop. Some companies like Twitter have come up with responsive design frameworks, Bootstrap, that enable developers to create responsive websites just by referring to their code. Also, there has been a rise of platforms like WordPress, that give both coders and non-coders the ability to create responsive websites within a short time span.