When smart phones are now commonly distributed, the web accessibility through a mobile has invigorated. Not just because of smart phones, but because so many devices with various resolutions are available in the market, information cannot be correctly displayed on the web of the previous PC and an appropriate web matching with each resolution should be presented. This thesis will suggest a responsive web design optimized to correctly deliver the same information on all devices by changing a layout according to each resolution by using a single source through a media query. This is expected to raise the effect of advertisement by attracting attention of the public with a simple and comfortable design.
Introduction
Recently, an increased portability and distribution of various mobile devices including smart phones and accordingly, its accessibility going beyond the restrictions of the time and space enabled users to freely access services and information, contributing to a rapid growth of an application market [1]. However, the previous webs were mostly designed only by considering the layouts shown in PC and this resulted in a lot of troubles like having to separately design an appropriate layout or make a private application because of its inability to deliver information when connected through different devices. This situation encouraged an appearance of a responsive web which is a web publishing service adjusted to all the mobile devices and optimized for smart phones, tablets or desktops[2]. They were soon followed by various types of layouts of a responsive web such as Mostly Fluid, Column Drop, Layout Shifter, and Tiny Tweaks. Therefore, this thesis will propose a responsive web design which can make a correct conveyance of the same information through a change of a layout according to each resolution with a single source by using a media query.
2 Related studies
2.1 Responsive web and viewport A responsive web can be realized using a single HTML and source, realizing the optimized screen according to a resolution of each devise without a separate response and thus, provide users with a higher usability and accessibility through a convenient interface[3].
2.2 Media Query In CSS3, a style can be modified using a relevant information about a screen, a width, and a height [4]. A responsive web can be made using a media query. When the resolutions of all the terminals including PC have to be covered, somewhere between 320-1280px needs to be set up and, even though 768-1280px for a tablet and a desktop and 320-1024px for a mobile and a tablet responsive service are appropriate, it can always change depending on a dual motor or other limiting factors.
2.3 Various frame works using a responsive web As many web pages are coming up these days with a more stable structure since HTML5, it is now possible through a lot of studies to use standardized frame works using a responsive web. They include but not limited to Bootstrap, Foundation, Semantic UI, Pure, UI kit and Bootstrap is the most popular now. Bootstrap is designed to have a grid system applied which changes a document area according to the width of a device by using a elastic width like a percentage not a fixed width like px or em for a document area. It can adjust a layout with a CLASS keyword and provide an extension third party plug-in and a theme builder.
2.4 Reset CSS VS Normalize CSS In the past, to make the same design in all browsers, all the properties of elements were initialized using an Eric Meyer’s reset.css file. On the other hand, a normalize.css file realizes a nicer cross browsing by adjusting the properties of HTML elements. It tries to improve a user’s experience and maintain a bug modification and a browser consistent rather than eliminate a useful browser initialization. Therefore, this method is less inconvenient than a reset.css file which requires a reset of a style. This is provided in Bootstrap mentioned above.
2.5 Controlling a font size using a responsive web It is not a common situation to have to do a direct control on a font size because the problem of having a too small size of fonts on the smart phone never happens by adjusting a screen display magnification through a mobile view port set-up. However, a developer can intentionally control it when he intends to arrange a certain number of letters appropriately to a certain size of screen and show a font size at an equal proportion to a dynamic screen size.
3 Draft of a responsive web design
A responsive web was realized using a media query. Without a particular function, a layout was produced and designed so that it could show a different screen according to a resolution. Things like visibility and availability which can best inform users were considered because information of a page can differ depending on the users’ sex, age, interest, etc. Figure 1 and 3 show designs of a restaurant homepage using a responsive web. These designs used the most commonly used Mostly Fluid Pattern styles. They keep the layout adapted to the width of contents by using a floating image that changes the size according to a proportion-based grid. To create a comfort between information exchanges, the color pallet of a material design used by the Google was referred for a choice of colors.
4 Conclusion
This thesis designed a responsive web which can be conveniently used and make an effective delivery of information on each device. It was also designed to look simple and neat for the users’ convenience by getting rid of all the troubles to have to adjust a screen size when watching a PC-based web on a mobile, opening in a toggle method through the minimized sub-menus, and only showing the least but most important information by cutting out less significant elements from the tablet or PC screen. While it has not been long since smart phones started to get distributed which enabled questions to be solved by googling and personal purchasing demands to be relieved online in this 40 million of smart phones era, a responsive web has settled in our daily lives. If this can attract more of people’s attention with its neat and comfortable designs, it can be expected to enhance a purchasing rate or an advertising effect in an internet market.
