TIM Group, also operating under the name Telecom Italia, is an Italian telecommunications company headquartered in Rome and Milan, which provides telephony services, mobile services, and DSL data services.
I was hired as a consultant to help the Frontend dev team building the main website redesign. My daily job was creating an HTML5, CSS3, and JavaScript/jQuery interactive version of hundreds of high-quality design templates and components.
We used Bootstrap as the main library, jQuery, Modernizr.js for browser features detection, Git for version control, and bespoke frontend solutions.
The building process
We started from multi-layer .Sketch
and .PSD
files, divided into several sections and components. We focused first on the desktop version, and then, on the mobile version (m.tim.it). The mobile website is designed and optimized for a faster and better user experience than a full-feature same-source responsive website.
Every week, I had a list of components and templates to create in HTML, CSS, and JavaScript, following Bootstrap’s documentation and the project requirements.
The Team Leader, along with the Project Manager, reviewed my code and approved it or not.
If everything went well, of course, I committed all the final code via Git
.
Browser testing
The code (thousand and thousand of lines 🤓) had to be accurately tested on a wide range of mobile browsers and must be cross-browsers, Internet Explorer included.
I used Prepros as the main GUI compiler tool and to create easily a local server. Test all the browsers simultaneously it was fun and easy.
I also used Browserstack to create screenshots and screencasts for documentation purposes. This helped a lot to speed up the debugging part and get visual feedback on the components' potential issues directly during the development phase.
Conclusion
It was been a challenging project and I learned a lot from this experience. The several design variables, the stakeholders' decisional process, and a skilled team to please were the most inspiring part of this large website.