JAB12 - Sun May 20th 2012           USE CASE:Integrating a complex responsive        e-commerce site        Olivier Karfis ...
?
My own worst   customer!By day:Run a French learning audiobook businesswith my wife: frenchtoday.comBy night, late nights,...
Site Highlights• 110+ hours of audio recordings• 17 downloadable products• Free registered only section• 260+ Blog posts/f...
Store• ZenCart ➜ VM/K2Mart ➜ RedSHOP• Goal: seamless store vs. site experience
Why make your store    responsive?
Simple:Look at your audience
12 monthsMobile Visits Increase  April 2011 = 4.9%  April 2012 = 9.3%
And it’s not just visits...• Almost the same pages/visit• Almost the same visit duration• Almost the same bounce rate• ......
Todaymore mobile traffic    than IE 9
Which Responsive       Framework ?Twitter Bootstrap          Zurb Foundation           320 & Up, OneWeb, Or...
Why did French TodayUse Zurb Foundation?     • Clean baseline styles     • Super quick prototyping     • Uses Source order...
So what framework should I choose?
Good news everyone!    Joomla 3.0 is  getting strapped!
Other big extension devsare moving to Bootstrap too  redCOMPONENT, Kunena, JomSocial...
What does RWD    affect? It’s not just re-shuffling layout...
Biggest changes are in   the smartphone       format...
Logo is smallerSearch moves &more prominentSocial iconsDisappearMain Navigationchanges to a SelectLeft sidebar dropsbelow ...
Some Responsive     Considerations• Images  Above the fold in mobile is VERY different• Extensive sub-menus?  Sub navs tak...
How it’s built...
The Leading Cast     • Supported!     • Actively developed     • Good override mechanism       (almost)     • Moving towar...
The Leading Cast    •   Still better than J2.5 for image        handling (especially resizing)    •   Tags (needed for blo...
The Leading Cast      • Fine URL control        (usability, SEO)      • Centralized metadata        management      • Manu...
Supporting Cast•   NoNumber    •   Advanced Module Manager    •   Snippet    •   Sourcerer•   RS Forms PRO w/ plugins•   J...
Workflows& Integration  Examples
All in One Registration    Responsive is also being customer focused• Fastest most friction less way to create an  account...
All in One Registration            Extensions used• LunarHotel EmailAsUserName• RS Forms Pro• RS Joomla Account plugin• RS...
Why MailChimp overnewsletter extension?     • Great deliverability     • Targeted time zone delivery     • Lots of very us...
The Form    Just name, email &    password needed.         That’s it!
Set up Form
Joomla Account plugin            Use Email in all fields            to bypass username            requirements
RSForms Mailchimp     Plugin            Map Form Fields to             Mailchimp Fields           Use RSForm fields to     ...
Captured Data   in Mailchimp    Automatically captured:Country, date, source, IP, segment...
Amazon Style“added to cart” message   Improved usability for non-tech users
Usability ImprovementsFrom this vanilla redSHOP system messageTo this Amazon style onein 10 minutes WITHOUT core hacks...
NoNumber ReReplacer              Live search              keyed on this              phrase              Replace with     ...
Optimized Media Player  JWPlayer + NoNumber Sourcerer & Snippet
Why not a video/audio     extension?• Light! (no unneeded css/js)• Nice HTML5 + Flash fallback• Very active development• C...
NoNumber                   SourcererNoNumber Snippet   Fluid Grid (Zurb)  JW Player
Simple for content         editors• In your editor, just use:  {snip audio|+filename}• .mp3 files used for most browsers• .o...
Don’t just focus  on JoomlaResponsive is also about speed...
Cloudflare•   Global caching of all static resources (img, css, js)•   Auto-minifying of css & js•   Offline mode•   Securit...
Cloudflare
Conclusion1. Always consider your target audience2. It’s your revenue, don’t be cheap!3. Always be testing: “Sh*#! happens...
Thanks to all of you for attending& JAB for inviting me to speak :-)      Feel free to ping me:            @olivierk
Use Case: integrating a complex e-commerce site - Frenchtoday.com
Use Case: integrating a complex e-commerce site - Frenchtoday.com
Use Case: integrating a complex e-commerce site - Frenchtoday.com
Use Case: integrating a complex e-commerce site - Frenchtoday.com
Use Case: integrating a complex e-commerce site - Frenchtoday.com
Upcoming SlideShare
Loading in...5
×

