Responsive
web design –

 

Abstract

We Will Write a Custom Essay Specifically
For You For Only $13.90/page!


order now

 

Due to the rapid development of the IT industry,
there are many different devices for accessing the web: desktop computers with
a wide range of screen dimensions, tablets, mobile phones, TV-s. Hence there is
a need for adapting the web content layout for different screen dimensions and
resolutions. Responsive web design is a modern technique for that purpose. This
paper considers the implementation of responsive web design in practice. We
conducted a survey and analyzed 470 websites of various categories and
countries and give an analysis on the obtained results.

 

 

Introduction

 

Due
to the evolution of techniques and communication devices in the past decade,
anyone can easily surf around the web using a PC, mobile phone, tablet,
television, game console, etc. All these devices have the ability to access to
the internet, and have their own screen dimensions and use different
resolutions. Hence web designers should take care that the content of their
website is readable and functional on all these resolutions.

 

That
was a motivation for the development of Responsive Web Design (RWD). The term
RWD was first mentioned by Ethan Marcotte in his report published in May 2010
on the portal “A list
apart”.
Therein (Responsive Web Design, 2013) he described theories and the
applications of RWD. One year later, the term RWD was ranged on the second position
on Top Web Design
Trends in
the British e-magazine .net.

 

The
year 2013 was announced in Mash able Inc., the British-American news website, technology
and social media, as a year of RWD, (Mash able, 2013). Hence the idea of the
authors of this paper to investigate the extent to which RWD is implemented in
practice. For that purpose, we checked 470 websites in four different
countries: Serbia, Canada, UK and USA.

The
authors came to the conclusion that it is necessary to educate web designers
and constantly affect to the good organization of the HTML page, so that they
could easily adapt to different resolutions and devices.

Responsive Web Design (RWD)

 

The
main idea of the basic principles of RWD and Rich Internet Applications (RIA)
is Web for All and Web on Everything; see (Karolyn, 2013.). The
essence of this idea is to enable access to the web content for all
existing media. As already stated in the Introduction, nowadays, there are
various types of devices for accessing the Internet that have different screen
dimensions. But users have similar needs when surfing around the web,
regardless of the device they are using. For, example, getting information from
websites created for wide screen computers, accessing the web by mobile phone
can be quite uncomfortable. Hence the need for adapting the layout of the web
content for different screen dimensions and resolutions. On the other hand,
creating different web pages for various devices is a hard work for web
designers, and should also be avoided. Together with the development of the
media industry (mobile phones, ePads, screens), techniques for adapting web
content for different media are developing too. In this context, RWD appears to
be a good solution.

It
is not flexible and not profitable to conduct surveys about what devices users
use for accessing your website and adapting the website according to the
results. The right solution for different user devices is creating a flexible,
smart and adaptive website. In order to do so, one has to take into account
different screen dimensions and resolutions and to adapt the content layout
accordingly. This is a relatively new concept and requires a well organized HTML
structure, as such a structure can be flexible to different devices. Therefore,
it is advisable to pay attention to (Developing responsive, 2013; Images Guide,
2013):

 

·     The
number of columns of the web page should be adaptive to the screen/window dimensions.

·     The
menus and the content have to be displayed according to the interest of the
users

 

·     Images
and videos should dynamically be resized in order to fit the screen width

 

·     Menus,
links and buttons have to be bigger on touch screen devices, so it could enable
a user friendly environment

 

·     The
space between interactive links has to be sufficiently high in order to avoid
an occasional press on small devices like smart phones or tablets

 

·     The
font size and line spacing should be determined to enable easy reading. The
number of columns should also be carefully chosen in that manner.

 

·     Using
CSS3 rules for visual effects instead of images.

 

 

Generally,
the content should not be reduced so extremely, that it becomes hardly
readable. It rather should be adapted to the screen dimensions (Fig. 2). In
other words, it should intelligently re-shape itself for maximum usability and
impact.

 

Creating
a responsive website requires using a proportion-based grid, flexible images
and CSS3 media queries. The proportion-based grid is often called „Fluid grid”.
Its basic idea is that the dimensions of all elements should be given in
relative units, i.e. in percents (%), whereas fixed units like pixels should be
avoided. One should also give flexible dimensions for images which are
proportional to various screen resolutions. CSS media queries allow us to
create different styles for various screen dimensions and devices. On that way,
the web page is displayed using the style which is best adapted to the users
screen dimensions.

 

