How Does Responsive Web Design Work?
Responsive web design is the approach that suggests web design and development should respond to user behaviour and environment based on their screen size, platform and orientation. As a user switches from devices, such as from iPad to laptop, the website should be able to accommodate for resolution, image size and scripting abilities. The settings on devices should also be considered, for example if they have a VPN the website should not block the users access to the page. This means that the website should have the technology to automatically respond to the user’s preferences. This eliminates the need for different designs for each and every new gadget.
Screen Resolution
All devices have varying screen resolutions, definitions and orientations, and new devices are always being developed which will differ from other devices. It is obvious that custom solutions for each type of device cannot be created. So to deal with this, flexible layouts are created. Making sites more flexible means images can be automatically adjusted, so that layouts don’t break. This gives more options when designing websites, such as when devices change their orientation. For example when a tablet goes from portrait to landscape the web page will fit the screen without breaking the layout.
Flexible Images
Images can be a problem if they are not resized proportionally. They can interfere with a website’s layout, so we can make them automatically resizable. A way of doing this is to set the max width to 100%. This means that when the screen size changes, so does the image. Such as when a device has a narrower screen size, the image will become more narrow to fit the screen. The idea of flexible images is when you set images at the maximum size that they are going to be used at, the browser will then resize the images. This is done while using css will then display the image at its relative size. This simply resizes images to fit the device’s screen size.
Custom Layout Structure
When a website has large size changes between devices, the layout may have to be changed altogether. This can be done through a separate stylesheet or a css media query. An example of this could be if a group of people were to work on and create a website. If one were to work on the header of the page, and someone else works on the body then it would be suitable to set up separate stylesheets. Each user can comment the code they have written, so that each other person working on the site can see and understand what they have done. To do this you start the comment with /* and end it with *\.
Showing Or Hiding Content
Sometimes it is not the best solution to display all of the content on a page, depending on the device. For example, a phone screen has a much smaller screen size than a tablet, so some content can be hidden that is not necessary to see all of the time. This could be an image that is not seen unless switching orientation to landscape. Another example would be a button that is visible on a mobile device but not on desktop.
