Downloaded 34 times
Uploaded byFajar Baskoro
Bootstrap
The document discusses how to better serve mobile users by building responsive websites and applications. It introduces responsive design, which provides an optimal viewing experience across devices. Key elements of responsive design include fluid grids, resizable images, and media queries. Popular frameworks like Twitter Bootstrap are introduced that help build responsive sites using fluid grids, predefined styles, and support for all browsers.
More Related Content
Bootstrap
- 1.
- 2. Introduction Mobile internetuse will continue to surge More than half of Facebook users are using mobile Mobile use is increasing at Berkeley
- 3. How can webetter serve our increasingly mobile users? Design: Build responsiveness into your websites and applications Content: Think about content from a mobile first perspective
- 4. Design: Build responsivenessinto your websites and applications
- 9.
- 10. Design is aprocess for developing solutions that effectively integrate task, context of use, and “user.”
- 11. An approach toweb 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/
- 12.
- 13.
- 14.
- 16.
- 17.
- 18. Resizable Images img { max-width:100%;height: auto;}
- 19. Common Breakpoints Label LayoutWidth Smartphones 480px and below Portrait Tables 480px to 768px Landscape Tablets 768px to 940px Default 940px and up Large Screens 1210px and up
- 20. Frameworks Project requirementsdetermine 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.)
- 21. Frameworks Great documentation Maintained regularly by the community or creator Open Source (free)
- 23. A freelyavailable 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 Twitter Bootstrap
- 24.
- 26.
- 27. 960 GridSystem http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/ Grid System
- 28. Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar: Components
- 29.
- 42.
- 50.
Editor's Notes
- #3 Eric introduces Matt and Patrick. Anything else to say? Statistics showing increased mobile use (EC and or PM) - Talk about the growing use of mobile devices on the web. Maybe something along the lines of this: http://articles.washingtonpost.com/2013-02-06/business/36937190_1_mobile-internet-mobile-devices-data-traffic - More than half of Facebook users are mobile users...who you want to click-through to your content (http://news.cnet.com/8301-1023_3-57480950-93/facebook-over-955-million-users-543-million-mobile-users/) SHOW: Summary screen of collective GA stats
- #4 Overview
- #5 - What is it? A website layout that responds to a users’ device automatically. - Adaptive, Responsive and Mobile are somewhat interchangeable ways of talking about the same thing. (In general, they all intend to make it so that people viewing your site on a smart phone or tablet can navigate and read content without doing an excessive amount of pinching and zooming...that the experience is optimized for their device.) SHOW AND TELL: Show a site without CSS (the presentation layer). Examples of desktop site and same site on mobile. Example of a site with breakpoints versus a site that is fully responsive (fluid). Show that there are multiple approaches to achieve the same layout goals. Anecdotal stories about students not even looking at sites that are not optimized.
- #12 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title.
- #13 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title.
- #14 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend. I’ve spent the last two years learning about and really digging into responsive Web design and I’ve gotta say, It is the beginning of a new era in the Web.
- #19 In the 16 column version each column is 40px wide. Everything else remains the same
- #29 Bootstrap 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 3 If you do not want any navigation and you want your content to be as wide as possible then you could use row number 5 This grid design was popularized by 960 grid system http://960.gs and BluePrint http://www.blueprintcss.org
- #30 Here is a list of some of the CSS component available. There are dozens of them available with bootstrap.
- #31 Bootstrap gives life to its UI by using Jquery plugins.