Topic > Responsive web design

Due to the rapid development of the IT industry, there are many different devices for accessing the web: desktop computers with a wide range of screen sizes, tablets, mobile phones, TVs. Therefore it is necessary to adapt the layout of the web content to different screen sizes and resolutions. Responsive web design is a modern technique for this purpose. This article considers the practical implementation of responsive web design. We conducted a survey and analyzed 470 websites from various categories and countries and provide an analysis of the results obtained. Due to the evolution of communication techniques and devices over the last decade, anyone can easily browse the Internet using a PC, mobile phone, tablet, television, game console, etc. All of these devices have the ability to access the Internet and have their own customize screen sizes and use different resolutions. Say no to plagiarism. Get a tailor-made essay on "Why Violent Video Games Shouldn't Be Banned"? Get an original essay So web designers should take care that the content of their website is readable and functional at all these resolutions. This was a motivation for the development of Responsive Web Design (RWD). The term RWD was first mentioned by Ethan Marcotte in his report published in May 2010 on the “A list apart” portal. In it (Responsive Web Design, 2013) he described the theories and applications of RWD. A year later, the term RWD was ranked second in the Top Web Design Trends ranking in the British electronic magazine .net. The year 2013 was announced on Mashable Inc., the British-American news, technology and social media website, as the year of RWD (Mashable, 2013). Hence the idea of ​​the authors of this article to investigate to what extent RWD is implemented in practice. For this purpose we checked 470 websites in four different countries: Serbia, Canada, the United Kingdom and the United States. The authors came to the conclusion that it is necessary to educate web designers and constantly take care of the good organization of the HTML page so that they can easily adapt to different resolutions and devices. Responsive Web Design (RWD) The main idea of ​​the basic principles of RWD and Rich Internet Applications (RIA) is a Web for all and Web on Everything; see (Karolyn, 2013.). The essence of this idea is to enable access to web content for all existing media. As already mentioned in the introduction, nowadays there are various types of Internet access devices that have different screen sizes. But users have similar needs when browsing the web, regardless of the device they use. For example, when obtaining information from websites created for widescreen computers, accessing the web via mobile phone can be quite inconvenient. Hence the need to adapt the layout of web content to different screen sizes and resolutions. On the other hand, creating different web pages for different devices is hard work for web designers and should be avoided. Along with the development of the media industry (mobile phones, iPods, screens), techniques are also being developed to adapt web content to different media. In this context, RWD seems to be a good solution. It is neither flexible nor profitable to survey the devices users use to access your website and adapt your website based on the results. The right solution for different user devices is to create a flexible, intelligent and adaptive website. To do this you need to take into account the different screen sizes and resolutions and adapt the content layout accordingly. This is a relatively new concept andrequires a well-organized HTML structure, since that structure can be flexible to different devices. Therefore it is advisable to pay attention to (Developing responsive, 2013; Images Guide, 2013): • The number of columns of the web page must be adaptive to the size of the screen/window. • Menus and content should be displayed based on user interest • Images and videos should be dynamically resized to fit the width of the screen • Menus, links and buttons should be larger on touchscreen devices, to allow for a more user-friendly environment -friendly • The space between interactive links must be high enough to avoid occasional printing on small devices such as smartphones or tablets. • Font size and line spacing should be determined to allow for easy reading. The number of columns should also be carefully chosen in this way. • Using CSS3 rules for visual effects instead of images. In general, the content should not be reduced so excessively that it becomes difficult to read. It should rather be adapted to the screen size (Fig. 2). In other words, it should intelligently reshape itself to achieve maximum usability and impact. Creating a responsive website requires using an aspect ratio-based grid, flexible images, and CSS3 media queries. Aspect ratio based grid is often called “fluid grid”. Its basic idea is that the dimensions of all elements should be indicated in relative units, i.e. in percentages (%), while fixed units such as pixels should be avoided. You should also provide flexible image sizes that are proportional to various screen resolutions. CSS media queries allow us to create different styles for various screen sizes and devices. This way the web page is displayed using the style that best suits the user's screen size. Limitations of RWD In addition to all the benefits mentioned above, there are also some limitations of RWD. First of all, there is no universal screen resolution, suitable for all devices. In other words, the so-called “one size fits all” resolution does not exist. It is usually not possible to extend web content from the smallest smartphone to the resolution of the largest smart TV. Images may be of low resolution and text may be difficult to read. Therefore, it is important to optimize the content according to the needs of the company, there are some rules that can help adapt the layout of the content without changing the elements: After determining the optimal width of the content simply add margins to adapt them to the rest of the screen. This is what we called semi-responsive web pages. A workaround for some of these limitations is preset CSS3 properties that make such features work well in various browsers in Table 1, for example, the Mozilla browser uses the -web kit- prefix. Overall, despite all the limitations, the benefit from using RWD is significant According to (Browser Support, 2013). commonly used screen resolutions are 1366x768px (mainly for laptops) - 25% and 1900x1200px (desktop computers) - more than 30%, mobile phones with resolution 800x480px - 0.5%. Web searches via mobile devices have been steadily increasing since 2011. The number of computers in the world reaches 2 billion, while the number of mobile phone owners reaches up to 5 billion. The need to create responsive web content that can be easily accessed using various devices is obvious. The investigation The task of this article will be: •.