Responsive Web Design for Mobile Device Screen Optimization

Abstract

The robust development of the telecommunication technologies has boosted the massive production of the mobile devices such as smartphones, phablets, tablets, and laptops. The use of these mobile devices has experienced an explosive growth and come in vary screen sizes. This development has changed the way how web contents is organized and displayed on screen. This paper compares the different responsive approaches, which works well with various device screens. However, the main focus of this paper is on Responsive Web Design (RWD) since it is highly applicable. RWD techniques and tools, issues and reviews of RWD are also discussed in this paper. The objectives of this paper are finding the best responsive approach, identifying well practices and suggesting future works. Along this line, this paper serves, as a guide that enables designers and developers to gain better understanding of the RWD and hence improve their productivity.

Resposive Web Design According to Resolutions

“…A combination of techniques used to create RWD, there are integral ingratiate, a flexible grid-based layout, flexible images and media, and media queries [1] [5] [6]. We need flexible content for RWD.…”

“…They don't work in responsive environment. Marcotte, provide solution by giving maximum width constraint rule of CSS for every image to avoid the exceeded T IJOART width of containers [1] [3]. By applying maximum width of image 100% and for flexible embed videos, the same technology may be used to find the solution of such problem [8].…”

“…It is allowed to resize the content and re-arrange as the percentagebased width of website grid contracts [7]. Pettit has recommended fluid layout that is designed exactly according to the proportion of echo page element in percentage [1].…”

“…980px/1920=50% It is a difficult work, but developer's life has become less miserable since many frameworks available in the market such as Bootstrap, Foundation, Gumby, Semantic UI and many other similar products [1].…”

“…67% Google survey of respondents prefers purchase from a mobile friendly website [2]. Now it has become a hug challenge to design a website for all browsers, operating systems and all devices [1]. Design and development of a web should design a properly response and settlement according to a user's platform, screen orientation, screen size and so on [4].…”