Responsive Web Design This Session is created for "Information Technology" Subject Created By Heru Wijayanto, @ 2020

1. ResponsiveWeb Design
- A Future of Web Designing
Heru Wijayanto Aripradono
heru@sociopreneur.id

2. 2

3. 3

4. BACKGROUND
4
• And then for some websites, there is a mobile
website that is separate from the regular desktop
site.
• This type of site displays at full size when you load
it on your smartphone (no zooming necessary),
but you’ll notice that it’s often very different from
the same website when you view it on your
desktop monitor—there’s often a lot of content
missing, so the site owner can cut down on the
work involved in maintaining multiple versions of
the site.

5. RESPONSIVE WEB DESIGN
5

6. The term Responsive means ,
To provide
“Responses or Adaptiveness
Quickly and Positively”
to the users.

7. What Really Happened Behind
UX Iceberg - http://conversionxl.com/8-effective-ways-of-measuring-ux/
This is what people see
uxtactics.com

8. WHAT ISARESPONSIVE WEB DESIGN?
8
• A Responsive Web Design refers to
“Creating a Catalog of Multi-Device
Layout patterns”.
• Responsive design, overall, is a way to
make websites that can be easily
viewed and used on any type of
device and size of screen, all the way
from the smallest mobile phones up
to the widest desktop monitors.

9. Responsive?
Responsive Web Design…
Means that a web site works optimally
well for users regardless of the device
they are using.
The core of RWD is a media query, a
request for the resolution of the users’
viewport.
http://mashable.com/2012/12/11/responsi
ve-web-design/
In 2012, PC sales were lower
than the previous year,
something that hasn’t
happened since 2001. Why?
Tablets. Phones.

11. HISTORY OF THE RESPONSIVE WEB DESIGN
 The term Responsive Web Design was first coined by Ethan
Marcotte in his article A List Apart in May 2010
http://alistapart.com/article/responsive-web-design
 He defined the technique of RWD by using fluid grids, flexible
images, and media queries to deliver different visual experiences
for different screen sizes.
 Ethan expanded his RWD theory and published his book titled
Responsive Web Design.

12. WHY SHOULD WE BUILDARESPONSIVE WEB?
 Each year new devices are pouring into the
market, responsive web design let us build one
site, and modify it to adapt the new device’s
screen size
 Build once for all devices
 Easy to manage content editing through a single
CMS (Content Management System)
 If we have a working website:
 Not need to rebuild new websites to adapt the new
devices
 We can convert the existing working website to a
responsive Web site to adapt all kind of devices

13. 13

14. 14

15. RESPONSIVE WEB DESIGNING (RWD)
15
 ResponsiveWeb Designing (RWD) is a
process of designing a single website to be
used and compatible on different portable or
handy electronic devices.
 Also known as AdaptiveWeb Designing
(AWD).
 It regarded as an integrated approach of
designing through which compelling and
easy to use websites are built, to give an
optimal viewing user experience across a
wide variety of devices starting from desktop
computers to mobile phones.
ResponsiveWebsites
Offers
 Smooth navigation
 Easy reading
 Minimum pinching
 Reduces scrolling
and zooming.
 Excellent user
experience.

16. WHYYOU NEEDARESPONSIVE WEBSITE?
16
 Growing Demand for Smartphones
 Multiple Screen Sizes and Mobile
Browsers
 Wide Usage of Internet
 Permits wider browser support
 Compulsory for Getting Good
Business

17. UNDERSTANDING THE MOBILE WEBAND ITS CONTENT
17
 Web designers should consider the following questions while mobilizing
the content
Q.What is the purpose of the site?
Q.Who are the users?
Q.What sort of data is being accessed by them?
Q. User’s locations ?
Q.What’s the capacity of the devices and screen information such as size,
resolution, pixel density, and color information from which information
is being accessed?

18. ADAPTING THEAPPROPRIATE LAYOUT
18
 Designers should use appropriate layout to suit completely different
screen sizes.
Devices Size
Phones 480px and below
Phones toTablets 767px and below
PortraitTablets 768px and above
Net Book 990px to 1024px
Monitor 1024px and above

19. 19

20. MAJOR COMPONENTS OFARESPONSIVE WEBSITE
20
 Responsive website designing is a modern approach of website
designing. It comprises of four core elements.
1. MetaTags
2.CSS3 MediaQueries
3. Grid Systems
4. Frameworks

21. 1. WHAT ARE META TAGS?
21
 Meta tag is a coding statement in HTML.
 It describes few aspects of the contents of a web page.
 Information provided in the meta tags is used by the search engines for
page indexation.
 Placed at the top of a web page as a part of heading.
 We use viewport meta tag for making a web page Mobile Optimized.
See the example on next page.

22. 2. WHATARE CSS3 MEDIAQUERIES ?
22
 CSS3 Media Queries consists of a media type and zero or an optional
expression to assign different style-sheets depending on browser
window size using media features such as width, height, orientation,
resolution, pixel aspect ration, and color etc.
 Using CSS3 media queries, presentations can be tailored to a specific
range of output devices without changing the content itself.
 You can use media queries in different ways for different reasons.

23. 3. WHAT ISAGRID SYSTEM?
23
 Grids are the simplest, strongest, and quick way to create page layouts.
A grid is a set of number of “columns” and intervening “gutters”
(margins) inside a “container” with any width and flexibility.
 It gives a feeling of considered organization of one’s website.
 In the words of Josef Muller Brockmann,”The grid system is an aid, not
a guarantee. It permits a number of possible uses and each designer can
look for a solution appropriate to his personal style. But one must learn
how to use the grid; it is an art that requires practice.”

24. 4. USEFUL FRAMEWORKS OF RWD
24
 Frameworks can be defined as a set of tools, libraries,
conventions and best practices that enable the
designers to cut down their routine tasks into reusable
generic modules.
 CSS3 frameworks provide following benefits to web
designers and developers:
 Faster designing and building of websites.
 Designers can focus on crucial segments of website
building-using a grid, including a print style sheet,
browser compliance, creation of multiple layouts,
etc.
 Following are the popular
frameworks that web designers
and developers used to develop
responsive websites:
 Skeleton
 Foundation
 Bootstrap

25. BENEFITS OF RWD
25

26. Heru Wijayanto, MM., MBA., M.MT
(heru@sociopreneur.id)
siheyu siheyu
Heru Wijayanto https://www.linkedin.com/in/heruwijayanto/