RWD
limitations

 

Besides
all above mentioned advantages, there are also some limitations of RWD. First
of all, there is no universal screen resolution, which fits all devices. In
other words, the so called „one-size-fits-all” resolution does not exist.
Usually, it is not possible to stretch the web content from the smallest smart
phone to the resolution of the biggest smart TV. The pictures might be of low
resolution and the text might be of low readability. Therefore, it is important
to optimize content to the needs of the business.

 

Besides
RWD, there are some rules which can help adapting the content layout without
changing the elements: After determining the optimal content width just add
margins to fit the rest of the screen. This is what we called semi-responsive
web pages.

A
solution for some of these limitations is prefixes for the CSS3 properties
which make those features working well in various browsers. As shown in the
Table 1, for example the browser Mozilla is using prefix -web kit- .
Overall, in spite of all limitations, the benefit of using RWD is significant.

Statistics
and tools for RWD

According
to (Browser support, 2013), the most commonly used screen resolutions are
1366x768px (mostly for laptops) – 25% and 1900x1200px (desktop computers) – over
30%, mobile phones with resolution 800x480px – 0.5%. Searching the web by using
mobile devices is constantly increasing since 2011. The number of computers
around the world reaches 2 billion, while the number of mobile phone owners is
up to 5 billion. The need for creating responsive web content which can easily
be accessed by using various devices is obvious.

The
survey

 

The
task of this paper will be

 

·     To
examine the presence of responsive web design in Serbia, Canada, UK and USA

 

·     To
comment on usability, representation and legitimacy of using RWD within web
pages. Methods used in the survey for collecting data were: descriptive and
comparative methods.

In this survey, we used two criteria for
assessing the implementation of RWD:

 

·     Behavior
of the web content during View port reducing

 

·     The
content layout on various screens and devices using the aforementioned tool

 

In
our survey, we will classify the observed websites in three categories:

 

·     Fluid
responsive websites,

·     Semi-responsive
websites,

·     Not
responsive websites.

Fluid
responsive websites are complete adaptive to
different screen dimensions and the content is visible on all devices
and resolutions (mobile phones, tablets, laptops and PCs). This can be achieved
in two ways: by including CSS3 media screen queries which give us an
opportunity to implement different CSS rules for different resolutions or one
can use JavaScript or jQuery scripts for dynamic calculating the dimensions and
positions of elements according to the screen dimensions.

Semi-responsive websites
contain a grid of certain dimensions, and their content is adaptive up to
a fixed screen dimension, but the content is no more adaptive on lower screen
dimensions. The grid is mainly centered horizontally, and has such dimensions
to fit a wide range of screen dimensions. In many cases it is the grid of 960px
or 980px width. We call websites semi-responsive:

 

·     If
the width of the main content divider is smaller than the majority of screen
widths and the rest of the page fits as a background, as shown on the Fig.6a
and Fig.6b,

 

·     If
they have some elements which are adaptive to all screens, like menus or link
buttons,

 

·     If
the horizontal navigation bar is moving into a new line without hanging the
font size

 

 

 

 

 

 

 

Conclusions

 

The
results of our RWD survey indicate that the majority of analysed websites are
not created using the latest technologies like CSS3 and HTML5 and are not
adaptive to various resolutions and devices. The commonly used technologies are
HTML4, CSS2, JavaScript, Flash and PHP.

 

Taking
into account the results of our analyses, RWD and new web technologies are
taking big steps to the future, since the need of adapting web sites to various
devices is growing continuously. The majority of web sites created before 2012
are optimized for resolutions of 1024×768 and 1280×1024, with a body width of
800px to 960px.

 

Social
network link buttons and email forms are mostly fluid responsive. Also, the
most popular social networks are fluid responsive. This could be one of the
reasons for their big popularity. Fluid websites are somewhat under represented
today, but they are definitely the future of web design. In fact, creating a
responsive website is a complex process, and costs certainly more than a common
website. One of the problems in implementing RWD is also the lack of knowledge
in this area. In other words, this technology is slowly being introduced into
the curriculum of IT schools. In The Higher Technical school of professional
studies, there are several IT study programs (Web design, Information
Technology, Electronic Business and Multimedia) including web design courses.
The first two authors of this paper are teaching a subject called Internet
Languages and Tools which covers topics RWD techniques.

 

 

Author