Crit

The crit went well. Everyone liked my designs and didn't really have much to improve. My iBook was unfinished at the time because I don't have access to the Bookry website from home for some reason which is really frustrating but overall everyone liked the design and didn't have any suggestions or improvements.

This process was still valuable however, although there wasn't any constructive criticism it still gave me the opportunity to talk through my products and explain all my design choices. This mean that I had to think myself why I chose each and every aspect and solidify it in my own head. I got to step out of my shoes as a designer and see it in a different light and apart from a few minor issues everything holds up and works well.

One thing that was picked up on was the continuity. People really liked how well my website and my iBook work together. There is a really strong sense of brand identity and that is really important. 

Asset Register

Here is my asset register:

I have shown where I got everything from the images I used to the content I sourced. The vast majority of the images I used, I created and so there wasn't all that much to externally link to unfortunately.

Making My Site Responsive

I have completely finished the design of my site and I have a few responsive elements (for example the iframes). The vast majority of my site however, is still not responsive and so I set about changing that through the use of media queries. I shall take you through the key challenges and stages I encountered as most of it is quite repetitive. I will take you through every media query I have made and the key problems and challenges I had to deal with.

Media Query Max-Width 975px:

The first issue I had was that my nav background wasn't scalable or responsive and didn't have the potential to be. It is a static image exported as a PNG and this meant that I couldn't shrink it with the width of the browser. because the image would distort and look awful. I thought of re-exporting it in increments so it would keep jumping down smaller and smaller at each stage however, I thought that irresponsible in the end. There are curly ends to the ribbon each end and that requires a decent amount of padding on the left and right of the content which in smaller screen sizes had the potential to be quite ridiculous. I decided that at the point where the nav background touched the sides of the screen I would get rid of it and switch it so that the actual nav element was styled in the same way but in CSS without the curly ends. 

Along with this I got rid of all the padding on the content except for 8px left and right. This meant that the site was not basically 100% width. The wrapper was max-width: 960px and so that would shrink responsively anyway. 

However, another problem that arose was that all the absolutely positioned elements would now be out of place as all the text moving would have changed the position of the objects around them and so I also made all of them disappear as well. This is the change at 975px:

The CSS:

Before:

After:

Media Query Max-Width 720px:

The next media query I specified was max-width 720px. This is iPad and tablet realm. There wasn't a lot that needed to be addressed here it must be said. All I did was make all the text content into a single column to make it fill the space better and flow better. I then also decreased the space between the links in the nav a little so they wouldn't try and stack and narrower widths.

The CSS:

Before:

After:

One issue that did arise at this point was that some of the longer titles that were on later pages were running out of room and breaking it weird ways. They would reach the sides of the browser and then the letter on the end would jump below. This just looked odd. Luckily I found a helpful bit of code. In the HTML I placed a hidden hyphen:

The "­" acts as a hyphen only when the word reaches the sides of the browser and wants to overflow. It then instead of breaking the word letter by letter breaks the word once in that place and puts a hyphen in. This came in very handy!

Media Query Max-Width 480px:

This is the media query in which the most amount of changes took place. There were a lot of things that needed to change in order for the site to function properly. The first was the navigation. The links were getting a little crowded at this size. On almost all responsive sites, when you get down to mobile size the navigation hides and is shown with a button press. I wanted mine to do the same and so the first thing I did was to erase almost all of the navigation styling so far leaving only the background colour:

I then recycled one of the buttons from my animals page and made that the menu toggle. I could then create a menu element in the HTML that would hold all of the links. I then styled it in a similar way to the tables I have already styled and added the links in an unordered list (<ul>) and styled them. 

This is the HTML:

The CSS:

And the result:

As you can see in the result I also swapped out the logo for an abbreviated version. A tutor brought it to my attention that when viewing the page on a mobile device, my original logo would take up a lot of screen real-estate and that wasn't good. I created that banner logo in Illustrator and exported it as a PNG with a transparent background. This however, caused a massive headache with the sticky navigation. Because at this size now the value for the "menuOffset" would be different but I couldn't just change it because then it wouldn't work properly on anything above 480px. Luckily I discovered that you can create and use media queries within jQuery. I rewrote some of the code in my sticky nav jQuery and here it is:

There is more code that goes into but this portrays the idea. I basically specified a media query at the top. I specified a variable. That variable being "width" which is the width of the window. I then specified and if/else event which is if the width of the window is less than 480px. Within this I then specified another if/or event. This event is a copy and paste of the old event I had already made but the value for the "menuOffset" was changed from 276px to 147px. It is a bit complicated and long winded to explain but very basically. If the window is less than 480px wide, I'm telling it to use 147px as the "menuOffset" and so the nav element changes class to fixed when the page is scrolled down 147px. Then when it's more than 480px it uses the old value of 276px. This compensates for the change of height with the logo. I had to duplicate these rules and leave in the ones that weren't in media queries because there were issues with page loading. Those issues being that with just the media query rules when you loaded the page or refreshed it it would used the 147px rule even if above 480px in width because you needed to "resize" the window in order to activate the rule. Duplicating them and leaving rules outside of media queries made it so it would look at the rule regardless and if the page was below 480px, the media query rules would take precedence.

