SlideShare a Scribd company logo

Responsive web design

•Download as PPTX, PDF•
•
Metatagg Solutions
Metatagg Solutions

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 of 17
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.
Responsive websites Respond to their environment
Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts)
“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.
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.
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
Small + Medium + Large One site for every screen.
When To Use It? Things to Consider Time & Money Browser Support Performance Content Website vs. Web App
How? “Stop Thinking in Pages. Start Thinking in Systems.” - Jeremy Keith Use Frameworks (save time) & Roll Your Own (more control)
Best Practices Content Check Start Small (Mobile First) Exit Photoshop, Enter Browser Make It Modular Always Be Optimizing Best practices still emerging!
Frameworks
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/
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.
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.
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.
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.
Creative Designer Metatagg Solutions Sr. Web & Graphics Designer (Rohit Nagvadiya ) Web Designer & Responsive HTML Developer (Yogesh Sorathiya) & Web Development Team

More Related Content

Responsive web design

  • 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!
  • 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