Proposed Design: Mobile

Above is my proposed layout for my website in it's mobile state. It is rather long and allows larger areas for text to be read as well as full width of the screen images and small images being placed alongside each other. I've left room for their to be links at the very bottom of the page, just like in my desktop version. 

The plan with this is to use the Skeleton Framework to allow me to arrange my content accordingly. With Skeleton, as the width of the page is decreased items will start to stack. The box on the left of a row will always appear above the one to its right, so this will have an impact on whether the text of the chapter or the image on the chapter will appear first as the user scrolls down the page.

Initial Design Development: Mobile

I've been sketching in my sketchbook trying to work out the direction I want to take my design. I understood I needed to apply a similar design style to which I used in my iBook (as they've got to match and be seamless between each other) but my issue is that since then I've 'moved on' from that design and when I go back to look at it I can identify a ton of things that could be improved with it! What I decided to do, then, was go back and look at the original graphic I created (from which all other graphics were inspired and created from) and have a look at how I could take elements from it.

- Ribbon wrapped around an element (in this case it's a volcano)

- Red against the sea green background

- Shape of the volcano (I like its uneven, loosly cartoon style)

I decided to take these elements and try and incorporate them into one design (initially for mobile). I had a look on Pinterest from some inspiration of ribbons. I wanted to see the different styles, see if there were any conventions with their use and just generally have a look how they're used. I found this particularly useful image (below) and used it to inspire my sketches. You'll see in my initial designs below how they have played a part.

http://www.pinterest.com/pin/341710690449661469/

I took three potential designs that I felt were most successful and started to develop them more in illustrator.

Option 1

On paper this looked pretty good...on screen, not so much. A lot of the issues I'm having is the restrictions on my actual ability to design. For me it's sort of like drawing - I know what's in my head but it's the execution of the idea that isn't quite as good as what's in my head. Whilst I'm getting much more advanced on Illustrator and my ability to execute my ideas is improving, I don't feel that this design really works the way it is. It looks a little odd with how sharply the sides of the 'Volcano' drop off and I don't think I'd be able to include much of the stuff coming out the volcano due to the shape of it. If I make the shape any wider then the illusion of the ribbon wrapped around it won't be there, and if I make the peak of the volcano any lower it will ruin it's shape. 

Option 2

I do quite like this one, especially how uneven the ribbons wrapped around it are. I like how it allows the edge of the volcano to gradually move off of the page down to the corners, but it doesn't really allow me space for a logo. I am interested in making the logo quite a prominent feature, and this doesn't allow that. The colours are good, but the lack of red doesn't really relate to my iBook as much as I'd like it too.

Option 3

Out of all my designs, this is my favourite. I love the shape of the logo and the text within it, and I think the colours work well together. I'd like to rethink the colour of the text within the logo though, as it's the same as the red background at the moment. This design has allowed me to think about the possibility of having the red background stretch down and down and to have content 'attached' to it all the way down.

For a bit of fun, and also to have a look into the proportioning of elements within my design against a mobile device, I mocked up this design onto an iPhone. This also allowed me see what elements of my design may be cut off by things out of my control (e.g. on an iPhone, the search bar at the top protrudes into the screen, as well as the back/forward/navigation buttons on the bottom. The actual size of the viewing screen is significantly trimmed compared to the size of an iPhone screen)

Responsive Web Design: What is it?

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.

 http://joshuasortino.com 

http://morehazards.com

 http://2012.dconstruct.org