Media Queries and Design Adjustments

Tonight I started working on Media Queries.

Even though we are required to use the Skeleton Framework for our website, a large proportion on whether or not our site is responsive is dependant on 'media queries'. I've never, ever worked with them before, but I got a general gist of the idea of them in class through listening to other people.

I understood that in a way it is applying CSS to certain elements at certain points depending on the size of the page. In the basic index.html we were given to work off of a layout.css file was attached, with the following in:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

From what I understood from here I gathered that within each { } I would put the information for how I'd like an element to display at each point. To gain a further understanding I watched this video:

To explain my new-found understanding!

@media only screen and (min-width: 480px) and (max-width: 767px) {}

'only screen': 'screen' is a media type. Other media types include: print, handheld devices, TV's and projectors. My code defines that this media query is only for screens.

min-width/max-width: This is a media-feature. It does not have to be a 'max' height or width, it can simply be width or height, as well as elements such as colour. 

max - upperbound

min - lower bound

{} : This is where you write your CSS that defines what each element should display like (or if they display at all) at each breakpoint.

Breakpoint: Where a new style kicks in. 

Getting to grips with this inspired me to do something a bit more complex for my site. I started to consider how I could simply my design for when it hit the mobile version - the smallest width. Looking at my existing design, I noticed how cluttered it was. Quite a prominent aspect of the desktop version is the slideshow just under the navigation bar. It is not an element of my site that is 100% necessary - it's there partly for aesthetic benefits. Because of this I came to the conclusion that for the mobile version of the site it was disposable. Removing this slideshow allowed me to trim the length of the (already rather long) central banner. 

Left: Original Banner

Right: New Banner

Implementing this has made me make use of what's now a very useful selection of code:

display: none;

Tells the browser not to display an element (if the page is at a certain size)

display: inherit !important;

Tells the browser to 'inherit' this element and display it. I used this to essentially exchange out the original banner with the new banner.

Combining this with my navigation for the mobile device, my site now displays like this (on mobile). 

You can also see above that I've made the decision to change the colour of my home button to a grey that fits in with the colour scheme (the same grey was used in my iBook). 

I decided to change the colour from red to grey as my chosen red was the exact same red that is featured very heavily in the main, central banner. As you can see above, I have coded the media queries to position the home button halfway over the top of banner when in the mobile state, so having the button and the banner the same colour just did not look good.

New Buttons:

I've kept the same principle of having an over (left) and up (right) state to give a little boost to the users experience.

Sourcing Content & Copyright

Whilst developing my ideas for the look of my iBook, I've also been sourcing my content that will help build it up.

Copyright Issues

One of the main issues I've been focusing on is Copyright. There are 1000's upon 1000's of articles of Volcanoes on the Internet, and even more Images. A lot of these are really good images, but they have next to no information on Copyright and whether or not they can be used or not. Whilst I will not be selling my iBook, I still want to adhere to any restrictions and avoid as many problems as possible when it comes to copyright. So, I've been looking at Wikipedia.

At first, that sounds a bit ridiculous. I understand that Wikipedia is not considered a reliable resource, so I haven't been using it to gain any knowledge and write any articles for my iBook - I've been using it for images. I've found that a lot of (and on the subject of Volcanos, the major of) the images on the Wikipedia articles for that subject are 'free in the public domain'. This means that in most cases, credit is not generally required and I am free to do with those images as I please. So, they can feature in my iBook without any big issues. Of course, Wikipedia does not hold the key to a huge gallery of fabulous and suitable Volcano images - they usually only contain a maximum of 4-5 images per article - so I haven't been able to find all of my images here. I've also looked at the NASA site.

Very similar to Wikipedia, NASA supplies images (that they have created themselves) in a public photo gallery that is free for anyone to access. They're free to the public domain and have limited restrictions on their use. Below are some examples of some images I'm considering using in my iBook.