So that was the sticky nav sorted. I then just used a simple bit of reused content toggle code for the menu toggle of the nav at mobile size:

This just makes it so that when you press the menu button the nav links in the list below and the containing element fade between 0% and 100% opacity. This makes them invisible and inactive until the button is pressed at which point then fade into existence and become active.

The nav luckily took up the majority of the hardships though. After that was dealt with the only other things were sizing issues. I collapsed the borders on the tables to contract them a little bit and make them look nicer at that size.

I also shrunk the headers down a little to stop them all from breaking, I swapped the logo's over and added thin borders around the headings to help separate them out a little and give them more defined edges because at the smaller sizes some of the text elements began to blend together and it became hard to see where one stopped and another began. I think this was due, in large part, to the reduced size of the headers and that they were a lot closer in size to the <p> text.

The CSS:

Before:

After:

Media Query Max-Width 320px:

This only applied to the second page because it had a large table that kept overflowing as it was too wide. To fix this I simply shrunk the text size quite dramatically below 320px window width:

And that's it my site is now fully responsive! Here all the stages in a row for you too see better:

975px+:

975px:

720px:

480px:

Navigation

The navigation on the iBook is one of the things mentioned in the brief. It should be simple and clear. I believe mine is. When you open the book you will be greeted by the table of contents:

There is a very strong sense of brand identity which ties in heavily to the website. The name of the book is mentioned and below it the name of the chapter. Right at the very bottom it is clear that you can swipe left and right to see other pages. These have on them the other chapters. On the iPad where the faded squares are along the bottom will be placeholders of the pages within the chapter. On the computer there aren't these images for some reason but it will be clear on the iPad what pages there are and you can select where to jump to from here.

Once in the iBook the beginning of each chapter is highlighted by a clear and bold splash screen which lets the user know exactly where they are and acts as a great navigation aid when flipping through the pages as there is a clear break and difference from the content pages which lets the user know they're onto a new section:

After this there are all the pages of content and at the very end of each chapter there is a quiz page. I mentioned this in the last post but I deliberately made them white and different from the other pages to again strengthen the visual difference between chapters. Once you get to a white page you know you've reached the end of a chapter and the first thing you see of the next chapter is the splash screen to let you know what's next. I think this works really well. This is an example of a quiz page: 

Overall I think that the navigation in my iBook is very simple and yet effective. I didn't want to clutter up the design of it with a chapter title as that takes up valuable real-estate and isn't really necessary as you can easily jump back to the table of contents with a pinch of the screen. Apple make the navigation easy with a simple swipe left or right across the screen taking to forward or backwards into the book. It is very intuitive and I think I have made it clear when you are approaching the end of and starting a new chapter.

Quizzes

The quizzes were a big part of the iBook. iBooks Author makes the quizzes fun, intuitive and engaging with a little work. I think that the quizzes I have are not patronising or anything they are a useful tool that recap what was in the previous section they act as a good section break as well. I chose to make them quite drastically different to all the other pages so the user knew they were at the end of a section and about to start another:

Quizzes:

Multiple choice #1:

Multiple choice #2:

Labelling:

Image based multiple choice:

All the quizzes are designed in a way that, although different in colour, still adheres to all the themes and design principles present in the rest of the book. Most of the questions are answerable simply by looking back at the previous pages and often summarised in the galleries on the previous pages. However, there are one or two that are not mentioned and thus test their general knowledge, for example pinning the worlds oceans on the map above.

Google Maps

This is yet another Bookry widget. It is used on the first actual page of the book. It is in the corner of the page as the google maps icon. The information is displayed in image format in the gallery above and the google maps view isn't all that interactive or interesting as it is an ocean and so zooming in doesn't accomplish much and there isn't any street view or anything. I didn't feel the need to dedicate an entire page to it or anything as there wasn't a lot to offer with the widget. I did definitely want to include it though because it adds to the themes of exploration I have had throughout. people can zoom in and see the neighbouring countries in more detail and the islands that are within the Pacific if they so desire.

It is a good edition to the iBook and I like it's humble and unassuming position and scale. Again if people explore the page they can use the widget to explore the ocean but it is not distracting or taking up too much real estate for what could easily become a gimmick. I think that I found the balance quite successfully.

Video

I wanted to have the same principles apply throughout as much of my ibook as possible. This meant that I wanted to try and make everything look tactile and softened against the background a little. For this reason I applied the same border and shadow to the videos I embedded through bookry:

I think it really helps to give the video a more integrated feel. It looks more designed and less placed. I wanted to leave all the play and share controls there to entice people to actually press on it as I thought probably the clearest way to show it was a clickable video was to leave it looking as the vimeo player does as that is what people will be accustomed to. Clicking the video launches it full screen which is nice. It makes the video more immersive I think. This is embedded from Bookry and was really easy to do.