When a web page is created, the content being displayed is set up in a certain order for the purpose of keeping the structure organized. It can easily be noticed that the organization of a web page changes when a person is using a tablet or smartphone. This is because every section of a web page contains mark-up and styling telling the browser how to display the site including which section should be shown first, and what should be eliminated, or added depending on the situation. Responsive design takes into consideration data such as screen width then had a variety of displays depending on this data. An example is when on a desktop you may see three or 4 products per row with images appearing to be 2’x2’, but on the phone, instead of seeing a scaled-down version of this, you might see the content re-arranged. The images may still be 2’x2’, but it is likely that they will stack and be arranged in a row of one or two for easier viewing on a phone, or tablet. See images.
Desktop:
Mobile:
Web pages typically contain more details and sections on a desktop display, and more simply on phones. Responsive design is needed in order to adapt to different forms of common technological devices to make them easy to use for the person visiting the website. For this reason, when a website is being designed it must be designed to adapt and be tested to see if it works on all types of devices so that it can be confirmed that the organization has designed its site to be flexible and responsive, and free from errors or difficulties for the user.