Top 11 rule must follow for planning a Web site:
Web Site Theme
- Browser and Operating System(OS)
- Bandwidth and Cache
- Display Resolution
- Look and Feel
- Website Theme
- Font,Graphics and colors
- Presentations and Access
- Page Layout and Linking
- Locating Information
- Make Design user centric
- Sitemap
Browser and Operating System(OS)
Web pages are written using different HTML tags and viewed in browser window.The different browsers and their versions greatly affect the way a page is rendered, as different browsers sometimes interpret same HTML tag in a different way.
To make a web page portable, test it on different browsers on different OS. Use the development tools to add special features to your page supported by majority browsers.The best way to avoid these problems is to follow the standards.
Web pages are written using different HTML tags and viewed in browser window.The different browsers and their versions greatly affect the way a page is rendered, as different browsers sometimes interpret same HTML tag in a different way.
Different versions of HTML also support different set of tags.The support for different tags also varies across the different browsers and their versions. The web technology is also moving from HTML to XHTML.Older version of a browser may not support recent tags and features.
Many users still follow the older versions of browsers although newer version are available.For ex, if your page is designed with CSS and if the user browser does not support CSS, the page looks very different .Same browser may work slightly different on different OS and hardware platform. Hence the browser is a critical issue to make your page portable on the different browsers with different versions.
To make a web page portable, test it on different browsers on different OS. Use the development tools to add special features to your page supported by majority browsers.The best way to avoid these problems is to follow the standards.
Bandwidth and Cache
Users have different connection speed i.e. bandwidth to access the website. Connection speed plays an important role in designing web pages. If user has low bandwidth connection and a web Page contains too many images,it take more time to download. Generally user have no patience to wait for longer time and move to other web site without looking contents of you web pages.Hence while designing web pages you have to also consider the low speed users like dial-up connection and hence limit the graphics . i.e image in single page.
However higt speed connection with broadband technology has solved this problem significantly. With high speed connection more attractive graphics can be used to design visually attractive pages. Browsers provide temporary memory called cache to store the graphics.When user gives the URL of the web page for first time, HTML file together with all the graphics file referred in a page is downloaded and displayed.At the same time the images downloaded are also stored in cache area of browser for a specified time as per user's preference.
When next time the same page is visited the browser get only HTML file and uses the images from the cache which increases the download speed significantly.This features is very helpful specifically on low speed connection.
Display Resolution
Display resolution is another important factor affecting the web page design as we do not have any control on display resolution of the monitors on which user views our page. Display or screen resolution is measured in term of pixels and common resolution are 800*600 and 1024*786. Design a web page with fixed resolution say 800*600. The web page properly fits onto a screen with this resolution but leaves some part of the screen if resolution is 1024*768. On the other side, if design is fixed to use 1024*768 pixels ,it will not fit into the screen having 800*600 resolution.
Make a flexible design using HTML table to fit into different resolution. Web page is divided into three column with middle column having a variable width.Depending on the resolution of monitor on which page it is viewed, it change its width.However challenge is to design the part in such way that
on different screen resolution, the content remain in proper view able form.
If the page is displayed on monitor with a higher resolution , the page is displayed on left hand side and some part on the right hand side remain blank.We can use centered design to display page, in middle of the screen ,leaving equal space on both the side of the page.
We should also consider a point that a when page is seen on point media and screen media, it differs in colors due to different nature of both.While designing a page we have to keep in mind that it is to be displayed on screen media and accordingly the colors should be choose.
Users have different connection speed i.e. bandwidth to access the website. Connection speed plays an important role in designing web pages. If user has low bandwidth connection and a web Page contains too many images,it take more time to download. Generally user have no patience to wait for longer time and move to other web site without looking contents of you web pages.Hence while designing web pages you have to also consider the low speed users like dial-up connection and hence limit the graphics . i.e image in single page.
However higt speed connection with broadband technology has solved this problem significantly. With high speed connection more attractive graphics can be used to design visually attractive pages. Browsers provide temporary memory called cache to store the graphics.When user gives the URL of the web page for first time, HTML file together with all the graphics file referred in a page is downloaded and displayed.At the same time the images downloaded are also stored in cache area of browser for a specified time as per user's preference.
When next time the same page is visited the browser get only HTML file and uses the images from the cache which increases the download speed significantly.This features is very helpful specifically on low speed connection.
Display Resolution
Display resolution is another important factor affecting the web page design as we do not have any control on display resolution of the monitors on which user views our page. Display or screen resolution is measured in term of pixels and common resolution are 800*600 and 1024*786. Design a web page with fixed resolution say 800*600. The web page properly fits onto a screen with this resolution but leaves some part of the screen if resolution is 1024*768. On the other side, if design is fixed to use 1024*768 pixels ,it will not fit into the screen having 800*600 resolution.
Make a flexible design using HTML table to fit into different resolution. Web page is divided into three column with middle column having a variable width.Depending on the resolution of monitor on which page it is viewed, it change its width.However challenge is to design the part in such way that
on different screen resolution, the content remain in proper view able form.
If the page is displayed on monitor with a higher resolution , the page is displayed on left hand side and some part on the right hand side remain blank.We can use centered design to display page, in middle of the screen ,leaving equal space on both the side of the page.
We should also consider a point that a when page is seen on point media and screen media, it differs in colors due to different nature of both.While designing a page we have to keep in mind that it is to be displayed on screen media and accordingly the colors should be choose.
Look and Feel
Look and feel of the web site decide the overall appearance of the website.It includes all the design aspect such as web site theme. Web typography, graphics,visual structure,navigation etc.
Look and feel of the web site decide the overall appearance of the website.It includes all the design aspect such as web site theme. Web typography, graphics,visual structure,navigation etc.
Web Site Theme
Website theme emphasize on the unification of design that should be reflected in each element of the design such that all pages of the web site hold together and give the impression of a single unit.Web site theme gives the impression to the user that they are on same website while navigating through various pages.
Every organization has unique reason to create their web site.web site theme should reflect the objective of the organization and convey the message of the organization. Following are some examples of the way we can choose the theme for a website.
Use logo of the company as theme.In this case,it must appear on each page to convey your message.For ex.Telecommunication can use well design logo and pictures throughout the site.
Use color scheme as theme.In such case all, your buttons,links,titles,labels and other text should use it consistently.
Web site for global warming can use pictures,message related to cause and effect of the global warming on lives.
Every organization has unique reason to create their web site.web site theme should reflect the objective of the organization and convey the message of the organization. Following are some examples of the way we can choose the theme for a website.
Use logo of the company as theme.In this case,it must appear on each page to convey your message.For ex.Telecommunication can use well design logo and pictures throughout the site.
Use color scheme as theme.In such case all, your buttons,links,titles,labels and other text should use it consistently.
Web site for global warming can use pictures,message related to cause and effect of the global warming on lives.
Fonts,Graphics and Colors
Web typography is very important issue that include of typeface of your fonts.They are important from both scanning and reading point of view as they express the structure as well as emotion. Consider the following important point while choosing the typefaces for your website.
Different fonts have different readability and it directly affect the physiology.Some fonts are good for continuous reading while other for viewing from distance such as advertisement on hording. Remembrance that height and width of the same character is different in different font.This affect you line ending and paragraph boundaries.
Maintain consistency in using the font type and size.Don't use too many fonts with too many sizes.Select few and use them with different sizes and modes for headers ,titles and text.Use of CSS helps consistency.
Consider the availability of fonts on visitor's machine.If the font used in web pages is not installed on visitor's machine,browser uses default font,Times new roman.
Graphics make the web site attractive the web site and convey lots of information .Graphics include images,charts and many others, while using graphics keep the following point in mind:
One of the important point is the graphics file format.Different file format support different levels of compression and other features.Popular image format on web are jpg,gif,png etc.Use them at right place considering their features.
Too many graphics or images with larger size reduce the download speed.Use limited graphics or use images with smaller size or in compressed format.
Use the images that suit the theme of the website and profile of target audience rather using any image just to include graphics.
Colors are part of everybody's life and website are not exceptions.People's liking are different for colors.Web site good content but improper color scheme does not attract viewers and hence it fails.Hence color scheme that suits theme,content and liking of your target audience plays a critical role.
For the graphics and color scheme,help of graphic and art designers is required to give the web site commercial and professional touch.
Web typography is very important issue that include of typeface of your fonts.They are important from both scanning and reading point of view as they express the structure as well as emotion. Consider the following important point while choosing the typefaces for your website.
Different fonts have different readability and it directly affect the physiology.Some fonts are good for continuous reading while other for viewing from distance such as advertisement on hording. Remembrance that height and width of the same character is different in different font.This affect you line ending and paragraph boundaries.
Maintain consistency in using the font type and size.Don't use too many fonts with too many sizes.Select few and use them with different sizes and modes for headers ,titles and text.Use of CSS helps consistency.
Consider the availability of fonts on visitor's machine.If the font used in web pages is not installed on visitor's machine,browser uses default font,Times new roman.
Graphics make the web site attractive the web site and convey lots of information .Graphics include images,charts and many others, while using graphics keep the following point in mind:
One of the important point is the graphics file format.Different file format support different levels of compression and other features.Popular image format on web are jpg,gif,png etc.Use them at right place considering their features.
Too many graphics or images with larger size reduce the download speed.Use limited graphics or use images with smaller size or in compressed format.
Use the images that suit the theme of the website and profile of target audience rather using any image just to include graphics.
Colors are part of everybody's life and website are not exceptions.People's liking are different for colors.Web site good content but improper color scheme does not attract viewers and hence it fails.Hence color scheme that suits theme,content and liking of your target audience plays a critical role.
For the graphics and color scheme,help of graphic and art designers is required to give the web site commercial and professional touch.
Presentation and Access
web page should be divided in visually different areas to present the contents with different importance.Use grid based structure to divide the web page into different rows and columns.
Make different part of the page area visible by using the white space, i.e the blank areas between them to make the contents eye catching.
Keep the page simple and focused if required.For example home page of google uses very simple design that is focused to quick search ,as it provides text fields in middle area leaving other area as white spaces.
Do not overload a page with too much content.divide the contents into parts, i.e section and within section pages and link them using hyperlinks.
Don's make page too lengthy.Instead,divide it into multiple page with links such as previous and next to move forward and backward .For ex. when google search results into many links,only few are shown,and at the bottom links to other pages are provided with page numbers.
If long page is to be designed ,provide the link to top of the page at the bottom to quickly return to start.
Links between the pages and section should exhibit consistency in appearance and meaning. Otherwise,the makes navigation difficult for the visitors.
Navigation i.e. transition between pages ,should be reflect the consistency in term of graphic for links and their placement.Put the common links at the same place on each page.For ex. link to home page is placed to top center on each page.
Web sites are design to provide contents online to the diverse group of visitors having different reading habits and expectations.A clear presentation helps in accessing the desired information quickly and easily without any hurdles.The visual structure of web page,navigation links and use of the white spaces decide you presentation clarity.
web page should be divided in visually different areas to present the contents with different importance.Use grid based structure to divide the web page into different rows and columns.
Make different part of the page area visible by using the white space, i.e the blank areas between them to make the contents eye catching.
Keep the page simple and focused if required.For example home page of google uses very simple design that is focused to quick search ,as it provides text fields in middle area leaving other area as white spaces.
Do not overload a page with too much content.divide the contents into parts, i.e section and within section pages and link them using hyperlinks.
Don's make page too lengthy.Instead,divide it into multiple page with links such as previous and next to move forward and backward .For ex. when google search results into many links,only few are shown,and at the bottom links to other pages are provided with page numbers.
If long page is to be designed ,provide the link to top of the page at the bottom to quickly return to start.
Links between the pages and section should exhibit consistency in appearance and meaning. Otherwise,the makes navigation difficult for the visitors.
Navigation i.e. transition between pages ,should be reflect the consistency in term of graphic for links and their placement.Put the common links at the same place on each page.For ex. link to home page is placed to top center on each page.
Page layout and Linking
Web site consist of individual web pages that are linked together using various links.Page layout define the visual structure of the page and divide the page area into different part to present the information of varying importance.
Page layout allows the designer to distribute the content in a page such that visitor can view it easily and find necessary details.
We can use HTML table element to design grid based page layouts.We can design desired layout using table element and their attributes with appropriate use.Complex layout can be designed with nested tables. Use of table element for designing page layout is a visual choice as all the browsers support it.
Alternatively we can use CSS to design the page layout.With advance features available,it is possible to design complex and alternative layouts.
Page layout is called the page template.Many ready made templates are available on the web sites which can be directly used to design the page quickly by simply adding the content into it.
point in Mind while designing layout.
While distributing the contents in layout,balance between text and graphics.Too much graphics may lead to slow download of the page.
Locate the item on the page using screen importance to attract the user's attention on important items
Maintain consistency among the layout of the pages such that it creates cohesive design of website matching to your theme.
Web site consist of individual web pages that are linked together using various links.Page layout define the visual structure of the page and divide the page area into different part to present the information of varying importance.
Page layout allows the designer to distribute the content in a page such that visitor can view it easily and find necessary details.
We can use HTML table element to design grid based page layouts.We can design desired layout using table element and their attributes with appropriate use.Complex layout can be designed with nested tables. Use of table element for designing page layout is a visual choice as all the browsers support it.
Alternatively we can use CSS to design the page layout.With advance features available,it is possible to design complex and alternative layouts.
Page layout is called the page template.Many ready made templates are available on the web sites which can be directly used to design the page quickly by simply adding the content into it.
point in Mind while designing layout.
While distributing the contents in layout,balance between text and graphics.Too much graphics may lead to slow download of the page.
Locate the item on the page using screen importance to attract the user's attention on important items
Maintain consistency among the layout of the pages such that it creates cohesive design of website matching to your theme.
Locating Information
Web page is viewed on a computer screen and the screen can be divided into five major area such as center ,top ,right,bottom,left in this particular order. Exploit this fact to design the web pages. Put most important information in the center to get the immediate attention of the user.
Similarly information is placed another parts considering their order of importance.You might have observed that most of the well designed web sites use left hand side for providing links to different item or section in form of menu.
Top is used for displaying logo and title as well as flashing news links or at many times advertisement. Right hand side is used for links to other important information.Bottom is used for quick links to important section or to provides copyright message.
Web page is viewed on a computer screen and the screen can be divided into five major area such as center ,top ,right,bottom,left in this particular order. Exploit this fact to design the web pages. Put most important information in the center to get the immediate attention of the user.
Similarly information is placed another parts considering their order of importance.You might have observed that most of the well designed web sites use left hand side for providing links to different item or section in form of menu.
Top is used for displaying logo and title as well as flashing news links or at many times advertisement. Right hand side is used for links to other important information.Bottom is used for quick links to important section or to provides copyright message.
Make design User-centric
It is vary simple for any web designer to predict the exact behavior of the web site users.However idea of general behavior of common user helps in making design of the web site use centric.User either scan the information on the web page to find the section of their interest or read the information to get the details.
If the information is provided for reading ,e,g article on an online magazine or newspaper site, then user's general reading habit gives the idea of how to organize such information.People normally read from left to right and top to bottom. Hence we can organize such content in column fashion on a web page.
For article or tutorial divided into section,providing the tables of content greatly help user in quickly accessing the desired part of tutorial .The links in table of contents change colors once visited,so the user get and idea of which links have been visited and which are yet to be visited.
Web pages are link together to provide non-sequential but quick reading.It is sometimes necessary to highlight the words in a paragraph as links to provide the links to the page giving detail meaning of the word.
Some of the web sites also provide links to the related topics at the end of the web page describing a topic.This provides user with facility to read the related information to get more clarity.
Sitemap is also part of user centric design for quick access to the information.
It is vary simple for any web designer to predict the exact behavior of the web site users.However idea of general behavior of common user helps in making design of the web site use centric.User either scan the information on the web page to find the section of their interest or read the information to get the details.
If the information is provided for reading ,e,g article on an online magazine or newspaper site, then user's general reading habit gives the idea of how to organize such information.People normally read from left to right and top to bottom. Hence we can organize such content in column fashion on a web page.
For article or tutorial divided into section,providing the tables of content greatly help user in quickly accessing the desired part of tutorial .The links in table of contents change colors once visited,so the user get and idea of which links have been visited and which are yet to be visited.
Web pages are link together to provide non-sequential but quick reading.It is sometimes necessary to highlight the words in a paragraph as links to provide the links to the page giving detail meaning of the word.
Some of the web sites also provide links to the related topics at the end of the web page describing a topic.This provides user with facility to read the related information to get more clarity.
Sitemap is also part of user centric design for quick access to the information.
Sitemap
Many times web site are too much complex as there are large number of section and each section contain page.It become difficult for visitor to quickly move from one part to another. Once the user selects a particular section and pages in that section,the user gets confused about where he/she is and there.
To make it simple,keep your hierarchy of information to few levels or provide the navigation bar on each page to jump directly to a particular section.
Another solution is to provide the sitemap including links to each section and their page directly. Sitemap gives the organization of content of a web site graphically.Provide a link to sitemap with a button 'Sitemap' on each page of your site at same location.At any time user can use 'sitemap' link from the current page and using the links on it, the user can quickly select the desired content.
Many times web site are too much complex as there are large number of section and each section contain page.It become difficult for visitor to quickly move from one part to another. Once the user selects a particular section and pages in that section,the user gets confused about where he/she is and there.
To make it simple,keep your hierarchy of information to few levels or provide the navigation bar on each page to jump directly to a particular section.
Another solution is to provide the sitemap including links to each section and their page directly. Sitemap gives the organization of content of a web site graphically.Provide a link to sitemap with a button 'Sitemap' on each page of your site at same location.At any time user can use 'sitemap' link from the current page and using the links on it, the user can quickly select the desired content.
Comments