A website that is 'responsive' adjusts to the user’s behaviour and environment based on screen size, platform and orientation. The term is often used interchangeably with 'mobile website'.
Flexible 'Intelligence' That Recognizes Devices
When we design and code a responsive website, we use a mix of flexible grids and layouts which changer order and shape depending on the device the visitor is using.
For instance, as the user switches from their laptop to tablet (ie. iPad), a responsive website will switch the page structure to to accommodate for things like page width, screen resolution and image sizes.
When the visitor changes the perspective on an iPad, turning it from horizontal to vertical, the website will adjust.
Similarly, when viewed on a phone, the website will look different again.
In other words, a responsive website has the 'intelligent' technology to automatically respond to the device the viewer is using. This eliminates the need for a different design and development phase for each new gadget on the market.
Current Technology = 1 Set of Code
The key with today's standard for responsive website design, however, is that there is one set of code.
In the past, it used to be that if you wanted a responsive website, you had to have a set of code for the desktop computer and another set of code for mobile. You may have seen this before... often the mobile sites ended in .mobi instead of .com or .ca. This meant that you actually had 2 websites.
Now, industry-standard websites have one set of code that 'recognizes' the device it's being viewed on and adjusts accordingly.