2014 IEEE Workshop on Advanced Research and Technology in Industry Applications (WARTIA)

Responsive Web Design Mode and Application

Wei Jiang, Meng Zhang, Bin Zhou, Yujian Jiang, Yingwei Zhang
Electronic Information Engineering School
Communication University of China
Beijing, China
[email protected]

Abstract—Responsive web design have receive a popular And in the website building process, "responsive design"
attention in recent years because of they can meet a variety of use a same set of codes to make web content properly
internet terminals resolution. This paper will discuss how to displayed on the PC, tablet and smart-phone browsers. Now,
use Media Queries, Bootstrap responsive navigation, and more and more web developers want to meet all of the
layout of streaming technology to achieve responsive web operating environments by building a flexible website.
design. And make a rational analysis about responsive web Through different development process, we can know
development at the present stage. that, besides designing in accordance with the standard
desktop browser, “waterfall model” almost did not consider
Keywords- Responsive, Flow layout, Media Queries,
Bootstrap
any other design and development environment, which have
become its biggest drawback. While "responsive design"
have taken these cross-platform issues into account from the
I. INTRODUCTION beginning, so that it can complete pre-patterned framework,
With the rapid development of mobile Internet, Internet design and testing in more detail. But these works have been
terminals are increasingly designed in many ways, the screen omitted in “waterfall model” precisely. Once the website
size of the device meets the different needs of users, but the design based on response design completed, it will be
size of the site is impossible to design a dedicated interface presented on the PC, mobile devices and tablet computers in
for each device. Therefore, responsive web design get appropriate way.
progressively generate and more widely used. Responsive Of course, as one of the most popular front-end website
Web Design (Responsive Web Design, RWD), integrate development technologies in recent years, “responsive
three kinds of existing development skills (flexible network design” have became more in-depth with continually
pattern, flexible pictures, media and media inquiries) and exploration, while some practical problems appeared during
named responsive Web design. Its essence is to design a web so many designers have applied this technology on their
content display mechanism in perfect layout for any device. website.
Responsive design is not only changing the page-layout
based on the size of the viewport, but also to subvert the A. Main advantages
whole methods from the current design. Formerly, web
designers fixed width design for the desktop computer, then  User-friendly: more and more mobile devices
zoomed out and rearranged content for the small screen . enhance the user experience. Obviously, responsive
Design and Development of the web page should make an Web design have provided users a friendly Web
appropriate response and adjustment according to user's interface, because it can be adapted to almost all
system platform, screen size, screen orientation and so on. devices' screen.
That means no matter what screen size of the device is being  Less Maintenance: Develop a responsive website,
used, we should be able to switch the page resolution, picture maintenance costs will be minimal, because it has
size and related scripting capabilities automatically, so as to only one layout which can work on all types of
adapt to different devices. equipment and significantly reduce the workload. To
explore a separate mobile site, actually two separate
sites, designers need to maintain the two sites at the
same time, and what's more tedious is that the data
II. CURRENT SITUATION ANALYSIS are not synchronize between two sites.
Most Web pages used a design method called “waterfall  No additional domain names: If you use responsive
model”. It starts with analyzing the system requirements, and websites, it’s will be only one site. But if you are
then set out to design the front-end and background, finally using a mobile website, there are two sites, you need
evaluate and implement. Linear nature is the main feature of to configure an additional separate domain.
“waterfall model”. The whole process of the design is
developed by a series of sequential stages which promote the
work just along a single direction.

978-1-4799-6989-0/14/$31.00©2014 IEEE 1303

 2014 IEEE Workshop on Advanced Research and Technology in Industry Applications (WARTIA)

B. Problems If set a views which are compatible with iPad and

 So many code pages cause files increased which iPhone , the code is:
