The new visana website how to fit a square peg into a round hole
?
0 likes?505 views
This talk was given by Casper Biever, Visana, at Magnolia Conference 2015 in Basel, Switzerland. In 2015, Visana will present a redesigned website. In hindsight, most things look easy, and so it was with fitting the new design into Magnolia. At first it looked near impossible to fit the HTML and new site structure into Magnolia. We struggled with configuration of tiles, navigation, multi language etc. But thanks to some important breakthroughs in our thinking and the flexibility of Magnolia we were able to come up with an implementation that makes editing easy and is stringent enough to guarantee the quality of the overall design. We¡¯ll present how we got to our solution, lessons learned and tips for those embarking on a similar journey.
The new visana website how to fit a square peg into a round hole
- 1. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 1 The new Visana website: how to fit a square peg into a round hole Casper Biever, Senior Software Engineer
- 2. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 2 Content n?? Introduction n?? The old and the new n?? What we learned n?? Wishes n?? Tips
- 3. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 3 Introduction n?? 1.290 employees, 1.041 FTE n?? 570.200 insured mandatory health insurance, 1.174.800 total n?? ~2 b SFr. turnover
- 4. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 4 The Team
- 5. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 5 What we were used to
- 6. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 6 The current website
- 7. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 7 The new design
- 8. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 8 The new design
- 9. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 9 The new design
- 10. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 10 The new design
- 11. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 11 The solution component 1 component 2 component 3 ¡ component 1 component 2 component 3 ¡ component 1 component 2 component 3 ¡ component 1 component 2 component 3 ¡ component 1 component 2 component 3 ¡
- 12. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 12 How it looks in Magnolia
- 13. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 13 How it looks in Magnolia
- 14. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 14 Configuration by code
- 15. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 15 Configuration by code: take 1 ? ? ? ? // ?Change ?defaultLanguage ?/ ?fallbackLocale ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n", ?"defaultLocale", ?"de", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n", ?"fallbackLocale", ?"de", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n", ?"enabled", ?"false", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodeIfNotExistsTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/fr", ?NodeTypes.ContentNode.NAME, ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/fr", ?"country", ?"", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/fr", ?"enabled", ?"true", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/fr", ?"language", ?"fr", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodeIfNotExistsTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/it", ?NodeTypes.ContentNode.NAME, ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/it", ?"country", ?"", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/it", ?"enabled", ?"true", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?SetPropertyTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/it", ?"language", ?"it", ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?RemoveNodeTask(CONFIG, ?defaultSite ?+ ?"/i18n/locales/en", ?ENVIRONMENT_ALL)); ? ?
- 16. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 16 Configuration by code: take 2 startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/options/internalLink", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/options/downloadLink", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/options/externalLink", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/fields/internalLink/fields/link", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/fields/internalLink/fields/linkTitle", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/fields/downloadLink/fields/link", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/fields/downloadLink/fields/linkTitle", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/fields/externalLink/fields/link", ?tab), ?ENVIRONMENT_ALL)); ? startupTasks.add(new ?CreateNodesIfNotExistsTask(content, ?String.format("/form/tabs/tab%s/fields/link/field/fields/externalLink/fields/linkTitle", ?tab), ?ENVIRONMENT_ALL)); ? ? ... ? ? startupTasks.add(new ?SetPropertyTask(String.format("%s/form/tabs/tab%s/fields/link/field/options/externalLink", ?content, ?tab), ?ENVIRONMENT_ALL) ? .setProperty("label", ?"external") ? ? .setProperty("value", ?"externalLink")); ? startupTasks.add(new ?SetPropertyTask(String.format("%s/form/tabs/tab%s/fields/link/field/fields/externalLink", ?content, ?tab), ?ENVIRONMENT_ALL) ? ? .setProperty("class", ?"info.magnolia.ui.form.field.definition.CompositeFieldDefinition") ? ? .setProperty("label", ?"") ? ? .setProperty("layout", ?"vertical")); ? startupTasks.add(new ?SetPropertyTask(String.format("%s/form/tabs/tab%s/fields/link/field/fields/externalLink/fields/link", ?content, ?tab), ?ENVIRONMENT_ALL) ? ? .setProperty("extends", ?"/modules/standard-?©\templating-?©\kit/dialogs/components/links/stkExternalLink/form/tabs/tabExternalLink/fields/link")); ? startupTasks.add(new ?SetPropertyTask(String.format("%s/form/tabs/tab%s/fields/link/field/fields/externalLink/fields/linkTitle", ?content, ?tab), ?ENVIRONMENT_ALL) ? ? .setProperty("extends", ?"/modules/standard-?©\templating-?©\kit/dialogs/components/links/stkExternalLink/form/tabs/tabExternalLink/fields/linkTitle")); ? ?
- 17. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 17 Configuration by code: take 3 ? ? ? .addMultiValue("link").label("Link") ? ? ? ? ? .name(String.format("tile1x%dLink", ?column)) ? ? ? ? ? .addSwitchable() ? ? ? ? ? ? .addOption("internalLink").label("internal").value("internalLink") ? ? ? ? ? ? .addOption("downloadLink").label("download").value("downloadLink") ? ? ? ? ? ? .addOption("externalLink").label("external").value("externalLink") ? ? ? ? ? ? .addOption("embeddableLink").label("embeddable").value("embeddableLink") ? ? ? ? ? ? .addComposite("internalLink").label("") ? ? ? ? ? ? ? ? .verticalLayout() ? ? ? ? ? ? ? .addInternalLink("link").label("Page") ? ? ? ? ? ? ? .addTextField("linkTitle").label("Link ?Title") ? ? ? ? ? ? .finish() ? ? ? ? ? ? .addComposite("downloadLink").label("") ? ? ? ? ? ? ? .verticalLayout() ? ? ? ? ? ? ? .addDownloadLink("link").label("Download ?File") ? ? ? ? ? ? ? .addTextField("linkTitle").label("Link ?Title") ? ? ? ? ? ? .finish() ? ? ? ? ? ? .addComposite("externalLink").label("") ? ? ? ? ? ? ? .verticalLayout() ? ? ? ? ? ? ? .addExternalLink("link").label("Page ?URL") ? ? ? ? ? ? ? .addTextField("linkTitle").label("Link ?Title") ? ? ? ? ? ? .finish() ? ? ? ? ? ? ... ?
- 18. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 18 The result
- 19. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 19 Automatic image scaling /.imaging/stageMedium/dam/{image path}
- 20. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 20 Multilanguage
- 21. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 21 Multilanguage de fr
- 22. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 22 Multilanguage
- 23. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 23 Project setup n?? Scrum in 2 weekly cycle n?? Test, acceptance and production systems n?? Jenkins for deployment n?? Exports of website, dam and contact repositories to get started quickly
- 24. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 24 Wish n?? Make it possible to move elements in Multivalue
- 25. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 25 Tips (technical) n?? Keep names in concepts and design in sync with those in the code n?? Become close friends with Switchable, Multivalue and Composite n?? Area dialogs n?? Scaffold templates and components
- 26. The new Visana website: how to fit a square peg into a round hole / Basel / 11.06.2015 / Casper Biever / Page 26 Tips (project) n?? Get involved early, but be reluctant to say no. Think in components on all levels. Content architecture ¡Ö software architecture n?? Experiment n?? There might be an end to configurability: in that case allow raw HTML formatting n?? Keep needs of publisher in mind