Mobile, Bootstrap, Joomla!


Published on

Understand the difference between a template built with Bootstrap and responsive design vs. a separate mobile site, like those built with MobileJoomla or that come bundled with some templates. Which is better? When it is appropriate to use each? Also get an intro to Bootstrap 3.

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile, Bootstrap, Joomla!

  1. 1.   Joomla Day San Francisco • Berkeley, CA • September 2013
  2. 2.  Smartphone sales to hit 1bn a year for first time in 2013  “The smartphone is predicted to become a mass market phenomenon this year, with annual shipments soaring to 1bn globally for the first time, although a fifth of the devices will rarely be used to go online.”  “In 2013…the number of active phones with either a touch screen or an alphabet keyboard to 2bn by the end of the year.”
  3. 3.
  4. 4. •
  5. 5.  93.3% of SMB websites are not mobile-compatible and will not render successfully on mobile devices, including smartphones. o 80.5% have no social media links. o 74.7% lack an email link on their home page. o 65.7% lack a form to request information. o 60% have no toll-free or local phone number on the home page. o 56.3% have no keyword info for search engines.  56% plan to invest in a new website or software in 2013. Source
  6. 6.  Build a separate mobile- compatible website or mobile app (or both)  Responsive Design  A comparison of methods for building mobile- optimized websites •
  7. 7.  Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)  •
  8. 8.  Images should change size, based on screen resolution o Load a big image and let it scale (not good) o Server-side (good) o Client-side: Load several images and display the one right for this resolution (not good) o Client-side: let JavaScript decide (better)
  9. 9.  Browser reports screen resolution  Based on current width, serve a stylesheet with layout for that width  No JavaScript involved
  10. 10. More info:
  11. 11. 
  12. 12. Same data from the database Served up with different themes
  13. 13. Responsive Design  Static or CMS sites OK  Same content served in any environment  Can work at any screen dimension if coded well  Same URLs for content Mobile Site  CMS driven required  Can serve different content to desktop and mobile if required
  14. 14. Responsive Design  If front-end developer doesn’t know what they are doing, this can be a slow data-hog. Need a talented front-end developer who can weigh requirements and tradeoffs to make this technique work optimally.  Is your content mobile-friendly? Mobile Site  What if user wants to see the “full site” version?  What happens if the user has a device that’s not one of the defined widths?  May have different URLs for mobile vs desktop content  Talented back-end team who can serve up two (or more) sites with different themes/templates
  15. 15.  Twitter Bootstrap is a responsive design framework for building web sites and web applications.  It is the most popular project in GitHub and is used by NASA and MSNBC among others. •
  16. 16.  Mobile-first approach  Single (responsive) grid system, including grid sizing for <768 px, >768 px, >992 px, and >1200 px  Dropping support for IE7 and FF 3.6 (and removing hacks to support them).  Now supporting IE 8 and higher (with some modifications)  Font icons, dropping old PNG icons  Redesigned the Carousel, add Panels and List Groups •
  17. 17. 15 More Responsive CSS Frameworks Worth Considering Framework Fight: Zurb Foundation vs Twitter Bootstrap •
  18. 18.  Joomla (open source CMS) integrated Bootstrap into version 3.  Bootstrap unofficial showcase  Love Bootstrap  Bootstrap Expo  A few big names: o State of Kentucky o code.NASA (with WordPress) o Michael’s craft store o Fender guitars o StumbleUpon o Salvation Army (Midwest) o o Disqus o Delicious •
  19. 19.  •
  20. 20. Jen Kramer Waltham, MA Phone: 802-257-2657 Twitter: @jen4web Facebook: Slides available at
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.