http://nasasearch.nasa.gov/search/images?affiliate=nasa&m=false&query=volcanoes

Videos

I've been looking to Vimeo and YouTube for good educational videos that I can include in my iBook. Below are some that I have decided are appropriate and would fit within my iBook.

Shield Volcanoes

Yellowstone Caldera

Graphics

As far as sourcing Graphics and Graphs goes, I've decided not to do this. I want to create them all myself to fit within my chosen visual style, as I can decide exactly what information to include and have the freedom to truly simplify something or develop it further. I want to stick with flat colours - so steer away from textures as much as possible. Below are some colour schemes that I have picked off of images that I like and that illustrate the sort of look I want to achieve. There aren't too many 'pure' colours there, as I think I may try to add a hint of the 'retro' style in too. 

Presenting My Idea

I have successfully pitched my idea to the class. Whilst I didn't really get too much feedback on their thoughts on the designs and concepts I proposed, they did comment on their worry that I'm going to try and cover too many subjects within it. In some ways, I agree. I think I have expanded hugely within each chapter I'm going to cover, and am considering condensing down those so as not too overloud myself, as well as merging sections that don't have much consistency to create a better section between the too.

Aside from that, my ideas were accepted positively and were encouraged and they seemed to be interested to see how I would progress and to see the final product.

Another Analysis

Whilst sifting through some real questionable material on the iBook store, I came across a really cool and interesting Enhanced iBook called "The Senses".

The iBook is made up of a series of pages that contain a lot of interactive images and pop-ups. You work it by reading the text and then clicking on the various X's and circles dotted over the imagery. Clicking upon these brings up additional pages (pop ups) which allow you to interact further and find out more information. If you look the example below, you can see a clickable point on the males cheek. It stands out enough so that you know you're supposed to click it.

Clicking upon this brings up another page that contains an interactive diagram on the same image that we saw on the previous page. There's a good sense of continuity and it highlights what the user needs to do to interact once they see the additional features overlaid onto the original image.

When you click on the small plus by the eye, a small animation starts that visual explains the points made in the accompanying text. I like the way they have chosen to animate what some would just leave as imagery. It creates a stronger, more visual way of the user learning and is more likely to be successful.

I also like the continuity between chronological pages. As you can see above, they've used the either side of the males face to continue to the next page of the same chapter. This keeps a similar layout that the user has already understood from the first page but changes it slightly to avoid blatant, identical pages each time which can get boring. 

Another good example of using animation to explain what could just be a diagram is the following (images below). The idea is that you click the X's and it visually demonstrates what it means by our eyes running to opposite sides of our brains. 

I think this is a really successful way of demonstrating a point, especially by giving them their own pages that are optional to click on. These interactive diagrams are placed, generally, centrally on the page against a very clear (sleek looking) background and, unlike other iBooks, the surrounding is not cluttered by text. They're of a nice design style that fits within the overall style of the book.

A Cool Resource

I found this website called www.volcanodiscovery.com  that features the current active & dormant volcanoes around the world. It has a map that marks out where they are.

There is an 'embed' option with some HTML. Through my research I discovered that iBooks Author will allow you to embed HTML from an external source into it, so I will definitely use this within either my 'What is a Volcano?' or 'Famous Volcano' chapters. 

Another really cool feature they have on this website is the ability to view live webcams of current volcanoes - whether they're erupting or not. This is something I'd also like to embed into my iBook, as it's refreshed every single day with up to date information that is reliable, and can be used to back up any points I make. E.g. does a volcano have to be spewing Lava in order to be erupting? No, it can be erupting gas, and there are plenty of Volcanoes on video that do that every single day. 

They also feature what look like very scientific diagrams...another element I could incorporate into my iBook.

http://webcams.volcanodiscovery.com/Gamalama

Decisive Chapters, Sections & Headings

As I've been doing general research into the topic of 'Volcanoes', I've been trying to work out a way of arranging all of that information into specific chapters, sections & headings.

