The mobile development solution of yesterday was to create two variations of a website–one for mobile devices with smaller screens and the other a standard website designed for desktop computers. By using the “user agent string” of the website visitor’s browser, the appropriate version of the site is served to the visitor.
Another approach is to optimize a website design to adapt to several different screen sizes, such as mobiles, desktops and tablets. The problem is that there are far more devices in use today, and it is getting difficult to keep up with the various screen sizes and orientations.
The CSS answer to this problem is to create one standard layout for the website, and allow CSS to adjust itself based on the width of the website visitor’s screen–automatically. When a mobile visitor hits the website, the sidebar is shown if the mobile device’s screen resolution is more than 768 pixels, along with other page elements, depending on the screen size.
Read the original article here.
