Grid System Layout

Grid System Layout New Technique in Web Layout Implementation

Welcome

Grid System Layout

Instructions

For Integrated Web Solutions

CEO & Founder at Ubrand+5 Years Web Engineering

Pre-Master in Computer EngineeringDeveloped +100 websites

Interests- Web Standards- UI/UX Development- Project Management- Game Development

Mohammad Abuzaid

Mabuzd

Grid System Layout

< Part I > Introduction </Part I>- Table Layout Technique- DIV Layout- DIV vs Tables

<Part II> The Grid System </Part II>- What is Grid System- 960.gs tools- Grid System Structure

<Part III> It is show time </Part III>- Demo- Workshop- Questions

Grid System Layout

Part 1Introduction

Grid System Layout

Website implementation process

Graphical Web design (Drawing the website)

Slicing The design (PSD to HTML)

Implement the layout (Writing HTML & CSS code)

Grid System Layout

Implement the layout (Writing HTML & CSS code)

Grid System Layout

TableLayout

Grid System Layout

TableLayout

<table id="Layout"> <tr> <td id="Header"> </td> </tr> <tr> <td> <table> <tr>

<td id="Nav"> </td> <td id="Main"> </td> </tr> </table>

</td> </tr> <tr> <td id="Footer"> </td> </tr></table>

22 Line of code

401 bytes

Grid System Layout

DIVLayout

Grid System Layout

DIVLayout

<div id="Header">

</div><div id="Nav">

</div><div id="Main">

</div><div id="Footer">

</div>

8 Line of code

109 bytes

Grid System Layout

DIV Table

8 22 Number of lines

109 401 File Size

Tables vs DIV

Grid System Layout

Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

Grid System Layout

?Is "Grid System“ a new element

in "HTML" rather than DIV ?

Part 2Grid System

Grid System Layout

GridSystem

<div id="Header“ class=“grid_12”>

</div><div id="Nav“ class=“grid_3”>

</div><div id="Main“ class=“grid_9”>

</div><div id="Footer“ class=“grid_12”>

</div>

Design Framework or

CSS Framework

Grid System Layout

Benefits of using a CSS framework- Compatibility with different devices

- Easy to read & understand

- Reduces development time by providing pre-coded HTML/CSS

- Better communication between Designer & Developer

Grid System Layout

Grid System Tools

• Design Tools

• CSS Files

www.960.gs

Grid System Layout

Grid System Classes• Container

• Grid

• Alpha & omega

• Push & Pull

• Clear

Part 3 It is show time

?Questions

Grid System Layout

For Integrated Web Solutions

Mohammad Abuzaid

Mabuzd

Thank you