Posted on: 5 September 2014Share
Responsive web design refers to a web design approach that changes the appearance of a website depending on the medium through which the viewer is using the website. For example, a website may look different on your phone and desktop computer. This approach to web design can be confusing even for seasoned web designers. Here are five aspects and trends to keep in mind if you are just starting to learn about responsive web design.
Websites have traditionally been designed with fixed sizes, meaning that the size of the elements of a webpage have been defined in pixels. A traditional webpage designed in this way may render perfectly on a desktop computer of 1920 by 1080 pixels, but it may need a lot of horizontal scrolling when viewed on a mobile device. Since users are used to scrolling vertically, an abundance of horizontal scrolling may lead to a poor user experience.
This problem can be solved by using fluid grids, which is a basic aspect of responsive web design. Instead of defining fixed sizes, fluid grids define the element size by proportions. As such, regardless of resolution or viewing device, the website will adapt to optimize the user's viewing experience.
If the width of the viewing port becomes too narrow for the content to be displayed in a readable manner, then part of the content should be moved to the bottom. This technique is called column drop.
The homepage may serve as a welcome page for a website that is viewed on a computer, but it should primarily act as a directory of content when it is viewed on a mobile phone.
Navigation of a website may need to change substantially when it is viewed on a mobile device instead of a computer. For example, when there are many navigation options, a navigation drawer may be required. A navigation drawer is a popular navigation style for mobile sites that can be hidden or displayed based on a swipe from the side of the device. Sometimes, navigation options also overflow into a bottom bar. Such design choice is rarely present for sites that are designed to be viewed on computers.
Media queries gather information about the user's viewing device. Then, it applies rules that affect the appearance of a website based on that information. Media queries may affect the orientation of the website (landscape or portrait), whether the content is aligned to the right or to the left, the presence of images, among other things.