Tus Canales (Your Channels) is a landing page that highlights Spanish language TV content offered by Verizon Telecom. The page can be toggled in both English and Spanish, and was built using PHP, Javascript, HTML, and CSS.
The creative direction was to provide a landing page that was magazine style, therefore page was built in a way so that the height of the landing page is always 100 percent of the height of the browser window or device screen. Because of this of content sections are based on a grid algorithm that calculates each section’s dimensions correlating to the section’s allocated percentage of screen real-estate.
Due to the short and overlapping timeline between design and development, I had to start developing the percentage based layout without a design file. All I had at my disposal was the printed design on paper and a ruler. So, to accomplish this task I was able to measure all the content regions and borders with the ruler, convert the measurement to pixels, and formulate their segment percentages. Once these were recorded and stored in CSS, I then used Javascript to resize all the content regions based on current height of the browser window or screen. This calculation was performed on any window resize event.
Additionally, the page is side scrolling and utilizes rollover content for the box-style content segments, and lightbox functionality for more in-depth content like videos. I also created a system to deliver lower file weight image and video assets on mobile devices to improve loading times.
One improvement that I would like to have made was to ensure that all text content is indexable by search engines, however I was not given enough time to add this additional layer of detail to the system. This also would allow that text to be much more readable on smaller screens, but of course doing so would require any text wrapping on smaller screen sizes to get signed off by design.
Details
Link:
Awards:
- 2014 AAF Addy Silver – Website, Consumer Services under $50k
- 2014 AAF Addy Silver – Mobile Website, Consumer Services under $50k
- 2014 AAF Addy Citation of Excellence – Digital Advertising Campaign, Consumer