Top Banner
11

ResponsiveWebsite_Whitepaper

Apr 14, 2017

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: ResponsiveWebsite_Whitepaper
Page 2: ResponsiveWebsite_Whitepaper

IT’S TIME TO GO RESPONSIVE!

But why go responsive?

Page 3: ResponsiveWebsite_Whitepaper

What is a Responsive Website Design?

A responsive website adapts its environment.

Responsive web design (RWD) is an approach to web design aimed atcrafting sites to provide an optimal viewing experience—easy reading andnavigation with a minimum of resizing, panning, and scrolling—across awide range of devices (from desktop computer monitors to mobile phones)– Wikipedia

In simple words, the a responsive website responds to the device it isviewed on. The layout of the website adjusts to the viewing device that isprogrammed with proportion based, fluid grids, CSS3 media queries andflexible images.

The fluid grid concept and the flexible images on these websites calls forpage resizing in relative units like percentage rather than fixed pixels orpoints. Also, the media queries defined lets the page use various CSS stylerules as per the device used, which is generally based on the width of thebrowser.

Image So

urce: h

ttp://w

ww

.inp

ixelitrust.fr/b

log

Page 4: ResponsiveWebsite_Whitepaper

Static is Passé

Even though static websites are cheaper to implement, they are notrelevant to the current day. Static is very difficult to maintain in thelong run especially if regular updates to the website are required.Each update needs to be updated on the page individually, i.e. if amenu item that needs to be updated appears on every page, thechanges will have to be made individually on each page. That’scumbersome!

The Client cannot update the website on his own, so he will have todepend on the developer always, making it expensive to maintainthe site. That ways each update require moolah or you’ll beoutdated. Furthermore, management of the website is restrictedsince people with web development skills can only make changes.

The process of making such a website is time consuming, expensiveand on-going, which makes maintenance equally difficult and soStatic websites are a passé and people are gradually movingtowards other better options of getting a website – Responsive!

Responsive adapts the screen size for better viewing experience.

Image So

urce: w

ww

.evolv.co

m

Page 5: ResponsiveWebsite_Whitepaper

Why do you need the Big RESPONSIVE Switch?

Since past few years, website design is becoming synonymous toResponsive web design because:

1. A Responsive website comes with a package that says, ‘One size fits all’i.e. Screen (Small + Medium + Large) = One Website

2. It saves time and money because one website fits all screens and canbe maintained easily.

3. The performance of the website increases manifold since it adapts thescreen size and optimizes user experience. And well, optimized userexperience brings in good rates of conversion. That’s some seriousbusiness!

4. These websites are equipped to be used on old browsers as well, whichmakes it even more desirable to have a responsive web design.

5. The look and feel of the website is way too better than the staticwebsite, which attract many eyeballs and more the number of viewers,the better it is for the business.

6. The design and development process is simpler and easier than a staticwebsite, which makes it more cost effective.

Image So

urce: h

ttp://w

ww

.cnb

c.com

/id/1

01

35

38

69#.

Page 6: ResponsiveWebsite_Whitepaper

Good things are always supported by substantial stats!

“48% of users said they feel frustrated and annoyed when they access a website that isn’t mobile-friendly and 52% users stated that a mobile experience made them less likely to engage with that company”

-Google report ‘What Users Want Most from Mobile Sites Today’

While 16% of all web traffic is purely mobile traffic, this share is speculated to increase in the times to come. Arecent survey published by Business Insider shows that mobile users will surpass desktop users by 2014, whichmakes it even more important to switch to responsive sites to cater to the gamut of mobile and tablet users.

Also, a survey by TeaLeaf states that 16% of mobile users give up on site that takes too much of time to load. This is definitely an alarm raiser for static website owners, since these websites take ages to upload.

Page 7: ResponsiveWebsite_Whitepaper

That’s Not All…

Study conducted by TeaLeaf has also shown that 85%* of adults think that the mobile website of a company should also be equally good or better than their desktop versions. However, carrying two websites is not only burdensome but an expensive affair, which makes going responsive a win-win option.

Going further, people aren’t just browsing using tablets and mobiles, they are also shopping with it. 69% tablet users use their tablets for shopping online and 67% of users are likely to shop from a mobile-friendly site than a non-friendly site as per the data collected by InMobi in survey of 8400 mobile and tablet users for a span of 30 days.

Responsive design also gives you the power to make changes like adding a blog, article, service or product on a website that will be updated and reflected on all mediums simultaneously. Since 90% users use multiple screens sequentially, as sourced by an infographic by Google, having a responsive website will project you as a credible brand which is up to speed with the latest technology trends and provides consumers the best user experience.

Page 8: ResponsiveWebsite_Whitepaper

loves it!

With 67% search market share in 2013 (according to the Big G), Google is the biggest and the most popular search engine in the world. So, when Google says it prefers responsive web design as the recommended mobile configuration, it’s time you plan to switch to responsive.

But why does Google love it?Google crawls the site and then index and organizes all the content that is available online. AA responsive site has only one URL and the same HTML that works for all the devices. But, when a business has multiple websites for desktop, mobile and tablets, they have different URL and HTML. This makes Google to go through multiple versions of the same website.

Multiple sites makes content sharing difficult, while a single URL website makes it easy to share and interact with the content on the website. For example, in case of multiple websites, a link shared on social media using a mobile phone will not be accessible by people trying to view it on a PC. This will create unhappy users.

Google knows that unhappy users will leave the page and go elsewhere, increasing the bounce rate and decreasing rankings of the site on mobile searches. This creates Google external link algorithm and on-page errors, which in turn affects the SEO of the page as well. This means that it harms the business of both Google and business with no responsive websites.

Hence, Google loves single URL based Responsive Websites!

Page 9: ResponsiveWebsite_Whitepaper

How to go Responsive?

Responsive Designs are surely appealing both look and function wise. But to achieve a great design is challenging. Here’s how you can go by to make a good responsive website design:

‘Stop thinking in pages. Start thinking in system.’ – Jeremy Keith

This quotes defines the foundation of a good Responsive Website Design. A good design starts in your head and has a single motive which is to make a design that is user-friendly. The moment you understand this, you have won half the battle. The other half starts with the decision about the layout. Choose between 'The framework’ design that saves time or ‘Roll your own’ design that gives you more control. Once the design type is decided. Freeze the content – both text and images.

The next phase starts with actual designing. Expanding a small design is an easier job and helps avoid clutter. Therefore, a for a good responsive design the key is to design for mobile first. Once mobile is done, exit Photoshop and enter browser. Make the design modular and optimize it for various screen sizes. And your user-friendly responsive design is ready!

Page 10: ResponsiveWebsite_Whitepaper

Responsive Design is the new plan for VICTORY!

With use of mobile to search and surf the internet growing at an astronomical pace, it is imperative to avoid having a responsive website, especially when Google too prefers a responsive website. Besides, a website that is user-friendly and helps the user to source and share content from a single URL is always appreciated, liked and visited more.

Responsive is also time and money saving and brings in better conversion rates too. A trend that is catching up fast, Responsive Website Design is easy to have but requires an expert hand. So, if you’re a user-oriented business, drop us a line at: [email protected] and let our experts help you with all your doubts.

Page 11: ResponsiveWebsite_Whitepaper