Responsive design is the art of seamlessly conjuring multiple websites out of a single website. It is about ensuring every user, no matter which device they are using to interact with the website, will enjoy a clear, rich and meaningful experience.
This is achieved by dynamically modifying the content of each page to suit the size of the viewport on each device.
Tricks of the trade include making images steadily resize to suit the space available, progressively shrinking column widths and column counts, dynamically rearranging content on the page, hiding less important content as space gets smaller and of course creating multiple navigation menus to suit the different devices.
From a development point of view this is always a challenge. As a client, all that is required is 'a website', whereas the reality is that multiple websites are considered and created, even though with a cursory look it will be considered a single website. All designs carry a common design thread, but ultimately each situation of phone, tablet and desktop is considered and carefully accounted for - along with a number of in-betweens.
Another reality of the responsive approach is that designs are compromised. There is a drive for simplistic content and layout, making it realistically achievable to have material that presents nicely over the various devices. Designs now tend to include more open space, with square or rectangular panels of information forming grids that can stack and resize. This primarily affects desktop views, where the large real estate could often be better utilised.
The process of working up website designs has also changed. The current mindset is to develop for mobile, then see what else can be added in to suit the larger screens. This is the reverse on a few years back where the desktop was the primary focus.
Responsive design is an approach that has evolved since smart phones and tablets became common place. In the early days of tablets and smart phones the solution was to create separate websites, one for the desktop and one for the smart phone. Then adaptive design was 'in' for a while, being an approach that saw content 'jump' to different designs based on preset screen sizes. Out of these emerged the responsive approach, which introduced gradual change through the various sizes.
Even with these trends, there was and remains a LOT of merit to using separate websites for phones and desktops. Delivery of content that has been expressly optimised to suit the media it is presented on carries serious power. A number of high profile sites recognise this value and correctly persist with the two-site approach. Take a look at these examples:
Look at the bottom-right of the footer of each site if automatically redirected away from the mobile site.
Unfortunately reality often bites, and the main reasons the two site approach hasn't been widely continued is that it means higher overhead with two sites to create and maintain, plus it can have a negative impact on SEO. On websites with lighter functional needs the impact of design compromise is reduced, and the commercial trade-offs weigh in.
In summary, the most important thing is to understand why different approaches are used, be aware of the various merits of each approach, and then make a conscious choice on which methods to adopt. Blindly following market trends is like Russian Roulette.
Stream has strong experience with all the approaches discussed above. Our default is to build using the responsive approach, but we also use other techniques as needs demand.