Grid System for Responsive Web Design - Imrokraft
Transcript of 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