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.
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
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!
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!
22. Logo is smaller
Search moves &
more prominent
Social icons
Disappear
Main Navigation
changes to a Select
Left sidebar drops
below main content
23.
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?
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
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!
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
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