analysis of a responsive web site

8/12/2019 Analysis of a Responsive Web Site

1/15

raffaella s. isidori Essay 1: Analysisof a Responsive Web Site

Digital Studio 2GRDS-763-OLSCAD, Summer 2012

Professor : Rebecca Hemstad July 2012


2/15

Table of Contents:

Introduction Description Preface The website

The homepage The internal pages Analysis & Conclusions Navigation Patterns


3/15

Introduction

Description

In order to complete this essay it is critical that you have taken the time to read therequired 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 itresponsive.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 tomention 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 un-derstanding of what a responsive web site is and the primary design characteristicsassociated with it.

1


4/15

Preface

In just a couple of months the number (and the quality) of responsive websites hasraised 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 tocompensate 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 dif-ferent approaches in responsive navigation patterns that are emerging , one of thehottest issues at the moment.

In an interesting article, Brad Frost evidenced the seven principle patterns in design-ing navigations that respond well in different screens/media (http://bradfrostweb.com/blog/web/responsive-nav-patterns/) in an attempt at making order and atorganizing 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-naviga-tion-a-responsive-solution/ )

In the following pages I will analyze the responsiveness of the website of Counter-culture, a scottish social communication agency that works with companies, entre-preneurs, and charities to help them weave social enterprise thinking deep into their

business models. (http://thisiscounterculture.com/). This site uses the Top Nav ap-proach, (aka the do nothing).

Later in the essay I will provide brief examples of the other types of navigation ap-proaches and some virgin considerations on them by a user/designer with a rathernaive approach (me).


5/15

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 designedand mostly very coherent with the agencys mission and positioning.


6/154

I liked how the navigation has become part of the design and how the photos in thehomepage (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.


7/15

The internal pages

Internal pages retain the cleanliness and minimal style of the homepage, relyingprimarily 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.


8/15


9/157

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, con-trol, elegance of thought, balance... all excellent qualities for an agency. In particularthe company brands itself as a social enterprise and somehow their site reinforcesthat, 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 link-pressing

Navigation

According to Brad Frosts classification this site applies the Top Nav approach, mak-ing the navigation-holding area a design element that gives a unique characteristic tothe 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 andstart scrolling for reading (say in the blog, for example) you must scroll back to top ortap the phones top (in the iPhone, not sure if is the same on Androids) to scroll backup, which might get a tad annoying (but Im being extremely picky and critical!)

Overall one of my favorite sites of lately!


10/15

Navigation Patterns

Top Nav or Do Nothing Approach

We have discussed this approach in the example above. Basically it consists of keepingthe 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 con-tent-heavy and the scrolling is not over too long a page.

It can be an elegant and code-wise simple solution


11/15

The Select Menu

http://www.westerscheldetunnel.nl/

http://designintellection.com/

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


12/15

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/

1


13/1511

I have found another interesting example of an overlay navigation solution, thoughhonestly my first reaction was to find it somewhat awkward (as I expected a toggle-menu)

http://remodelista.com/


14/1512

The Left Nav Flyout

Made popular by facebook and still rarely used (probably as it is a more complicatedsolution and better fit for content-heavy menus) the left nav flyout is an interestingside approach.

http://www.barackobama.com/

The Pull-Down for navigation solution

This is another solution that could be interesting:


15/15

The Footer Only

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

The Hide and Cry

Possibly the worst possible solution: simply hide the navigation and preclude the visi-tor from accessing all the content available online.

Resources & Readings:

Tutorials:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mo-

bile-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-navigation-menus-good-and-bad-examples/

1

analysis of a responsive web site

Documents