• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile, Bootstrap, Joomla!
 

Mobile, Bootstrap, Joomla!

on

  • 883 views

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.

Statistics

Views

Total Views
883
Views on SlideShare
877
Embed Views
6

Actions

Likes
2
Downloads
23
Comments
0

1 Embed 6

http://elearning.tadelformacion.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile, Bootstrap, Joomla! Mobile, Bootstrap, Joomla! Presentation Transcript

    •   Joomla Day San Francisco • Berkeley, CA • September 2013
    •  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.”
    • mashable.com/2013/01/08/tablets-outsell-notebooks/
    • www.jenkramer.org • jen@jenkramer.org
    •  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
    •  Build a separate mobile- compatible website or mobile app (or both)  Responsive Design  A comparison of methods for building mobile- optimized websites www.jenkramer.org • jen@jenkramer.org
    •  Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)  www.alistapart.com/articles/responsive-web-design/ www.jenkramer.org • jen@jenkramer.org
    •  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)
    •  Browser reports screen resolution  Based on current width, serve a stylesheet with layout for that width  No JavaScript involved
    • More info: http://hawksworx.com/blog/oakleys-monster-page-of-baubles/
    • 
    • Same data from the database Served up with different themes
    • 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
    • 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
    •  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. wikipedia.org/wiki/Twitter_Bootstrap www.jenkramer.org • jen@jenkramer.org
    •  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 www.jenkramer.org • jen@jenkramer.org
    • getbootstrap.com foundation.zurb.com 15 More Responsive CSS Frameworks Worth Considering Framework Fight: Zurb Foundation vs Twitter Bootstrap www.jenkramer.org • jen@jenkramer.org
    •  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 Medicare.gov o Disqus o Delicious www.jenkramer.org • jen@jenkramer.org
    •  www.jenkramer.org • jen@jenkramer.org
    • Jen Kramer Waltham, MA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen Slides available at www.slideshare.net/jen4web