Presented at J & Beyond 2012 by Olivier Karfis @olivierk - Use case of frenchtoday.com a responsive e-commerce site based on Joomla, K2, Redshop and Zurb Foundation framework.

1. JAB12 - Sun May 20th 2012
USE CASE:
Integrating a complex responsive
e-commerce site
Olivier Karfis @olivierk

2. ?

3. My own worst
customer!
By day:
Run a French learning audiobook business
with my wife: frenchtoday.com
By night, late nights, weekends :
Joomla integrator / frond end designer

4. Site Highlights
• 110+ hours of audio recordings
• 17 downloadable products
• Free registered only section
• 260+ Blog posts/free lessons
• Targets non technical users

5. Store
• ZenCart ➜ VM/K2Mart ➜ RedSHOP
• Goal: seamless store vs. site experience

6. Why make your store
responsive?

7. Simple:
Look at your audience

8. 12 months
Mobile Visits Increase
April 2011 = 4.9%
April 2012 = 9.3%

9. And it’s not just visits...
• Almost the same pages/visit
• Almost the same visit duration
• Almost the same bounce rate
• ... and 10% of revenue last month!

10. Today
more mobile traffic
than IE 9

11. Which Responsive
Framework ?
Twitter Bootstrap Zurb Foundation
320 & Up, OneWeb, Or...

12. Why did French Today
Use Zurb Foundation?
• Clean baseline styles
• Super quick prototyping
• Uses Source ordering not
currently available in Bootstrap
• but really... built 4 weeks before
Bootstrap became responsive!

13. So what framework
should I choose?

14. Good news everyone!
Joomla 3.0 is
getting strapped!

15. Other big extension devs
are moving to Bootstrap too
redCOMPONENT, Kunena, JomSocial...

16. What does RWD
affect?
It’s not just re-shuffling layout...

21. Biggest changes are in
the smartphone
format...

22. Logo is smaller
Search moves &
more prominent
Social icons
Disappear
Main Navigation
changes to a Select
Left sidebar drops
below main content

24. Some Responsive
Considerations
• Images
Above the fold in mobile is VERY different
• Extensive sub-menus?
Sub navs take too much real-estate
• Highlight search
• Focus on key navigation/pages/workflows
• Social Icons?

25. How it’s built...

26. The Leading Cast
• Supported!
• Actively developed
• Good override mechanism
(almost)
• Moving towards Bootstrap
too

27. The Leading Cast
• Still better than J2.5 for image
handling (especially resizing)
• Tags (needed for blog)
• Simple override & great
category parameters
inheritance
• Easy migration of existing
content

28. The Leading Cast
• Fine URL control
(usability, SEO)
• Centralized metadata
management
• Manual control over
item ID/duplicate issues
• “Official” choice of both
redSHOP & K2

29. Supporting Cast
• NoNumber
• Advanced Module Manager
• Snippet
• Sourcerer
• RS Forms PRO w/ plugins
• JCE Text Editor
• Akeeba Backup / Admin Tools

30. Workflows
& Integration
Examples

31. All in One Registration
Responsive is also being customer focused
• Fastest most friction less way to create an
account but collect some key user data
• Don’t require a username
(everyone remembers their email!)
• Forgo the email validation step
(feasible when not using a username)

32. All in One Registration
Extensions used
• LunarHotel EmailAsUserName
• RS Forms Pro
• RS Joomla Account plugin
• RS Mailchimp plugin

33. Why MailChimp over
newsletter extension?
• Great deliverability
• Targeted time zone delivery
• Lots of very useful stats
• Very powerful & intuitive UI
• It’s got a monkey!

34. The Form
Just name, email &
password needed.
That’s it!

35. Set up Form

36. Joomla Account plugin
Use Email in all fields
to bypass username
requirements

37. RSForms Mailchimp
Plugin
Map Form Fields to
Mailchimp Fields
Use RSForm fields to
add users to different
Mailchimp segments

38. Captured Data
in Mailchimp
Automatically captured:
Country, date, source, IP, segment...

39. Amazon Style
“added to cart” message
Improved usability for non-tech users

40. Usability Improvements
From this vanilla redSHOP system message
To this Amazon style one
in 10 minutes WITHOUT core hacks...

41. NoNumber ReReplacer
Live search
keyed on this
phrase
Replace with
this code...

42. Optimized Media Player
JWPlayer + NoNumber Sourcerer & Snippet

43. Why not a video/audio
extension?
• Light! (no unneeded css/js)
• Nice HTML5 + Flash fallback
• Very active development
• Customizable (using Amazon S3)
• Hooks up to Google Analytics

44. NoNumber
Sourcerer
NoNumber Snippet
Fluid Grid (Zurb)
JW Player

45. Simple for content
editors
• In your editor, just use:
{snip audio|+filename}
• .mp3 files used for most browsers
• .ogg version used for Firefox HTML player
• All referencing an Amazon S3 directory

46. Don’t just focus
on Joomla
Responsive is also about speed...

47. Cloudflare
• Global caching of all static resources (img, css, js)
• Auto-minifying of css & js
• Offline mode
• Security blocking (blacklisting, hotlinking)
• Free country geolocation (geoIP)
• Pro: image pre-loading, image resizing, much more...
• Built-in for most large ISPs (and smaller ones!)

48. Cloudflare

49. Conclusion
1. Always consider your target audience
2. It’s your revenue, don’t be cheap!
3. Always be testing: “Sh*#! happens”
4. Always be learning
5. Don’t be afraid to adjust & change

50. Thanks to all of you for attending
& JAB for inviting me to speak :-)
Feel free to ping me:
@olivierk