On our unit on case studies in my web design class, I stumbled upon this case study from Adioso. Adioso is an interaction rich web app which lets you search for and plan your flights, and decided to review their responsive capabilities after their last attempt resulted in many unhappy users. A common problem which they noted was that interactive web apps often performed quite poorly in a responsive setting. Rather than doing a complete redesign or keeping two parallel sites, however, the designers of Adioso did not want to have to develop and maintain different versions at the same time, and decided to redo their current web app and make it responsive.
To accomplish this massive task, they implemented an array of tools in order to create a site which would maintain the high quality of their desktop web app while being able to provide easy access to both tablets and mobile phones. The main tool which Adioso utilized was the Zurb Foundation framework. One of the main features that they used was the responsive grid layout, which allows developers to tell browsers how wide they want certain elements depending on specific breakpoints based on screen size. This grid doesn’t do everything, though. Using SCSS, a CSS pre-processor, Adioso managed to incorporate mixins from Ben Schwarz which allowed them to apply any CSS to each breakpoint separately. Modernizr, a feature detection library, also let the Adioso developers use JavaScript on the breakpoints. The combination of these tools solved their general layout problems and provided them with the base they needed to move on to responsive itineraries.
Despite the fact that Foundation made it possible to collapse tables into one scrolling horizontal row, Adioso needed the ability to make the entire flight itinerary visible without scrolling. In order to make use of the CSS applied to each breakpoint, they had to ditch the traditional table, tr, and td tags, replacing them with divs. Each itinerary also needed to stay within a certain “vertical budget”, requiring the designers to pinch some space from padding and margins. Some elements took up too much horizontal space and the Adioso developers used Foundation’s visibility to hide them at the smaller breakpoints.
I learned quite a bit from reading through the Adioso case study. Looking at their step-by-step reasoning process and how they managed to set and work with their parameters was an interesting experience and helped me understand what it’s like in professional design. My responsive design skills have definitely been improved, exposing me to a whole new set of web design tools and solutions to common problems with designing responsively and thinking mobile-first. Below are some of the other case studies I reviewed in our class’s unit on case studies.
Rebuilding a Simplified Firefox Logo
No comments:
Post a Comment