Planning to create a Responsive Design strategy? The following information will give you all the necessary information to start. This presentation will throw light on terms such as responsive design, fluid design, adaptive design, mobile first and content first. This presentation will also lay the foundation and give you a better understanding of how responsive design can save you time, money and frustration while giving you a website that clearly and effectively communicates with your clients.

1. Powerpoint Templates
Page 1
Powerpoint Templates
Understanding Responsive,
Adaptive and Fluid Design
By ICO Web Solutions

2. Powerpoint Templates
Page 2
Planning to create a Responsive Design strategy?
The information in the following pages will give you all the necessary
information to start.
This presentation will throw light on terms such as Responsive Design,
Fluid Design, Adaptive Design, Mobile first and Content first.
This presentation will also lay the foundation and give you a better
understanding of how responsive design can save you time, money and
frustration while giving you a website that clearly and effectively
communicates with your clients.

3. Powerpoint Templates
Page 3
Fluid Design:
Fluid Design was in use long before Responsive Design. The web, by nature, is
fluid
There was an eminence debate in the web community to compare which
between fixed or fluid designs is more beneficial.
Fixed width offered designers greater amounts of control, but fluid design was
more flexible to the needs of the user’s experience. Even before the onslaught of
smart phones and tablets, believers of fluid design alleged all users would have a
different experience of the web, depending on variables such as monitor size and
browser window size.
HTML, without applied CSS, will flow to be 100% of the width of the page’s body.
As a browser window shrinks, text adjusts.
Fluid Design embraced this fluidity before Responsive Design was even a
possibility.
HTML text on the web is fluid by nature. Fluid Design (and Responsive Design)
embrace this fluidity.

4. Powerpoint Templates
Page 4
Adaptive Design vs Responsive Design:

5. Powerpoint Templates
Page 5
Responsive Design:
• Rather than setting breakpoints at common screen sizes (like adaptive
design), Responsive design makes decisions based on the needs of the
content.
• Web designers will often grow and shrink their browser windows to analyze
type, margins, padding, line-height, and other layout considerations.
• When a line of text or an image is uncomfortably squished or has too much
space, a breakpoint will be added via a CSS media query.
• The text, image or layout will change size based on the needs of the
content.
• Responsive design also uses flexible images so that images scale depending
on the width of the browser window or device.
• There is actually a lot more to talk about in the world of responsive images
as working groups are currently working out specifications for how to best
handle image sizes, but that is for another blog post.

6. Powerpoint Templates
Page 6
Fluid Grid + Flexible Images =
Responsive Design:
• Responsive Design is defined as having a fluid grid, flexible images and CSS
media queries. Responsive Design has become the current industry standard
for how a website should be built.
• While not always the best or most practical solution, a responsive site is
often the best solution to ensure you reach your customers, no matter their
device.
• Responsive Design requires a new mindset for how to design for a web that
constantly changes size and dimensions.

7. Powerpoint Templates
Page 7
Responsive Web Design: Content
First:
• Content First is often part of a responsive design strategy. Design can no
longer afford to be decoration.
• It needs to be information that quickly loads and gets users to reap the
benefits of your business.
• If your navigation menu or company message is not clear, concise, and fast-
loading on a smart phone; you may be losing clients, trust, credibility and
money.
• Having a content first strategy, respects your clients/users time and
attention.
• Content first helps you focus your messaging, navigation patterns, branding
and site structure.
• It is all about directly communicating with your customers. Design decisions
around typography, color and imagery are all meant to serve the needs of
the content.

8. Powerpoint Templates
Page 8
Responsive Web Design: Mobile First:
• Mobile First is about designing for the smallest sized device first.
• From a development perspective, mobile first means all of the initial CSS
styling that gets coded will be targeting small screen devices first.
• Mobile First requires a dedication to precise language, clear information
architecture and a desire to have a lean highly usable website.
• This isn’t to say the site has to be minimal.
• As larger screen breakpoints are added, there is more room for larger
images and varying layout possibilities. But even at these greater screen
sizes, mobile first concepts can still help guide design decisions.

9. Powerpoint Templates
Page 9
We would be happy to design for you
@
ICO Web Solutions
inquiry@icowebsolutions.com
www.icowebsolutions.com
+91-844-738-0262, +1-408-705-2608

10. Powerpoint Templates
Page 9
We would be happy to design for you
@
ICO Web Solutions
inquiry@icowebsolutions.com
www.icowebsolutions.com
+91-844-738-0262, +1-408-705-2608