WHAT IS RESPONSIVE DESIGN
Responsive website design or RWD is the approach that allows you to change the page layout based on the width of the browser window (along with other factors). It enables designers to make the text and images easy to read and view on any device, without the need to create multiple versions of the same website.
3 BASIC IDEAS OF RESPONSIVE DESIGN
1) A flexible grid for layout
Since smartphones have a broad range of screen widths, there is no point in creating pages with a fixed width. Instead, it is better to develop a page that can expand and narrow to fit on the particular device display.
2) A flexible environment for images and videos
Creating a flexible environment allows designers to select the scale for images and videos so they match the corresponding display – large photos for large screens, smaller photos for smaller ones.
3) Media queries CSS
Finally, media queries enable to send various styles to the browser based on the conditions created. For example, you can send one set of styles for 480 pixels screen, and another one for 760 pixels screen. Moreover, there are no limits which parameter to choose: you can develop styles that apply only to tablet devices in landscape mode or to devices with a high pixel density.
WHICH SYSTEM DESIGN TO FOCUS ON: DESKTOP OR MOBILE?
There is no need to create three separate sets of styles for each of the devices you target. The better option is at first to create an original design that works without media queries. You can easily improve the user experience: add media query styles to replace the original styles and reformat the page for a specific width of the screen. There are two main approaches for this.
Focus on desktop systems
Designers can develop websites with a focus on desktop systems. Enter all the required columns. Master the design so that it looks good on a large monitor. All styles can be removed to an external style sheet and linked to the pages of your site in the usual way.
Then you can add media queries for tablet and phone devices. Styles of these media queries adjust the design for desktop systems to new conditions: for example, they delete columns or reduce font headings. This approach has a solid advantage: browsers that do not understand media queries get the basic styles for desktops.
Focus on mobile systems
You can do the opposite and first develop a design for mobile systems. In this case, the basic styles, intended for a small screen, are placed in the regular external style sheet. On the next stage, the design is refined for tablet and desktop devices by adding columns and other adjustments for large screens.
General rule
Whatever method you choose, it is essential to use a regular external style sheet linked to a web page in the usual way. This style sheet includes all styles that are common to different devices. For example, all website versions require the same colour palette and the same fonts. You can also use the same styles for links, images, and other HTML elements. In other words, you do not need to create three completely separate sets of styles for each device, start with one set that applies to all browsers, both phones, tablets and desktops, and then refine the design for the devices targeted by media queries.
RESPONSIVE DESIGN TESTING
The easiest way to test media queries is to browse the page on the desktop changing the browser screen. Drag the border of the window, making it thinner, and see what happens on each checkpoint or on each media request you set.
There are also several web tools that allow you to view pages on screens of different sizes. The site Responsivepx lets you enter the URL of the page on the Internet, then specify various parameters for the width and height of the screen. Then site opens the page in the <iframe> -tag with the chosen width. Browsers use any media queries related to this width of the screen, so you have the opportunity to view the result of your media queries.
ADVANTAGES OF RESPONSIVE WEBSITE DESIGN
- Easy to develop and change. As the responsive website is developed on one single code base, there is no need to build a number of websites. This fact gives you further benefit regarding search engine optimization as Google prefers websites with a single code base. Indeed, RWD makes it much easier for designers and developers to manage the content source.
- One website for all screen sizes. A responsive website responds to the width of the browser and optimises the content to fit these dimensions. For example, if a display size is too small, it hides large images and some elements to make the content more convenient to view and read.
POSSIBLE DISADVANTAGES
- Loading speed. Websites with responsive design are built in HTML5 that is linked with CSS styles. The point is that each device loads all the data. Even if a part of the overall content is not visible on a particular device, it is still loaded. As it takes time, even a few seconds of delay can cost your website a potential user.
- Mobile browser compatibility. You may be surprised by the fact that there are still some browsers that do not support HTML5. The fair point is that these browsers are mostly installed on older devices.
As you can see, responsive website design presents many benefits both for designers and end-users. It is an effective solution to provide visitors with an easier way to access the content. Some limitations of using this approach are easily overcome by putting more attention on the design process of your website.