2019 International Conference on Machine Learning, Big Data and Business Intelligence (MLBDBI)

The Design and Implementation of Responsive Web

Page Based on HTML5 and CSS3

Nian Li1 Bo Zhang2,*

School of Computer Science, Wuhan Donghu University School of Computer Science, Wuhan Donghu University
Wuhan, China Wuhan, China
[email protected] *Corresponding author’s e-mail: [email protected]

Abstract—The responsive web design solves the compatibility adjust picture resolutions according to the screen sizes of
problems of web pages displayed at different resolutions, different hardware devices or browser windows.
different platforms, and different screen sizes, and also brings
high-quality experience to users. Based on the research on The core design idea of responsive web development is
responsive web design, and related technologies of HTML5 and “mobile priority and progressive enhancement”. “Mobile
CSS3, this paper expounds the design ideas and key technologies Priority” means that when designing a page, we fully consider
of responsive design with a responsive enterprise website. the diversity of the size and resolution of the mobile terminal,
Response web design based on HTML5 and CSS3 has proved to and first design the page effect of the mobile terminal, so as to
be feasible and effective. realize the layout of adaptive mobile terminal. Then the page
effect on the PC side is taken into consideration, which is
Keywords- responsive design; HTML5; CSS3; media query beneficial to enhance the efficiency of web development.
“Progressive Enhancement” refers to the gradual conversion of
I. INTRODUCTION page display from small size to large size under the premise of
giving priority to mobile terminal devices. In the limited
The Internet has entered the Web 2.0 era. At the same time, display space of small size, the content of the page should be
with the development of mobile communication technology, highlighted, and the content performance should be simplified.
more and more smart mobile terminals have been widely used With the size increasing and content unchanged, the
in various industries, which has prompted Internet applications performance of the content should be improved and making the
to adapt to the needs of mobile terminals. Traditional websites page display better.
are designed for PCs. The design of such websites can not
adapt to mobile phones or other mobile device interfaces. In
order to make mobile application devices achieve the best III. CORE TECHNOLOGIES
display effect, special web pages are usually designed
according to the display characteristics of the device itself. A. HTML5—Cross-platform language
Therefore, it has become a hot research topic to make the The cross platform advantage of HTML5 has been shown
mobile devices normally display traditional web pages and in the era of mobile Internet, and it is the only cross platform
improve user experience. language widely applicable to mainstream platforms such as
PC, MAC, Android, Windows Phone, etc. This feature of
In this paper, we study the responsive web page design
HTML5 coincides with the cross platform in “responsive web
technology based on HTML5 and CSS3. Firstly, this paper
design”. The cross platform compatibility of HTML5 language
analyzes the basic idea of responsive web page design, the
makes it have unique advantages in responsive development.
process and key technologies of the responsive web page
development. On this basis, we present a development example
of a responsive enterprise website. The website can adjust the B. CSS3 Media Query Module
page layout by automatically detecting the screen size of the In the past, developers needed to provide different codes for
device, and can ensure that the page content is displayed different devices to ensure the consistency of the effect of web
normally on PC monitors, pads, mobile phones, and other pages. The responsive web page can recognize the screen width,
devices of different resolutions. This design proposal has adjust the layout structure and picture size adaptively according
greatly enhanced the user's experience. to the obtained parameters, and achieve the effect of “one-time
design, universal use”. At the same time, HTML5 and CSS3
II. RESPONSE WEB DESIGN CONCEPT provide technical support for responsive web design.
The idea of responsive Web design development was first The media query module of CSS3 allows to add media
proposed by Ethan Marcotte in 2010. The core idea is to enable query expressions to specify media types and select
web pages to have cross-platform, adaptive, and other functions. corresponding expressions according to different media types.
They can adapt their own parameters, change layout forms, and The definition of media query given by W3C is: “media query

978-1-7281-5094-9/19/$31.00 ©2019 IEEE 373

