They also help take control of how your website is structured, visually.One of the best solutions to making a start on a structured website (providing you know a little HTML/CSS) is to use a grid system. A grid system lays the foundation for layout of content and provides a stable basis for implementing complex design layouts with ease. Everything is structured within separate containers allowing for complete control over the look and feel of the site. It also helps with the coding, as everything is in clear categories or sections and is easily identifiable.

Once the design is mocked up you can judge on how the elements will be structured correctly and break it down into columns. The most common size specification width wise for a grid system is 960 pixels. This is because most modern computer have a display resolution of 1024 x 768 (1024 pixels been the horizontal measurement), which allows any website within the size of 960 pixels to be displayed in full, without requiring the user to scroll horizontally. Also as 960 is devisable by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480 it makes it the perfect size for displaying content correctly on all manner of devices.

There are two ways in which to get a grid system:

1, Create one yourself

OR

2, Use a ready-made one!

To save time, and to give us a better insight to a working example of how things work we are very luck to have many ready-made/generator tools that have been used by lots of people all over the internet. Without further a do, two of our favourites;

960 Grid System

 ”The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem”

gridr buildrrr

“A simple to use generator, with custom selectors to enable you to generate that perfect grid system”

Once you have your Grid System downloaded, the next step is to code your design into the structure of the website. You’ve probably already got your visual/ideas/sketches for the look of your site but you also have to ‘Slice’ your image and then code it ‘semantically’ using the grid system. This is one aspect of creating a ‘Good Website‘.

Look out for more website tips & tricks only at Yoba.

After having a little bit of time on our hands our new site is finally taking shape, with an improved layout and blog integration just to keep you up to press! I’d just like to welcome you for coming and enjoy your visit. Feel free to have a browse and comments are more than welcome. If you don’t already know what we’re about then hit the about us link for more background info.

If you do know what you require then don’t hesitate to get in touch, via;

• 01924 910679
• info@yoba.co.uk