affect loading speed obviously. In order to fit /**iPad**/
different devices, responsive design requires a lot of @media only screen and (min-width:768px) and (max-
width:1024px){}
specialized CSS and JavaScript codes, which affects
the page loading speed. /*iPhone*/
@media only screen and (min-width:320px) and (max-
 Generally in response design, pictures, videos and width:767px){}
other resources are uniform loading. It resulted that
when loading on a low resolution device with B. Bootstrap responsive navigation
pictures or videos which display requirements are Bootstrap , launched by Twitter , is an open source
higher than the device’s specifications, unnecessary package for front-end development . It is also a CSS /
flow will waste and load speed will be impacted. HTML framework. Bootstrap offers an elegant specification
 In recent years, responsive design's application rate of HTML and CSS , which is written by Less , a kind of
are low to large portal or e-commerce websites. dynamic CSS language . It will unite the nature of elements
Because the basic principle of “responsive design” is which have been already defined and provide for users to
giving users same content even on different devices
calling , that's what make the front-end Web development
(such as deleting some content on low resolution
devices). And there are so many single web pages on greatly facilitated. The response navigation which
large portal or e-commerce websites. When reducing developed on the basis of the bootstrap, is a small
on low-resolution devices as well as ensuring the JavaScript plugin and only 1.7KB after compression, we can
content can be browsed by whole, the page will be create switchable navigation for the small screen. It supports
stretched inevitably, increasing the difficulty of touch screen and CSS3 transition effects, with very good
browsing. performance. And it also supports transition from height: 0
to height: auto, which is rarely achieved in CSS3 transition
effects.
III. IMPLEMENTATION First, setting in CSS:
This paper discusses the use of the Media Queries, html , body{min-width:1333px}
Bootstrap responsive navigation, and Flow layout (defined It will set the minimum width of the page as same as the
web content width by percentage) and other technologies to users' device own resolution, so the page will not deform.
achieve responsive web design. Min-width is the property of CSS2, so compatibility is good.
First, we should introduce a line of code to the head tag: Then, CSS responsive documents haven’t joined the default
of Bootstrap, so it should be introduced into the header file
<meta name=”viewport” content=”width=device-width, on the basis of <meta> have been to:
initial-scale=1, maximum-scale=1, user-scalable=no”> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
So that, in this way, we can use bootstrap to achieve
This is a description of the viewport, most mobile responsive navigation.
browsers will enlarge the width of the HTML page’s view
(viewport) to comply with the screen resolution. Use meta C. Flow layout(defined web content width by percentage )
tag to reset the view. Here the setting means that using When a user narrow the browser window , often find that
device's width as view width and prohibiting the initial a part of the contents in the original page can not be
scaling width. Default scaling is 1. displayed in the browser. To view this part, users need to
A. Media Queries operate the horizontal or vertical scroll bar that appears in
browser. This not only causes inconvenience to browse the
Media Queries module of CSS3 is the core elements of web, but also have difficulties in printing on different sizes
responsive design, we can set the CSS styles for the device of paper. There are two key points of flow layout: first, all
according to the characteristics of the display. Use a few involved DIV modules in the layout are set to float: left;
lines of codes, we can change the contents of the page Second, widths are expressed by percentage. For example,
displayed according to the width of the viewport, screen ratio, we defined a CSS rule: div#content {width:70%;}. That
device orientation (landscape or portrait) or other features. means div # content width is 70% of the width of its parent
There are many kinds of media properties. But element. Thus, when the browser window is resized, div #
responsive design mainly use characteristics which can judge content width will change.
screen size like max-width or min-width and judge the
orientation of device like feature of orientation. Setting CSS Making examples according to above method are as
styles through the different screen sizes range, you can follows:
define the display of all devices in a CSS style sheet. How
meticulous the range have been delineated will decide the
compatible breadth of responsive design devices.
If a terminal’s resolution is less than 980px, the code is:
@meadia screen and （max-width：980px）{}；

1304
 2014 IEEE Workshop on Advanced Research and Technology in Industry Applications (WARTIA)