DOI 10.1109/MLBDBI48998.2019.00084
Authorized licensed use limited to: Tunku Abdul Rahman University of Management & Technology. Downloaded on February 19,2025 at 01:00:35 UTC from IEEE Xplore. Restrictions apply.
 contains media type and zero or more expressions to detect
media characteristics. Width, height, and color are all features
that can be used for media query. Using the media query
function can adapt the web page to different devices without
modifying the content itself.”
CSS3 can be used flexibly to implement mobile Internet
websites by using responsive design patterns. If the system or
browser version of the terminal device supports it, CSS3 can
realize the following functions:
x Adjust the picture specification adaptively according to
the size of hardware display.
x Adjust the page layout adaptively according to the size
of the hardware.
x Hide some unnecessary modules according to the size
of hardware display.
Figure 1. Layout on PCs
Because of the scaling of responsive web pages, when users
use small screen mobile devices for browsing, many pictures or In the small-scale mobile terminal, the page layout will be
content on the original large screen cannot be displayed in the adjusted as follows, which is shown in Figure 2 and Figure 3.
small screen. At this time, we need to delete some content and
ensure that the main content of the deleted page is in. In this x Fold the navigation bar into a pull-down menu.
way, it not only ensures the normal display of page effect, but x Adjust the size of picture to being suitable for the
also improves the page loading speed due to the decrease of mobile device.
page content.
x Font should be reduced appropriately.
C. Fluid Grids x The width of columns in the block “#feature-block”
The fluid grid makes the position of each layer have and“#intro-features” is automatically adjusted to 100%.
flexible characteristics. In a fluid grid layout, the method of
pixel design will be changed to a percentage size or font
proportion, which has the advantage that the layout can be
adjusted automatically according to the obtained media query
parameters.

D. Flexible Images
“Flexible Images” means that the size of pictures is variable.
For example, the size of a picture is 600px*600px. According
to the characteristics of flexible layout, it can be expressed as
the size of 100%. When the proportion of the container changes
on different size displays, the picture will also be resized to fit
the container. So, we can make sure that the picture can adjust
its own size adaptively on different sizes meida, and realize the
responsive change of web pages. Figure 2. #feature-block on mobile devices

IV. WEB DESING AND IMPLEMENTATION

A. Layout Design
In this paper, we have designed a responsive enterprise
website, which needs to be able to adapt to all kinds of mobile
devices such as PCs and pads, and at the same time, it needs to
have a beautiful and generous interface. The home page of the
website is divided into seven modules: #header wrap(logo),
#main navigation, #layerslider, #home-intro, #feature-block,
#intro-features and #copyrights. The specific layout is shown in
Figure 1:
Figure 3. #intro-features on mobile devices

374

Authorized licensed use limited to: Tunku Abdul Rahman University of Management & Technology. Downloaded on February 19,2025 at 01:00:35 UTC from IEEE Xplore. Restrictions apply.
 B. Viewport Design D. Flexible Design