To start it all off, I brainstormed everything I had researched on the topic, any questions I wanted to ask etc.

Digitalisation of my existing Hand-drawn Brainstorm

This covered a lot, so I started to break it down into specific categories. I want to aim towards having at least 4 chapters, so I created 4 questions. I can add more later if I see fit.

▸  What is a Volcano?

This question gives me room to explore the varying types of volcanoes, as we'll as move towards a more 'science' route in the explanation of how they're formed.

▸  Why do they erupt?

Again, from this question I can delve deeper into scientific explanations. There's room for me to use a lot of diagrams and interactions (e.g. animations) that will help explain why they erupt, as well as scope for me to link Volcanoes to other Natural Hazards (Natural Hazards = A subject covered by A-Level students).

▸  What damage do they cause?

Good opportunity for interesting demographics and statistics, as well as animations and videos/interviews from previous explosions and/or peoples experiences.

▸  Are there any famous Volcanoes or Eruptions?

There are a ton of documentaries on Volcanoes, so this will allow me to go in depth on several well known Volcanoes (e.g. Yellowstone National Park) and bring in content from external sources that monitor current active Volcanoes. Good scope for me to explore the history of Volcanic Eruptions and how they've shaped the planet we live on today.

I felt as if these questions gave me a good opportunity to create an iBook that was well rounded and covered a lot of ground within the subject of Volcanoes. If I decided to use these as my Chapter's, after an Introduction chapter and ending with a Conclusive chapter, I then needed to decide the subjects within and start to consider headings & article names. 

Digitalisation of my existing expansion on chapters

Above you can see how I have expanded on each chapter. There looks like a lot, but there's an average of around 5 sections within each Chapter. Each of these sections can now have their own page (or 2....or 3...) and will form my iBook. 

Then I turned all of these chapters and sections into documents, divided by folder by chapter name to make it easy for me to access and import information. As I fill each document with information I will build the content of my iBook page by page. Within these documents I can also apply styles to the text to differentiate between Headings and Subheadings etc. 

Each folder is numbered by the order I'd like it to appear in the iBook, as well as each section within those (see image below). Part of the brief is to create a narrative, and the questions that I initially came up with before I expanded into these sections are designed to run on from each other - a natural progression. They're also titled so they can be skipped to straight away - it's not necessary to read the entire iBook in order for a section to make sense. What I'd like to do, also, is have one page in one chapter (e.g. "What else erupts from Volcanoes?") link to a page from another (e.g. "Volcanic Ash"), to direct the user to a different page in order to find out more information.

Target Audience, Specific Content & Existing Material

The target audience for my Volcanoes iBook is Level 3 Students - those studying A-Level. That puts them at a relatively similar age to me - 1 or 2 years younger. This gives me scope to analyse works  that I can somewhat relate to, too.

As our iBooks must be treated as something intended for Education purposes, I decided to do some research into what sort of depth students at Level 3 go into when actually studying the subject I'm creating my iBook about. I want to make an iBook that's relevant and can actually be used - covers the appropriate subjects within the category.

Not only that, but what content are they looking at in order to revise and study a subject? Is it engaging? What designs and concepts work and which don't?

Content covered at Level 3
I found a website called www.s-cool.co.uk/a-level by it being the very first result upon googling "A-Level Revision. This is not a website that I'm familiar with (personally, I didn't take 'typical' A-levels and never revised!), and I was actually looking out for sites that are more well known (both in popularity and for reliability) such as BBC Bitesize. It seems like a relatively large organisation (stating on their site 4.7 million users annually) that can be relied on.

I navigated;
A-Level ---- Geography ---- Natural Hazards
http://www.s-cool.co.uk/a-level/geography/natural-hazards

and then found the categories 'Formation of Volcanoes' and 'Volcanic Hazards'.

These are two subjects I'll make sure to cover in my iBook, and I have bookmarked the page for to access information when writing those categories.

