Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Bootstrap: Mobile Sites in Minutes

Bootstrap: Mobile Sites in Minutes

Bootstrap is a front-end framework that allows you to create responsive layouts, meaning that they automatically adjust to any screen size. It’s easy to use, fast to integrate and looks amazing. This presentation will teach you how to quickly create an adaptive layout and with little effort. It will also feature a case study of transforming an existing web application.

Anna Filina

April 21, 2015
Tweet

More Decks by Anna Filina

Other Decks in Programming

Transcript

  1. Objectives • Choose responsive • Create mobile sites faster •

    Introduce Bootstrap • Transform your site 3
  2. Native issues • Effort for current & future platforms. •

    Many variables: ◦ devices, ◦ browsers, ◦ capabilities. • Need to download & install. • Useful for task-oriented apps. 5
  3. Mobile advantages • Quicker and less expensive. • No download,

    no installation. • Others link to your site. • Point of entry for first-time users. • Useful for content-oriented sites. 6
  4. Responsive advantages • Fully adapts to the viewport size. •

    No redirects. • Single website. • Fastest & cheapest. 7
  5. Frontend framework • Helper CSS classes (class="navbar"). • Grid layout.

    • JS for more advanced features ◦ Dropdown menu ◦ Tabs ◦ Carousel • Works on any modern device. 10
  6. layout.css @media (max-width: 767px) { div.example { border-bottom: 1px solid

    #ccc; padding: 0 0 10px 0; } } @media (min-width: 768px) { div.example { border: 1px solid #ccc; padding: 10px; } } 17
  7. 4 sizes • xs ◦ 767- ◦ Phones • sm

    ◦ 768+ ◦ Tablets
 • md ◦ 992+ ◦ Desktops • lg ◦ 1200+ ◦ Large desktops 18
  8. header.html <!-- inside nav tag --> <div class="navbar-header"> <button class="navbar-toggle"

    data-toggle="collapse" data-target=".navbar-collapse">Menu</button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav">...</ul> </div> 24
  9. Other features • Carousel. • Popups. • Progress bars. •

    Pagination. • Button dropdown. • ... 35
  10. Tips • Don't make user scroll too much (shortcuts). •

    Make descriptive button labels. • Keep transitions to minimum. • Cordova / PhoneGap to convert to native. 36
  11. Services • Development: PHP, JS, etc. • Fix problems: bugs,

    performance, etc. • Workshops: testing, Symfony, AngularJS, APIs, etc. • Advisor: testing strategy, legacy code, speed up development, etc. 37