1 / 14

Responsive websites react the way that liquid does when poured into a container – its width expanding or contracting to fit the available space. This is what a responsive website does: its layout expands and contracts while the various elements of the page change their look and placement as needed to display properly on the current screen size. This means that you have just one website that looks equally well on all types of devices. Here are some pros and cons

omkarsoft
Download Presentation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Why Should We Build OurWebsite Responsive ????? know the pros and cons of responsive website........

  2. What is Responsive Web Design? • Responsive web designallows you to have a single website that automatically fits the screen size of the device on which it is being viewed. • Responsive web designis achieved by adapting the content, design, navigation and method of interaction to deliver the same comfort and usability to the mobile user as like desktop user.

  3. Best example for Responsive Web Design • Responsive websites react the way that liquid does when poured into a container – its width expanding or contracting to fit the available space. • This is what a responsive website does: its layout expands and contracts while the various elements of the page change their look and placement as needed to display properly on the current screen size. • This means that you have just one website that looks equally well on all types of devices.

  4. Here are some pros and cons: Pros of Responsive Web Design 1. A single website. It’s easier to administer just one website for all devices. 2. Low cost. Simple math — one website is cheaper than two. 3. Easy SEO. Good for SEO. You only have one website, so it gets all of the traffic and SEO credit. 4. Updates. Site updates only have to be applied once, with usually only a short amount of time spent adjusting styles for the different environments.

  5. 5. Responsive design techniques can easily turn a desktop site into a tablet site, but replacing a few formatting rules (styles) and providing alternative.6. Google Endorsed It. “Google recommends webmasters follow the industry best practice of using responsive web design".7. New Devices: New devices with different screen sizes are continually being created. With responsive design, you do not need to worry about creating a whole new website every time a new screen-sized device is introduced into the market.

  6. Cons of Responsive Web Design 1.Technical:The loading time is potentially higher on smaller screens if not implemented correctly. 2. Initial cost of development and designing of the website is comparatively higher than regular websites 3. User Experience. Mobile is a completely different experience than desktop, so having a single, even responsive website, may harm your overall UX on both platforms. If you try to satisfy both mobile and desktop users with the same user interface, you may end up satisfying no one. 4. Not every desktop browser supports the design. 5. Load Time: Images commonly are just simply scaled down, instead of being resized. This negatively impacts the load time of a page.

  7. Steps to design Responsive Websites 1.Viewport Mega Tag The first step for responsive website design is to define the particular viewport meta tag.Include the following meta tag in your : <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 2.Percent Based Width and height: In responsive design set the width or the height as % of the browser size. 3. Make The Images Flexible: Make the images for your website flexible. Define the width and height of the image according to the media query for the relevant screen size.

  8. Popular Media Queries for Responsive Web Design 1.Large Display 1200px and aboveblog responsive-desktop wide @media (min-width: 1200px)

  9. 2.Portrait Tablets 768px and above@media (min-width: 768px) (max-width: 979px)

  10. 3.Phone to Tablets – 767px and down@media (max-width: 767px)

  11. 4.Phones – 480px and down @media (max-width: 480px)

  12. Tools to check Responsive Web Design Enter your site’s URL in the below mentioned tools to see if your website uses responsive design. • http://responsivedesignchecker.com • http://quirktools.com/screenfly • http://mattkersley.com/responsive • http://designmodo.com/responsive-test • http://responsivetest.net

  13. Conclusion • When you weigh the pros and cons, the responsive web design really comes out on top. • Not only for better SEO, but it also provides visitors with a better user experience. As more and more websites become responsive, people have come to expect it. • Well-known companies like Sony, Microsoft, Disney, Starbucks, and many other companies have chosen to implement responsive web design. • 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 very easier. • For these reasons, responsive web design is the best option for your mobile SEO strategy.

  14. Thank You For Reading @https://twitter.com/ @https://www.facebook.com/OmkarSoftCom published bywww.omkarsoft.com

More Related