Digital Media Design FdA: Desktop

This is my proposed design for my responsive website and proposed layout for it in the desktop state.

The Basics

This design is reliant on mainly just the one page as I am aiming to have the bulk of the (simple) information on it. Within each 'section' on the page (identified by the change in colour and ribbon labelling) the user can receive a brief run down of each subject within it and are then able to click on links which will take them to other (internal) pages that explain that concept in further depth. The idea behind the super-long, continuous-scroll-inspired page was to provoke scrolling through interesting graphics and interactive content which makes the user want to stay on the page and discover more. Also, I wanted the site to be as simple and effort-less to use. Considering my target audience (16-18 year olds) I didn't want to create a site which required clicking 4 different buttons and navigating deep into it before any information was given and any real interaction started.

Logo

I decided to incorporated the logo into an fundamental aspect of the layout of the design - the ribbon that runs down the centre. By allowing me to centralise it and make it more so of a 'feature' on the page, it has improved the design and, I feel, the users enjoyment of the page. Initially I was looking into designing a standard horizontal navigation bar and then above that placing the logo, but considering how one of the aims of this project is to educate someone about a subject, I didn't feel it would be engaging and interesting enough - even though it's just a logo.

Navigation System

The idea is that the user can click on each chapter from the top navigation bar and they will be skipped to the matching 'section' on the page. I have seen this done on a lot of websites and it helps to avoid the user having to continuously scroll and scroll just to find what they need. This navigation bar will also (hopefully) be floating - wherever the user is on the page it will be there ('locked' to the top of the page), alongside the home button. Below is an example of how the navigation bar will appear at the top of the page no matter where you are on it.

This will also be applied to any internal pages, as well as the use of the buttons in it to skip to anywhere on the page too. Whilst I've done something like this before (using Dreamweaver...) using anchors etc, it's not something I know how to code and I've never created a navigation bar that is locked to a position, so I've been looking into it briefly to understand it and there's some good YouTube videos out there. The following demonstrates how to create a "sticky navigation bar" (at least now I know it's called 'sticky'!)

To start off my research, I've decided to ensure I have a good understanding of what 'responsive web design' is and to ensure I completely understand what it is that I am going to be creating.

My first stop was CreativeBloq, a site that I use often to source information and find useful things like Tutorials or free downloads. I found an article called 'Get Started with Responsive Web Design' which lead me to a person named Ethan Marcotte. This seems to be the guy responsible for coining the term 'Responsive Web Design'.

In 2010 Ethan wrote an article named simply 'Responsive Web Design' on AListApart. In the article he defines the web and speaks about how it is ever changing, and how in turn that defines our design and detracts from our ability to design a website for the future and for longevity;

"Our work is defined by its transience, often refined or replaced within a year of two. Inconsistent window widths, screen resolutions, user preferences, and our users' installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we've become incredibly adept at doing so".

Ethan Marcotte on 'Responsive Web Design'

As a designer himself, Ethan explains how he noticed that he was increasingly being asked to design an "iPhone Website". This reflects how we have greatly shifted towards having mobile technology - the introduction of Smartphones has been massively successful and as a result we have become more reliant and demand more from them - one of those demands being the ability to access the web and any website from any 'mobile' device.

Initially, websites could only be accessed when you were sat down at a desktop PC, so they only needed to be built for the requirements of a desktop screen. But with the increasing demand to access websites on the go, it became clear that accessing a website that had been designed for a desktop screen, on your mobile, was not going to work. This was common knowledge, not something that Marcotte 'unveiled'. People started to build 'versions' of their sites - e.g. as above, 'iPhone websites' - but as so many new devices and technology came out (e.g. iPads, multitudes of Android phones in different shapes and sizes) this became a lot of work. Ethan Marcotte proposes using one version, and coding it so it responds and adjusts to the device it is being used on.

"This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design."

Ethan Marcotte on 'Responsive Web Design'

I will analyse further, but below are examples that illustrate how responsive web design works.

http://fieldguide.is

http://mobiletest.me

Desktop

The Website in it's Desktop form. A large image that is bordered at the bottom by a yellow box that meets the fold of the screen. There are then three pieces of information evenly spaced across the width of the screen.

Tablet

Left: iPad Mini

Right: Google Nexus 7

The above shows how the site would appear on two different types of tablet (in landscape form). The Google Nexus is noticeably skinnier than the iPad and it's interesting to see how this effects the positioning of elements on the page. The contact information on the bottom of the screen in the yellow bar has repositioned so it is more centrally aligned on the Google Nexus, whereas on the iPad, which is noticeably wider it is closer in likeness to the original, desktop 'version' of the website.

Other Desktop to Mobile comparisons of responsive websites.