Browsers, Resolutions and Colours
- By Richard D S Hill
- Published 10/22/2011
- Internet
- Unrated
Many of our newsletters are suggested by conversations we have with clients and others about the web. People like to know how things work and sometimes we all get baffled by ‘the march of technology’. We have, I guess, pretty much looked at something like:
Intel® Core™ 2 Duo processor P7450, 4 GB DDR3, 1 TB SATA 3G Hard Disk Drive (5400 rpm), Touch-enabled 23" full HD diagonal widescreen BrightView LCD with tilt adjustment, Wireless LAN 802.11 b/g/n, Bluetooth® wireless networking 2.0 EDR
and wondered “what the monkeys does all that mean?” (OK so that’s a computer spec, but you get what we mean).
So when it comes to the web there are a couple of things that people get ‘stuck’ on:
* How does a web page work?
* How does the computer you have affect all this?
The web operates on what’s called a client / server model. You have a ‘web client’ on your computer – your web browser such as Microsoft’s Internet Explorer or Firefox that contacts a web server and requests the page. The server locates and then sends the information to the web browser, which displays the results.
The server must use Hypertext Transfer Protocol (http) and has pages encoded in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). The web browser interprets the HTML code and CSS and translates it into what we see on the page. They also can display applications, programs, animations, and similar material created with programming languages such as Java and ActiveX, scripting languages such as JavaScript, and techniques such as AJAX.
If you open the source view on a web page, all you'll see is words and computer code, including directions that point to images and other elements such as the CSS. Different browsers interpret HTML in slightly different ways. A page in Firefox will look different than the same page in Internet Explorer or Safari or Chrome because different developers have made the browser.
HTML is a just a set of tags / rules that are used to define a web page. Browsers are programmed to use these tags / rules to display the page. In pure HTML your code and content is all embedded as part of the web page. However, you can also use other computer languages, such as PHP, to tell the server to create the HTML. This allows larger and more complicated sites to be produced since you can issue instructions to the database as well and thus collect prices and other information to display when they are needed rather than have to create every page and variation at the outset.
CSS (Cascading Style Sheets) are just a set of instructions that define the style and layout of web page elements such as the headline, a text box, an image placement or similar. CSS enables the separation of document content from document presentation. This improves accessibility, flexibility and control and reduces complexity and repetition. CSS can also allow the same page to be presented in different styles on-screen, in print, on mobile devices etc.
A database is just an organized collection of computer records. Each record describes a particular item which maybe a product, a price, a written article or something else. The most frequently used type of database is called a "relational databases." In a relational database there are separate tables which have explicitly defined relationships and they may be selectively combined. In this way the data in a database can be manipulated precisely to suit the requirements of a program. For example, a retail business might have tables containing data about employees, customers, products, product descriptions, prices, stock levels
etc. and these can all be used in the website.
How does the computer you have affect all this?
The images you see on your monitor are made of tiny dots called pixels and your monitor will display over a million pixels. Your computer has to decide what to do with every one in order to create an image and to do this it uses a graphics card which displays information on your monitor.
An SVGA or above monitor can display up to 16,777,216 colours (About 10,000,000 colours are discernible to the human eye) from processing a 24 ‘bit’ pixel code - eight for each of the three primary colours. Since there are 256 possible 8 bit binary numbers, you get 256 shades each of red, green, and blue. 256 cubed.
Most new displays use liquid crystal display (LCD) technology and all displays have a resolution expressed by identifying the number of pixels on the horizontal axis and the number on the vertical axis.
As monitor sizes have increased over the years, display standards and resolutions have changed. Obviously, the size of the display affects resolution. The same resolution is sharper on a smaller monitor and fuzzier on a larger monitor because the same number of pixels is spread out over a larger area. The current standards are noted below and the image gives you some idea of size / shape of a screen and resolutions.
Standard Width Height
VGA Video Graphics Array 640 480
SVGA Super Video Graphics Array 800 600
XGA eXtended Graphics Array 1024 768
XGA+ eXtended Graphics Array Plus 1152 864
WXGA Widescreen eXtended Graphics Array 1280 768
WXGA Widescreen eXtended Graphics Array 1280 800
SXGA Super eXtended Graphics Array 1280 960
SXGA Super eXtended Graphics Array 1280 1024
HD High Definition (Basic) 1366 768
WSXGA Widescreen Super eXtended Graphics Array 1440 900
HD+ High Definiton (Plus) 1600 900
UXGA Ultra eXtended Graphics Array 1600 1200
WSXGA+ Widescreen Super eXtended Graphics Array Plus 1680 1050
HD-1080 Full High Definition 1920 1080
WUXGA Widescreen Ultra eXtended Graphics Array 1920 1200
But, to display a web page you still have to tell the monitor what colours to display.
The graphics card first creates a ‘wire frame’ of straight lines, then, it fills in the remaining pixels and adds lighting, texture and colour using four main components:
* A motherboard for data and power
* A processor to decide what to do with each pixel
* Memory to store information about each pixel and completed pictures
* A monitor so you can see the final result
What you have to remember here is that there is no standard for representing colour and tone such that images on one display look the same as those viewed on another. Additionally screens have quite low resolutions. A 21” screen set at 640 x 480 will produce about 40 dpi (pixel density in dots per inch) whereas a 14” screen at 1600 x 1200 will produce about 165 dpi. Given that the ‘minimum standard’ for print is 300 dpi you get an idea of the quality difference. Most web images are set to 72 dpi as this gives a good enough quality image and a reasonably small file size when the image downloads so that you are not waiting for it for ages.
That’s ok for images but you also have to be able to set non image colours. For the web the standard notation is a hexadecimal (base 16) 6 digit number. In base sixteen, there are sixteen digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, and F. Colour notation is done once for red, once for green, and once for blue, in that order with 2 digits for each.
So 000000 is black as all three settings of red, green, and blue are set to a total absence of colour and FFFFFF is white as the highest level of red, green, and blue in a computer produces white. With hex colour notation one can create the 16,777,216 colours noted above – again 256 cubed.
All pretty simple then.
Intel® Core™ 2 Duo processor P7450, 4 GB DDR3, 1 TB SATA 3G Hard Disk Drive (5400 rpm), Touch-enabled 23" full HD diagonal widescreen BrightView LCD with tilt adjustment, Wireless LAN 802.11 b/g/n, Bluetooth® wireless networking 2.0 EDR
and wondered “what the monkeys does all that mean?” (OK so that’s a computer spec, but you get what we mean).
So when it comes to the web there are a couple of things that people get ‘stuck’ on:
* How does a web page work?
* How does the computer you have affect all this?
The web operates on what’s called a client / server model. You have a ‘web client’ on your computer – your web browser such as Microsoft’s Internet Explorer or Firefox that contacts a web server and requests the page. The server locates and then sends the information to the web browser, which displays the results.
The server must use Hypertext Transfer Protocol (http) and has pages encoded in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). The web browser interprets the HTML code and CSS and translates it into what we see on the page. They also can display applications, programs, animations, and similar material created with programming languages such as Java and ActiveX, scripting languages such as JavaScript, and techniques such as AJAX.
If you open the source view on a web page, all you'll see is words and computer code, including directions that point to images and other elements such as the CSS. Different browsers interpret HTML in slightly different ways. A page in Firefox will look different than the same page in Internet Explorer or Safari or Chrome because different developers have made the browser.
HTML is a just a set of tags / rules that are used to define a web page. Browsers are programmed to use these tags / rules to display the page. In pure HTML your code and content is all embedded as part of the web page. However, you can also use other computer languages, such as PHP, to tell the server to create the HTML. This allows larger and more complicated sites to be produced since you can issue instructions to the database as well and thus collect prices and other information to display when they are needed rather than have to create every page and variation at the outset.
CSS (Cascading Style Sheets) are just a set of instructions that define the style and layout of web page elements such as the headline, a text box, an image placement or similar. CSS enables the separation of document content from document presentation. This improves accessibility, flexibility and control and reduces complexity and repetition. CSS can also allow the same page to be presented in different styles on-screen, in print, on mobile devices etc.
A database is just an organized collection of computer records. Each record describes a particular item which maybe a product, a price, a written article or something else. The most frequently used type of database is called a "relational databases." In a relational database there are separate tables which have explicitly defined relationships and they may be selectively combined. In this way the data in a database can be manipulated precisely to suit the requirements of a program. For example, a retail business might have tables containing data about employees, customers, products, product descriptions, prices, stock levels
How does the computer you have affect all this?
The images you see on your monitor are made of tiny dots called pixels and your monitor will display over a million pixels. Your computer has to decide what to do with every one in order to create an image and to do this it uses a graphics card which displays information on your monitor.
An SVGA or above monitor can display up to 16,777,216 colours (About 10,000,000 colours are discernible to the human eye) from processing a 24 ‘bit’ pixel code - eight for each of the three primary colours. Since there are 256 possible 8 bit binary numbers, you get 256 shades each of red, green, and blue. 256 cubed.
Most new displays use liquid crystal display (LCD) technology and all displays have a resolution expressed by identifying the number of pixels on the horizontal axis and the number on the vertical axis.
As monitor sizes have increased over the years, display standards and resolutions have changed. Obviously, the size of the display affects resolution. The same resolution is sharper on a smaller monitor and fuzzier on a larger monitor because the same number of pixels is spread out over a larger area. The current standards are noted below and the image gives you some idea of size / shape of a screen and resolutions.
Standard Width Height
VGA Video Graphics Array 640 480
SVGA Super Video Graphics Array 800 600
XGA eXtended Graphics Array 1024 768
XGA+ eXtended Graphics Array Plus 1152 864
WXGA Widescreen eXtended Graphics Array 1280 768
WXGA Widescreen eXtended Graphics Array 1280 800
SXGA Super eXtended Graphics Array 1280 960
SXGA Super eXtended Graphics Array 1280 1024
HD High Definition (Basic) 1366 768
WSXGA Widescreen Super eXtended Graphics Array 1440 900
HD+ High Definiton (Plus) 1600 900
UXGA Ultra eXtended Graphics Array 1600 1200
WSXGA+ Widescreen Super eXtended Graphics Array Plus 1680 1050
HD-1080 Full High Definition 1920 1080
WUXGA Widescreen Ultra eXtended Graphics Array 1920 1200
But, to display a web page you still have to tell the monitor what colours to display.
The graphics card first creates a ‘wire frame’ of straight lines, then, it fills in the remaining pixels and adds lighting, texture and colour using four main components:
* A motherboard for data and power
* A processor to decide what to do with each pixel
* Memory to store information about each pixel and completed pictures
* A monitor so you can see the final result
What you have to remember here is that there is no standard for representing colour and tone such that images on one display look the same as those viewed on another. Additionally screens have quite low resolutions. A 21” screen set at 640 x 480 will produce about 40 dpi (pixel density in dots per inch) whereas a 14” screen at 1600 x 1200 will produce about 165 dpi. Given that the ‘minimum standard’ for print is 300 dpi you get an idea of the quality difference. Most web images are set to 72 dpi as this gives a good enough quality image and a reasonably small file size when the image downloads so that you are not waiting for it for ages.
That’s ok for images but you also have to be able to set non image colours. For the web the standard notation is a hexadecimal (base 16) 6 digit number. In base sixteen, there are sixteen digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, and F. Colour notation is done once for red, once for green, and once for blue, in that order with 2 digits for each.
So 000000 is black as all three settings of red, green, and blue are set to a total absence of colour and FFFFFF is white as the highest level of red, green, and blue in a computer produces white. With hex colour notation one can create the 16,777,216 colours noted above – again 256 cubed.
All pretty simple then.
Richard D S Hill
Richard Hill is a director of E-CRM Solutions and has spent many years in senior direct and interactive marketing roles.E-CRM helps you to grow by getting you more customers that stay with you longer.
View all articles by Richard D S Hill