SlideShare a Scribd company logo
What Is Responsive website
What Is A responsive Website ?
Responsive Web design (RWD) is a Web design approach aimed at crafting sites to
provide an optimal viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide range of devices (from
mobile phones to desktop computer monitors)
A responsive website changes its appearance and layout based on the size of the
screen the website is displayed on. Responsive sites can be designed to make the
text on the page larger and easier to read on smaller screens. They can also be
configured to make the buttons on the phone's screen easier to press. More
sophisticated ways of using responsive design on a mobile device include:
formatting the website to hide or present entirely different information, radically
changing the graphics and colors, or even reducing the site to emphasize just its
most important piece.
what does a
responsive website
actually do?
Responsive site architecture
and design provides a fluid
layout for your website that
automatically changes
'responsively' and renders
the optimum website
experience to best suit the
user’s viewing device smartphones, Tablets,
Netbooks, Desktops, even
Widescreen TVs. It also
allows you to priorities your
key calls to action for a
reduced screen size.
What’s more, providing a
single, dynamic version of
your website to desktop and
mobile visitors makes it
search engine friendly. That
explains why Google loves
responsive website design. In
fact, Google have stated that
it is their 'recommended
configuration' for building
smartphone and tabletoptimised websites.
How Many Potential
Customers Could You
be Losing?
You don’t have to be a master
statistician to realise that the
trend towards internet access
via mobile devices is
gathering pace and is already
unstoppable.
This means that the chances
of your website being
accessed via a mobile device
are increasing every day, so
you need to make sure that
the visitor experience is a
good one. You may only get
one chance!
Why To Use
responsive
Website?
The internet is now an integral
part of our lives, and,
increasingly, people want access
to it, any time, anywhere, any
place. Websites are now being
viewed on devices with hugely
varied screen widths and
resolutions, ranging from 320 to
over 2500 pixels.
You need to know that,
whatever the screen, your
website content will be
delivered to a consistently high
standard. If a mobile user has
difficulty reading your website,
you’ll lose them, perhaps for
ever!
Why To Use
Responsive
Websites ?
Why Does It Matter?
Because it’s better, and
everyone else is doing it.
To illustrate why responsive
is better, I’ve taken the stats
from an anonymous website
that is widely representative
of many others. If you use a
tool like Google Analytics on
your website you can look at
these same stats and gauge
how urgent the matter is for
your company.
Why To Use Responsive Website?

 Why Does It Matter?
 Mobile vs. Desktop.




This pie chart on the right
shows the percentages for
visitors coming using mobile,
tablet, and desktop devices
for the past 12 months. You
can view this pie chart for
your own website by first
selecting the past 12 months
for your date range, and then
on the left navigating to
Audience > Mobile >
Overview in Google Analytics.
On the lower right you’ll see a
small pie chart button. Push
that, and you’ll see a chart
like this one.
In this case the website
receives almost 40% of its
traffic from mobile devices
(for the purposes of this post
I’m going to lump tablets into
the “mobile” category). Given
that this website is not
responsive, nor has a mobile
version, that’s a hefty chunk
of visitors who are receiving a
sub-optimal experience. But
wait, it gets better! And by
“better” I mean worse
Why To Use
responsive
Website?
Cost Effective
Responsive website design
means there is no longer a
need to build a separate
mobile website in addition to
your traditional desktop
website. A single website
covers all devices, and so
development time is
significantly reduced. Then
think about how many
potential customers you
might lose through not
having a responsive website.
Cost effective? You could say
it’s a no-brainer.
Why To Use
Responsive Websites
We all know that our websites need be
easily viewed on cell phones and tablets.
With Google essentially coming out and
saying they prefer responsive design in
lieu of a separate mobile website, I felt it
fitting to list the benefits of a responsive
website.
1. User Experience
Obviously having a design that effectively
utilizes the screen size of your visitor’s
preferred device is the main benefit.
Responsive trumps mobile here in its
ability to carry over all of the elements
from your website. Pictures, content, and
calls-to-action are all adjusted, providing a
feature-rich experience a separate mobile
website simply cannot replicate.
2. Development
Rather than developing multiple websites
for multiple devices, responsive design
allows you to develop one website. Think
about the process of updating multiple
sites simply for a page addition. You only
have one set of content to update instead
of several.
3. Stay Ahead of Your Competition
With responsive design still being
relatively new and not yet widely adopted,
you have the opportunity to stand out
from your competition and be on the
cutting-edge of design. Statistics indicate
users are far more likely to buy from a site
that is optimized for mobile devices.
Why To Use responsive Website?



