This essay is an attempt to
discuss how responsive web design is affecting web design and its users or
visitors to websites. It discusses the meaning of responsive web design, its
importance, techniques and features. Challenges faced with responsive web
designs and how they can be avoided will be further discussed and in
conclusion, the future of responsive web design and expectation of users will
be pointed out.
Over the years, access to the
Internet using mobile devices is rapidly increasing. As it stands today, it is
more than one-fifth of the total Internet usage.
Mobile devices such as
smartphones and tablets are capable of connecting to the Internet and are
easily accessible, thereby causing the rise in Internet usage using them. This
is an indication that web designers and developers should consider mobile
devices while designing or developing a web application. The display size of
mobile devices is different from the regular desktop; which means that they
interact in a different way and so should the design. Tablets and smartphones
have smaller screen sizes compared to desktop computers which limits them to
the amount of information they can display without any input from the user such
According to the Smashing
Magazine (2011), most organizations or clients want a mobile version of their
website. Practically, it is very essential because different designs for
different devices and all screen resolutions must be compatible too. Very soon,
there will likely be the need for additional inventions.
Responsive Web Design
It is worth to mention that
Responsive Web Design started back as far as 2010. It came as the interaction
between humans and devices, especially mobile devices (tablets and smart phones).
Ethan Marcotte, author of
Responsive Web Design (2011) defines Responsive web design through fluid
layouts, flexible images and media queries. He further states: “But in recent years, a relatively new design
discipline called “responsive architecture” has been challenging some of the
permanence at the heart of the architectural discipline. It is a very young
discipline, but this more interactive form has already manifested itself in
several interesting ways. Artists have experimented with surfaces that react to
your voice with a music of their own, and with living spaces that can reform
themselves to better fit their occupants. One company has produced “smart glass
technology” that can become opaque once a room’s occupants reaches a certain
density threshold, affording them an additional layer of privacy. And by
combining tensile materials and embedded robotics, a German design consultancy
has created a “wall” that can bend and flex as people approach it, potentially
creating more or less space as the size of the crowd requires”.
Kholmatova, (2017) defined Responsive
web design as the approach that design, and development should response to the
user’s behavior and environment based on screen size, platform and orientation.
In addition, Frian (2012) states
that responsive web design makes web pages look good and attractive on all
devices (computers, phones and tablets). It is about resizing, shrinking,
hiding, enlarging or moving content to make it look good on any screen using
HTML and CSS.
With the transformation of web
design techniques, the whole idea of creating a specific design for each group
of users is not required. With responsive web design, a website automatically
adjusts itself without the need to create any customized solution for various
categories of users.
Importance of Responsive Web Design
the past, only desktop computers were used for browsing websites. It was not
important then for website developers to design a responsive website. But
presently, we are in an era where people want to use the latest and best
gadgets. This lead to invention of more and more new technologies. With the
emergence of these technologies and gadgets, people want to browse faster
without any stress. This development encouraged website developers to adopt the
responsive design to enable users browse with any device. The website is
designed in such a way that it gives the users information in different screen
sizes and resolutions. Businesses and e-commerce websites have a greater
advantage using the responsive designs because it allows their visitors to use
their websites with any type of device they own.
thing that has become clear is that mobile devices (tablets and smartphones)
are rapidly taking over internet browsing. The use of these devices is not
limited to browsing only. They are used for everything from online shopping,
checking emails, social media and a lot more. For this reason, the responsive
design is very important so that users can enjoy browsing with their mobile
Techniques of Responsive Web Design
Adaptive or responsive layouts
are used in implementing a responsive website. Scaling content proportionally
in between breakpoints and identifying breakpoints where the layout needs to
change are the two techniques that are generally used. These techniques are
further examined below:
content: The most common method used to achieve this is the CSS3 media
queries. It enhances site experience and makes the screen size large by adding
additional columns. It also hides low priority content for smaller screens.
Pictures are the beauty of a website which makes it rich and inviting to all
users. A major setback around pictures that frustrates user experience is the
page load time. Pictures and other media are the biggest consumers of bandwidth
on websites. They add up to a great amount of megabytes of content which the
browser must download and render especially users that use 3G networks on their
mobile devices. The use of CSS3 can help developers improve performance of a
responsive website. Most recent browsers support CSS3 features which can reduce
the number of image downloads a user needs while browsing a site. Another
users to download the right image size for the right context.
media query conditions have been met and decides what resources to download.
For example, if a user posts an image on a website, the developer can decide a
break point or threshold for the quality to be displayed (large or small screen
experience) and based on this decision, it allocates the right amount of
bandwidth required to download the image. The use of Custom JS Libraries also helps
in identifying the size and resolution of the user’s device and deliver a
scaled-down version of the source image to the device.
Body text and header text are the two ways a website communicates content to
its users. Most websites feature a great deal of content, blogs and articles
for user consumption. A mobile device user wants to read the same content that
is displayed on a desktop or laptop computer. The width of the content’s body
is scaled to match the screen size. Because text blocks are normally readable
when they do not exceed 66 characters, optimizing a website responsively can
improve the overall experience of the user especially if the site depends on
readability of long articles. Headers (usually in HTML format) are styled to
ensure that they stand out to break content flow and not just using large font
size attributes. This is achieved by inserting spacious margins and padding.
There are various available open source solutions that can be used. An example
Form Fields: Websites that require users to fill forms must ensure that
interaction for touch users is minimized. This is very important especially in
situations where there is a considerable amount of text inputs. In designing a
responsive site, developers can make use of HTML5 which extends the type
attribute and allows the developer to add a semantic meaning to the textbox.
Recent browsers, specifically those on touch screen devices have a feature of
optimizing the layout of the on-screen keyboard. They have the capabilities of
distinguishing between numbers and alphabets. For example, if the user taps the
telephone number field, the keyboard automatically displays a number pad. If
the user wants to input email, the keyboard is smart to bring up the ‘@’ and
‘.com’ keys to minimize typing. This improves the overall experience of the
Features of Responsive Web Design
Responsive web design is not
limited to screen resolution or resizing images. It has completely changed the
way websites are designed these days because of the features that enhance an
excellent user experience. Some of the features are explained
User Experience: An Excellent responsive design will offer users an
optimized and outstanding experience regardless of which device they use. It
adjusts the device’s screen size so that the user does not through multiple
pages to look for the content they are trying to find. One interesting finding
is that Google adopted the best responsive design for their website to give
mobile device users a smooth experience.
Efforts: Responsive designs allows developers to upload content once,
instead of uploading it on different versions of the website. This saves time,
resources and energy that would have been spent on uploading content on
different sites for different devices.
Engine Optimization: Everyday, search engines are getting smatter and know
how to distinguish between desktop and mobile websites. Most search engines
display responsive sites at the top of their search results.
Maintenance: Developing different versions of websites for different
devices increases the workload of developers because they effect changes on
more than one website. For responsive websites, changes are made once because
there is only one layout that works on all devices thereby reducing the developer’s
efforts and workload.
Statistics for a responsive website are split into two i.e. mobile and
desktops. This allows the website administrator to get a complete insight of
visitors depending on which type of device they are using. The administrator
can view either mobile only or desktop only visitors or both.
Challenges of Responsive Web Design
Responsive web design has some
few challenges that can easily be fixed. Some of these challenges and how they
can be avoided are explained below:
The three bars also known as ‘Hamburger Menu’ still serve as navigation menu on
most websites. However, websites with a structure that is complicated makes it
frustrating for users to navigate beyond the hamburger menu. This can be
avoided if the website developer tests the navigation on different screen
sizes. The developer must design a self-explanatory navigation to enable even a
new user, access the site with ease. The navigation menu gives an insight into
the website content and it could help in making a right navigation decision.
Compatibility: Older versions of Internet Explorer are not compatible with
a responsive website because they do not support CSS3 Media Queries. The
contents of a responsive site do not display properly on a mobile device. To
to make changes in page layouts.
Downtime: Due to high traffic from both mobile and desktop users, a
responsive site may become very slow to load. Another contributing factor is
the weight of the site, which contributes greatly to slow loading. A research
by Evans Technology indicates that “74% of users abandon sites that take more
than five seconds to load or provide what they expect”. To avoid this issue,
conditional loading could be enabled for the websites. This means that the site
loads only what the user needs.
tables on small screens: Tables have many rows and columns which makes it
very difficult to appear on small screens. They become a nuisance for the user
especially when they are complex. Responsive tablets are the solution to this
challenge. Ideally, a smaller table with horizontal scrolling can also solve
the issue or a link to the full table can be provided.
Future of Responsive Web Design
Presently, it is almost
impossible to develop a website that is not responsive. It has reached a stage
that most website developers tag responsive web design and web design as the
same thing. The rapid increase in the adoption of responsive design can be related
to the expansion of the mobile web. Designer depot reported in some statistics
that more than 50% of internet browsing traffic is done through the mobile
thereby making responsive design an economic need.
An area where responsive design
will make an impact is on the design for wearable devices. Presently, wearable
devices like the Apple Watch or Samsung Gear do not have browsers. A user can
monitor flight status on a wearable device, but cannot book for a flight. An
investor can read the tweets of a company CEO, but cannot read the company’s
annual report. If responsive design focuses on navigation as one of the key
areas of development, notable changes are likely to appear in wearable devices.
With the existence of Audio input on modern devices (Siri, Alexa, Cortana,
Bixby), browsing can be taken up to another level. We can imagine a technology
called ‘Audio Browsing’! Audio output already exist in the form of screen
readers and when technology is frequently innovative, it is expected to take some
time for standards to evolve.
In a more practical term, the
future of responsive web design means dropping the mobile-first, and adopting
the audio-first approach, which will be the next generation of web browsing.
This essay has discussed what
responsive web design is, the importance, techniques, features, challenges and
what it can be in the future. All these are not the final solution to the
dynamic mobile world. Responsive web design, if properly implemented is just
one out of many concepts that can improve user experience and satisfaction, but
it cannot completely satisfy every user, platform or device. As new devices and
technologies are emerging every day, there is the need for continuous
improvement to integrate with the new devices and technologies. This will
enhance the overall user experience and satisfaction.
(2012). Responsive web design with HTML5 and CSS3. Packt Publishing
Gardner, B. S.
(2011). Responsive web design: Enriching the user experience. Sigma Journal:
Inside the Digital Ecosystem, 11(1), 13-19.
Kholmatova, A. (2017). Design Systems. Smashing Magazine
(2011). Responsive web design: What it is and how to use it. Smashing
Magazine, 12, 234-262.
(2011). Responsive web design: A book apart n° 4. Editions
Magazine. (2011). Professional Web Design: The Best of Smashing
Magazine (Vol. 10). John Wiley & Sons.