why should we build our website responsive

14
Why Should We Build Our Website Resp onsive ????? know the pros and cons of responsive website........

Upload: omkarsoft-bangalore

Post on 29-Nov-2014

124 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Why should we build our website responsive

Why Should We Build Our Website Responsive ?????

know the pros and cons of responsive website........

Page 2: Why should we build our website responsive

What is Responsive Web Design?

Responsive web design allows you to have a single website that automatically fits the screen size of the device on which it is being viewed.

Responsive web design is 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.

Page 3: Why should we build our website responsive

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.

Page 4: Why should we build our website responsive

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.

Page 5: Why should we build our website responsive

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.

Page 6: Why should we build our website responsive

Cons of Responsive Web Design1.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.

Page 7: Why should we build our website responsive

Steps to design Responsive Websites

1.Viewport Mega TagThe 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.

Page 8: Why should we build our website responsive

Popular Media Queries for Responsive Web Design

1.Large Display1200px andabove blogresponsive-desktopwide

@media (min-width: 1200px)

Page 9: Why should we build our website responsive

2.Portrait Tablets

768px and above

@media (min-width: 768px) (max-width: 979px)

Page 10: Why should we build our website responsive

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

Page 11: Why should we build our website responsive

4.Phones – 480px and down

@media (max-width: 480px)

Page 12: Why should we build our website responsive

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

Page 13: Why should we build our website responsive

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.

Page 14: Why should we build our website responsive

Thank You For Reading

@https://twitter.com/@https://www.facebook.com/OmkarSoftCom published by www.omkarsoft.com