1 / 17

RESPONSIVE WEB DESIGN

The main plan of the essential principles of RWD and wealthy net Applications (RIA) is web for All and web on Everything, see (Karolić, 2013.). The essence of this concept is to alter access to the online content for all existing media

Télécharger la présentation

RESPONSIVE WEB DESIGN

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. RESPONSIVE WEB DESIGN

  2. INTRODUCTION • Due to the evolution of techniques and communication devices within the past decade, anyone will simply surf around the web using a computer, mobile phone, tablet, television, game console, etc. all these devices have the power to access to the internet, and have their own screen dimensions and use completely different resolutions. thence web designers ought to make sure that the content of their web site is legible and functional one of these resolutions.

  3. RESPONSIVE WEB DESIGN • The main plan of the essential principles of RWD and wealthy net Applications (RIA) is web for All and web on Everything, see (Karolić, 2013.). The essence of this concept is to alter access to the online content for all existing media. As already explicit within the Introduction, nowadays, there are various varieties of devices for accessing the web that have completely different screen dimensions. however, users have similar wants once surfing around the web, irrespective of the device they're mistreatment. For, example, obtaining info from websites created for projection screen computers, accessing the online by mobile phone can be quite uncomfortable. thence the necessity for adapting the layout of the web content for various screen dimensions and resolutions

  4. In the last four years, there's a rise for quite forty-five of the utilization of mobile phones for accessing the online. The calculable range of individuals accessing the web per mobile phone is about one.1 billion (Musti, Kashyap, 2013.). consistent with a prediction of the Ericsson company, (Vanguardngr, 2014), the number of mobile phone users can reach nine billion in 2018. it's expected that good phones keep the leader position among different mobile devices

  5. It is not versatile and not profitable to conduct surveys regarding what devices users use for accessing your website and adapting the web site consistent with the results. the correct answer for various user devices is making a versatile, good and adaptative web site. in order to do, therefore, one needs to take into consideration completely different screen dimensions and resolutions and to adapt the content layout consequently. this is a comparatively new idea and needs a well-organized HTML structure, as such a structure will be versatile to completely different devices. Therefore, it's judicious to listen to (Developing responsive, 2013; pictures Guide, 2013):

  6. The number of columns of the web page ought to be adaptative to the screen/window• dimensions • The menus and therefore the content must be displayed consistent with the interest of the users' • Pictures and videos ought to dynamically be resized in order to suit the screen dimension • Menus, links, and buttons must be larger on bit screen devices, therefore it might alter a user-friendly environment • The area between interactive links needs to be sufficiently high in order to avoid occasional prolong small devices like good phones or tablets • The font size and line spacing ought to be determined to alter the simple reading. the number of columns ought to even be carefully chosen in this manner. • Using CSS3 rules for visual effects rather than pictures

  7. RWD LIMITATIONS • Besides all on top of mentioned blessings, there are some limitations of RWD. 1st of all, there's no universal screen resolution, which inserts all devices. In different words, the therefore known as „one-size-fits-all" resolution doesn't exist. Usually, it's not possible to stretch the online content from the littlest good phone to the resolution of the most important smart TV. the images can be of low resolution and therefore the text can be of low readability. Therefore, it's vital to optimize content to the requirements of the business. • Besides RWD, there are some rules which might facilitate adapting the content layout while not ever-changing the elements: once deciding the optimum content dimension simply add margins to suit the remainder of the screen. this is often what we called semi-responsive sites.

  8. One of the constraints of RWD is that some older net browsers don't support CSS3 media queries. In Table one the browser support of some CSS3 rules concerning properties remodels and transition are bestowed. • A solution for a few of those limitations are prefixes for the CSS3 properties that build those options operating well in varied browsers. As shown within Table one, for instance, the browser Mozzila is mistreatment prefix -webkit-. Overall, in spite of all limitations, the advantage of mistreatment RWD is critical.

  9. STATISTICS AND TOOLS FOR RWD • According to (Browser support, 2013), the foremost unremarkably used screen resolutions are 1366x768px (mostly for laptops) - twenty five and 1900x1200px (desktop computers) - over thirtieth, mobile phones with resolution 800x480px - zero.5%. looking out the online by mistreatment mobile devices is continually increasing since 2011. the quantity of computers around the world reaches a pair of billion, whereas the quantity of itinerant house owners is up to five billion. the necessity for making a responsive web page which might simply be accessed by mistreatment varied devices is clear.

  10. THE SURVEY The task of this paper is • To look at the presence of responsive web design in Serbia, Canada, UK and USA • To comment on usability, illustration, and legitimacy of using RWD among sites. Methods employed in the survey for grouping knowledge were: descriptive and comparative ways. during this survey, we used 2 criteria for assessing the implementation of RWD: • The behavior of the online content throughout reading port reducing • The content layout on varied screens and devices mistreatment the said tool In our survey, we are going to classify the determined websites in 3 categories: • Fluid responsive websites, • Semi-responsive websites, • Not responsive websites.

  11. FLUID RESPONSIVE • Websites are complete Adaptative to completely different screen dimensions and therefore the content is visible on all devices and resolutions (mobile phones, tablets, laptops, and PCs). This could be achieved in 2 ways: by together with CSS3 media screen queries that provide US a chance to implement completely different CSS rules for various resolutions or one can use JavaScript or query scripts for dynamic calculating the size and positions of components consistent with the screen dimensions.

  12. SEMI-RESPONSIVE • websites contain a grid of bound dimensions, and their content is adaptative up to a hard and fast screen dimension, however, the content isn't any additional adaptative on lower screen dimensions. The grid is especially targeted horizontally and has such dimensions to suit a good vary of screen dimensions. In several cases it's the grid of 960px or 980px dimension. we tend to decision websites semi-responsive:

  13. If the dimension of the most content divider is smaller than the bulk of screen widths and therefore the remainder of the page fits as a background. • If they need some components that are adaptative to all or any screens, like menus or link buttons, • If the horizontal navigation bar is going in a replacement line while not ever- changing the font size

  14. NOT RESPONSIVE • websites have components with fastened dimensions and don't modification consistent with the various devices and screen resolutions. • In our survey, we checked the utilization of RWD of internet sites of varied classes like real estates, hotels, bookstores, bike stores, music instruments, doctors, dentists, restaurants, foreign language faculties, flower retailers, home appliances, etc. we tested 470 websites in total from four completely different countries: Serbia, Canada, USA, and the UK. • In our survey, we checked 117 websites of the on top of the listed classes from Serbia and obtained the following results: RWD is found on only seventeenth websites. the bulk of websites are semi-responsive (56%), and twenty-seven of the checked websites don't seem to be responsive. From the obtained results we are able to conclude that RWD isn't gifted normally in Serbia

  15. CONCLUSIONS • The results of our RWD survey indicate that the bulk of analyzed websites don't seem to be created mistreatment the newest technologies like CSS3 and HTML5 and don't seem to be adaptative to numerous resolutions and devices. The unremarkably used technologies are HTML4, CSS2, JavaScript, Flash, and PHP. • Taking into consideration the results of our analyses, RWD and new net technologies are taking huge steps to the long run, since the necessity of adapting websites to numerous devices is growing incessantly. the bulk of websites created before 2012 are optimized for resolutions of 1024x768 and 1280x1024, with a body dimension of 800px to 960px. • Social network link buttons and email forms are largely fluid responsive. Also, the foremost common social networks are fluid responsive. this might be one among the explanations for his or her huge quality

  16. Web Design Company in Chennai @ Oceansoftwares • • If you are seeking to get a good Web Design Company in Chennai, then OCEANSOFTWARES should be the first and the foremost option. • • We are named as the best Web Development Company in Chennai • for providing the IT Services • • Rated as NO 1 Leading Web Design and Application Development Company in Chennai

More Related