raffaella s.

isidori Essay 1: Analysis of a Responsive Web Site Digital Studio 2 GRDS-763-OL SCAD, Summer 2012 Professor: Rebecca Hemstad July 2012

Table of Contents:

Introduction Description Preface The website The homepage The internal pages Analysis & Conclusions Navigation Patterns

 Introduction

Description In order to complete this essay it is critical that you have taken the time to read the required readings posted in the Welcome to Unit 1 Discussion Forum. For this essay you will pick an existing responsive web site. Include screen shots in your essays. Evaluate/analyze the structure and presentation of the site explaining what makes it responsive. Some of the items to consider include: Does this design reach the intended audience? Is so, how? If not, why? Yes, it may be that the responsive web site you picked has flaws. So dont forget to mention those. How does the navigation promote or prohibit way finding? Does the site take into consideration gestural actions? (ie: are the buttons, etc big enough for a finger to touch?) The purpose of this essay is to demonstrate that you have a clear conceptual understanding of what a responsive web site is and the primary design characteristics associated with it.

Preface In just a couple of months the number (and the quality) of responsive websites has raised dramatically, as are growing researches, articles and the scientification of website responsiveness. Having already done researches on the subject (and shooting for some extra credits to compensate for the delay in the delivery) I will begin by analyzing a (very nicely done, in my opinion) responsive website and, from there, I will focus on some of the different approaches in responsive navigation patterns that are emerging, one of the hottest issues at the moment. In an interesting article, Brad Frost evidenced the seven principle patterns in designing navigations that respond well in different screens/media (http://bradfrostweb. com/blog/web/responsive-nav-patterns/) in an attempt at making order and at organizing resources and examples. The main approaches identified are:

Top Nav or Do Nothing Approach The Footer Anchor The Select Menu The Toggle The Left Nav Flyout The Footer Only The Hide and Cry

The Pull-Down for navigation solution is another possibility, suggested by Tom

Kenny in his post (http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/ )

In the following pages I will analyze the responsiveness of the website of Counterculture, a scottish social communication agency that works with companies, entrepreneurs, and charities to help them weave social enterprise thinking deep into their business models. (http://thisiscounterculture.com/). This site uses the Top Nav approach, (aka the do nothing). Later in the essay I will provide brief examples of the other types of navigation approaches and some virgin considerations on them by a user/designer with a rather naive approach (me).

 The Website: http://thisiscounterculture.com/ The homepage The first thing I noticed landing on this site was its minimal elegance and the pleasing yet not boring visual style, which I found to be elegant though not overly designed and mostly very coherent with the agencys mission and positioning.

I liked how the navigation has become part of the design and how the photos in the homepage (not one but many, but all black and white so to create a visual unity) can split up when the width diminishes, creating an always proportional relationship between the elements. iPad Vertical iPad Horizontal

iPhone Vertical iPhone Horizontal

The site holds very well in all sizes, except, possibly, in the iPhones horizontal view.

The internal pages

Internal pages retain the cleanliness and minimal style of the homepage, relying primarily on a sober palette and careful typography. The underlying theme is care and attention to details, which help transfer these same concept to the agency.

 Analysis & Conclusions

Site: structure, design, look and usability As mentioned previously, from an aesthetic point of view the site is elegant, modern, minimal yet with great attention given to details. It conveys principles like concreteness, attention, care, lack of excess, sobriety, control, elegance of thought, balance... all excellent qualities for an agency. In particular the company brands itself as a social enterprise and somehow their site reinforces that, possibly by being carefully designed without ostentation. Color contrast is good, type is elegant and contemporary and fits well with the style.

Responsiveness The site responds visually very well, it maintains the characteristics of the browser view in all screen sizes as well maintaining the feel and balance. Technically, space in navigation allows for finger gestures without overlaps or off linkpressing

Navigation According to Brad Frosts classification this site applies the Top Nav approach, making the navigation-holding area a design element that gives a unique characteristic to the site. Yes, it does steal away from content a large part of real estate in the smaller sizes, nonetheless the site is very light and at each touch pages load quickly. One negative thing of this top nav approach is that once you enter in a page and start scrolling for reading (say in the blog, for example) you must scroll back to top or tap the phones top (in the iPhone, not sure if is the same on Androids) to scroll back up, which might get a tad annoying (but Im being extremely picky and critical!) Overall one of my favorite sites of lately!

 Navigation Patterns

Top Nav or Do Nothing Approach We have discussed this approach in the example above. Basically it consists of keeping the nav elements on the top part of the screen in all width.

The Footer Anchor In this solution, menu is placed at the bottom, with an anchor link at the top.

http://greygoose.com/

http://builtwithmomentum.com/

I find that this solution can be interesting and pleasant if the site is not too content-heavy and the scrolling is not over too long a page. It can be an elegant and code-wise simple solution

The Select Menu http://www.westerscheldetunnel.nl/

http://designintellection.com/

Another approach, which could work well for long menus and that is unobtrusive in terms of size (but not too elegant and rather difficult to style) is placing a drop-down select menu on top.

The Toggle This solution can be the most elegant. It is similar in approach to the footer anchor but when the menu button is hit the menu toggles open. http://brickartist.com/

http://www.hillsong.co.uk/

10

I have found another interesting example of an overlay navigation solution, though honestly my first reaction was to find it somewhat awkward (as I expected a togglemenu) http://remodelista.com/

1 1

The Left Nav Flyout Made popular by facebook and still rarely used (probably as it is a more complicated solution and better fit for content-heavy menus) the left nav flyout is an interesting side approach. http://www.barackobama.com/

The Pull-Down for navigation solution This is another solution that could be interesting:

12

The Footer Only This solution is not a very functional one: it places the menu at the footer, but does not provide an anchor on top, therefore obligating the user to scroll all the way down to the end to move around the site

The Hide and Cry Possibly the worst possible solution: simply hide the navigation and preclude the visitor from accessing all the content available online.

Resources & Readings: Tutorials: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/ http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/ On Navigation: http://www.1stwebdesigner.com/inspiration/creative-website-unusual-navigation/ http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigationmenus-good-and-bad-examples/

13