Suroyya Wongsalam
ABSTRACT
At present, web users may access web sites from various computing devices and the ability to access the web sites on all screen sizes is very important. Responsive web design is an approach that makes web contents render well on desktop, notebook, tablet, and smartphone platforms by adapting to different screen sizes. To facilitate web developers, this paper proposes a visual user interface design and front-end code generation tool for web sites based on responsive web design principles that were compiled from different sources. The principles cover the design of different web elements including navigation, image, layout, form, and text. The proposed responsive web design tool lets any web developer create a visual design of the web UI for the smartphone platform first, and then the tool will automatically create the visual designs for other platforms as well as generate front-end code for all platforms. In an evaluation by experts who are experienced web-based software engineers, all experts strongly agreed that the web UI designed by the tool followed the responsive web design principles correctly. In addition, the experts used a cognitive walkthrough method to evaluate usability of the UI of a responsive web site that was designed by the tool. The experts also agreed that usability of the web UI that was designed by the tool was still attained on all screen sizes.
- Avery, J. and Simple Things. Responsive Web Design Is. [Online]. Available from: https://responsivedesign.is/patterns/. Last access: July 31, 2019.Google Scholar
- bradfrost.github.io. Responsive Patterns. [Online]. Available from: https://bradfrost.github.io/this-is-responsive/patterns.html. Last access: July 31, 2019.Google Scholar
- Casalánguida, H. and Durán, J.E. 2015. User interface design for responsive web applications. In Proceedings of 11th International Conference in Web Information Systems and Technologies (Lisbon, Portugal, May 20-22, 2015). WEBIST '15. SCITEPRESS, Setúbal, Portugal. 104--111. DOI= 10.5220/0005454101040111.Google Scholar
- getbootstrap.com. Bootstrap. [Online]. Available from: http://getbootstrap.com/. Last access: July 31, 2019.Google Scholar
- Gillenwater, Z. M. Examples of Flexible Layouts with CSS3 Media Queries. [Online]. Available from: http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/. Last access: July 31, 2019.Google Scholar
- Graham, G. (2017). Fluid Typography. [Online]. Available from: https://css-tricks.com/snippets/css/fluid-typography/?fbclid=IwAR2VMp5VAZMGEiHVe2RHaXKnZNa3N3cdh-K5rEcF2NH3wXxanC8_2V_V3-I. Last access: July 31, 2019.Google Scholar
- Katajisto, L. (2015). Creating support content for responsive websites at Microsoft Mobile. In Proceedings of 2015 IEEE International Professional Communication Conference (Limerick, Ireland, July 12-15, 2015). IPCC '15. IEEE, New York, NY. 4 pages. DOI=10.1109/IPCC.2015.7235787.Google ScholarCross Ref
- LePage, P. Responsive Web Design Patterns. [Online]. Available from: https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns. Last access: July 31, 2019.Google Scholar
- Marcotte, E. 2009. Fluid Grids. [Online]. Available from: https://alistapart.com/article/fluidgrids. Last access: July 31, 2019.Google Scholar
- Marcotte, E. 2011. Fluid Images. [Online]. Available from: http://www.alistapart.com/articles/fluid-images/. Last access: July 31, 2019.Google Scholar
- Marcotte, E. 2015. Responsive Design Patterns & Principles. A Book Apart, New York, New York.Google Scholar
- Mozilla. Using Media Queries. [Online]. Available from: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. Last access: July 31, 2019.Google Scholar
- Plechawska-Wojcik, M., Mora, S. L., and Wojcik, L. 2013. Assessment of user experience with responsive web applications using expert method and cognitive walkthrough a case study. In Proceedings of the15th International Conference on Enterprise Information Systems (Barcelona, Spain, April 27-30, 2015). ICEIS '15. SCITEPRESS, Setúbal, Portugal. 111--118. DOI=10.5220/0004443001110118.Google Scholar
- Ribeiro, J. and Carvalhais, M. 2012. Web design patterns for mobile devices. In Proceedings of the 19th Conference on Pattern Languages of Programs (Tucson, Arizona, October 19--21, 2012). PLoP '12. The Hillside Group, USA, 48 pages.Google Scholar
- Shukairy, A. How A Cognitive Walkthrough Can Improve Website Usability and Conversions. [Online]. Available from: https://www.invespcro.com/blog/how-a-cognitive-walkthrough-can-improve-website-usability-and-conversions/. Last access: July 31, 2019.Google Scholar
- Walsh, T.A., McMinn, P., and Kapfhammer, G.M. 2015. Automatic detection of potential layout faults following changes to responsive web pages. In Proceedings of 2015 30th IEEE/ACM International Conference on Automated Software Engineering (Lincoln, NE, USA, November 9--13, 2015). ASE '15. IEEE, New York, NY, 709--714. DOI=10.1109/ASE.2015.31.Google Scholar
- Wix. Wix.com. [Online]. Available from: https://www.wix.com/. Last access: July 31, 2019.Google Scholar
- Zurb. Foundation. [Online]. Avalilable from: https://foundation.zurb.com/. Last access: July 31, 2019.Google Scholar
Index Terms
- Visual Design and Code Generation of User Interface Based on Responsive Web Design Approach
Recommendations
Responsive and Personalized Web Layouts with Integer Programming
EICSOver the past decade, responsive web design (RWD) has become the de facto standard for adapting web pages to a wide range of devices used for browsing. While RWD has improved the usability of web pages, it is not without drawbacks and limitations: ...
Responsive design for transaction banking - a responsible approach
APCHI '13: Proceedings of the 11th Asia Pacific Conference on Computer Human InteractionWith the fast growth rate of Internet enabled devices capable of displaying the full web, designing responsively is becoming the next big paradigm shift in web design and development. This case study presents the prototype driven -mobile first design ...
Study and Implementation of an Online Visual Design Tool for Web Pages
ISISE '10: Proceedings of the 2010 Third International Symposium on Information Science and EngineeringDesign and development of web pages were traditionally conducted by professional staff, which usually can't satisfy various users' individual requirement. Therefore, the study of a highly efficient, personalized, and visual design tool for web pages is ...
Comments