Responsive Website's Initial Research

A general search for responsive websites revealed these websites below, generally the navigation was the aspect that remained at the top after the resize which is something that i should consider when designing my own responsive website.

The website above is a website for an online magazine in which various authors write stories revolving around a set genre, so after the site has been reduced in size,  it uses downward scroll  to the content and then the  link to the next page is at the bottom, all of the navigation is placed pretty much after the intro content section (divided by story, new story new link new page), save for the introduction/home which is situated at the top. Each section manipulates a different colour scheme which generates contrast and visible division between each of the pages. large artwork begins each segment  (much like a cover to a book) each section has its own cover element although its not actually on a separate page.

 http://www.fray.com/issue3/

 http://starbucks.co.uk
the starbucks site above keeps the nav bar clear at the top of the page until the site is reduced to its smallest mobile size after which the navigation disappears and the main images on the page become new focal points. the logo remains firmly at the top of the screen and the main section depicted in the larger site (shown above) is the first element seen after reducing the size of the page. this main element, has several pages that you click on which leads you through the articles that are linked at the bottom of the site ( although this almost nullifies the scroll down option since they are placed on pages linked to the main content).  the clean white background contrasts against the dark green colour scheme and ensures legible information.

http://garethlawn.co.uk

the website above places the designers contact details at the top of the page, which prioritises that information. each segment is broken up by thin photographs (examples of his designs) and short statements explaining each although each photograph leads to a new page devoted entirely to that piece , again a photograph at the start of each segment helps to clarify and appeal visually but it also allows for the integration of a mini gallery at the beginning of each- something to consider when trying to display images relating to the same subject.

  http://www.nomineedesign.com/work.php

the nominee website (after being reduced to mobile size) devoted its first page entirely to navigation links to each section can be clicked on at the beginning or you can scroll down to the full section. after clicking on the navigation heading's you then have to scroll down to reveal the specific content. i mostly liked the site because i liked the solid coloured rectangles that  made the website feel like you were turing the pages of a magazine, each colour helps to segment and it creates both a clean and warm overall design.

overall this initial research has helped to display how information is divided into more important areas, which is a pivotal consideration in regards to a responsive site. navigation dominates the top, after which subheadings are then placed on the scroll down. since we have to code the site ourselves i dont wanna make anything to complicated but at the very least i have a general idea of how sites are divided and organised.