ttree / ress
Ttree Responsive Web Design with Server-Side Component
Installs: 158
Dependents: 0
Suggesters: 0
Security: 0
Stars: 5
Watchers: 4
Forks: 2
Open Issues: 0
Type:neos-package
Requires
- mobiledetect/mobiledetectlib: 2.8.*
- neos/neos: ^3.0 || ^4.0
This package is auto-updated.
Last update: 2024-11-02 11:31:26 UTC
README
Description
Responsive Web Design is really really trendy (and mandatory) today. But in some cases it's not the best solution.
Most responsive website serve exactly the same amount of bits to desktop, tablet or mobile user. Many mobile user will leave your website if the loading time is to long. Or sometimes your design need a different markup to support your design decisions.
If you are intersted by this topics, you can read those articles:
- You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy
- Improve Mobile Support With Server-Side-Enhanced Responsive Design
- RESS: Responsive Design + Server Side Components
What's include in this package ?
This package include the library MobileDetect and extend the Action Request class with two new methods:
- ActionRequest::isMobile()
- ActionRequest::isTablet()
You can use those methods in your own controller, Fusion prototypes, ...
No magic everything is configurable
Tweak a Fusion prototype to change the rendering by device type
prototype(Your.Package.CustomElement) < prototype(Neos.Fusion:Case) {
default {
condition = ${request.mobile}
itemRenderer = Your.Package.CustomElementDefault
}
default {
condition = true
itemRenderer = Your.Package.CustomElementDefault
}
@cache {
mode = 'dynamic'
entryIdentifier {
node = ${node}
}
entryDiscriminator = ${request.mobile : 'mobile' ? 'default'}
context {
1 = 'node'
2 = 'documentNode'
}
entryTags {
1 = ${'Node_' + node.identifier}
}
}
}
By using the dynamic
caching mode you don't need to configure the upper cache segments.
Completly different markup for Mobile, Tablet & Desktop
You can override your root
Fusion conditions to select different rendering for different type of client:
root {
mobile {
@position = 'before default'
condition = ${request.mobile && Configuration.setting('Ttree.Ress.enable.mobile') == true}
type = 'Your.Package:MobilePage'
}
tablet {
@position = 'before default'
condition = ${request.tablet && Configuration.setting('Ttree.Ress.enable.tablet') == true}
type = 'Your.Package:TabletPage'
}
@cache {
entryIdentifier {
mobile = ${request.mobile && Configuration.setting('Ttree.Ress.enable.mobile') == true ? 'mobile' : ''}
tablet = ${request.tablet && Configuration.setting('Ttree.Ress.enable.tablet') == true ? 'tablet' : ''}
}
}
}
In this example the root cache entry identifier are configured correctly for mobile and table cache. Please make sure to configure your other cache segments correctly.
Sponsors & Contributors
The development of this package is sponsored by ttree (https://ttree.ch) and techniconcept (https://techniconcept.ch).