HTML5 adds the viewport parameter to get the width of The flexible design concept of this website is mainly
devices, and also prevents users from zooming the page by reflected in the font size, image size, padding and margin
fixing the viewport size. Viewport provides effective data values. All parameter values are relative size, i.e. percentage or
information for responsive web page design. The specific em, which will automatically adjust the pixel value according
design method is to set the following code at the head of the to the size of the browser or the size of device. This reduces the
page: complexity of the code and improves the user experience. The
key codes are as follows:
<meta name="viewport" content= "width=device-width,
initial-scale=1, maximum-scale=1"> .icon-large:before{vertical-align:-10%; font-size:1.3em;}
[class*="icon-"].icon-fixed-width{width:1.14em;
C. Media query Design
Three different media query functions are set up in this text-align:right;padding-right:0.28em;}
website, which are suitable for PC terminal with window width In addition, we should pay attention to the clarity of the
between 768px-959px, 480px-767px and 320px-479px. The image after zooming in the flexible design. Sometimes it is
original navigation bar on the mobile terminal device will be necessary to make some specific small pictures to match the
set as invisible, and the menu will be placed in a pull-down mobile device, otherwise some pictures may be distorted
folding effect by setting “select” label in the form control. The outside of the automatic scaling. The pictures of slider module
key media query codes are as follows: #layerslider in this website is set with two different sizes. In the
1) When the visual area of browser is between 768px and media query, different sizes picture will be selected according
to different devices.
959px, it is suitable for PCs.
@media only screen and (min-width: 768px) and (max-
width: 959px) { E. Responsive Web Page Instance
The enterprise website in this paper can automatically adapt
#container{width: 794px;} to the size of the user’s device; the website can recognize the
.container {width: 714px;} screen width, automatically adopt the appropriate resolution
and display mode, so as to achieve the best user experience.
} The home page display effect of PCs and mobiles are shown in
2) When the visual area of browser is between 480px and Figure 4 and Figure 5:
767px, it is suitable for pads.
@media only screen and (min-width: 480px) and (max-
width: 767px) {
#container{ width: 440px;}
.container {width: 400px;}
#main-navigation ul{display: none;}
#main-navigation select{margin: 30px 70px; width:300px;}
.after-nav-info{width:100%;
text-align: center;}
#logo{text-align: center; width:100%;
float: left;}
}
3) When the visual area of browser is between 320px and
479px, it is suitable for mobile phones.
@media only screen and (min-width: 320px) and (max-
width: 479px) {
#container{ width: 300px;}
.container {width:260px;}
ĂĂ}

Figure 4. Display effect on PCs

375

Authorized licensed use limited to: Tunku Abdul Rahman University of Management & Technology. Downloaded on February 19,2025 at 01:00:35 UTC from IEEE Xplore. Restrictions apply.
 developed based on HTML5 and CSS3 can automatically adapt
to various resolutions of PCs and different sizes of mobiles,
fully reflecting the characteristics of "one-time design,
universal use ". For developers, it is more efficient and
convenient to update, which can effectively reduce the cost of
time and labor. For users, no matter in PCs, pads or mobile
phones, they can see websites with the same style and content,
and get a better user experience.

ACKNOWLEDGMENT
This paper was co-supported by the Foundation for
Scientific Research Project of Education Department of Hubei
Province under grant B2019272. Thanks for the support of
Wuhan Donghu University. Thank you for providing the
experimental platform in Hubei Education Department and
Wuhan Donghu University. We have completed the
implementation of the algorithm on this platform and the
experimental data is presented.

REFERENCES
[1] J Mazzei.Responsive Web Design[J]. Business NH Magazine, 2012,
9(6): 22-23.
[2] Ethan Marcotte. Responsive Web Design
[EB/OL].http://www.alistapart.com/ articles/ responsive-Web-
design/2010-05-25.
[3] Tim.Kadlec, "Implementing Responsive design" [M], 1st ed. New riders
Berkley, 2012 60-100.
[4] C R Venkatesh. Infographic: Responsive Web Design [J/OL].
http://www.Artofdeveloping.com/2012/09/infographic-responsive Web-
design.html, 2012-08-29.
[5] S Mohorovi ci c. Implementing Responsive Web Design for Enhanced
Web Presence[C]. Information & Communication Technology
Electronics & Microelectronics (MIPRO), 2013,36th International
Convention on IEEE, 2013: 1206-1210.
Figure 5. Display effect on mobile devices [6] M Chowdhary. Responsive Web Design Will Be Expected on All
Devices[J/OL].http://multichannelmerchant.com/crosschannel/responsive-
Webdesign-will-be-expected-on-all-devices-15092012/, 2012-09-15.
V. CONCLUSIONS
In this paper, the effectiveness and feasibility of responsive
web design is verified by a real case. The responsive enterprise

376

Authorized licensed use limited to: Tunku Abdul Rahman University of Management & Technology. Downloaded on February 19,2025 at 01:00:35 UTC from IEEE Xplore. Restrictions apply.