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