I will obviously expand hugely and not focus purely on those categories. These are just ones that I'm going to make sure are covered.

Existing A-Level Revision Material 
I had a browse on the iBook store to see if there were any existing A-Level revision guides - on both the subject of Volcanoes/Geography and general subjects (e.g. maths). I wanted to identify any patterns and similarities, and see if there is any correlations with the rating/responses to the book.

**Commence the most painfully boring set of books I've ever come across.**

I could not find one 'enhanced' (Apples name for books that you really can interact with through the inclusion of games, sound, video etc) iBook that was really aimed at those studying their A-Levels. There is plenty of revision guides, but nothing that stands out as particularly engaging or exciting.

They're all very text heavy, with little focus on design and more about the content. I understand this, as their sole purpose is to educate, but I feel as if the readability of these books could be greatly improved through some consideration on a few points - e.g. the amount of text on a page, the colour of that text against the background.

example of the amount of text spread across two pages

iBook: Physics Unit 1: The Rooster Revision Guide (sample)

The inclusion of diagrams help breaks up the text slightly, and I like the style they're in. They're walking the line between real images and childish cartoons, and they work. They're the typical, textbook style diagrams, so I may continue this into my own iBook.

What I'd change is the extent of text. Those 2 pages up there contain 6 headings, and I would at least break that up into a maximum of 2 heading per page, with some of them just covering 1 on each page. This would allow room for more breathing space and the enlargement of graphs and diagrams.

There's also room for exchanging out flat images for something more interactive.

example of diagrams that could be transformed into something more interactive

Main things I noticed:

•  Great depth into each subject

•  Appropriate imagery to match each category

•  Links (that work) to outside sources (e.g websites explaining more information)

•  Narrative. Whilst there is no obvious story, each category runs on from the previous, but you're still    able to pick up and read from anywhere within. 

Areas to be improved:

•  Readability

•  Amount of information on one single page, to be reduced

•  Turning images to interactions - e.g. mini games

•  Add more interactions - e.g. mini quizzes at the end of each subject

AF106: Interaction Design

New brief time! This assignment is focused more on Interaction Design; specifically iBooks.

The task is to create an iBook for Level 3 students (A-Level) that can be used as an educational resource. It's to be constructed on iBooks Author to be used on the iPad.

As the iBook will be used an 'educational resource' all of the information included in it must be factually correct - this means using reliable sources and adhering to copyright restrictions in the same way you would when writing a report.

In order to make the iBook more interesting and engaging and bring the subject to life, it must be Interactive (e.g. the 'i' in 'iBook') and of a 'documentary narrative'. So, it must be presented in a reasonably formal way in some form of narrative. The chapters and articles should run from each other and the iBook should also have the ability to link to pages back and forth throughout.

The subject of the iBook will be a "wonder of nature".

My subject is: Volcanoes

The iBook must be built out of a frame of 'robust navigation', so this is an element I will research and explore further throughout the assignment. It must contain a combination of text and images, as well as video and sound files. All of these must be sourced and then put into an asset register. 

The asset register must detail the sources of each asset with information on copyright restrictions.

In order to conduct my research, I must find and analyse examples of iBooks and Animated elements that are part of an interactive navigation structure. As well as this, I must conduct visual research which will help me develop the design, interaction and navigation of my iBook.

My pitch to the group must contain examples of research, mockups, storyboards and my plans for the navigation of my iBook.

To hand in submission:

• Pitch
• A folder containing
• iBook Authoring File (.iba)
• Finished exported iBook
• PDF render of finished iBook
• Working files (in a folder)
• Asset Register
• Production Schedule with intervals
• Sketchbook

The sketchbook and this blog must contain:

• Evidence of research
• Preparatory work
• Final Designs
• Evidence of a developed understanding of technical and design issues
• Evidence of a developed understanding of interactive design principles and practise.
• Evidence of user testing