Your SlideShare is downloading. ×
Mobile, Bootstrap, Joomla!
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1.   Joomla Day San Francisco • Berkeley, CA • September 2013
  • 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.
  • 4. •
  • 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.  Build a separate mobile- compatible website or mobile app (or both)  Responsive Design  A comparison of methods for building mobile- optimized websites •
  • 7.  Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)  •
  • 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.  Browser reports screen resolution  Based on current width, serve a stylesheet with layout for that width  No JavaScript involved
  • 10. More info:
  • 11. 
  • 12. Same data from the database Served up with different themes
  • 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. 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.  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.  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. 15 More Responsive CSS Frameworks Worth Considering Framework Fight: Zurb Foundation vs Twitter Bootstrap •
  • 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.  •
  • 20. Jen Kramer Waltham, MA Phone: 802-257-2657 Twitter: @jen4web Facebook: Slides available at