Responsive Web Design Using Material Design Guidelines

Posted on by : admin Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

A. Responsive Web Design

Responsive Web Design (RWD) is taking HTML5 and CSS3 web technologies into account in building a responsive web page or front-end layout. Responsive web design uses three main ingredients, i.e., a fluid and flexible grid-based layout, flexible images and media, and a module from CSS3: media queries [1]. Fluid layout assigns relative units to the page elements instead of absolute units like pixels or points. In RWD, the design of a web page can respond to user’s needs by adapting it to the constraints of the browser window or device that renders it. Therefore, RWD ensures a web page screenlayout, texts, images, navigation elements, video players, and other UI elements will re-adjust themselves. Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes. One quick way to make media scalable is by using an element’s max-width property with a value of 100% or specifies the width of the content area as percentages of its viewport [8]. By doing so, when the viewport gets smaller any media will also be scaled down following its container width. Media queries make possible to switch between different style sheets based on the features of the device in which the webpage is rendered, mainly the width of the screen. According to [9], there are several advantages of RWD in designing a web page. The website will be very flexible because the contents may move freely across all screen resolutions. The user experience will be excellent, and it will be cost-effective as it is easier to manage, to share, and to interact with the content.

B. Material Design

Guidelines Material Design Guidelines (MDG) provides several patterns in designing Responsive UI when transforming desktop web page layout into a tablet computer and smartphone screen, i.e., Reveal, Transform, Divide, Reflow, Expand, and Position [10]. In maximizing the available space on a small screen size, MDG Reveal pattern suggests UI element be hidden entirely or partially as if in a hamburger menu. The Transform pattern transforms one UI appearance into another look, such as converting the grid view into a linear list view. MDG also suggests a guidance to organize column conversion into one, two or three columns. The Divide pattern converts columns by arranging layout elements, such as layers, side navigations, list contents, detailed contents, left and right panels, and tab controls. Reflow pattern provides a concept of how to convert multiple columns into a smaller number of columns by changing the layout combination. As the screen size is changing, the Expand pattern enables resizing and reshaping the contents. Lastly, the Position pattern moves web page contents and elements to a specified position to be fit in the available space.

C. User-Centered Design

User-Centered Design (UCD) is a term used to describe a design process that involves end users to engage in the design process of web page design [11]. UCD is a user-centered approach to support the system development process. To build a system that is easy to use for the user, this concept is very suitable to implement. It put an added value to the user, because of user’s needs, wants, and interests become the focus of a usability in web page design. User’s familiarity with the user interface will provide a better experience in mobile application usability [12].

However, in determining the target of users, users can be selected from any category but must still be following the user criteria [13], and they should not know about the being evaluated products. There are four core principles in UCD according to [14] that must be put into considerations when developing a product using UCD. First, the requirements analysis and specification were centered on usage. Second, the design of user interface is structured and put innovation into natural interaction. Third, performs early and continuous usability assessment, evaluation, and improvement. Lastly, the project management quality procedures are human-centric. When these principles are implemented in all of the software development phases, it will undoubtedly yield a useful product.