As presented at Joomladay Sydney 2013

1. Why
Over 1.2 Billion mobile users.
Mobile will overtake fixed Internet
access by 2014.
It’s actually easier to do!

2. Why
Luke Wroblewski
•Prepares you for the explosive growth and new opportunities emerging on
mobile today,
•Forces you to focus and prioritize your products by embracing the constraints
inherent in mobile design, and
•Allows you to deliver innovative experiences by building on new capabilities
native to mobile devices and modes of use.

3. Paradigms
Progressive Enhancement Vs Graceful Degradation
Responsive Vs Adaptive
Mobile First Vs Desktop First

4. Traditional

5. Mobile First

6. The 1st Problem

7. The 2nd Problem

8. How to get started
•It always starts with the content!
•Design to mobile
•Progressively enhance
•Develop to mobile
•Progressively enhance

9. Gotcha’s
@media
display:
none
<img />
<object>
<td> or <li>

10. Bootstrap 3
“With Bootstrap 2, we added optional mobile
friendly styles for key aspects of the framework.
With Bootstrap 3, we've rewritten the project to be
mobile friendly from the start. Instead of adding on
optional mobile styles, they're baked right into the
core. In fact, Bootstrap is mobile first. Mobile first
styles can be found throughout the entire library
instead of in separate files.”

11. Bootstrap 3
col-xs- Really small devices
col-sm- Small devices
col-md- Medium devices
col-lg- Large devices

12. Bootstrap 3

13. Bootstrap 3
<div class=”col-sm-12 col-lg-6”></div>
col-sm-12 (100%)
col-sm-12 (100%)
col-lg-6 (50%)
col-lg-6 (50%)

14. In Conclusion
We are heading to a mobile world... in fact we
may already be there
Mobile fist will make your life easier
Projects will be mobile ready in less time.

15. Questions

16. Icons: Danilo Demarco - http://www.danilodemarco.com/
https://www.youtube.com/watch?feature=player_embedded&v=Z1IqzeA3XXg