Scribd
Upload
37 views39 pages

Twitter Bootstrap 101

The document discusses responsive web design and the Twitter Bootstrap framework. It defines responsive design as an approach that provides an optimal viewing experience across different devices. Key elements of responsive design include fluid grids, resizable images, and media queries. Twitter Bootstrap is introduced as a freely available framework for responsive websites based on HTML, CSS, and JavaScript. Several advantages of Bootstrap are highlighted, including its rich features, popularity, browser support, grid system, and customizable components.

Uploaded by

Santpa Technologies
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
37 views39 pages

Twitter Bootstrap 101

The document discusses responsive web design and the Twitter Bootstrap framework. It defines responsive design as an approach that provides an optimal viewing experience across different devices. Key elements of responsive design include fluid grids, resizable images, and media queries. Twitter Bootstrap is introduced as a freely available framework for responsive websites based on HTML, CSS, and JavaScript. Several advantages of Bootstrap are highlighted, including its rich features, popularity, browser support, grid system, and customizable components.

Uploaded by

Santpa Technologies
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 39

Responsive Design and

Twitter Bootstrap

Kathy E. Gill
@kegill
Introductions
Who are we?
 What do you do?
 What do you want to do?
 What tools or areas of web design
interest you most?
 About the class ….
Design
What is it?
Concepts
Responsive Design
Frameworks
Open Source
Design is a process for
developing solutions
that effectively
integrate task, context
of use, and “user.”
State of Today’s Web

Source: http://bradfrostweb.com/
51% of US mobile
phones are
smartphones

Source: http
://www.comscore.com/Insights/Press_Releases/2013/4/comScore_Reports_February_2013_U.S._Smartphone_
Subscriber_Market_Share
“Anyone who slaps a ‘This page is best
viewed with browser X’ label on a web
page appears to be yearning for the bad
old days, before the web, when you had
very little chance of reading a document
written on another computer, another
word processor, or another network.”
Tim Berners-Lee in Technology Review, July 1996
What is Responsive
Web Design?

An approach to web design that provides


an optimal viewing experience across a
wide range of devices.

http://www.alistapart.com/articles/responsive-web-design/
http://www.abookapart.com/products/responsive-web-design
Elements of RWD

• Fluid Grid
• Resizable Images
• Media Queries
Grids
Grids /
Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
How do grid systems work?
Resizable Images
img {
max-width: 100%;height: auto;}
Media Queries
• A CSS3 module that renders web
pages based on conditions such as
screen resolution
• Drafted in 2001 by the W3C
• Became a recommended standard in
June 2012

Source: Wikipedia.org
Common Breakpoints
Label Layout Width

Smartphones 480px and below

Portrait Tables 480px to 768px

Landscape Tablets 768px to 940px

Default 940px and up

Large Screens 1210px and up


Advantages & Disadvantages
Advantages Disadvantages

User Experience (UX) User Experience/Load Time

Analytics No linking

Sharing/Linking SEO

SEO Development

Development Design

Maintenance

Source: http://www.seomoz.org/
Frameworks
Project requirements determine the framework
Fluid Grid System
Responsiveness a plus
Offer more than just a grid (pre-defined styles for
typography, tables, buttons, navigation, forms elements,
etc.)
Frameworks
Great documentation
Maintained regularly by the community or creator
Open Source (free)
What

http://twitter.github.com/bootstrap/
Twitter Bootstrap
 A freely available design framework for
websites and web applications
 Based upon HTML5, CSS and JavaScript
Supports all major browsers (even IE7!)
Released on GitHub in August 2011
Created By
Why
Reason #1: Rich Features
Why
Reason #2: Popularity
Why
Reason #3: Browser Support

Also MSIE and Opera


Why
Reason #4: Glyph Icon Set
Why
Reason #5: Grid System

 960 Grid System http://960.gs/


 Blue Print CSS http://www.blueprintcss.org/
 Golden Grid System http://goldengridsystem.com/
Why
Reason #6: Components
 Buttons:
 Tabs:
 Breadcrumb:
 Pagination:
 Alerts:

 Progress bar:
Why
Reason #7: Javascript/jQuery
Why
Reason #8: Customization
Why
Reason #9: Live Mock-Ups
How
1. Download Bootstrap and inline text editor
2. Install text editor
3. Extract the bootstrap files in to your
project folder
4. Download example html file and save it
as index.html in the project folder
Do websites need to
look exactly the same
in every browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Resources
http://bootswatch.com/
Thanks!
 Kathy E Gill
 @kegill
 Slideshare.net/kegill
 Creative Commons License / share-and-share alike /
attribution / non-commercial

You might also like