I have been visiting websites and developing some and till now i don’t know why the default size of the layout of those webpages is 1024×768. In other words, why they are neglecting the other parts of the screen? Why don’t they develop the pages according to a high large resolution like 1920×2120 for example?
I have visited most websites around the web from Yahoo.com to Pepsi.com and all of them are placing those right and left margins eating half of the screen to fit their elements on a stage of 1024×768.
Is it because they need to open those website on mobile devices? or there is a more deep technical reason for that?
The primary reason is that people want more and more people to access their website. Almost 10 years ago, 1024×768 was the most common display resolution. After that while new and higher resolution displays have come in, there has not been a significant jump in the vertical resolution (768) of low end devices. Even now (beginning of 2012) almost 50% displays use max 800p as the vertical resolution.
So 1024×768 is a standard minimum resolution for which people design websites. There are high chances that if you design for wider/bigger resolutions, people using these devices may not see them on the top of their screen (without scrolling) and the content may remain unnoticed.
Check this wikipedia link for more detailed stats
http://en.wikipedia.org/wiki/Display_resolution
To answer the other question, why not have multiple versions? Two reasons mainly: