responsive web design
Due to the rapid development of the IT sector, there are many different products for accessing the web: computer’s desktop computers which has a wide range of screen dimensions, tablets, mobile phones, TV-s. Hence there is also a need for establishing the web articles layout several screen dimensions and resolutions. Responsive website development is a contemporary technique for that purpose. This kind of paper thinks the implementation of responsive web design in practice. We conducted a review and examined 470 websites of various categories and countries and give an analysis from the obtained benefits. Due to the progression of methods and interaction devices before decade, any individual can easily browse the web using a PC, mobile phone, tablet, television, game console, etc . All these devices have the ability to get the internet, and also have their own screen dimensions and use several resolutions.
Therefore web designers should take care that the content with their website is usually readable and functional on all these resolutions. That was obviously a motivation for the development of Reactive Web Design (RWD). The term RWD was first pointed out by Ethan Marcotte in the report released in May 2010 on the site “A list apart”. In it (Responsive Web site design, 2013) he described ideas and the applications of RWD. One year later, the definition of RWD was ranged on the second placement on Top Website development Trends in the British e-magazine. net. The year 2013 was announced in Mashable Incorporation., the British-American news website, technology, and social media, as being a year of RWD, (Mashable, 2013). Consequently the idea of the authors of this paper to look at the magnitude to which RWD is executed in practice. For this purpose, we all checked 470 websites in four different countries: Serbia, Canada, great britain and the UNITED STATES. The authors came to the conclusion that it is necessary to teach web designers and constantly influence to the good organization in the HTML webpage so that they may easily adapt to different resolutions and equipment. Responsive Web Design (RWD) The primary idea of the fundamental principles of RWD and Rich Internet Applications (RIA) is a Net for All and Web on Everything, see (Karolyn, 2013. ).
The substance of this idea is to enable access to the internet content for all those existing multimedia. As previously stated in the Introduction, nowadays, there are various types of devices for getting at the Internet that has different display dimensions. But users have similar demands when searching the web, regardless of the device they are really using. For, example, receiving information from websites designed for widescreen computer systems, accessing the internet by cellular phone can be quite uncomfortable. Hence the need for adapting the layout of the site content for different display dimensions and resolutions. However, creating distinct web pages for various products is a work for web site designers, and should also be avoided. Along with the development of the media market (mobile mobile phones, iPods, screens), techniques for changing web content for different media happen to be developing also. In this circumstance, RWD appears to be a good solution. It is not necessarily flexible and not profitable to conduct research about what products users use for being able to access your website and adapting the website according to the effects. The right remedy for different consumer devices can be creating a adaptable, smart and adaptive internet site. In order to do so , one has to take into account different screen dimensions and resolutions and to adapt the information layout accordingly. This is a new idea and requires a proper organized CODE structure, as a result a structure can be versatile to different gadgets. Therefore , it is advisable to pay attention to (Developing responsive, 2013, Images Guidebook, 2013): ¢ The number of content of the web site should be adaptive to the screen/window dimensions. ¢ The selections and the content have to be exhibited according to the fascination of the users ¢ Videos and images should effectively be resized in order to fit the display width ¢ Menus, links, and buttons have to be bigger on touch screen devices, therefore it could allow a user-friendly environment ¢ The space among interactive backlinks has to be adequately high in so that it will avoid an intermittent press upon small gadgets like cell phones or tablets ¢ The font size and collection spacing must be determined to enable easy examining.
The number of articles should also be carefully chosen in that manner. ¢ Applying CSS3 rules for visual effects instead of images. Generally, the content should not be lowered so incredibly, that it turns into hardly readable. It somewhat should be modified to the screen dimensions (Fig. 2). Quite simply, it should smartly re-shape itself for maximum usability and impact. Setting up a responsive internet site requires by using a proportion-based main grid, flexible pictures, and CSS3 media concerns. The proportion-based grid is often called žFluid grid”. The basic idea is that the proportions of all components should be given in relative products, i. electronic. in percents (%), whereas fixed models like -pixels should be avoided.
One should likewise give versatile dimensions pertaining to images which are proportional to various screen resolutions. CSS mass media queries enable us to create different styles for various display dimensions and devices. In that way, the web webpage is displayed using the style which is best adapted for the users display screen dimensions. RWD limitations Besides all above-mentioned advantages, you can also get some restrictions of RWD. First of all, you cannot find any universal display resolution, which usually fits most devices. Basically, the alleged žone-size-fits-all image resolution does not can be found. Usually, not necessarily possible to stretch the web content in the smallest smartphone to the resolution of the biggest smart TELEVISION. The pictures could possibly be of low resolution as well as the text could be of low readability. Therefore , it is important to optimize happy to the requirements of the business. Besides RWD, there are some rules which can help to adapt the content layout without changing the elements: Following determining the optimal content size just add margins to match the rest of the display. This is what we called semi-responsive web pages.
A simple solution for some of such limitations is definitely prefixed to get the CSS3 properties which make those features working well at various browsers. As proven in Stand 1, for instance , the web browser Mozilla is definitely using word -web kit-. Overall, inspite of all limitations, the benefit of employing RWD can be significant. Stats and equipment for RWD According to (Browser support, 2013), the most commonly used display resolutions happen to be 1366x768px (mostly for laptops) 25% and 1900x1200px (desktop computers) more than 30%, mobiles with quality 800x480px 0. 5%. Looking the web by utilizing mobile devices is continually increasing since 2011. The number of computers around the globe reaches two billion, while the number of cellular phone owners is about 5 billion dollars. The need for creating responsive web content which can quickly be reached by using numerous devices is usually obvious. The survey The work of this daily news will be ¢ To examine the existence of responsive web page design in Serbia, Canada, UK and USA ¢ To comment on simplicity, representation, and legitimacy of using RWD within websites. Methods found in the review for collecting data were: descriptive and comparative strategies. In this review, we employed two requirements for examining the implementation of RWD: ¢ The behaviour of the content during Viewport reducing ¢ The content layout on various screens and devices using the aforementioned device In our study, we can classify the observed websites into three categories: ¢ Fluid responsive websites, ¢ Semi-responsive websites, ¢ Not really responsive websites.
Fluid receptive websites happen to be complete adaptable to different screen dimensions and the content is visible on all devices and resolutions (mobile phones, tablets, laptops, and PCs). This could be achieved in two ways: by simply including CSS3 media screen queries which give us a chance to implement several CSS rules for different promises or one can use JavaScript or jQuery scripts for dynamic determining the sizes and positions of components according to the display dimensions. Semi-responsive websites include a grid of certain sizes, and their articles is adaptable up to a set screen dimension, but the content material is no more adaptive about lower display screen dimensions. The grid is primarily centered flat and has such dimensions to fit an array of screen measurements. In many cases is it doesn’t grid of 960px or perhaps 980px breadth. We call up websites semi-responsive: ¢ In the event the width from the main content material divider is smaller than almost all screen sizes and the remaining portion of the page suits as a background, as demonstrated in the Fig. 6a and Fig. 6b, ¢ In the event they have a lot of elements that happen to be adaptive for all screens, like menus or perhaps link keys, ¢ If the horizontal nav bar is usually moving into a brand new line without changing the font size The effects of our RWD survey reveal that the majority of analyzed websites are not created using the most up-to-date technologies just like CSS3 and HTML5 and are not adaptable to various resolutions and equipment.
The widely used technologies happen to be HTML4, CSS2, JavaScript, Expensive, and PHP. Taking into account the results of your analyses, RWD and new web systems are taking big steps in the future, since the requirement of adapting websites to various devices is growing continuously. The majority of websites created ahead of 2012 are optimized for resolutions of 1024768 and 12801024, having a body width of 800px to 960px. Social network hyperlink buttons and email varieties are mostly substance responsive. Likewise, the most popular great example of such are smooth responsive. This might be one of the reasons for his or her big recognition.
Fluid websites are relatively underrepresented today, but they are definitely the future of web design. In fact , making a responsive site is a complicated process, and costs undoubtedly more than a common website. Among the problems in implementing RWD is also the possible lack of knowledge in this field. In other words, this kind of technology can be slowly becoming introduced into the curriculum of IT schools. Inside the Higher Specialized school of professional research, there are several THAT study courses (Web design, Information Technology, Electronic Business and Multimedia) including web design training. The first two experts of this daily news are teaching a subject called Internet Languages and Tools which covers subject areas RWD approaches.
