analysis of a responsive web site
TRANSCRIPT
-
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
-
8/12/2019 Analysis of a Responsive Web Site
2/15
Table of Contents:
Introduction Description Preface The website
The homepage The internal pages Analysis & Conclusions Navigation Patterns
-
8/12/2019 Analysis of a Responsive Web Site
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
-
8/12/2019 Analysis of a Responsive Web Site
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).
-
8/12/2019 Analysis of a Responsive Web Site
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.
-
8/12/2019 Analysis of a Responsive Web Site
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.
-
8/12/2019 Analysis of a Responsive Web Site
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/12/2019 Analysis of a Responsive Web Site
8/15
-
8/12/2019 Analysis of a Responsive Web Site
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!
-
8/12/2019 Analysis of a Responsive Web Site
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
-
8/12/2019 Analysis of a Responsive Web Site
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.
-
8/12/2019 Analysis of a Responsive Web Site
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
-
8/12/2019 Analysis of a Responsive Web Site
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/
-
8/12/2019 Analysis of a Responsive Web Site
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:
-
8/12/2019 Analysis of a Responsive Web Site
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