grid system for responsive web design - imrokraft
TRANSCRIPT
![Page 1: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/1.jpg)
GRID SYSTEMfor responsive web design
By, Kavya Sree S Divin D
![Page 2: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/2.jpg)
![Page 3: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/3.jpg)
CONTENTS
• Introduction• Responsive web design• Why responsive web design• Grid System• Why grid system• Benefits• Conclusion
GRID VIEW www.imrokraft.com
![Page 4: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/4.jpg)
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
![Page 5: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/5.jpg)
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
![Page 6: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/6.jpg)
WHY RWD ??
GRID VIEW www.imrokraft.com
Super Flexible
Very easy to manage
Excellent user experience
Recommended by Google
Cost effective
![Page 7: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/7.jpg)
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
![Page 8: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/8.jpg)
• 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
![Page 9: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/9.jpg)
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
![Page 10: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/10.jpg)
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
![Page 11: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/11.jpg)
BENEFITS
GRID VIEW www.imrokraft.com
They are VersatileIncrease
Productivity
Ideal for responsive layouts
![Page 12: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/12.jpg)
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
![Page 13: Grid System for Responsive Web Design - Imrokraft](https://reader035.vdocuments.us/reader035/viewer/2022081515/5874cf0d1a28ab8f508b89d9/html5/thumbnails/13.jpg)
Thank You