Slide 1
Slide 1 text
foolab.ca | @foolabca
Bootstrap:
Mobile Sites in Minutes
Fluent, San Francisco - April 21, 2015
Slide 2
Slide 2 text
Anna Filina
• Developer
• Problem solver
• Coach
• Advisor
2
Slide 3
Slide 3 text
Objectives
• Choose responsive
• Create mobile sites faster
• Introduce Bootstrap
• Transform your site
3
Slide 4
Slide 4 text
Mobile world
4
App Site
Alternative Responsive
Mobile
Slide 5
Slide 5 text
Native issues
• Effort for current & future platforms.
• Many variables:
◦ devices,
◦ browsers,
◦ capabilities.
• Need to download & install.
• Useful for task-oriented apps.
5
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Responsive advantages
• Fully adapts to the viewport size.
• No redirects.
• Single website.
• Fastest & cheapest.
7
Slide 8
Slide 8 text
Example
8
Slide 9
Slide 9 text
What is Bootstrap?
Slide 10
Slide 10 text
Frontend framework
• Helper CSS classes (class="navbar").
• Grid layout.
• JS for more advanced features
◦ Dropdown menu
◦ Tabs
◦ Carousel
• Works on any modern device.
10
Slide 11
Slide 11 text
Advantages
• Widely used
• Rich documentation
• Many themes
• Easy to learn and use
11
Slide 12
Slide 12 text
Let's build stuff!
Slide 13
Slide 13 text
index.html
13
Slide 14
Slide 14 text
index.html
14
...
...
Slide 15
Slide 15 text
Output comparison
Small+:
Extra
small:
15
Slide 16
Slide 16 text
index.html
...
16
...
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
4 sizes
• xs
◦ 767-
◦ Phones
• sm
◦ 768+
◦ Tablets
• md
◦ 992+
◦ Desktops
• lg
◦ 1200+
◦ Large desktops
18
Slide 19
Slide 19 text
Building a
complete site
Slide 20
Slide 20 text
Header
20
Extra
small:
Small+:
Slide 21
Slide 21 text
Header - small
21
6 6
col-sm-6 col-sm-6
Slide 22
Slide 22 text
Header - extra small
22
8 4
col-xs-8 col-xs-4
Slide 23
Slide 23 text
header.html
...
...
23
Slide 24
Slide 24 text
header.html
24
Menu
- ...
Slide 25
Slide 25 text
Spotlight
25
Extra
small:
Small+:
Slide 26
Slide 26 text
spotlight.html
...
...
26
Slide 27
Slide 27 text
Content
27
Responsive video
Left-aligned image
Button with icon
Slide 28
Slide 28 text
content.html
28
Slide 29
Slide 29 text
content.html
29
...
Slide 30
Slide 30 text
content.html
30
Slide 31
Slide 31 text
Glyphicons
31
Color, background, size, shadow, etc.
Slide 32
Slide 32 text
Final result
32
Slide 33
Slide 33 text
Advanced example
33
Slide 34
Slide 34 text
Advanced example
34
Slide 35
Slide 35 text
Other features
• Carousel.
• Popups.
• Progress bars.
• Pagination.
• Button dropdown.
• ...
35
Slide 36
Slide 36 text
Tips
• Don't make user scroll too much (shortcuts).
• Make descriptive button labels.
• Keep transitions to minimum.
• Cordova / PhoneGap to convert to native.
36
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
Useful links
• What is supported?
http://getbootstrap.com/getting-started/#support
• Responsive image replacement:
https://github.com/scottjehl/picturefill
38
Slide 39
Slide 39 text
@afilina afilina.com