Introduction Table Layout Technique DIV Layout DIV vs Tables The Grid System What is Grid System 960.gs tools Grid System Structure

1. New Technique in Web Layout Implementation
Grid System Layout

3. Grid System Layout

4. For Integrated Web Solutions
CEO & Founder at Ubrand
+5 Years Web Engineering
Pre-Master in Computer Engineering
Developed +100 websites
Interests
- Web Standards
- UI/UX Development
- Project Management
- Game Development
Mohammad Abuzaid
Mabuzd

5. 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

6. Grid System Layout
1
Introduction

7. Grid System Layout
Graphical Web design
( Drawing the website )
Slicing The design
( PSD to HTML )
Implement the layout
( Writing HTML & CSS code )

8. Grid System Layout
Implement the layout
( Writing HTML & CSS code )

9. Grid System Layout
Table
Layout

10. Grid System Layout
Table
Layout
<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

11. Grid System Layout
DIV
Layout

12. Grid System Layout
DIV
Layout
<div id="Header">
</div>
<div id="Nav">
</div>
<div id="Main">
</div>
<div id="Footer">
</div>
8 Line of code
109 bytes

13. Grid System Layout
DIVTable
822Number of lines
109401File Size

14. 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!

15. Grid System Layout

16. 2
Grid System

17. Grid System Layout
Grid
System
<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>

18. Design Framework
or
CSS Framework

19. 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

20. Grid System Layout
• Design Tools
• CSS Files
www.960.gs

21. Grid System Layout
• Container
• Grid
• Alpha & omega
• Push & Pull
• Clear

22. 3
It is show time

24. Grid System Layout
For Integrated Web Solutions
Mohammad Abuzaid
Mabuzd
Thank you 