4. Analytics
Analyzing one site is hard enough, let alone multiple sites. With
responsive design, you only have one site to look after, regardless
of the device your users visit your page with.




5. Consistent Branding
Often times when I am redirected to a mobile page, it has a
different look and feel than the desktop site. With a responsive
design, your site is consistent in appearance and branding,
helping to keep your image clear.




6. Conversions
When you want your site to convert, responsive design is the
way to go. You want as little friction between your user and a
call-to-action as possible. When you have a well thought-out
website with lead generation in mind, these elements carry over
and offer an experience visitors will want to engage with.




7. SEO
Today there may not be a lot of weight associated with
responsive vs. mobile design, but all indications point to Google
starting to favor the former. Responsive design simply offers a
better user experience than a separate mobile site, and that is
what the SERPS are after. Secondly, they don’t have to index and
associate multiple sites with you. It’s one site for all users.
Why To Use
responsive Website?
8.Allow Your Website to
Adapt :
By reworking your website
with responsive design, you
give it the capability to adapt
to multiple browsing
platforms. Rather than
building websites according
to static dimensions,
responsive design involves
constructing a page
according to proportional
parameters that allow it to
change its layout based on
the user’s device.
With so many different
smart phones and tablets on
the market, it’s important to
make sure that your web
pages can adapt to multiple
viewing platforms.
Responsive design provides
an elegantly simple solution
to this problem.
Improve
Why To Use responsive Website?
 9 . Improve Visibility !!!
 One of the most common problems with

mobile browsing is the usability issue.
Many people fail to make use of their
mobile device’s internet capabilities
because so many websites are not
optimized for mobile browsing. Pages take
too long to load, and their layouts often
become jumbled and unreadable on the
small screen. Building your site according
to responsive design principles makes sure
that users on any device will get the same
experience on your website. Improve
usability and your mobile potential will
skyrocket.
Why To Use
Responsive Website ?
One Website, Many Devices
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 is an important
characteristic, since it is impossible to
anticipate all the devices and screen
sizes searchers will use to access your
site. A site that works well regardless
of these variables will provide a better
and more consistent user-experience
than a separate mobile site that is
designed for a specific device and
screen size.
Let’s take the following example.
Someone searches for a product on
their smartphone during a lunch
break at work. They find a site that
has the product they’re looking for,
and decide to continue researching
this product on the same site when
they get home. Except, when they get
home, they will use their desktop
instead of their smartphone.
If the site in this example is
responsive, this person will have
a positive user-experience when
transitioning from mobile to desktop
because they will view the same site
on their desktop as they did on their
smartphone. On the other hand, if the
site is a dedicated mobile site, this
person will become frustrated with
the fact that they have to locate the
desktop version of the site, and find
the product all over again.
Why To Use
Responsive Website
Save Time and Money
In the past, the only solution
for mobile browsing was to
create a dedicated mobile
website. Many webmasters still
subscribe to this idea, but it
can be expensive and time
consuming. Your web hosting
needs will increase, you will
have two websites to manage,
and your IT expenses can shoot
through the roof when you
have twice as many pages to
troubleshoot on a regular basis.
Responsive web design allows
you to simplify your needs by
having only one website for
multiple platforms, thus saving
you both time and money.
Future Is Mobile ?!!!
 The Future Is Mobile


While going responsive can present challenges for website
owners and online marketers, I return to my previous
point that without a mobile-friendly website your future
online is bleak. If you’re not providing a mobile-friendly
experience for your customers, they’ll bounce off your
website and go to your competitor whose website is easier
to use. The future is mobile, as we see people increasingly
favoring their mobile devices over desktop computers.
Nielsen says that over 60% of all mobile phone owners in
the US use a smartphone. A recent study by Walker Sands
Digital showed mobile traffic to its client base increasing
by 171 since Q3 2011. Statista says that 5 billion people will
use mobile phones by 2017. Making your website
responsive is a small price to pay to reach all these people.



By the way, in case you feel like I’m being a bit preachy,
I’m preaching as much to myself as to you–my own firm’s
website doesn’t have a responsive site yet. Yeah, yeah, the
cobbler’s children have no shoes.
Conclusion
Responsive web design is
recommended by Google, it allows
one website to provide a great
user-experience across many
devices and screen sizes, and it
also makes managing your SEO
strategy easier. For these reasons,
responsive web design is the best
option for your mobile SEO
strategy.

