SEMINAR REPORT ON

Bootstrap Responsive UI

SUBMITTED BY:-ISHTDEEP SINGH HORA

SESSION2015-2016

Institute/University :-Guru Ramdas Khalsa Institute of Science &

Technology, Jabalpur (M.P.)

1

AcknowledgementApart from the efforts of me, the success of any seminar report depends largely on the

encouragement and guidelines of many others. I take this opportunity to express my gratitude

to the people who have been instrumental in the successful completion of this report.

I would like to show my greatest appreciation to Mrs. Husnara I can’t say thank you enough

for his tremendous support and help. I feel motivated and encouraged every time I attend his

meeting. Without his encouragement and guidance this report would not have materialized.

The guidance and support received from all the members who contributed and who are

contributing to this report, was vital for the success of the report. I am grateful for their

constant support and help.

2

Contents

INTRODUCTION:-

As smartphone and tablet adoption rapidly increases, so does the importance of

mobile-friendly websites.

If SEO is a core component of your digital marketing strategy, having a mobile–

friendly website is becoming essential.

3

S.No. Topic discussed Pages(from – to)

1. Introduction 4-6

2. Traffic through Mobile & Tablets 7-8

3. Media Queries 8

4. Why Bootstrap ? 9-12

5. Mobile First Strategy 12-19

6. Conclusion & Summary 20

7. References 21

Mobile sales have already overtaken desktop sales, and mobile Internet usage is

predicted to overtake desktop internet usage by 2014. It is only logical that mobile

search will overtake desktop search at some point in the near future as well.

Since 67 percent of users claim they are more likely to purchase from a mobile-

friendly website, companies that rely on SEO are wise to begin making the transition

to mobile-friendly websites, and responsive web designspecifically.

The argument between whether to choose a responsive website or a separate

mobile website is a highly debated topic. However, the truth is that both options

have their pros and cons.

The option that is best for your business depends on many factors, such as the

purpose of the website, the intended target audience, and whether SEO is a factor.

If SEO is a factor, here are three reasons why responsive web design is the best

option for your mobile SEO strategy.

1. Recommended By Google

With 67 percent search market share, when Google speaks, search marketers listen.

Google states that responsive web design is its recommended mobile configuration,

and even goes so far as to refer to responsive web design as the industry best

practice.

This is because responsive design sites have one URL and the same HTML, regardless

of device, which makes it easier and more efficient for Google to crawl, index, and

organize content. Contrast this with a separate mobile site which has a different URL

and different HTML than its desktop counterpart, requiring Google to crawl and

index multiple versions of the same site.

4

Additionally, Google prefers responsive web design because content that lives on

one website and one URL is much easier for users to share, interact with, and link to

than content that lives on a separate mobile site.

Take for example a mobile user who shares content from a mobile site with a friend

on Facebook who then accesses that content using a desktop, which results in that

user viewing a stripped down mobile site on their desktop. This creates a less than

optimal user-experience, and because of the large emphasis Google is now placing

on user-experience as a ranking factor, this is essential to take into account with

regards to SEO.

2. One Website, Many Devices

One of the most appealing aspects of responsive web design is that a responsive

website can provide a great user-experience across many devices and screen sizes.

This is an important characteristic, since it is impossible to anticipate all the devices

and screen sizes searchers will use to access your site. A site that works well

regardless of these variables will provide a better and more consistent user-

experience than a separate mobile site that is designed for a specific device and

screen size.

Let’s take the following example. Someone searches for a product on their

smartphone during a lunch break at work. They find a site that has the product

they’re looking for, and decide to continue researching this product on the same site

when they get home. Except, when they get home, they will use their desktop

instead of their smartphone.

If the site in this example is responsive, this person will have a positive user-

experience when transitioning from mobile to desktop because they will view the

same site on their desktop as they did on their smartphone. On the other hand, if the

site is a dedicated mobile site, this person will become frustrated with the fact that

5

they have to locate the desktop version of the site, and find the product all over

again.

3. Easier to Manage

Having a separate desktop and mobile site requires having separate SEO campaigns.

Managing one site and one SEO campaign is far easier than managing two sites and

two SEO campaigns. This is a key advantage a responsive website has over a separate

mobile site.

