Responsive web design allows a website to automatically adapt to different screen sizes and devices. It uses fluid grids and flexible images to render well on everything from phones to TVs. Responsive sites use CSS media queries and fluid layouts for small screens, with fixed widths for larger screens. This provides a seamless experience for users on any device while making the site easier for search engines to index with one codebase across all screensizes.

1. What The Heck Is
Responsive Web Design?
As a Web developer, we need to think about many devices, screen sizes and
orientations. It’s not enough now to build our application or website to target
only desktop screens: you need to keep in mind that your visitors will come to
your site with their smart phones, their net books, their tablets, their slates
and even their living room TV. We need to give them a good experience.

2. Responsive websites
Respond
to their environment

3. Adaptive
(Multiple Fixed Width Layouts)
or
Responsive
(Multiple Fluid Grid Layouts)

4. “Responsive design” is a subset of a larger concept which is called
“Adaptive design”. When talking about responsive we refer to the
layout only (Ethan Marcotte , fluid grids, flexible images & media
queries).
“Adaptive design” on the other hand includes much more than just
fluid layout. In practice it means the same thing as progressive
enhancement, which means in short, that we aim to deliver the
best possible experience to the widest possible audience. Also:
“Adaptive design” shouldn’t be mixed with “Adaptive layout” which
is a completely different thing.
Finally, “Adaptive layout” means a layout done by combining
multiple fixed widths. Right now, I feel that Adaptive layout — when
done right and when fixed widths are combined with fluid widths —
is one form of responsive design and not just an alternative to it.

5. Mixed Approach
Fixed width for large and medium.
Fluid width for small.
The responsive web design uses mixed approach – that is, it uses fixed
widths for large and medium screens and fluid grid layout for small ones.

6. Why Responsive
Web Design?
“Day by day, the number of devices, platforms,
and browsers that need to work with your site grows.
Responsive web design represents a fundamental shift
in how we’ll build websites for the decade to come.”
- Jeffrey Veen

7. Small + Medium + Large
One site for every screen.

8. When To Use It?
Things to Consider
Time & Money
Browser Support
Performance
Content
Website vs. Web App

9. How?
“Stop Thinking in Pages. Start Thinking in
Systems.”
- Jeremy Keith
Use Frameworks
(save time)
&
Roll Your Own
(more control)

10. Best Practices
Content Check
Start Small (Mobile First)
Exit Photoshop, Enter Browser
Make It Modular
Always Be Optimizing
Best practices still emerging!

11. Frameworks

12. Useful Stuff
Respond.js https://github.com/scottjehl/Respond
enquire.js http://wicky.nillia.ms/enquire.js/
Style Tiles http://styletil.es/
Masonry http://masonry.desandro.com/
CSS-Tricks http://css-tricks.com/
Fit Text http://fittextjs.com/
Fit Vids http://fitvidsjs.com/

13. Why responsive
Web Design
is good for SEO?
Using responsive design to build a mobile site takes less time than creating a
stand-alone mobile site, it’s easier for the client to manage and maintain, and
the user has a seamless experience without need for redirection. Whatever
the screen size of the user they’ll be served from the same database and same
page, meaning that you have one solution to fit all devices.
It’s the best solution for a client, agency, user and the search engines.

14. Let’s rewind and look at how search engines work,
using Google as an example:
 The search engine (SE) finds out about a new website, most likely because
a third party website links to it.
 The SE analyses the site and over a period of time it visits every page and
stores information on it.
 If the pages are appropriate the SE puts the pages of the site into its index,
the collection of databases that store websites and attributes on them.
 When a visitor to Google caries out a search the SE returns the website in
the results pages, based on how valuable the SE believes the site is for
that keyword search.

15. Google Rewards Responsive Web
Design For Mobile
Why responsive design? It saves resources for both your site and Google’s
crawlers. For responsive web design pages, any Google bot user agents needs to
crawl your pages once, as opposed to crawling multiple times with different user
agents, to retrieve your content. This improvement in crawling efficiency can
indirectly help Google index more of the site’s contents and keep it appropriately
fresh.

16. Overview of Google's
recommendations
 Google recommends webmasters follow the industry best practice
of using responsive web design, namely serving the same HTML for
all devices and using only CSS media queries to decide the
rendering on each device.
 If responsive design is not the best option to serve your users,
Google supports having your content being served using different
HTML. The different HTML can be on the same URL or on different
URLs, and Google bot can handle both setups appropriately if you
follow our recommendations.

17. Creative Designer
Metatagg Solutions
Sr. Web & Graphics Designer
(Rohit Nagvadiya )
Web Designer & Responsive HTML Developer
(Yogesh Sorathiya)
&
Web Development Team