Overall, Bootstrap almost supports all latest versions of

browsers. In the Windows platform, it supports Internet
Explorer 8-11. Bootstrap's compatibility also performed well
in Chrome(Linux version), Firefox(Linux version) and
Internet Explorer 7 , although not its official support. More
detail information are in the following table:

Figure 1. PC 1280*1024

However, some CSS3 and HTML5 properties can not

show good compatibility on Internet Explorer 8 and 9. For
example:

Figure 2. iPad 2048*1536

In addition, in order to support Media Queries , Internet
Explorer 8 need coordinate with Respond.js.
Bsie, a kind of IE6 compatibility library belongs to
Bootstrap, make up the pity that caused by IE6
incompatibility issue. Currently, Bise support most
properties of bootstrap on IE6, but there also have some
properties that couldn't support. Bise Usage: First ,introduced
CSS file to <head> tag , and then introduced Bise CSS patch
file:
<link rel=”stylesheet” type=”text/css”
href=”boostrap/css/boostrap-ie6.css”>
<link rel=”stylesheet”type=”text/css”href=”boostrap/css/ie.css0”>

Finally add JavaScript file and Bise JavaScript patch file

to the end of HTML document.
Overall, responsive web which used Bootstrap to achieve
usually have better compatibility for browser.

Figure 3. iPhone 640*1136

V. CONCLUSION
The web, based on responsive design, can adapt to the
IV. BROWSER COMPATIBILITY ANALYSIS environment of browsing device automatically and
In order to achieve responsive web design, it's inevitable independent of the device itself . It largely avoid iterative
to discuss compatibility issues about HTML5, CSS3 and development which caused by the differences between
Bootstrap on the client browser .Our analysis mainly focus browsing equipment. Not only improve the efficiency, save a
on the world's three major browsers: Chrome, Internet lot of manpower and material resources, but also ensure the
Explorer and Firefox.

1305
 2014 IEEE Workshop on Advanced Research and Technology in Industry Applications (WARTIA)

consistency of view pages between desktop output devices and key technology of web collaboration services platform,
and mobile terminals. Project number: 2012BAH02F04) and Engineering Project
Of course, we cannot agree that responsive web is the of CUC (Founding item: Research on resources cooperative
best solution to all the problems of design and content scheduling problem and optimization technique based on
services. As same as web design in the past, a project’s entertainment performance chains, Project number:
specific circumstances (such as budget, target users, and site 3132013XNG1305) for their help and support.
uses) determine its way of implementation. According to the
experiences we already have, if your budget is limited or not REFERENCES
feasible to develop a mobile website, comparing with
standard fixed-width design, responsive design always [1] Qian Wen, HTML + CSS web design and layout from the entry to the
provide a better and non-discriminatory users' experience . master, Beijing: The People’s Posts and telecommunications
Following the principle of giving priority to moving, the first Press ,2008.
interface is usually designed for mobile devices and then [2] XiJie LIU, Lin LIU, HTML, CSS, JavaScript web production from
the entry to the master , Beijing: The People’s Posts and
make PC as an extension. So, mobile terminals don’t load telecommunications Press ,2013.
extra resources, don’t redraw the pages of different style in
[3] XinQi He,Website building and web design from entry to the master ,
PC terminals, which may affect the performance of the PC. Beijing: The People’s Posts and telecommunications Press ,2008.
You can use the method described in this paper, [4] HaiYing Mi, Responsive Web Design for different devices, Suzhou
transforming the web site that has already existed, satisfying Vocational University, vol 6 ,2013
users' different devices by achieving responsive web design. [5] SongJian Cui, Responsive Web Design, Information and Computer,
vol 10, 2013
ACKNOWLEDGMENT [6] ShuMing Zhang, Design and implementation of responsive Web
I would like to thank the National Science and design, Computer and Modernization, vol 6, 2013
Technology Support Program (Foundation project: Research
on the manage systems for entertainment performance chains

1306