Every website you design should be very responsive to attract more customers and produce leads.

1. RESPONSIVE WEB
DESIGN - future of web design
www.tech2morrow.com

2. Definition of Responsive
 The actual meaning of responsive is
to be reactive, receptive, amenable
and flexible.
 The purpose of a responsive web
design is to make your web page
look good on all devices (ex:
desktops, tablets, and phones).
www.tech2morrow.com

3. Purpose of a Responsive
Web Design
A responsive website is one that
adapts to the screen size of the
device where the website is being
served. Whenever the page resizes,
the layout adjusts according to the
fit of the screen.
www.tech2morrow.com

4. Purpose of a Responsive
Web Design
 Responsive Web Design is about
using CSS and HTML to resize, hide,
shrink, enlarge, or move the content
to make it look good on any screen
 A web page should look good, and be
easy to use, regardless of the device!
www.tech2morrow.com

5. A responsive website outlook in a
desktop and in mobile device
Responsive design is made possible with
the use of three functions:
Adaptive layout
Fluid grid –a responsive design uses a fluid grid.
Flexible media or images www.tech2morrow.com

6. Wrong and right format of a
mobile friendly website
www.tech2morrow.com

7. www.tech2morrow.com

8. Resolution break points
Breakpoints are the point a which your sites content will respond to
provide the user with the best possible layout to consume the
information.

9. An overview of Responsive
design
 Responsive Design, as the underlying
base of a websites deployment, uses
flexible or fluid grids, fluid images, and
CSS3 Media Queries to adapt to the
viewers different device widths and
resolutions.
 Responsive Design may have started
as a trend, but it has quickly become
an evolutionary step in web
development and design that has
greatly affected design and
technology.

10. Adaptive versus Responsive
 Adaptive
~(multiple fixed width layouts)
 Responsive
~(multiple fluid grid layouts)
 Responsive web designs and Adaptive web
designs are not the same
 Adaptive web design = distinct templates are used
and optimised for all devices
 Responsive web design = single template are used
for all devices
www.tech2morrow.com

11. Adaptive versus Responsive sites
www.tech2morrow.com

12. Advantages of a responsive
design
• Better user experience
• Single site management
• Single view analysis
• Easy viewing of
socially shared sites
• keep on connected to the latest trend.
www.tech2morrow.com

13. Disadvantages of a responsive design
•Could prolong development time and costs
upfront.
•Content has to be equally available on all
platforms and operating systems.
•Visitors don’t necessarily want the same
basic experience everywhere, on every device
www.tech2morrow.com

14. Responsive design provides a consistent user experience
One responsive site is usually cheaper to build and
maintain than two (or more) non-responsive sites.
 A multiple device strategy is now a must , so
performing a responsive design is a better option
 Content focussed-device focused elements becomes
secondary
 Easy to manage-content editing through a single CMS
 Cost effective-less need for stand alone sites and app
 Future proof-design that is fluid to adapt to new
technology
 SEO friendly-links are cleaner and used across platforms
 Cross platform-responds to audience device and
consumption habits
www.tech2morrow.com

15. www.tech2morrow.com