Responsive Universal Design with Universal User Profiles and CSS User Queries

Hao-Wen Yang, Hsing Mei

2014

Abstract

Accompanying the rapid progressing of information and communication technology, the number of webbased mobile applications grows significantly. The web page design does bring different user experiences on various mobile devices. The Responsive Web Design (RWD) was the first trial to deal with this issue. RWD aimed at designing adaptive web interface for different mobile devices. However, RWD consider only the difference of devices, but not the users, especially the needs of elders. This paper proposes the Responsive Universal Design (RUD), an enhancement of RWD, to consider both the devices and users. A unique Universal User Profile (UUP) is maintained for each user on device. Based on UUP, CSS User Queries functions are used to adjust the user interface dynamically with the best experience. RUD can increase the flexibility of web design, and improve user experience. A JavaScript library is implemented for build/load UUP, to parse user queries, and to apply CSS styles. This paper reports a critical step to create a universal and user-oriented web environment.

References

  1. Ethan Marcotte. (2010). Responsive Web Design. Retrieved from: http://www.alistapart.com/articles/ responsive-web-design/
  2. Hsing Mei, Vhien-Chang Hsu, and Wei-Ting Lai. (2008). Mashup a Reliable Virtual Health 2.0 Testbed Environment. Proceedings of the 4th Taiwan Conference on Software Engineering, 277-282.
  3. Yan-Ting Lin, Chia-Hao Lin, Xiang-Lin Wen, ChingYang Hung and Hsing Mei. (2012). Joyful Health Space: An Age Friendly Testbed for Responsive Web Design. Orange Beneficence - International Design Conference of Smart Living for Elderly, 178-186.
  4. F. Rivoal, H. Lie, T. Çelik, D. Glazman and A. van Kesteren. (2012). Media Queries, W3C Recommendation 19 June 2012. Retrieved form: http://www.w3.org/TR/css3-mediaqueries/
  5. William Lidwell, Kritina Holden and Jill Butler. (2010). Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design(2nd ed.). New York: Rockport Publishers.
  6. Jesse James Garrett. (2010). The elements of user experience: user- centered design for the Web and beyond (2nd ed.). San Francisco: New Riders Press
  7. Scott Jehl. (2011). Respond.js. Retrived from: https://github.com/scottjehl/Respond
Download


Paper Citation


in Harvard Style

Yang H. and Mei H. (2014). Responsive Universal Design with Universal User Profiles and CSS User Queries . In Proceedings of the Fourth International Symposium on Business Modeling and Software Design - Volume 1: BMSD, ISBN 978-989-758-032-1, pages 255-260. DOI: 10.5220/0005426802550260


in Bibtex Style

@conference{bmsd14,
author={Hao-Wen Yang and Hsing Mei},
title={Responsive Universal Design with Universal User Profiles and CSS User Queries},
booktitle={Proceedings of the Fourth International Symposium on Business Modeling and Software Design - Volume 1: BMSD,},
year={2014},
pages={255-260},
publisher={SciTePress},
organization={INSTICC},
doi={10.5220/0005426802550260},
isbn={978-989-758-032-1},
}


in EndNote Style

TY - CONF
JO - Proceedings of the Fourth International Symposium on Business Modeling and Software Design - Volume 1: BMSD,
TI - Responsive Universal Design with Universal User Profiles and CSS User Queries
SN - 978-989-758-032-1
AU - Yang H.
AU - Mei H.
PY - 2014
SP - 255
EP - 260
DO - 10.5220/0005426802550260