Mobile web in eZ Publish


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile web in eZ Publish

  1. 1. Mobile site (in eZ Publish)
  2. 2. About me• Igor Vrdoljak (Netgen crew)• Working with eZ Publish for 8 years• Nowdays mostly doing PM work  but still trying to stay in the loop with eZ development• @ivrdoljak•
  3. 3. What is so special with mobile web on eZ?• Nothing really • More-less just a siteaccess with simplified design and big UI elements for fat fingers • But... • Devil is in the details
  4. 4. What are things to have in mind?• A few points to touch on: • Content strategy and mobile site content architecture • Mobile device detection • Tailoring your HTML(5) / CSS for mobile browsers • Using geolocation features •
  5. 5. Content• eZ Publish content (model) is the king! • Organize your classes for content reusage • (Not only mobile web) • “Mobile” class attributes• Different ways of organizing the content for mobile site • Using the same content tree as in desktop siteaccesses • Google search hits work when coupled with proper device detection • Easy switching between mobile and desktop site • Separate subtree for mobile site • When content gets too messy, on legacy installations. • Mix of two above
  6. 6. Device detection• If you build it, they will come. • Not really true• We need to redirect mobile users to right “mobile” pages • Google result links • Twitter links •• Several options available: • Redirecting in Javascript • Using server-side mobile detection provided by eZ Publish • A little hack that improves on server-side redirection
  7. 7. Device detection• As of eZ 4.7 there is a solution for detection of mobile clients integrated in eZ Publish • Configured in site.ini: DetectMobileDevice=enabled MobileSiteAccessURL= MobileSiteAccessList[]=m MobileDeviceDetectCookieTimeout=7200 MobileDeviceFilterClass=ezpMobileDeviceRegexpFilter Easy to setup, but • does not support switching to appropriate URL, just redirects to mobile homepage
  8. 8. Device detection• Hackish improvement for server-side mobile detection• Custom PHP code, called from config.php• Resolves the problem of redirecting between corresponding mobile and desktop pages• Rather rough on the edges but does the work • Jump to code...
  9. 9. Client side best practices• Standard eZ templateing • Simple, but efficient way of improving UX • HTML5 markup elements, CSS3 JS...• Be good to your lazy front-side developers • Support LESS • eZ Less can be used with to preprocess CSS • •
  10. 10. Geolocation with eZ Find• Mobile users are usually... mobile • Geolocation features based on ezgmaplocation attributes • Example: boosting geo-tagged objects with Haversine distance formula (Solr 3.1) can be used to calculate distance between points on sphere (like Earth) • Distance returned as SOLR score from eZ Find • GeohashHarvesine example ghhsin(6378000,geohash(lat,lng),geohash(lat1, lng1))
  11. 11. Conclusion• Mobile strategy is a moving target • Responsive web design – one HTML to rule them all • Separate mobile site – when aiming a specific context • Integration with native applications via APIs • App Factory • REST APIs• A lot can be gained with relatively small effort• Be nice to your mobile users 
  12. 12.