Mobile web in eZ Publish
Download as PPTX, PDF2 likes1,351 views
- The document discusses building a mobile site in eZ Publish, noting that it is essentially a simplified siteaccess with big UI elements. - Key considerations include content strategy, mobile device detection, tailoring HTML/CSS for mobile, and using geolocation features. - Content from the main site can be reused on mobile by using the same content tree or a separate subtree, depending on complexity. Device detection can be done via server-side or client-side methods. - Best practices include standard templating, HTML5/CSS3, supporting preprocessing of CSS, and boosting search results using geolocation data and distance calculations. A responsive design or separate mobile site may be most appropriate depending on goals
![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=http://m.telx.netgen.biz/
MobileSiteAccessList[]=m
MobileDeviceDetectCookieTimeout=7200
MobileDeviceFilterClass=ezpMobileDeviceRegexpFilter
Easy to setup, but
• does not support switching to appropriate URL, just redirects
to mobile homepage](https://image.slidesharecdn.com/mobilewebez-120912053908-phpapp02/85/Mobile-web-in-eZ-Publish-7-320.jpg)
Mobile web in eZ Publish
- 1. Mobile site (in eZ Publish)
- 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 • igor@netgen.hr
- 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. 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. 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. 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. 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=http://m.telx.netgen.biz/ MobileSiteAccessList[]=m MobileDeviceDetectCookieTimeout=7200 MobileDeviceFilterClass=ezpMobileDeviceRegexpFilter Easy to setup, but • does not support switching to appropriate URL, just redirects to mobile homepage
- 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. 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 • http://www.ezless.org/ • https://github.com/stdclass/ezless
- 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. 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