Bootstrap responsive design

SEMINAR REPORT ON
Bootstrap Responsive UI
SUBMITTED BY:-
ISHTDEEP SINGH HORA
SESSION
2015-2016
Institute/University :-
Guru Ramdas Khalsa Institute of Science &
Technology, Jabalpur (M.P.)
Acknowledgement
Apart 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
1

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.
Contents
2

INTRODUCTION:-
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

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.
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
4

different URL and different HTML than its desktop counterpart, requiring Google to
crawl and index multiple versions of the same site.
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
5

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.
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 ?
6

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.
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
7

country stats are available at http://gs.statcounter.com/#all-comparison-ww-monthly-
201308-201408.
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 {
8

margin-left: 25%;
}
}
@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 frameworks
Designers 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.
9

So why should you choose Bootstrap? Here are 6 great reasons:
Reason #1. Easy to get started
CSS 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 system
Bootstrap 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 elements
A 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.
10

The HTML elements for which styles are provided are:
• Typography
• Code
• Tables
• Forms
• Buttons
• Images
• Icons
Reason #4. Extensive list of components
Whether 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 plugins
The 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 documentation
Not 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.
12

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
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
13

phones with the little pockets of time that they have — while waiting in lines,
using the bathroom, before falling asleep, and so on.
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
14

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
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.
16

Boost your sales by knowing their location
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.
17

Keep customers with apps for their needs
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 —
18

adults’ fears over missing children. Introducing this app in Brazilian magazine
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
19

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 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
20

 http://www.nfcworld.com/about/
 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

Bootstrap responsive design

More Related Content

What's hot

Similar to Bootstrap responsive design

More from Ishtdeep Hora

Recently uploaded

Bootstrap responsive design