What is responsive web design all about

Page 1


Introduction Responsive Web Design has become one of the hottest trends after 2013. This is due to the fact that it is related to the growth of mobile devices and smartphones. According to a survey, more people are using the smaller-screen devices to view Web pages. Responsive Web Design is an approach in which a designer creates a Web page using HTML and CSS that give “responds to� or resizes itself depending on the type of device it is being seen through.


Adjusting Screen Resolution Link

Since new devices with various screen sizes are being developed every day, and each of these devices may have variations in size, functionality and even colour. Some devices are in landscape, some are in portrait. So to fit on several device varying screen resolutions, definitions and orientations an adjustable screen resolution is required.


Flexible Layouts

Few years ago, flexible layouts were considered almost a “luxury” for websites, the only things that were flexible in a Web design were the layout columns (structural elements) and the text. Images could easily breakout the layouts, and even flexible structural elements can also broke a layout’s form.


Flexible Images Link

One major problem that needs to be solved which is related to responsive Web design is working with the images. There are several techniques that can be used to resize and compress images proportionately.


Responsive Images Link:

This technique takes this issue into the consideration that not only resizes images proportionately, but also shrinks the image resolution on smaller devices, so that the images having very large size don’t take space unnecessarily on small screens and devices.


Custom Layout Structure Link

For extreme display size changes, we may want to change the layout altogether, either through a separate style sheet or, also by using a CSS media query. Most of the styles can remain the same, while specific style sheets can inherit these styles and apply them.


Showing or Hiding Content Link

It is also possible to shrink things proportionally and rearrange the elements as necessary to make everything fit and regular (reasonably well) as a screen gets smaller size.


Contact Us 481 University Avenue, Suite 703 Toronto, Ontario, Canada, M5G 2E9 https://www.imediadesigns.ca/ meetto@imediadesigns.ca +1-647-799-0657


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.