That being said, there are benefits to having a mobile-specific SEO strategy, such as

optimizing for keywords that are more likely to be searched when someone is on

their smartphone.

For example, someone performing a mobile search for a local restaurant may be

more inclined to use the word “nearby” in their search query. However, a separate

mobile site is not a requirement for a mobile SEO strategy, and there's no reason

why mobile-specific keywords can't be incorporated into a responsive design site as

well.

Mobile Devices Searches ?

The use of mobile devices to access the internet has increased by 67% worldwide over

the last 12 months according to StatCounter, the independent website analytics

company.

6

The report from the company's research arm, StatCounter Global Stats, finds that while

desktop remains the most popular means to access the web on 64.6%, mobile has grown

rapidly from 17.1% to 28.5%. Tablet devices account for 6.8% of internet usage,

compared to 4.8% 12 months ago.

StatCounter announced the findings to mark the launch of its new web analytics apps for

iOS and Android. These apps, which are free to download and use, are available

from iTunes or Google Play.

"Mobile usage has already overtaken desktop in several countries including India, South

Africa and Saudi Arabia," commented Aodhan Cullen, CEO, StatCounter. "All indications

are that this trend is set to continue, which creates new challenges and opportunities for

businesses globally."

He noted that just three years ago desktop was the number one platform across all

countries. StatCounter has produced an animated world map to show how this has

changed since then.

Mobile internet usage in the US has grown by 73% over the last 12 months to reach

24.4% in August. UK mobile internet usage is up by 69% to 23.2%. Other individual

country stats are available at http://gs.statcounter.com/#all-comparison-ww-monthly-

201308-201408.

7

Cullen added that mobile internet usage is increasing faster than tablet usage. "The

slower growth of tablets may be due to the trend towards larger screen smartphones. It

will be interesting to see whether Apple's new larger iPhone 6 Plus becomes a tablet

killer."

StatCounter Global Stats data is based on over 15 billion page views per month to over

three million websites.

Independent web analytics specialist StatCounter (www.statcounter.com) tracks millions

of websites globally. Its new mobile website analytics apps allow members to view

familiar StatCounter reports including weekly traffic trend analysis; recent visitor

activity; incoming traffic sources plus other data.

StatCounter also recently announced a new feature in response to Google's

controversial removal of keyword data. By integrating Google Webmaster Tools data

into its reports, StatCounter has given its members the ability to easily analyze all

available keyword data.

Media Queries :-"Responsive Design" is the strategy of making a site that "responds" to the browser

and device that it is being shown on... by looking awesome no matter what.

Media queries are the most powerful tool for doing this. Let's take our layout that

uses percent widths and have it display in one column when the browser is too small

to fit the menu in the sidebar:

@media screen and (min-width:600px) { nav { float: left; width: 25%; } section { margin-left: 25%; }}

8

