Responsive web design allows websites to automatically adjust to different screen sizes and devices. It uses flexible grids and images that resize depending on screen resolution. Media queries detect screen size and adjust layout accordingly. This provides a consistent user experience across devices like smartphones, tablets and desktops. It is important for responsive design because people increasingly access websites on various devices, and a single responsive site is more convenient and usable than separate mobile and desktop sites.

1. Gamze Dede Pala
RESPONSIVE
WEB DESIGN
ANALYSIS

2. WHAT IS IT?
Responsive Web Design is a user-oriented design technique.
It throughly focuses on a user’s environment and behaviour
based on the orientation and size of his screen as well as the
platform.
2

3. KEY FEATURES
3
 Responsive Web Design provides the flexibility of adjustable zones
depending on the resolution of the screen. The images are automatically
adjusted and so are the areas of texts.
 Media queries detect the resolution automatically. Also, permit to know
what the size of the screen is and adjust accordingly.

4. COMPARE WITH ADAPTIVE DESIGN
 Adaptive design has fixed grid and images.
 It doesn’t detect resolution and doesn’t permit to adjust size of
screen. So each device may have a different appearance.
4

5. 5
WHY IS IMPORTANT?
Increase of Mobile usage in today’s world

6. Today there are 2.6 billion smartphone subscriptions globally,
and while growth has been levelling off in developed markets like
the U.S. and Europe.
By 2020, globally there will be 6.1 smartphone users led by huge
growth in less mature markets.
6
WHY IS IMPORTANT?

7. WHY IS IMPORTANT?
7
One Website, Many Devices

8. One of the most appealing aspects of responsive web design is that:
A responsive website can provide a great user-experience across many
devices and screen sizes. This means that, to best support their experience,
our sites must work well regardless of which device they may be using at a
given time.
For example: Someone searches for a product on his smartphone. But his
phone is out of charge. He will use his desktop instead of his phone. In this
case, the same website should be met the expectations.
8
WHY IS IMPORTANT?

9. User Research and Scoping : Representation of users, typically based on
user research and incorporating user goals, needs and interests.
Understanding how these users may want to use the website on a variety
of devices will help you to decide what the priorities are on the project.
Screen Size : Your website’s content should respond the user with the
best possible layout to consume the information. Based on the project
scope, we will choose the screen widths and define your breakpoints at
the exact device widths that you are looking to target. Most often these
are the smart phone usually 320px and 480px, the tablet usually 768px
and 1024px and finally anything above 1024px.
9
NEED TO KNOW PRE-DESIGN

10. Vital Content : Is there any content that should only be visible on
desktop or mobile? If the answer is yes, it is considered in design stage.
For example : Headlines for news website should be available in each
design or some fields of complex forms may not avaliable on the mobile
device.
Working With Extreme Cases : You need to think about all the extreme
cases that may ocur and have a plan for extreme cases across all screen
sizes. For example : While a header length is maximum 30 characters, it
would be single line. If the length is more than 30, how to display
header?
10
NEED TO KNOW PRE-DESIGN

11. Web Elements Position: Are buttons and other interaction areas
positioned so they will be convenient to use on a touch screen? Users
will be using their thumbs on mobile devices. If buttons, links or web
elements should not be too small or inconveniently placed at the edge
of pages, so users should be able to access them.
Mobile-First Design: Creating a design for the smallest screen solution
first and working from there up. This is a general truth and not
necessarily a rule. Once the mobile design questions are answered,
designing for other devices will be easier. For the size of clickable
elements, pay attention to the minimum size for touchscreen devices
11
NEED TO KNOW PRE-DESIGN

12. 12
According to the project scope and constraints, we
will prepare wireframe prototype the each screen
widths. Defining the each selected breakpoints of
the wireframing layouts.
Wireframe possible areas :
Logo
Header
Navigation
Main Content
Forms
Footer
Searh Box
Back to Button
PROTOTYPES WIREFRAME LAYOUT

13. ADVANTAGES
User Experience
Improved SEO - Google
Better Performance
Save Money
Save Time
Content Focused
Easy to read content
Online test tool
13

14. 14
QUESTIONS ?
Q ?
?