Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile web in eZ Publish


Published on

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

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.