Twitter Bootstrap 101

Responsive Design and Twitter Bootstrap1

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

DesignWhat is it? ConceptsResponsive DesignFrameworksOpen SourceDesign is a process for developing solutions that effectively integrate task, context of use, and user.

State of Todays WebSource: http://bradfrostweb.com/This is the challenge. How do you design for all of this?How do you manage the budget (staff, resources)?Source: http://www.comscore.com/Insights/Press_Releases/2013/4/comScore_Reports_February_2013_U.S._Smartphone_Subscriber_Market_Share51% of US mobile phones are smartphonesAnyone 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 An approach to web design that provides an optimal viewing experience across a wide range of devices.What is Responsive Web Design?http://www.alistapart.com/articles/responsive-web-design/First introduced in 2009 by Ethan Marcotte who has also written a book with the same title.

http://www.abookapart.com/products/responsive-web-designFirst introduced in 2009 by Ethan Marcotte who has also written a book with the same title.

10Elements of RWDFluid GridResizable ImagesMedia QueriesFirst introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.

Ive spent the last two years learning about and really digging into responsive Web design and Ive gotta say, It is the beginning of a new era in the Web.

Grids

Grids /

Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system

How do grid systems work?12 column version

Source: 960.gs12 column versionIn the 16 column version each column is 40px wide. Everything else remains the sameResizable Imagesimg {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.orgFirst introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.

Ive spent the last two years learning about and really digging into responsive Web design and Ive gotta say, It is the beginning of a new era in the Web.

Common BreakpointsLabelLayout WidthSmartphones480px and belowPortrait Tables480px to 768pxLandscape Tablets768px to 940pxDefault940px and upLarge Screens1210px and upAdvantages & DisadvantagesAdvantagesDisadvantagesUser Experience (UX)User Experience/Load TimeAnalyticsNo linkingSharing/LinkingSEOSEODevelopmentDevelopmentDesignMaintenanceSource: http://www.seomoz.org/FrameworksProject requirements determine the frameworkFluid Grid SystemResponsiveness a plusOffer more than just a grid (pre-defined styles for typography, tables, buttons, navigation, forms elements, etc.)FrameworksGreat documentation Maintained regularly by the community or creatorOpen Source (free)

Whathttp://twitter.github.com/bootstrap/

A freely available design framework for websites and web applications Based upon HTML5, CSS and JavaScriptSupports all major browsers (even IE7!)Released on GitHub in August 2011

Twitter BootstrapCreated By

26WhyReason #1: Rich Features

WhyReason #2: Popularity

Also MSIE and OperaWhyReason #3: Browser Support

WhyReason #4: Glyph Icon Set960 Grid System http://960.gs/Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/

WhyReason #5: Grid SystemBootstrap is using a grid system base on 12 columns. What is a grid system? A grid system is a way to create a solid foundation to build your project on.If you want your web application to have a left navigation you could design your HTML using row number 3If you do not want any navigation and you want your content to be as wide as possible then you could use row number 5This grid design was popularized by 960 grid system http://960.gs and BluePrint http://www.blueprintcss.org 31Buttons:

Tabs:

Breadcrumb:

Pagination:

Alerts:Progress bar:

WhyReason #6: ComponentsHere is a list of some of the CSS component available. There are dozens of them available with bootstrap.32WhyReason #7: Javascript/jQuery

Bootstrap gives life to its UI by using Jquery plugins. 33

WhyReason #8: Customization

Bootstrap provides a web-based customizer that allow you to generate a CSS file based on your specific needs.34WhyReason #9: Live Mock-Ups

Download Bootstrap and inline text editor Install text editor Extract the bootstrap files in to your project folderDownload example html file and save it as index.html in the project folder

HowDo websites need to look exactly the same in every browser?http://dowebsitesneedtolookexactlythesameineverybrowser.com/Resourceshttp://bootswatch.com/

Thanks!Kathy E Gill@kegillSlideshare.net/kegillCreative Commons License / share-and-share alike / attribution / non-commercial