Slide 1
Slide 1 text
foolab.ca | @foolabca
Bootstrap:
Mobile Sites in Minutes
ConFoo, Montreal - February 20, 2015
Slide 2
Slide 2 text
Anna Filina
• Developer
• Problem solver
• Coach
• Advisor
2
Slide 3
Slide 3 text
Objectives
• Create mobile sites faster
• Introduce Bootsrap
• Transform your site
3
Slide 4
Slide 4 text
Alternatives
• Application
◦ Requires download
◦ Development effort & maintenance
• Alternative site
◦ Redirects
◦ Development effort & maintenance
4
Slide 5
Slide 5 text
Responsive design
• No redirects
• Adjusts to size
• Minimal development effort
• Single website maintenance
5
Slide 6
Slide 6 text
Example
6
Slide 7
Slide 7 text
What is Bootstrap?
Slide 8
Slide 8 text
Frontend framework
• Helper CSS classes (class="navbar")
• JS for more advanced features
◦ Dropdown menu
◦ Tabs
• Works on any modern device
8
Slide 9
Slide 9 text
Advantages
• Widely used
• Rich documentation
• Many themes
• Easy to learn and use
9
Slide 10
Slide 10 text
index.html
10
Slide 11
Slide 11 text
index.html
11
...
...
Slide 12
Slide 12 text
Output comparison
Small:
Extra
small:
12
Slide 13
Slide 13 text
index.html
...
13
...
Slide 14
Slide 14 text
layout.css
@media (max-width: 767px) {
div.example {
border: none;
border-bottom: 1px solid #ccc;
padding: 0 0 10px 0;
}
}
@media (min-width: 768px) {
div.example {
border: 1px solid #ccc;
padding: 10px;
}
}
14
Slide 15
Slide 15 text
4 sizes
• xs
◦ 767-
◦ Phones
• sm
◦ 768+
◦ Tablets
• md
◦ 992+
◦ Desktops
• lg
◦ 1200+
◦ Large desktops
15
Slide 16
Slide 16 text
Building a
complete site
Slide 17
Slide 17 text
Header
17
Extra
small:
Small:
Slide 18
Slide 18 text
Header - small
18
6 6
col-sm-6 col-sm-6
Slide 19
Slide 19 text
Header - extra small
19
8 4
col-xs-8 col-xs-4
Slide 20
Slide 20 text
header.html
...
...
20
Slide 21
Slide 21 text
header.html
21
...
- ...
Slide 22
Slide 22 text
Spotlight
22
Extra
small:
Small:
Slide 23
Slide 23 text
spotlight.html
...
...
23
Slide 24
Slide 24 text
Content
24
Responsive video
Left-aligned image
Button with icon
Slide 25
Slide 25 text
content.html
25
Slide 26
Slide 26 text
content.html
26
...
Slide 27
Slide 27 text
content.html
27
Slide 28
Slide 28 text
Glyphicons
28
Color, background, size, shadow, etc.
Slide 29
Slide 29 text
Final result
29
Slide 30
Slide 30 text
Services
• Development: PHP, JS, etc.
• Fix problems: bugs, performance, etc.
• Workshops: Symfony, AngularJS, testing, etc.
• Advisor: testing strategy, legacy code, etc.
30
Slide 31
Slide 31 text
Useful links
• What is supported?
http://getbootstrap.com/getting-started/#support
• Responsive image replacement:
https://github.com/kvendrik/responsive-images.js
• @afilina
31