responsive design and twitter bootstrap
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/1.jpg)
Kathy E. Gill@kegill
Responsive Design and Twitter Bootstrap
![Page 2: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/2.jpg)
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 ….
![Page 3: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/3.jpg)
DesignWhat is it?
![Page 4: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/4.jpg)
ConceptsResponsive DesignFrameworksOpen Source
![Page 5: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/5.jpg)
Design is a process for developing solutions that effectively integrate task, context of use, and “user.”
![Page 7: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/7.jpg)
Source: http://www.comscore.com/Insights/Press_Releases/2013/4/comScore_Reports_February_2013_U.S._Smartphone_Subscriber_Market_Share
51% of US mobile phones
are smartphones
![Page 8: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/8.jpg)
“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
![Page 9: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/9.jpg)
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/
![Page 10: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/10.jpg)
http://www.abookapart.com/products/responsive-web-design
![Page 11: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/11.jpg)
Elements of RWD
•Fluid Grid•Resizable Images•Media Queries
![Page 12: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/12.jpg)
Grids
![Page 13: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/13.jpg)
![Page 14: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/14.jpg)
Grids /
![Page 15: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/15.jpg)
Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid systemHow do grid systems work?
![Page 16: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/16.jpg)
Resizable Imagesimg {max-width: 100%;height: auto;}
![Page 17: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/17.jpg)
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
![Page 18: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/18.jpg)
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
![Page 19: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/19.jpg)
Advantages & DisadvantagesAdvantages Disadvantages
User Experience (UX) User Experience/Load Time
Analytics No linking
Sharing/Linking SEO
SEO Development
Development Design
Maintenance
Source: http://www.seomoz.org/
![Page 20: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/20.jpg)
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.)
![Page 21: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/21.jpg)
FrameworksGreat documentation Maintained regularly by the community or
creatorOpen Source (free)
![Page 22: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/22.jpg)
![Page 24: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/24.jpg)
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 Bootstrap
![Page 25: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/25.jpg)
Created By
![Page 26: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/26.jpg)
WhyReason #1: Rich Features
![Page 27: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/27.jpg)
WhyReason #2: Popularity
![Page 28: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/28.jpg)
Also MSIE and Opera
WhyReason #3: Browser Support
![Page 29: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/29.jpg)
WhyReason #4: Glyph Icon Set
![Page 30: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/30.jpg)
960 Grid System http://960.gs/Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/
WhyReason #5: Grid System
![Page 31: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/31.jpg)
Buttons: Tabs: Breadcrumb: Pagination: Alerts:
Progress bar:
WhyReason #6: Components
![Page 32: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/32.jpg)
WhyReason #7: Javascript/jQuery
![Page 33: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/33.jpg)
WhyReason #8: Customization
![Page 34: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/34.jpg)
WhyReason #9: Live Mock-Ups
![Page 35: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/35.jpg)
![Page 36: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/36.jpg)
1. Download Bootstrap and inline text editor
2. Install text editor 3. Extract the bootstrap files in to your
project folder4. Download example html file and save
it as index.html in the project folder
How
![Page 37: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/37.jpg)
Do websites need to look
exactly the same in every browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
![Page 39: Responsive Design and Twitter Bootstrap](https://reader035.vdocuments.net/reader035/viewer/2022062521/568168aa550346895ddf4a38/html5/thumbnails/39.jpg)
Thanks!Kathy E [email protected]/kegillCreative Commons License / share-and-share
alike / attribution / non-commercial