ExploreOurteamtrainingCourses (3)

We were excited to play a part in the redesign of the new Celebrity Cruises responsive website. appendTo’s task in the project was to deliver the responsive front-end code and assets for Celebrity’s home page and Destinations pages. We were provided design mockups, wireframes and specifications by Celebrity and used them for reference as we developed the front-end markup, styles and scripts from scratch.

We worked with Celebrity in an agile manner that allowed us to drop code to them at the end of each sprint via GitHub. Since Celebrity’s technology department was integrating our front-end with their custom back-end application, we were able to work in our preferred local environment using Grunt for task running, Bower for dependency management, JSHint and JSBeautify for assurance, our own custom continuous deployment system, and more.

Unique Challenges & Solutions

The responsive Celebrity website was developed using a mobile-first approach. Many “modern web” practices were used throughout the site that gracefully degraded to offer users of less modern browsers a functional and pleasant experience. Aside from the general challenges of developing the site responsively and mobile-first, there were several unique challenges we faced.

Touch-enabled carousel sliders

There are several image and content carousels on the home page and Destinations pages that required support for gestures on touch devices. We custom developed the carousels using JavaScript, so we chose to use the Hammer.js library to provide support for touch gestures. Hammer.js gave us access to touch events like swipeleft and swiperight that we bound to the carousel methods to allow navigation via swiping.

Responsive website navigation

In a desktop browser, the dropdown menus in the main navigation don’t look too complicated. And they aren’t, really, at that large breakpoint. But, by using the same markup for the navigation at all breakpoints, it undergoes quite a positioning transformation and goes from being hidden (and triggered open by clicking/tapping the “hamburger” icon) to prominently shown with dropdowns that are triggered by hover.

Starting out at the smallest size, once the navigation menu is triggered open, a little JavaScript is used to detect if Modernizr has added a touch class to the html element. If it has it means the user is on a touch device, where we then allow the user to control the hidden sub-navigation items by tapping the entire row. The first item in the sub-navigation is then a link to the parent’s landing page. If the user is not on a touch device, everything in each row other than the down arrow clicks through to the landing page. The down arrow then controls the opening and closing of the sub-navigation. This decision was a recommendation by appendTo to ensure an easy behavior while on touch devices.

Inspiration board, map & custom port selection

The entire Destinations landing page is quite a unique integration. A lot of brainstorming and documentation was done and put together by Celebrity. Many challenges arose during the development of this page that appendTo handled. To start with, the page consists of four main user controlled areas: the map, list view, sentence filter and inspiration board.

The map, list view and sentence filter all had to work together and pull from and filter the same data in real time to update the inspiration board’s results. For our development purposes we set up a fake data endpoint using appendTo’s jQuery Mockjax and our JavaScript engineers worked to ensure the filtering of the input methods worked in conjunction with each other and updated the inspiration board items with a little Ajax.

The styling of most of the elements on the Destinations landing page was pretty straightforward, aside from the map, which was an interesting challenge. The map itself is a custom layered and styled Mapbox map. For elements that could not be styled with our own CSS (essentially everything but the labels, which were added to the map using the Mapbox API), we used the TileMill application to write some CartoCSS that customized the default OpenStreetMap styles to match the design mocks provided by Celebrity.

Maintaining image aspect ratios

Another area of the Celebrity redesign that needed special attention was the way images (particularly on the Destinations pages) scaled up and down. The containers that hold the images on the Destinations page have set heights, but fluid widths. Our job was to make sure the images were always centered the container at all times. We used a little trick using a combination of relative positioning, top and left properties, and translateX and translateY properties to achieve this. A more detailed explanation of this approach can be found in a previous blog post.

Mobile-first approach with support for IE8

The entire website was developed from the smallest size up, using min-width media queries. A common problem with the mobile-first approach is that IE8 does not support media queries, leaving users of IE8 with a single column “mobile” version. Rather than using a polyfill like Respond.js, we opted to use a Sass-only approach that does not require any extra JavaScript plugins.

The way the Sass solution works is quite simple at its core. We first created two stylesheets. One for normal browsers and one for IE8, and wrapped the IE8 stylesheet in an if lt IE 9 conditional. Then for the actual “magic”, we used the Breakpoint Compass extension with a no query fallback. By adding $breakpoint-no-queries: true; to the IE8 stylesheet, we could then import all of the same Sass files used in the normal stylesheet and write our media queries like @include breakpoint(36em, $no-query: true) {...}. Breakpoint would then output the compiled IE8 stylesheet with “stacked” properties.

For example, a block like this:

would get compiled to the IE8 stylesheet as:

The second background property trumps the first in IE’s eyes. This way, IE8 always displays the largest breakpoint’s styles, without ever having to see a media query that it doesn’t support. This approach doesn’t allow for the full responsive layout that can be sized up and down in IE8, but our goal was simply to provide desktop support to the older browser.

Kyle Pennell
Kyle Pennell is the editor of appendTo.com.
Articles, Consulting