Use Case: integrating a complex e-commerce site - Frenchtoday.com

1,890
-1

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,890
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Use Case: integrating a complex e-commerce site - Frenchtoday.com

  1. 1. JAB12 - Sun May 20th 2012 USE CASE:Integrating a complex responsive e-commerce site Olivier Karfis @olivierk
  2. 2. ?
  3. 3. My own worst customer!By day:Run a French learning audiobook businesswith my wife: frenchtoday.comBy night, late nights, weekends :Joomla integrator / frond end designer
  4. 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. 5. Store• ZenCart ➜ VM/K2Mart ➜ RedSHOP• Goal: seamless store vs. site experience
  6. 6. Why make your store responsive?
  7. 7. Simple:Look at your audience
  8. 8. 12 monthsMobile Visits Increase April 2011 = 4.9% April 2012 = 9.3%
  9. 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. 10. Todaymore mobile traffic than IE 9
  11. 11. Which Responsive Framework ?Twitter Bootstrap Zurb Foundation 320 & Up, OneWeb, Or...
  12. 12. Why did French TodayUse 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. 13. So what framework should I choose?
  14. 14. Good news everyone! Joomla 3.0 is getting strapped!
  15. 15. Other big extension devsare moving to Bootstrap too redCOMPONENT, Kunena, JomSocial...
  16. 16. What does RWD affect? It’s not just re-shuffling layout...
  17. 17. Biggest changes are in the smartphone format...
  18. 18. Logo is smallerSearch moves &more prominentSocial iconsDisappearMain Navigationchanges to a SelectLeft sidebar dropsbelow main content
  19. 19. 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?
  20. 20. How it’s built...
  21. 21. The Leading Cast • Supported! • Actively developed • Good override mechanism (almost) • Moving towards Bootstrap too
  22. 22. 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
  23. 23. The Leading Cast • Fine URL control (usability, SEO) • Centralized metadata management • Manual control over item ID/duplicate issues • “Official” choice of both redSHOP & K2
  24. 24. Supporting Cast• NoNumber • Advanced Module Manager • Snippet • Sourcerer• RS Forms PRO w/ plugins• JCE Text Editor• Akeeba Backup / Admin Tools
  25. 25. Workflows& Integration Examples
  26. 26. 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)
  27. 27. All in One Registration Extensions used• LunarHotel EmailAsUserName• RS Forms Pro• RS Joomla Account plugin• RS Mailchimp plugin
  28. 28. Why MailChimp overnewsletter extension? • Great deliverability • Targeted time zone delivery • Lots of very useful stats • Very powerful & intuitive UI • It’s got a monkey!
  29. 29. The Form Just name, email & password needed. That’s it!
  30. 30. Set up Form
  31. 31. Joomla Account plugin Use Email in all fields to bypass username requirements
  32. 32. RSForms Mailchimp Plugin Map Form Fields to Mailchimp Fields Use RSForm fields to add users to different Mailchimp segments
  33. 33. Captured Data in Mailchimp Automatically captured:Country, date, source, IP, segment...
  34. 34. Amazon Style“added to cart” message Improved usability for non-tech users
  35. 35. Usability ImprovementsFrom this vanilla redSHOP system messageTo this Amazon style onein 10 minutes WITHOUT core hacks...
  36. 36. NoNumber ReReplacer Live search keyed on this phrase Replace with this code...
  37. 37. Optimized Media Player JWPlayer + NoNumber Sourcerer & Snippet
  38. 38. 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
  39. 39. NoNumber SourcererNoNumber Snippet Fluid Grid (Zurb) JW Player
  40. 40. 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
  41. 41. Don’t just focus on JoomlaResponsive is also about speed...
  42. 42. 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!)
  43. 43. Cloudflare
  44. 44. Conclusion1. Always consider your target audience2. It’s your revenue, don’t be cheap!3. Always be testing: “Sh*#! happens”4. Always be learning5. Don’t be afraid to adjust & change
  45. 45. Thanks to all of you for attending& JAB for inviting me to speak :-) Feel free to ping me: @olivierk
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×