More Related Content

PPTX
How not having a Responsive Website can be Detrimental to your business?
DOC
Responsive web design is the future
PDF
Mobile seminar-worksheet
PDF
Go Responsive a New Era of Web Design
PDF
Responsive Websites: Are They A Trend Or Are They Here To Stay
PDF
2013 ion responsive_design_landingpages
DOCX
Responsive Web Design vs Mobile Web App
PDF
How to Generate Leads with Mobile Marketing
How not having a Responsive Website can be Detrimental to your business?
Responsive web design is the future
Mobile seminar-worksheet
Go Responsive a New Era of Web Design
Responsive Websites: Are They A Trend Or Are They Here To Stay
2013 ion responsive_design_landingpages
Responsive Web Design vs Mobile Web App
How to Generate Leads with Mobile Marketing

What's hot (16)

PDF
5 Top Web Design and Development Tips for an Awesome Web App
PDF
5 compelling reasons your website should be responsive
PPT
Mobile email - chasing context
PDF
Responsive design
PPTX
Modular email templates
PDF
Carousel30: Optimizing for the mobile user experience whitepaper
PDF
Why responsive websites?
PDF
Mobile websites are more important than you think
PDF
Multi screen-moblie-whitepaper research-studies
PPT
Responsible, Responsive Design Webinar - November 12, 2014
PPTX
Responsive Email Design
PPT
Why should we build our website responsive
PPTX
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
PDF
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
PPT
Understanding The Importance Of Responsive Design For Your Websites
PPTX
Jeff cox mobile_presentation
5 Top Web Design and Development Tips for an Awesome Web App
5 compelling reasons your website should be responsive
Mobile email - chasing context
Responsive design
Modular email templates
Carousel30: Optimizing for the mobile user experience whitepaper
Why responsive websites?
Mobile websites are more important than you think
Multi screen-moblie-whitepaper research-studies
Responsible, Responsive Design Webinar - November 12, 2014
Responsive Email Design
Why should we build our website responsive
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
Understanding The Importance Of Responsive Design For Your Websites
Jeff cox mobile_presentation
Ad

Similar to What Is Responsive website (20)

PDF
Responsive Web Design and Its Benefit.pdf
PPTX
Benefits of responsive web design
PDF
Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whit...
PDF
Responsive Web Design Whitepaper
PPTX
What is Responsive Design and how does it help your business ?
PPT
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
PPT
Impact_Responsive web design brings success to your business
PDF
Web Design
PPTX
Responsive web design
PPTX
why responsive web design is important
PDF
Mastering Responsive Web Design_ Creating Seamless User Experiences.pdf
PDF
SMM Webinar - Responsive Design
PDF
Responsive web design blog sample
PDF
5 Reasons to go Responsive
PPT
Responsive web design
PDF
Introduction | SEO Expate BD Ltd.
PDF
Introduction | SEO Expate BD Ltd.
PDF
Responsive Web Designs
PPTX
Responsive Web Design
PPTX
The ins and outs of Responsive Web Design
Responsive Web Design and Its Benefit.pdf
Benefits of responsive web design
Responsive Web Design vs. Mobile Web App: What is best for Enterprise - Whit...
Responsive Web Design Whitepaper
What is Responsive Design and how does it help your business ?
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive web design brings success to your business
Web Design
Responsive web design
why responsive web design is important
Mastering Responsive Web Design_ Creating Seamless User Experiences.pdf
SMM Webinar - Responsive Design
Responsive web design blog sample
5 Reasons to go Responsive
Responsive web design
Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.
Responsive Web Designs
Responsive Web Design
The ins and outs of Responsive Web Design
Ad

Recently uploaded (20)

PDF
Phone away, tabs closed: No multitasking
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PPTX
rapid fire quiz in your house is your india.pptx
PPTX
6- Architecture design complete (1).pptx
PDF
Interior Structure and Construction A1 NGYANQI
PPTX
areprosthodontics and orthodonticsa text.pptx
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
Entrepreneur intro, origin, process, method
PDF
Quality Control Management for RMG, Level- 4, Certificate
PPTX
HPE Aruba-master-icon-library_052722.pptx
PPTX
joggers park landscape assignment bandra
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPT
Machine printing techniques and plangi dyeing
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
DOCX
The story of the first moon landing.docx
PPTX
An introduction to AI in research and reference management
Phone away, tabs closed: No multitasking
DOC-20250430-WA0014._20250714_235747_0000.pptx
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
rapid fire quiz in your house is your india.pptx
6- Architecture design complete (1).pptx
Interior Structure and Construction A1 NGYANQI
areprosthodontics and orthodonticsa text.pptx
Fundamental Principles of Visual Graphic Design.pptx
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
AD Bungalow Case studies Sem 2.pptxvwewev
Entrepreneur intro, origin, process, method
Quality Control Management for RMG, Level- 4, Certificate
HPE Aruba-master-icon-library_052722.pptx
joggers park landscape assignment bandra
YV PROFILE PROJECTS PROFILE PRES. DESIGN
Machine printing techniques and plangi dyeing
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
The story of the first moon landing.docx
An introduction to AI in research and reference management

