At Imrokraft, we provide the best web design training in trivandrum. We also offer professional training in web development in trivandrum, php training in trivandrum, android training in trivandrum, job oriented training in trivandrum. Contact us for php jobs in trivandrum, java jobs in trivandrum, android jobs in trivandrum, web design jobs in trivandrum, android jobs in technopark, php jobs in technopark, java jobs in technopark, web design jobs in technopark. Website: http://imrokraft.com. Ph: 0471 6555644, 6555744.

1. GRID SYSTEM
for responsive web design
By,
Kavya Sree S
Divin D

3. CONTENTS
• Introduction
• Responsive web design
• Why responsive web design
• Grid System
• Why grid system
• Benefits
• Conclusion
GRID VIEW www.imrokraft.com

4. INTRODUCTION
• Nowadays smart phone and tablet adoption are rapidly increasing
• Each devices have different size of output display screen
• Need to include all contents from devices it is being viewed on
• Grid system helps to include larger sized output display into devices it is
being used
GRID VIEW www.imrokraft.com

5. RESPONSIVE WEB DESIGN (RWD)
• The practice consists of a mix of flexible grids and layouts, images and an
intelligent use of CSS media queries
• The website should have the technology to automatically respond to the
user’s preferences
GRID VIEW www.imrokraft.com

6. WHY RWD ??
GRID VIEW www.imrokraft.com
Super Flexible
Very easy to
manage
Excellent user
experience
Recommended by
Google
Cost effective

7. GRID SYSTEM
• A structure that allows for content to be stacked both vertically and
horizontally in a consistent and easily manageable fashion
GRID VIEW www.imrokraft.com
Key Components
ROWS:
Used to accommodate the
columns
COLUMNS:
Make up the final structure and
contain the actual content

8. • For a responsive grid view, the display should be divided into
12 columns
• Calculate the % of 1 column=100% / 12 columns= 8.33%
• Make one class for each of the 12 columns, class=“col-” and a number
defining how many columns the section should span.
GRID VIEW www.imrokraft.com

9. A sample responsive grid view with 12 columns that can be shrink and
expand as you resize the browser window
GRID VIEW www.imrokraft.com

10. WHY GRID SYSTEM ??
• Makes it easier for visitors to find and navigate through information
• Quickly add elements to a layout because many layout decisions are
addressed while building the grid structure.
• Make designers to work and collaborate on the design as they provide a
plan for where to place elements.
• Lead to consistency in the layout of pages across a single site or even
several sites creating a structural harmony in the design.
GRID VIEW www.imrokraft.com

11. BENEFITS
GRID VIEW www.imrokraft.com
They are Versatile
Increase
Productivity
Ideal for responsive
layouts

12. CONCLUSION
• Responsive web design is recommended by Google
• Provide a great user-experience across many devices
• Makes managing your SEO strategy easier
• Grid system solve layout problems in a design
• Grid helps order information more efficiently with or without other designers
GRID VIEW www.imrokraft.com

13. Thank You