Atlas Stage: Websites
Changing from Geronimo to Atlas was very challenging from a developers' perspective. We came up with a new model, going mobile-first for our websites. They are websites fit for mobile screens only. For this concept to be born, we had to think about how to implement it and most of all, which type of coding to use. We had to ditch the Wordpress versions of the websites and, in fact, Wordpress as an option entirely.
For these mobile-first websites to be born, we had to hard code everything, well using a framework to do it. The UIkit framework was used for structure as well as Jquery and javascript for different features.
- Ducorp (https://ducorp.co)
The Ducorp Website was designed as a long artwork that 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 still, 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 we had was to integrate the whole image and to overlay the text on it. This was working until we noticed that the text goes 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 that required us to 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 found that we could set up the landing page and it looked really nice. The viewers would not be required to change or resize the 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 (https://ducorp.co/xtm)
For the XTM website, it was a little bit more tricky as the website had called for action buttons all through the structure. What we had to do was to cut the artwork into sections with space at the end to place the buttons. When the section images were placed, the buttons were placed over the image at the end of the sections.
It worked and the texts were in place as well as the buttons. The footer was hard coded and the same as the Ducorp website’s footer.
3. XTM+ (https://ducorp.co/xtmplus)
The XTM+ website was the trickiest of all as it contains all the media content of Ducorp and XTM. We had to come up with a solution to set up the various contents and the various structures. This website is unlike the other websites built in the Atlas stage (i.e., Ducorp, XTM and XTM ventures). This one is hard coded from top to bottom.
This website took almost 1 month to set up. When all structures were set up, all contents posted by the team had to be retrieved and made accessible through links on the website. Contents are classified into categories (entertainment, reality TV, etc..) and formats ( audio, video, written, photos).
4. XTM Ventures (https://ducorp.co/ventures)
The XTM ventures’ website is the same as the XTM website. The image was cut down into sections and then the buttons were overlaid. The footer is the same as Ducorp and hard coded.
5. XTM Academy (https://ducorp.co/ventures)
The XTM academy website had various challenges:
(a) The structure required a slider with interactive thumbnails; and
(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 became functional!
The wordings for some members were overlapping the name on the mobile screen. We had to make sure that there was enough space between the name and the description.
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.
Shahzana Hossenbokus.
XTM; 2019.
