Introduction to Responsive Web Design

of 28
Introduction to Responsive Web Design

of 28
Course Overview
Use the animation, Course Intro.zip, to provide the overview of the course.

of 28
 In this session, you will learn to:
 Identify Web designing techniques
Objectives

of 28
 Advancement in technology has changed the way
users access online information.
 People are accessing websites through multiple
devices, such as:
 PCs
 Laptops
 Smartphones
 iPads
 To cater to this large user base, organizations adopt
web designing techniques that properly represent
the websites on various devices.
Identifying Web Designing Techniques

of 28
 Some of the Web designing techniques are:
Identifying Web Designing Techniques (Contd.)

of 28
 AWD is the way of representing the same website by using separate Uniform
Resource Locaters (URLs) on different devices. For example:
 URL of Facebook for a PC or laptop is:
 https://www.facebook.com
 URL of Facebook for a smartphone is:
 https://m.facebook.com/
 AWD creates a series of layouts of a website based on various screen sizes of
different devices.
AWD

of 28
 The Web page layout is designed according to the screen size of the device on
which it is rendered.
AWD (Contd.)

of 28
 On a smartphone, the Web design of the same website:
 Becomes compact
 Displays lesser content
AWD (Contd.)

of 28
 Let us first understand the factors that distinguish a
desktop Web page from a mobile device Web page.
 These factors are:
 Screen size
 Ergonomics or touch capability
 Navigation and widgets
 Content, blank spaces, and whitespaces
 Images
 Advertising
RWD (Contd.)

of 28
 The following table displays the differences between AWD and RWD.
RWD (Contd.)
AWD Technique RWD Technique
It uses separate URLs to represent the
same website on different devices.
It uses a single URL to represent the same
website on different devices.
Different versions of Web pages are
carefully constructed for a varied set of
devices. Based on a request, the
appropriate version of the Web page is
sent as a response.
New concepts, such as media queries,
flexible images, and fluid grids, are
introduced. These new concepts allow you
to create a single Web page that modifies
its layout as per the screen size of the
device.
It is server side. It is client side.
A Web page gets loaded faster because
different designs for different devices are
available on different domains.
A Web page gets loaded slowly compared
to AWD, because the website is available
on the same domain name and the device
is loaded with the entire responsive
codebase, which may make it heavy.

of 28
 Considerations for RWD:
 Design:
 Design the website such that it looks similar on all devices and environment.
 Image size and screen layout:
 Images should be optimized for all screen sizes and resolutions.
RWD (Contd.)

of 28
 Mobile first:
 To optimize a website, present the content best suited for the small screens and then
enhance it for the large screens.
 Website navigation:
 Due to the small screen size of portable devices, keep navigation easy and simple.
RWD (Contd.)

of 28
 Benefits of RWD are:
RWD (Contd.)

of 28
 Limitations of RWD are:
 You cannot implement RWD on an existing website.
 You need to overhaul, redesign, and rebuild the website.
 The development time is 20% more than that of a standard website.
 The Web page loads slower than AWD.
RWD (Contd.)

of 28
Group Discussion
Let us discuss which technique is better, AWD or RWD.

of 28
 Once a website is created using the ______ technique, there is no need to
create the separate websites for other devices.
 AWD
 Fixed-width
 RWD
 Flexible Web design
Just a Minute

of 28
 Answer:
 RWD
Just a Minute (Contd.)

of 28
 In this session, you learned that:
 AWD is the way of representing the same website by using separate URLs on different
devices.
 RWD helps designers to create device-independent Web content and neglect device-
specific elements, such as physical attributes, browsers, client-side rendering, and
operating systems.
 Factors distinguishing a desktop Web page from a mobile device Web page are:
 Screen size
 Ergonomics or touch capability
 Navigation and widgets
 Content, blank spaces, and whitespaces
 Images
 Advertising
 Some of the benefits of RWD are minimal maintenance, social sharing, and better
viewing experience to users.
Summary

of 28
 After this session, you need to do the following tasks:
 Read Chapter 1
 Perform the following exercises of chapter 1:
 Exercise 1
 Exercise 2
 Exercise 3
 Exercise 4
 Exercise 5
 Exercise 6
What’s Next?

Introduction to Responsive Web Design

Recommended

Recommended

More Related Content

Similar to Introduction to Responsive Web Design

Similar to Introduction to Responsive Web Design (20)

Recently uploaded

Recently uploaded (20)

Introduction to Responsive Web Design