What Is Responsive website

  • 2. What Is A responsive Website ? Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors) A responsive website changes its appearance and layout based on the size of the screen the website is displayed on. Responsive sites can be designed to make the text on the page larger and easier to read on smaller screens. They can also be configured to make the buttons on the phone's screen easier to press. More sophisticated ways of using responsive design on a mobile device include: formatting the website to hide or present entirely different information, radically changing the graphics and colors, or even reducing the site to emphasize just its most important piece.
  • 3. what does a responsive website actually do? Responsive site architecture and design provides a fluid layout for your website that automatically changes 'responsively' and renders the optimum website experience to best suit the user’s viewing device smartphones, Tablets, Netbooks, Desktops, even Widescreen TVs. It also allows you to priorities your key calls to action for a reduced screen size. What’s more, providing a single, dynamic version of your website to desktop and mobile visitors makes it search engine friendly. That explains why Google loves responsive website design. In fact, Google have stated that it is their 'recommended configuration' for building smartphone and tabletoptimised websites.
  • 4. How Many Potential Customers Could You be Losing? You don’t have to be a master statistician to realise that the trend towards internet access via mobile devices is gathering pace and is already unstoppable. This means that the chances of your website being accessed via a mobile device are increasing every day, so you need to make sure that the visitor experience is a good one. You may only get one chance!
  • 5. Why To Use responsive Website? The internet is now an integral part of our lives, and, increasingly, people want access to it, any time, anywhere, any place. Websites are now being viewed on devices with hugely varied screen widths and resolutions, ranging from 320 to over 2500 pixels. You need to know that, whatever the screen, your website content will be delivered to a consistently high standard. If a mobile user has difficulty reading your website, you’ll lose them, perhaps for ever!
  • 6. Why To Use Responsive Websites ? Why Does It Matter? Because it’s better, and everyone else is doing it. To illustrate why responsive is better, I’ve taken the stats from an anonymous website that is widely representative of many others. If you use a tool like Google Analytics on your website you can look at these same stats and gauge how urgent the matter is for your company.
  • 7. Why To Use Responsive Website?  Why Does It Matter?  Mobile vs. Desktop.   This pie chart on the right shows the percentages for visitors coming using mobile, tablet, and desktop devices for the past 12 months. You can view this pie chart for your own website by first selecting the past 12 months for your date range, and then on the left navigating to Audience > Mobile > Overview in Google Analytics. On the lower right you’ll see a small pie chart button. Push that, and you’ll see a chart like this one. In this case the website receives almost 40% of its traffic from mobile devices (for the purposes of this post I’m going to lump tablets into the “mobile” category). Given that this website is not responsive, nor has a mobile version, that’s a hefty chunk of visitors who are receiving a sub-optimal experience. But wait, it gets better! And by “better” I mean worse
  • 8. Why To Use responsive Website? Cost Effective Responsive website design means there is no longer a need to build a separate mobile website in addition to your traditional desktop website. A single website covers all devices, and so development time is significantly reduced. Then think about how many potential customers you might lose through not having a responsive website. Cost effective? You could say it’s a no-brainer.
  • 9. Why To Use Responsive Websites We all know that our websites need be easily viewed on cell phones and tablets. With Google essentially coming out and saying they prefer responsive design in lieu of a separate mobile website, I felt it fitting to list the benefits of a responsive website. 1. User Experience Obviously having a design that effectively utilizes the screen size of your visitor’s preferred device is the main benefit. Responsive trumps mobile here in its ability to carry over all of the elements from your website. Pictures, content, and calls-to-action are all adjusted, providing a feature-rich experience a separate mobile website simply cannot replicate. 2. Development Rather than developing multiple websites for multiple devices, responsive design allows you to develop one website. Think about the process of updating multiple sites simply for a page addition. You only have one set of content to update instead of several. 3. Stay Ahead of Your Competition With responsive design still being relatively new and not yet widely adopted, you have the opportunity to stand out from your competition and be on the cutting-edge of design. Statistics indicate users are far more likely to buy from a site that is optimized for mobile devices.
  • 10. Why To Use responsive Website?   4. Analytics Analyzing one site is hard enough, let alone multiple sites. With responsive design, you only have one site to look after, regardless of the device your users visit your page with.   5. Consistent Branding Often times when I am redirected to a mobile page, it has a different look and feel than the desktop site. With a responsive design, your site is consistent in appearance and branding, helping to keep your image clear.   6. Conversions When you want your site to convert, responsive design is the way to go. You want as little friction between your user and a call-to-action as possible. When you have a well thought-out website with lead generation in mind, these elements carry over and offer an experience visitors will want to engage with.   7. SEO Today there may not be a lot of weight associated with responsive vs. mobile design, but all indications point to Google starting to favor the former. Responsive design simply offers a better user experience than a separate mobile site, and that is what the SERPS are after. Secondly, they don’t have to index and associate multiple sites with you. It’s one site for all users.
  • 11. Why To Use responsive Website? 8.Allow Your Website to Adapt : By reworking your website with responsive design, you give it the capability to adapt to multiple browsing platforms. Rather than building websites according to static dimensions, responsive design involves constructing a page according to proportional parameters that allow it to change its layout based on the user’s device. With so many different smart phones and tablets on the market, it’s important to make sure that your web pages can adapt to multiple viewing platforms. Responsive design provides an elegantly simple solution to this problem. Improve
  • 12. Why To Use responsive Website?  9 . Improve Visibility !!!  One of the most common problems with mobile browsing is the usability issue. Many people fail to make use of their mobile device’s internet capabilities because so many websites are not optimized for mobile browsing. Pages take too long to load, and their layouts often become jumbled and unreadable on the small screen. Building your site according to responsive design principles makes sure that users on any device will get the same experience on your website. Improve usability and your mobile potential will skyrocket.
  • 13. Why To Use Responsive Website ? One Website, Many Devices 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 is an important characteristic, since it is impossible to anticipate all the devices and screen sizes searchers will use to access your site. A site that works well regardless of these variables will provide a better and more consistent user-experience than a separate mobile site that is designed for a specific device and screen size. Let’s take the following example. Someone searches for a product on their smartphone during a lunch break at work. They find a site that has the product they’re looking for, and decide to continue researching this product on the same site when they get home. Except, when they get home, they will use their desktop instead of their smartphone. If the site in this example is responsive, this person will have a positive user-experience when transitioning from mobile to desktop because they will view the same site on their desktop as they did on their smartphone. On the other hand, if the site is a dedicated mobile site, this person will become frustrated with the fact that they have to locate the desktop version of the site, and find the product all over again.
  • 14. Why To Use Responsive Website Save Time and Money In the past, the only solution for mobile browsing was to create a dedicated mobile website. Many webmasters still subscribe to this idea, but it can be expensive and time consuming. Your web hosting needs will increase, you will have two websites to manage, and your IT expenses can shoot through the roof when you have twice as many pages to troubleshoot on a regular basis. Responsive web design allows you to simplify your needs by having only one website for multiple platforms, thus saving you both time and money.
  • 15. Future Is Mobile ?!!!  The Future Is Mobile  While going responsive can present challenges for website owners and online marketers, I return to my previous point that without a mobile-friendly website your future online is bleak. If you’re not providing a mobile-friendly experience for your customers, they’ll bounce off your website and go to your competitor whose website is easier to use. The future is mobile, as we see people increasingly favoring their mobile devices over desktop computers. Nielsen says that over 60% of all mobile phone owners in the US use a smartphone. A recent study by Walker Sands Digital showed mobile traffic to its client base increasing by 171 since Q3 2011. Statista says that 5 billion people will use mobile phones by 2017. Making your website responsive is a small price to pay to reach all these people.  By the way, in case you feel like I’m being a bit preachy, I’m preaching as much to myself as to you–my own firm’s website doesn’t have a responsive site yet. Yeah, yeah, the cobbler’s children have no shoes.
  • 16. Conclusion Responsive web design is recommended by Google, it allows one website to provide a great user-experience across many devices and screen sizes, and it also makes managing your SEO strategy easier. For these reasons, responsive web design is the best option for your mobile SEO strategy.