grid system for responsive web design - imrokraft

GRID SYSTEMfor responsive web design

By, Kavya Sree S Divin D

CONTENTS

• Introduction• Responsive web design• Why responsive web design• Grid System• Why grid system• Benefits• Conclusion

GRID VIEW www.imrokraft.com

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

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

WHY RWD ??

GRID VIEW www.imrokraft.com

Super Flexible

Very easy to manage

Excellent user experience

Recommended by Google

Cost effective

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

• 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

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

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

BENEFITS

GRID VIEW www.imrokraft.com

They are VersatileIncrease

Productivity

Ideal for responsive layouts

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

Thank You