Designing Web Sites For All Screen Resolutions

May 29, 2009 at 6:06 am (Uncategorized)

How to design a web sites for all screen resolutions

This tutorial teaches you how to design a website that utilizes the available browser space efficiently and looks good for all screen resolutions.

Why do we need to design for all resolutions?

  1. Web site design scalability – As technology advances and the configuration of monitors keep increasing it is impossible to test your site in all screen sizes. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site. Check out our website in different screen resolutions, you will find that it will fit the screen width.
  2. To fit available browser space for easy reading – Try out a fixed width site in all resolutions (especially higher than 1024×768) and see how empty and unprofessional it looks. Now take a look at this article page in all the resolutions and feel the difference. If it is necessary for you to keep a fixed width then we have given suggestions on how to do it more professionally (read below).
  3. To keep your viewers on your site – A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn’t look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing.

Viewer Statistics

  • There are more than 40 different screen resolutions.
  • 1024×768 is the most popular resolution used (getting the lions share of around 60%) followed by 1280×1024 and above (around 25%) and 800×600 (around 14%). 98% of users have 800×600 and above resolution, thus, 800×600 can be taken as the minimum resolution the site should fit (other lower resolution are seldom used).

Design Basics

  • There are two ways to design your website – Table design and Table-less design (using div tags).
  • For a beginner using tables is the best as there isn’t much that can go wrong with the use of tables. For advanced users and design professionals designing using CSS styles and div tags is a must for optimal results of load time and to follow W3C standards.
  • For stretch layouts we need to give the width of the table(s) or div(s) in percentage.
  • To fit the whole screen for any resolution – the outer most table(s) or div(s) are given 100% width. If the design can be made to have just one outer table then it can be given a height of 100% to expand and fill the browser space vertically.
  • To make only the content area to expand do the following. After the outer most table or div is given the width in percentage all inside cells or div tags should be given fixed widths in pixels except the content cell or div.
  • If you like the fixed width concept or are forced to have a fixed width you can give a contrasting background color and/or a shadow effect/border to the table to make it stand out. These effects can also be used along with the stretch layout concept by giving the table or div width as 90 or 95 percent.
  • Some of the templates don’t fit the screen vertically due to design limitations and netscape compatibility issues. Instead of using 100% as the height, here the extra space can be cleverly hidden by using a background color or fill.

Permalink Leave a Comment

Fast loading Website Tips

May 29, 2009 at 5:58 am (Web Design)

10 Important Tips for a fast loading web site

 

It is important to have a reasonably fast loading web site so that viewers are not made to wait for a long time and to accommodate users on slow internet connections. Search engine algorithms also do take into consideration your load time.

  1. Optimize your HTML code

    Make sure that your site doesn’t have any unwanted tags or broken links and that it is optimized for load time. Errors on your web pages can slow down your website – Make sure your website is error free!

  2. Maximize content area

    This not only reduces load time, it enhances the readability of your site.

  3. Minimize use of graphics, Flash and scripts

    These are the major contributors to the size of your web page, so try minimizing them. Try using background colors and fills instead of heavy images.

  4. Optimize all heavy files

    As much as possible optimize heavy graphics, Flash files and scripts. In editors like fireworks and flash you can see the various options in the preview panel to reduce the sizes. See how popular web sites like google and yahoo have pages that are very small in size and thus load in seconds.

  5. Stick to simple designs

    Most fast loading sites have very simple designs. Take the hint! Complicated designs will slow down your pages.

  6. Spread out your content neatly

    In case you find yourself having very long pages of content, break them down into separate logical sections and thus bring down the sizes of the individual pages.

  7. Use Text Links instead of graphic buttons

    Basically try to make use of text links as much as possible as they are easier to maintain. Use CSS Styles for text links to make them as attractive as buttons. 

  8. Use Server Side Include (SSI) files

    SSI files once called from the web server reside in its cache so on subsequent requests they load faster. Use them where ever possible.

  9. Use Div tags instead of Tables

    Go in for a pure CSS tableless design right from the beginning. Using Div tags instead of tables for your design is what you need to do for better load time and total control over your layout. It also ensures that it is scalable for whenever you want to make design changes in the future. 

    Effective Table Design: In case you must use tables use them wisely and sparingly. Design using nested tables instead of using cell merges and splits. Use separate tables where ever possible. Not designing for 100% height is better as if you use just one outer table, the web page is displayed only after the table is loaded fully. If many outer tables are present [you can have different tables for the header, content, footer, etc.] the page displays the content of each table as soon as its elements are loaded.

  10. Check your W3C standard validity and Load time regularly 

    To maintain an excellent website you must give thought to how to improve your website on an almost daily basis! Maintain an error free website and tweek it regularly. Do remember to check your Load time and W3C code and CSS validity regularly.


