User experience of responsive web on multi-device environment

멀티 디바이스 환경에서 반응형 웹의 사용자 경험

  • 강재신 (청운대학교 멀티미디어학과) ;
  • 이영주 (청운대학교 멀티미디어학과)
  • Received : 2018.09.04
  • Accepted : 2018.11.20
  • Published : 2018.11.28


This study investigated how layouts can be arranged to improve the user experience in response to changes in the size of responsive webs in a multi - device environment. The layout elements of the responsive web are largely divided into a header, a main concept image, a main content, a sub-content, and a footer. As the screen becomes smaller, the use of drawers and the menu of the scrolling menus rather than the vertical menus will help improve the user experience. The main concept image should be consistent and not lose readability through the use of system fonts. The main content and the sub content should be prevented from being long in the vertical scroll, and the card UI, the table list and the grid list could be alternatively presented for this purpose. Another problem with vertical scrolling is that the placement of user-selectable menus, such as more or new content corrections, is helpful in improving the user experience.


Multi-device environment;Responsive web;Adaptive web;Grid pattern;User experience

DJTJBT_2018_v16n11_465_f0001.png 이미지

Fig. 1. List Menu

DJTJBT_2018_v16n11_465_f0002.png 이미지

Fig. 2. Scrolling Menu

DJTJBT_2018_v16n11_465_f0003.png 이미지

Fig. 3. Metro UI

DJTJBT_2018_v16n11_465_f0004.png 이미지

Fig. 4. Change of column

DJTJBT_2018_v16n11_465_f0005.png 이미지

Fig. 5. Scrolling Menu with images

DJTJBT_2018_v16n11_465_f0006.png 이미지

Fig. 6. More button


Supported by : Chungwoon University


  1. W. Luke. (2007). Mobile first, Seoul : Web Actual Korea.
  2. S. K. Choi. (2011) Proliferation of N-Screen service and future prospect of content business. Seoul : Kocca Focus.
  3. M. Ethan. (2014). Responsive Web Design, USA : Eyrolles.
  4. M. Firtman. (07.22.2014). You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy. -web-design-should-not-be-your-only-mobile-strategy/
  5. Y. I. Hong. (2011). Layout and grid to complete the design, Seoul : Mijinsa.
  6. Y. J. Lee. (2018). Mobile UI / UX Design Practice, Seoul : Hanbit Academy.
  7. M. K. Lee. (2015). Secrets of good looking things, editing & grids, Seoul : Gilbut
  8. Y. J. Lee. (2018, May). A Study on Grid of Responsive Web, 2018 Korea Academic-Industrial Science Society Spring Conference, 6-8.
  9. D. I. Hoffman & T. P. Novak. (1996). Marketing in Hypermedia CMEs: Conceptual Foundations. Journal of Marketing, 60(3), 50-68.
  10. M. Hassenzahl & N. Tractinsky. (2006). User experience-a research agenda. Behaviour & Information Technology, 25(2), 91-97.
  11. J. Y. Kim. (2013). An Exploratory Study on the User Experience Design Factors Forming Flow with Smart phones, Korean Society For Computer Game, 24(3), 69-178.
  12. S. M. An. (2016) Study on Web-related Spatial Design Research Trend. Journal of digital convergence, 18(8), 481-492.
  13. S. U. Pi & M. S. Lee. (2016). An Exploratory Study on the User Experience of Augmented Reality Advertising. Journal of digital convergence, 14(8), 177-183.
  14. J. Y. Sung. (2016). Developing convergent class model of augmented reality and ar. Journal of digital convergence, 14(5), 85-93.
  15. D. H. Kim & M. H. Kim. (2015). Design of Mixed reality based edutainment system using cloud service Journal of the Korea Convergence Society, 6(3), 103-109.