Atlas Stage, Websites By Shaz
Changing from Geronimo to Atlas was very challenging from a devs’ perspective. We chose to do mobile-first websites since the majority of our visitors were from social and on mobile. Mobile-first websites are fit for mobile screens only. For this concept to be executed upon, we had to think first about how to implement it, and most of all which type of coding to use. We ditched the previous Wordpress versions from the Geronimo stage. This was not an option for us.
We had to hard code everything, well using a framework to do it: The UIkit framework. We used it for structure as well as Jquery and javascript for different features.
- Ducorp Website (ducorp.co)
The Ducorp Website was designed as a long artwork (a mural), which had to be made into a website. It consisted of background pictures and texts.
The first idea was to cut the picture in different sections then make them background images of sections with height 100vh. But the artwork would mismatch at the beginning and the end.
Then, we tried to implement the image as a whole and just make sections of 100vh with the texts. But as the screen size of phones differs, the website was a mess.
The third idea was to integrate the whole image and to overlay the text on it. This was working until we noticed that the text moved either up or down on different screen sizes. It was a real headache, and this one website as simple as it looks took around 2 weeks to set up.
The screen size was the only issue which required we look for another solution. The last resort was to display the whole website as a full-length image in high resolution. Then the footer was hardcoded as it contained links.
THIS WAS THE BEST IDEA EVER!
The other issue was that we had to find a solution for the desktop version. First, we decided to have a simple landing page for screen sizes from 600px to larger with instructions to change devices for mobile to view the website. But then we thought about it and concluded that it would be hard for people to actually do that.
Then the idea came while discussing, to display the mobile version of the website as an iframe on the landing page. With some research, we could set up the landing page and it looked really nice. The visitors would not be required to change or resize their browser to view the website, they just had to view it on the small mobile prototype on the landing page. And we used the same technique for the other websites.
2. XTM Website (ducorp.co/xtm)
The XTM website was a little more tricky as the website had call-for-action buttons all through the structure. What we did was to cut the artwork into sections with space at the end to place the buttons. When the sections of images were placed, the buttons positioned over the image at the end of each section. It worked. The footer was hard coded and similar to the Ducorp website’s footer.
3. XTM+ Website (xtm.plus)
XTM+ was the trickiest of all the websites built in Atlas. It contains the media footprint of Ducorp XTM. We had to come up with a solution to set up various content and structures. This website is unlike the other websites (Ducorp, XTM and XTM ventures). This one is hard coded from top to bottom.
This website took almost 1 month to build. When done, all contents posted by the team had to be retrieved and made accessible through links via the website. Content is classified into categories (entertainment, reality TV, etc..) and formats ( audio, video, written, photos).
4. XTM Academy (xtm.academy)
The academy website had various challenges:
(a) The structure required a slider with interactive thumbnails;
(b) Jquery conflicts.
The thumbnail sliders were using a query version that was not compatible with the jquery version used overall on the website. After long research and trials and errors, we changed a slight thing in the Javascript code for the thumbnail slider and all features were functional.
Another slight issue was that the wordings for some members overlapped the name on the mobile screen. We had to make sure that there was enough space between the name and the description.
5. XTM Ventures (xtm.ventures)
The ventures’ website is the same as for XTM. The image was cut down into sections and then the buttons were overlaid on top. The footer is similar to Ducorp and hard coded.
The real challenge in building these websites was from an experience perspective because we wanted the visitor to feel good and want to keep going through visuals and short texts. We wanted to tell a story and that took precedence in everything we did.
About SEO
For Search Engine Optimization (SEO), we used ghost texts to fool search engines. As most of the texts are in the form of pictures, a section was prepared and coded with the texts, and then hidden from being displayed. This same text may be hidden for viewers but it is detected by the engine and that’s when the SEO magic begins.
Looking now to the ventures’ websites. Hello, Trident!
Shahzana Hossenbokus
XTM; 2019.
