Embed Size (px)
DESCRIPTION
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.
Citation preview
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/
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 • [email protected]
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 • [email protected]
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 • [email protected]
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 • [email protected]
getbootstrap.com foundation.zurb.com
15 More Responsive CSS Frameworks Worth Considering Framework Fight: Zurb Foundation vs Twitter Bootstrap
www.jenkramer.org • [email protected]
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 • [email protected]
www.jenkramer.org • [email protected]
Jen Kramer Waltham, MA Phone: 802-257-2657 [email protected] www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen
Slides available at www.slideshare.net/jen4web
