blog




  • Essay / Responsive web design

    Due to the rapid development of the IT sector, there are many different devices for accessing the Web: desktop computers with a wide range of screen dimensions, tablets, mobile phones, televisions. It is therefore necessary to adapt the presentation of web content to different screen dimensions and resolutions. Responsive web design is a modern technique for this purpose. This article considers the implementation of responsive web design in practice. We conducted a survey and analyzed 470 websites from different categories and countries and give an analysis of the results obtained. Due to the evolution of communication techniques and devices over the last decade, anyone can easily surf the web using a PC, mobile phone, tablet, a television, a games console, etc. All of these devices have the ability to access the Internet, and have their own screen dimensions and use different resolutions. Say no to plagiarism. Get a tailor-made essay on “Why Violent Video Games Should Not Be Banned”? Get an Original Essay Therefore, web designers must ensure that their website content is readable and functional on all these resolutions. This is what motivated 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 portal “A list apart”. In this document (Responsive Web Design, 2013), he describes the theories and applications of RWD. A year later, the term RWD ranked second among the top web design trends in the British electronic magazine .net. The year 2013 was announced by Mashable Inc., the British-American news, technology and social media website, as a year of RWD (Mashable, 2013). Hence the idea of ​​the authors of this article to study to what extent RWD is implemented in practice. To this end, we checked 470 websites in four different countries: Serbia, Canada, United Kingdom and United States. The authors came to the conclusion that it is necessary to train web designers and constantly take care of the correct 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 a web about everything; see (Karolyn, 2013.). The essence of this idea is to provide access to web content for all existing media. As we have already stated in the introduction, today there are different types of devices that provide access to the Internet and have different screen dimensions. But users have similar needs when surfing the web, regardless of the device they use. For example, getting information from websites created for widescreen computers, accessing the web via mobile phone can be quite uncomfortable. Hence the need to adapt the layout of web content to different screen dimensions and resolutions. On the other hand, creating different web pages for different devices is a difficult job for web designers and should also be avoided. Alongside the development of the media industry (mobile phones, iPods, screens), techniques for adapting Web content to different media are also developing. In this context, RWD appears to be a good solution. It is neither flexible nor cost-effective to conduct surveys on the devices users use to access your website and adapt the website based on the results. The right solution for different user devicesis about creating a flexible, intelligent and responsive website. This requires taking into account different screen dimensions and resolutions and adapting the content layout accordingly. This is a relatively new concept that requires a well-organized HTML structure because such a structure can be flexible for different devices. Therefore, it is advisable to pay attention to (Developing responsive, 2013; Images Guide, 2013): • The number of columns of the web page should be adaptive to the screen/window dimensions. • Menus and content should be displayed according to users' interest • Images and videos should be dynamically resized to fit the screen width • Menus, links and buttons should be larger on devices with touch screen, in order to allow a user-friendly environment • The space between interactive links must be high enough to avoid occasional pressing on small devices such as smartphones or tablets. • Font size and line spacing should be determined to allow easy reading. The number of columns should also be carefully chosen in this way. • Using CSS3 rules for visual effects instead of images. As a general rule, content should not be so reduced that it becomes difficult to read. Instead, it should be adapted to the dimensions of the screen (Fig. 2). In other words, it must reshape itself intelligently for maximum use and impact. Creating a responsive website requires the use of an aspect ratio-based grid, flexible images, and CSS3 media queries. The proportional grid is often called a “Fluid Grid”. Its basic idea is that the dimensions of all elements should be given in relative units, i.e. percentages (%), while fixed units like pixels should be avoided. It is also appropriate to give flexible dimensions to images, proportional to different screen resolutions. CSS media queries allow us to create different styles for different screen dimensions and devices. In this way, the web page is displayed in the style best suited to the user's screen dimensions. Limitations of RWD Apart from all the advantages mentioned above, RWD also has some limitations. First of all, there is no universal screen resolution that fits all devices. In other words, the so-called “one size fits all” resolution does not exist. Usually, it is not possible to scale web content from the smallest smartphone to the resolution of the largest smart TV. Images may be low resolution and text may be difficult to read. Therefore, it is important to optimize the content according to the business needs, there are certain rules that can help adapt the content layout without changing the elements: After determining the content. the optimal content width simply adds margins to fit the rest of the screen. This is what we call semi-responsive web pages. A solution to some of these limitations is prefixed CSS3 properties, which allows these features to work correctly in various browsers. In Table 1, for example, the Mozilla browser uses the -web kit- prefix. Overall, despite all the limitations, the benefit of using RWD is significant. According to (Browser support, 2013), the most. commonly used screen resolutions are 1366x768px (mainly for laptops) - 25% and 1900x1200px (desktops) - more than 30%, mobile phones with a resolution of 800x480px - 0.5%. Web search using mobile devices is constantly increasing.