Responsive web design is an approach to web design to make the web pages adaptable for all the devices such as desktop computers, laptop, IPad and mobile phones. The layout is not fixed with any size. so it is not a fixed layout. Responsive web design uses a fluid layout.
The concept of Responsive web design is
- Fluid Layout
- Proportion based Grids
- Flexible Images
- CSS3 Media Queries
There are two units while creating web design
Relative Units
Percentages (%) are used in relative units
Absolute Units
Pixels(px) or points(pt) are used in absolute units
The Concept of Responsive web design is based on
Fluid Layout
It applies the concept of using relative units.
Flexible Images
Flexible images and banners are sized in relative units(%) to be flexible to display in all devices.
CSS3 Media Queries
Media queries use different CSS styles to be displayed on various devices such as Mobile devices.
Grids
Grid system used in the web design are fixed and fluid. Fixed is absolute based. Fluid is relative based. HTML and CSS is used to fix the grids of the layout.
There are CSS frameworks which uses its own grid system:
- Bootstrap
- ZURB Foundation
- Cascade Framework
Tools used to help for Responsive Design:
- Adobe Dreamweaver CS6
- Adobe Edge Reflow
- Bootstrap
- Gridset by Mark Boulton – Paid online app with drag and drop features
The Essential components of responsive design are:
- Information Architecture
- Interaction Design
- User Experience
The important thing is channelling them using new boundaries and parameters – Mark Boulton
Bootstrap:
- Bootstrap is a free front end framework
- It includes 12 column responsive grid
- It contains components, JavaScript plugins and online customisation tool.
- It contains CSS files, JS files already in the package
Bootstrap Grid System:
Bootstrap Grid System contains 3 things:
- Container
- Rows
- Columns
Note:
- Create up to 12 columns
- Create an unlimited rows