Froont. (2014). 9 basic principles of responsive web design.
Marcotte, E. (2011). Responsive web design. New York: A Book Apart.
responsive web design; flexible grid-based layout; affordances and constraints
“Rather than creating spaces that influence the behavior of people that pass through them, responsive designers are investigating ways for a piece of architecture and its inhabitants to mutually influence and inform each other” (Marcotte, 7).
“By and large, mobile users want different things from your product than desktop users do. If you’re a restaurant, desktop users may want photos of your place, a complete menu, and some information about your history. But mobile users probably just want your address and operating hours” (Jeff Croft in Marcotte, 107).
In November 2016, I was driving frantically through Atlanta, Georgia trying make a meeting on time in an unfamiliar city. A half hour earlier I sat in the airport parking garage in my rental car trying to pull up the meeting address, which was saved in my calendar notes. Only, it wasn’t saved in the app. Some sort of glitch prevented the meeting from pulling into my mobile app from my desktop, where I created the appointment in Yahoo Calendar. I logged into Yahoo in the Safari browser and opened the calendar. What I found was a shrunken desktop version of the calendar, not something that was easy to use in mobile. It functioned well enough for me to grab the address from the appointment notes, but I had wasted half an hour not only trying to log in (you can’t get to the calendar through mail in mobile, rather you have to enter through a google search), but also trying to use the unresponsive mobile version of the calendar. While it struck me as odd that the Yahoo Calendar wasn’t responsive, at the time I didn’t have the vocabulary or perspective to critically analyze the constraints the medium. Looking at the calendar now, issues of responsiveness appear in both the mobile and desktop version.
The full browser window of the calendar looks good and works well. You can click on containers (dates) in the grid and add, edit, or delete events. However, when a user moves the window to work in a sort of split-screen mode, the calendar doesn’t adapt when the browser window becomes smaller.
The desktop design doesn’t flex or adapt to the size of the browser window. The mobile version of the calendar isn’t actually a mobile version. It is simply a reduced size version of the calendar.
The designer created the calendar with consideration to a full desktop browser only, without respect to other canvases such as smaller windows or mobile browsers.
I shouldn’t be allowed to see this page in the mobile version. Yahoo makes it difficult to reach, as they try to steer traffic through the calendar app, but as a user I had to access the calendar through the mobile browser. While the experience can’t be customized for every browser scenario, the design is not responsive by any means.
The fixed width layouts of the desktop and mobile provide constraints of the non-flexible grid. When shrinking the browser window on desktop or using mobile, there are no new breakpoints that afford a better viewing experience. The calendar doesn’t move into a weekly list or collapsed monthly view under different browser constraints. The containers don’t flex as the browser size changes. Yahoo designed a tool that manages schedules and helps a person react and adapt to changes in a dynamic and flexible environment. The calendar tool itself however, doesn’t react, adapt or offer any flexibility to its own environment.
In the anecdotal scenario described above, I created an event in the desktop version and tried to access it quickly in the mobile version. I used different mediums for two different purposes. Marcotte states that the designer can’t accommodate all browsing/user scenarios, but flexibility goes a long way. Open up your calendar app on your mobile phone. Compare it against the desktop calendar you use. What is easier or more difficult to perform/access in mobile and desktop? How does the mobile app adapt to the browser constraints (grid collapse, etc.)? Does the app offer different ways to view information (month, week, day)?
Based on the affordances and constraints in the mobile and desktop versions, what does this say about the creator’s approach and philosophy towards design?