Best Way to build Blocks in webpages

As we know elegant design is important in webpage and blocks reduce time and gives quality in UI/UX. Following are the terms; we can design and place better blocks in webpages.

Picture it

Here’s where you actually start designing the site. Don’t rush into making the pages or graphics yet. Use a paper and pencil, or even an imaging tool (MS Paint is good enough for this) and scribble your site layout first. Check out some existing Web sites for ideas. It’s a good practice to keep all navigation links together. If there are too many of them, club them into logical groups. Keep important items, such as navigational links in the top 400 pixels of the page. Visitors to the site see this area first, so that’s where the most important information should appear. Also, ensure that the main body of the page starts within this area, so visitors can start reading the text right away.

The first cut

When you start designing your Web site, do not develop smaller components of the page as individual components but instead start work on the whole page as a single image. Once the main image is ready, you can separate out each element by cropping individual items. This will ensure that all the items are of the appropriate size and the final page will be easier to make.

The sacred scrolls

Keep vertical scrolling to a minimum and avoid any horizontal scrolling. Restrict the vertical scroll to a maximum of two-and-a-half scrolls of an 800 x 600 screen. If you do have a lot of information that must be given on the same page, don’t fill up the entire page with text. One column in the center, irrespective of the amount of scrolling involved, interspersed with attractive graphics works well. This is one reason why it’s a good idea to dedicate a column on the left to navigational links. Since the links already takes up some space, you have to worry less about the information flow. Avoid gimmicks such as tickers and scrolling text. It slows down the page and is usually quite irritating. It also distracts visitor’s eye from the rest of the page.

Optimisation Tips

It’s easier to retain visitors to your site if the pages load fast. A fast-loading site holds attention, so they won’t go clicking around other windows.

Table smart

In browsers, tables do not show up on a page until the content within the tables have been downloaded, making a page seem slow. Avoid nested tables and long vertical tables. Instead, stack tables on top of each other-pages then appear to load faster as each table shows up faster. In this context, it’s better to place your navigational links horizontally, towards the top, as it will show up before most of the rest of the page. Keep the most important links at the top and the rest on the left or keep top-level sections on the top and subsections on the left.
To make a table stand out on a page, use a border around it rather than an image that is fixed in size. Nest the table within a single-cell table with a cell padding of 1 pixel (or more for a thicker border) and a background of the colour you want for the border.

Re-use images

If an image is repeated throughout the site, use the same file across all pages so that it needs to be downloaded only once-the browser’s cache takes care of this. If you use similar images, break them into static and changing parts so you can reuse the static part of the image.

Smaller images

The size of an image will be smaller if you use a 256-colour palette. GIFs are generally smaller than JPEGs, but JPEGs offer better quality when using lots of colours as on photographs. With smaller images, use distinct edges and crisp colours.
Almost all imaging tools optimize images by saving them with a palette of only those colours used in the image. Some applications let you choose how many colours to use in the image. It then replaces colours not found in the palette with the nearest match, thus reducing the image size.
Avoid too many animated graphics. A lot of them together are unpleasant to the eye and also take longer to download as compared to simple images.

Stylize your site

Use a style sheet for your site to add consistency and to reduce page size. You won’t have to explicitly define many font and paragraph tags. Avoid using inline styles-this is as good as using HTML tags-except for special cases. Use a single CSS file that has all the style definitions. Once a person visits a page, the browser will use the file from the cache for the rest of the pages.

De-script-ion

Try and push all JavaScript (JS) into one or several external JS files. Re-used code such as that for rollovers, menus, validation, etc. can easily be separate functions in a single file. Again, the file will have to be downloaded only once and will be used from the cache henceforth. So try to use scripts that are as generic as possible so that they work smoothly with all pages.

Less jazz, more speed

The lesser jazz on a page, the faster it loads. Animations and rollovers affect the size and number of files the browser has to download. Another aspect usually overlooked is DHTML items such as menus that show and hide themselves. Though hidden away, they add a lot of code to the page, increasing the size considerably. Use these wisely and limit the number of such hidden blocks to a minimum.