{"id":348,"date":"2021-03-20T13:25:26","date_gmt":"2021-03-20T13:25:26","guid":{"rendered":"https:\/\/jsmania.cn\/home\/?p=348"},"modified":"2021-05-07T14:44:33","modified_gmt":"2021-05-07T14:44:33","slug":"aden-somalia-blues","status":"publish","type":"post","link":"https:\/\/jsmania.cn\/home\/aden-somalia-blues\/","title":{"rendered":"Aden: One for Six"},"content":{"rendered":"\n<p>Aden is a fast-growing French consulting firm involved in a broad range of business sectors. They wanted to create a website for each business line. The websites should keep a consistent look and feel, but also have each its own unique personality.<\/p>\n\n\n\n<p>The project came from a returning client, for whom we developed a website section including an interactive <a rel=\"noreferrer noopener\" href=\"http:\/\/www.myllynparas.cn\/cn\/mom\/challenge\" target=\"_blank\">nutrition tracker<\/a> (that was my first web project!). He was very happy with it and, after he moved on to Aden, he came back to us with new projects.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Requirement analysis<\/p><\/blockquote>\n\n\n\n<p>We proposed to create one single WordPress theme to back all these websites. To start, we collected the design of 2 of the websites, went though each section on each page, based on which we planned out the page templates we will need.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted poster=\"https:\/\/jsmania.cn\/home\/wp-content\/uploads\/2021\/03\/poster-aden-desktop-min.jpeg\" src=\"https:\/\/jsmania.cn\/home\/wp-content\/uploads\/2021\/05\/aden-preview-v2-min.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>As we go, new content modules and even new page structure come up, and we update the theme consistently to accommodate these requirements. So far, we have launched 4 websites using this theme.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Flexibility is the key<\/p><\/blockquote>\n\n\n\n<p>To give each website its own personality, we try to integrate maximum style variations in each module. For the homepage carousel module alone, we provide a number of controls:<\/p>\n\n\n\n<ul><li>height: regular \/ tall \/ taller<\/li><li>video background (with static fallback): true \/ false<\/li><li>video link (click to play in light-box): true \/ false<\/li><li>layout: text on left \/ right<\/li><li>overlay on desktop: none \/ left \/ right<\/li><li>overlay on mobile: none \/ bottom<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted poster=\"https:\/\/jsmania.cn\/home\/wp-content\/uploads\/2021\/03\/poster-aden-banner-min.jpeg\" src=\"https:\/\/jsmania.cn\/home\/wp-content\/uploads\/2021\/05\/aden-banner-v2-min.mp4\" playsinline><\/video><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Highlight<\/p><\/blockquote>\n\n\n\n<p>I am especially proud of <a rel=\"noreferrer noopener\" href=\"https:\/\/www.rapid.life\/case\/the-european-union-diplomatic-compound-of-mogadishu-somalia\/\" target=\"_blank\">the interactive module<\/a> on the third website, Rapid. It showcases the layout of a diplomatic compound in Mogadishu, Somalia, built by Rapid for the European Union. <\/p>\n\n\n\n<p>The module is built with CSS animation and pure JavaScript. The mechanism is wrapped into a content type &#8211; not only is it fully customisable in the WordPress backend, but an editor can easily create new instances of it.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls poster=\"https:\/\/jsmania.cn\/home\/wp-content\/uploads\/2021\/03\/poster-aden-min.jpeg\" src=\"https:\/\/jsmania.cn\/home\/wp-content\/uploads\/2021\/05\/Rapid-Interactive-Module-min.mp4\"><\/video><\/figure>\n\n\n\n<p>The interactive module, like the rest of the theme, are designed and built with a mobile-first approach. The client was very happy with the outcome and sent us an email where they spoke highly of our work. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Credits<\/p><\/blockquote>\n\n\n\n<ul><li>Design: Aden<\/li><li>FE &amp; BE development: Yuan<\/li><li>Server setup &amp; deployment: Yuan<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aden is a fast-growing French consulting firm involved in a broad range of business sectors. They wanted to create a website for each business line. &hellip; <\/p>\n","protected":false},"author":1,"featured_media":900,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,5],"tags":[],"_links":{"self":[{"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/posts\/348"}],"collection":[{"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/comments?post=348"}],"version-history":[{"count":43,"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/posts\/348\/revisions"}],"predecessor-version":[{"id":896,"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/posts\/348\/revisions\/896"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/media\/900"}],"wp:attachment":[{"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/media?parent=348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/categories?post=348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jsmania.cn\/home\/wp-json\/wp\/v2\/tags?post=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}