Overview of Responsive Web Design

1. Overview : Responsive Web Design
Pankaj Bajaj

2. Agenda
• Background
• Overview
• Tools
• Major Components
• Benefits
Continuous learning is the minimum requirement for success in any field.

3. Background
Continuous learning is the minimum requirement for success in any field.
Early Days
Today

4. Overview
Continuous learning is the minimum requirement for success in any field.
 Responsive design is a web design and development technique that creates a site or
system that reacts to the size of a user’s screen.
 It optimizes a user’s browsing experience by creating a flexible and responsive web
page for the device that is accessing it.
 The website have the technology to automatically respond to the user’s preferences. This
would eliminate the need for a different design and development phase for each new
gadget on the market.

5. Tools
Continuous learning is the minimum requirement for success in any field.
Bracket Text Editor (You can
use any Editor, Notepad+,
Sublime

6. Major Components
Continuous learning is the minimum requirement for success in any field.
 Media Queries.
 Flex grid/ Fluid Grid
 Flexible images and media

7. Media Queries
Media queries allow designers to build multiple layouts using the same HTML documents by
selectively serving style sheets based on the user agent’s features such as the browser
window’s size, Orientation ,Screen Resolution, Color.
Continuous learning is the minimum requirement for success in any field.

8. Flexible grid is another feature of CSS3 which is used for Responsive web Design. Flexible grid
has following features which help to make Responsive Design.
 Have any number of columns: There is no fixed number of columns across a whole page.
It can be change as per the need.
 Scales to any width: Because it uses percentages or Relative unit (em), fluid columns will
fit into any width. The margins (gutters) use percentages too.
 Put the content first: Instead of fitting content to grid, it makes grid to suit your content.
Continuous learning is the minimum requirement for success in any field.
FlexibleFluid Grid

9. Benefits
 Good User Experience: As the same application will use for all devices so that the user
will have consistent look and feel.
 Cost Effective: Earlier there are different applications for desktop and mobile which is very
costly and difficult to manage. With Responsive Web design there is only single
application for all kind of devices which is cheaper and easily
 Improved SEO: responsive web design helps in optimize website for search engines.
Instead of building links or optimizing content for multiple websites, we need to market a
single responsive website only and the URL structure will remain the same on all devices,
which improves search engine visibility and rankings.
 Easily implementation: RWD can easily implement in your existing website which should
be written with compliant HTML and CSS.
 Additional benefits: There are many more device properties that you can access with
media queries besides the screen width. These include: orientation mode, aspect ratio,
colors, resolution, etc.
Continuous learning is the minimum requirement for success in any field.