@media screen and (max-width:599px) { nav li { display: inline; }

Why Bootstrap ?

For those of you, who like me have been developing websites for few years, we tend to

use similar chunks of CSS code that we copy paste from project to project.

Those of you who are more organized may have developed your own set of base CSS

files to use as foundation for your projects. This method works, but let’s face it, this is

not the most efficient way to do things.

Creating a CSS framework that is flexible, follows latest standards and is thoroughly

tested takes days of work and could become a project in itself. Most of us don’t have

time to do this.

To make matters worse, with the rise of mobile devices, making responsive websites and

keeping up with the latest technologies is time consuming.

Bootstrap and CSS frameworksDesigners need a solid foundation that gives us almost everything a typical website

would require but is flexible enough for customization. Thanks to hundreds of hours

spent by some developers and companies, we now have dozens of CSS Frameworks to

choose from.

Among all the available CSS frameworks out there, Bootstrap is my favorite and also one

of the most widely used. It's included by default in Joomla 3.

Bootstrap’s CSS files are also provided in LESS which makes it very easy to customize if

you already use LESS for CSS pre-processing.

So why should you choose Bootstrap? Here are 6 great reasons:

9

Reason #1. Easy to get startedCSS Pre-processing is great and every front end developer should learn it. However not

everyone is using it. There are still many designers creating and managing CSS files the

same old way. Bootstrap offers LESS files for those of us who know how to use it, but it

also provides the plain old CSS file for those don’t want to use CSS pre-processing.

To take advantage of what Bootstrap has to offer, you just have to download the files

from Bootstrap on Github and after unzipping, include the files in the head of your HTML

document.

This example HTML document includes the bootstrap framework with its default styling

and every single components and JavaScript plugins.

Reason #2. Great grid systemBootstrap is built on responsive 12-column grids, layouts and components. Whether you

need a fixed grid or a responsive, its only matter of a few changes. Offsetting & Nesting

of columns is also possible in both fixed and fluid width layouts.

Another useful set of features are the responsive utility classes using which you can

make a certain block of content appear or hide only on devices based on the size of their

screen. Very handy when you want to hide some content based on screen size. Adding a

class such as .visible-desktop to a element, will make it visible only for desktop users.

There are similar classes for tablets and phones.

Reason #3. Base styling for most HTML elementsA website has many different elements such as headings, lists, tables, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced with extensible classes.

The HTML elements for which styles are provided are:10

Typography Code

Tables

Forms

Buttons

Images

Icons

Reason #4. Extensive list of componentsWhether you need drop down menus, pagination or alert boxes, Bootstrap has got your

covered. Styling of every single element follows a consistent theme and if you know

LESS, then customizing it takes just few minutes.

Some of the components pre styled are:

Dropdowns

Button Groups

Navigation Bar

Breadcrumbs

Labels & Badges

Alerts

Progress Bar

And many others.

11

Reason #5. Bundled Javascript pluginsThe components such as drop down menu are made interactive with the numerous

JavaScript plugins bundled in the bootstrap package.

If you project requires sliders, tabs, accordions, then you no longer have to try and test

numerous different plugins across the web. Adding these functionalities is just a matter

of adding few lines of code and you are all set. With the customization option you can

also choose only certain plugins to keep the file size to a minimum.

Reason #6. Good documentationNot only does Bootstrap offer styling for almost every element a typical website or web

application requires, it also provides a great documentation with examples and demo

that only make it more easier for even someone new.

Mobile First Strategy

The mobile-first design has never been this crucial as consumers all over the

world increasingly prefer using mobile devices, with the smartphone topping the

list. This should come as no surprise with some of the recent statistics saying that

Americans spend a daily average of 4.7 hours on their smartphones and 80

percnet of Millennials sleep next to their phones.

Web designer, speaker, and consultant Brad Frost’s definition of mobile-first

design — “making mobile a priority instead of an afterthought in order to

capitalize the growth and capabilities of the medium” — definitely hits the spot as

to why it is now imperative for companies to take heed. Propelrr further points

out how mobile-first strategy can lead your customers to your desired actions.

However, it should be noted that just like any digital strategy, mobile-first design

is best utilized when incorporated into a company’s overall marketing scheme. In 12

this sink-or-swim world of marketing with your company’s bottom line at stake,

nonlinear marketing — integrating your online and offline marketing strategies

clearly and seamlessly — is essential for you to send your core message across all

of your channels. To achieve this, here are five ways of using mobile-first strategy

to integrate online and offline marketing campaigns.

Make your website appear fast and functional on any mobile device

Photo Courtesy of Serge Kij via Flickr, Creative Commons

Today’s consumers are on-the-go so you need to consider their mobile-viewing

experience — and utmost convenience — when they visit your website. This will

help you make the most out of their mobile usage especially when they use their

phones with the little pockets of time that they have — while waiting in lines,

using the bathroom, before falling asleep, and so on.

13

Tailor your website to be a responsive and mobile-friendly one, keeping different

mobile connection speeds and screen sizes in mind. Avoid encumbering your

mobile website with large image and files. Also, always keep in mind that no

matter what the platform is, content is king so while your mobile website’s design

should cut to the chase, it should not be found lacking in explaining your products

and services.

This also comes in handy when they drive over to your physical store so make

sure to optimize the mapping feature on your mobile website to help them locate

your physical store. To further drive offline retails sales with integrated digital

marketing, have your business and location listed on Google Places or Yahoo!

Local.

Give customers a great selection of deals with mobile marketing

You may have plenty of bargains in your online and offline marketing channels,

but you need to take it up a notch to catch the attention of always-connected

14

consumers who are bombarded with marketing materials every day. Make your

products and services find their way into customers’ radar by bringing promos,

discounts, and loyalty rewards scheme right to their mobile device.

Make your emails as clear, concise, and clutter-free as possible starting from the

subject line up to the content itself. If you have images, avoid large files that take

too long to load and include a text body which gets the message across even

without the help of images. More importantly, double check that your offers

across your online and offline marketing campaigns do not conflict with one

another.

Take advantage of QR codes

15

Photo Courtesy of Paul Swansen via Flickr, Creative Commons

QR codes take customers to your online marketing channel once their

smartphone or tablet scans these barcodes. Include QR codes in your offline

marketing materials — brochures, print ads, even business cards, and so on. The

moment customers get their hands on these materials, it means you caught their

attention and now you have to further engage them to check out your online

presence.

Aside from making sure the QR code is printed clearly, entice them as to why

scanning the code is worth their time. Use irresistible one-liners such as “Scan

here for your free gift.” Hinge it on the idea of providing customers exclusive

content and promos at the minuscule cost of them simply scanning the code.

Boost your sales by knowing their location

16

Photo Courtesy of Intel Free Press via Flickr, Creative Commons

Mobile device users prefer their gadgets of choice for a variety of reasons but the

likeliest one to underpin their use is convenience while they are on the go. With

one of marketing’s basic principles — studying your target market — learn more

about your customers’ locations as sent from their mobile devices.

You can then use the information to better formulate your online and offline

marketing strategies. For instance, if you are a company with young professionals

as your target audience, know where they hang out most of the time. You can

pinpoint which of your physical retail stores need a boost. From this, create online

marketing campaigns such as Facebook ads or posts drawing attention to the

particular stores in question.

Keep customers with apps for their needs

17

Photo Courtesy of Rachel Elaine. via Flickr, Creative Commons

While creating an innovative, cutting-edge app sounds intimidating for a sizable

number of businesses, the underlying principle should be this: how can your

brand’s message serve the needs of consumers? Think outside the box regarding

the execution but think of utility as well. Also, never forget to stick to your

company’s core branding.

A great example is the kid-tracking app from Nivea’s Sun Kids , which bagged first

place in the Cannes Lions International Festival of Creativity’s Mobile category last

year.

Recognizing that parents who use their products protect their kids, Nivea took

protection to a higher level by recognizing as well — and giving a solution to —

adults’ fears over missing children. Introducing this app in Brazilian magazine

18

advertisements inserted with a tracking bracelet for kids, the company led

parents to their online marketing scheme as the mobile app required connectivity

to locate GPS.

Mobile-first design is not coined as such for nothing. With the large and growing

number of mobile users, companies should find ways on how to optimize their

brand on customers’ mobile screens, with the consumers’ convenience in mind.

But then again, it is a must to incorporate this strategy in the overall marketing

plan and to integrate your online and offline marketing campaigns accordingly.

CONCLUSION & SUMMARY

One of the most appealing aspects of responsive web design is that a responsive

website can provide a great user-experience across many devices and screen sizes.

This is an important characteristic, since it is impossible to anticipate all the devices

and screen sizes searchers will use to access your site. A site that works well 19

regardless of these variables will provide a better and more consistent user-

experience than a separate mobile site that is designed for a specific device and

screen size.

Let’s take the following example. Someone searches for a product on their

smartphone during a lunch break at work. They find a site that has the product

they’re looking for, and decide to continue researching this product on the same site

when they get home. Except, when they get home, they will use their desktop

instead of their smartphone.

If the site in this example is responsive, this person will have a positive user-

experience when transitioning from mobile to desktop because they will view the

same site on their desktop as they did on their smartphone. On the other hand, if the

site is a dedicated mobile site, this person will become frustrated with the fact that

they have to locate the desktop version of the site, and find the product all over

again.

References:-

http://www.gsmarena.com/glossary.php3?term=nfc

http://en.wikipedia.org/wiki/Near_field_communication

http://www.nfcworld.com/about/

20

http://www.techradar.com/news/phone-and-communications/what-is-nfc-and-why-is-

it-in-your-phone-948410

 "EXCLUSIVE: Confirmed as Name of e". Retrieved May 7, 2013.

21

22