Permalink Leave a Comment

Every 30th Indian has a computer

May 29, 2009 at 4:33 am (News)

computerBangalore: In spite of the annual dip in growth rate of personal computers (PCs) in India, the country now boasts of one PC for every 30 of its citizens. PC shipment in India has surpassed 36 million units mark, representing a significant improvement over March 2007 when the country had boasted of one computer for every 50 Indians. 

Indian PC market has grown by seven percent in first quarter of 2009 as compared to the fourth quarter of 2008, according to IDC’s Asia/Pacific quarterly PC tracker. “Though the Year-on-Year growth rate of India Client PC shipments dropped by 19 percent (First quarter 2009 versus first quarter 2008), this is an improvement over the previous quarter, indicating that the market has perhaps already bottomed out,” said Sumanta Mukherjee, Lead Analyst, Computing Products Research, IDC India.

A total of 1.67 million units of Client PCs were shipped during the first quarter of this year. Overall PC shipments to the commercial segment were maintained by demand from the Government, Education and Banking (nationalized banks) segments. The Government sector expects some more spending to happen after the formation of a new government. “With a number of significant government-funded education and e-Governance projects lined up in the coming quarters, a lot will hinge on how quickly the new government settles down to business,” says Mukherjee.

Permalink Leave a Comment

Corporate India loses $8 Billion in power cut

May 29, 2009 at 4:27 am (News)

Bangalore: The India Inc has suffered a loss of $8.64 billion (Rs.43, 205 crore) in the power downturn in the year 2008-2009, says a study by the Manufacturers’ Association for Information Technology (MAIT) and Emerson Network Power (India). The study was an in-depth analysis of the impact of downtime in corporate India due to high occurrence of power outages, loss incurred are scheduled and non scheduled expenses, which is just double the loss incurred in the year 2003, when it was only Rs.22, 000 crore. 

2The loss incurred is about one percent of India’s total GDP. The key reason described in the report for the loss is because of the infrastructure stress on the power utilities. There are a large number of companies which rely on the IT infrastructure for automation, productivity and business management. The employee productivity and customer management were severely impacted by such downtime. Manufacturing sector has been described as the worst affected in this downtime.

The study, which in the third round was conducted by the consulting firm M/S Feedback Business Consulting Services, covered around eight hundred cities located in seven important industrial cities in India. Sixty-two percent of the companies surveyed were found to have a complete dependability on the IT and Automation sector. Fourteen major industry verticals including manufacturing, electronics, telecom, IT services, IT enabled services, banking & finance, pharmaceutical, biotechnology, SMEs, retail, hotels, real estate, infrastructure and hospitals were surveyed and the information was obtained from the senior executives.

“Contingency planning is part of the India Inc’s mindset, based on traditional experiences with infrastructure limitations. This trend will continue in the light of global power failures encountered in Western countries. Firms will need to pay more attention to maximizing uptime if they are to remain competitive in a globally networked economy,” said Vinnie Mehta, Executive Director, MAIT 

The power disruption frequency was highest in Delhi, followed by Pune and Bangalore. Among the surveyed, 78 percent feel that the condition will improve in one year, but Delhi was at the top with the least confidence in showing up. The highest confidence level was polled for Chennai. Telecom sector was found to have the fastest restoration ability, while it was found slowest in pharma/biotech, hotels/hospitals and manufacturing. 

The downtime loss incurred across all the verticals was observed at an average of Rs. 54,434 per hour, which is highest in telecom and real estate/infrastructure companies, and lowest in the SMEs. The major impact of the downtime is on the employee productivity and customer management. The average speed of restoration was found about 71 minutes. Bangalore was adjudged with high frequency and longer outages. Mumbai continues to be most depended on grid for power. 

Permalink Leave a Comment