As mobile devices are becoming more and more popular, web developers are looking for ways to optimize their web sites for smaller screens and different types of event handling.
One of the most popular ways to accommodate for smaller screen sizes on mobile devices is to adopt a responsive design methodology. Basically all that means is that when the tool that you’re using to render your website changes in size, change the way your website looks to optimally display your website for that device and screen size.
Yes, there are many different ways you can achieve this kind of functionality. It might make sense for major companies that use a very complex CMS to render two separate files to render a desktop website and one to render a mobile website. From a day to day perspective a user wouldn’t even notice any difference as the task of creating the page would be done from a back end. But if you’re working in a non CMS environment maintenance and development would require a lot of time and duplicate work effort. Some people say that using two physical set of files forces the content writers to only put optimal content on the mobile version of the page and non-optimized version of the desktop version. Why would you ever want to display non-optimized content anywhere? I think all content should be optimized regardless where its web site is being viewed from desktop or a mobile device. So I would recommend against this approach, as the negatives out weight the positives.
From a technical perspective it’s not too difficult to archive responsive design. There are several ways of doing this, one would be to use a “media query”. What are media queries you may ask, media queries were created by W3C as part of CSS3. Rather than looking for a device i.e. iPhone, iPad or a desktop all media query does is, render the page using physical characteristics of the device, like the size.
Even an easier way of doing this would be to use an existing frame work like Twiter Bootstrap.