Abstract
Responsive web design (RWD) is an approach to web development that automatically adapts itself to different browsers and screen sizes of users whether it is a large desktop screen or a small smartphone. The current state of the art in RWD clearly focuses on two most effective technologies namely the CSS Grid and the CSS Flexbox [1,8]. This paper provides deep analyses and comparisons of these two technologies showing their flaws and cons. Based on these comparisons the paper proposes a Responsive Web Application Design (RWAD) model combining these two technologies by adopting their advantages and discarding their disadvantages. Combining these two technologies has been done before in the well-known package of Bootstrap (latest version 5) [2]. However, it is very difficult if not impossible in Bootstrap to correct any errors unless restarting from the beginning and reloading huge amount of library codes [3] most of which may be irrelevant to the application in question. In RWAD, the CSS Grid and the CSS Flexbox techniques are combined with the ability to correct, maintain, and update the RWD site directly without restarting the whole process or reloading any external codes. This of course saves human and computer time and space. Hence providing an efficient implementation of responsive sites.