Tweaking The Book Image

When I re-edited my book image to get rid of all the text I saved it as .jpg as this would leave me with a smaller file size and therefore quicker loading times. One thing that I did not notice at the time was that I would no longer have my transparency around the edge of the book. When I looked at the site I noticed that the left and right edges of the book had a white trim around them, which particularly stood out against the blue background. I have done a screen of this image against a grey background because I realised that this wouldn’t be visible against the white background of this page!

So I took it back into photoshop and cropped out these edges to provide a cleaner edge. I left the thinner ones at the top and bottom as they fall on the white part of the gradient so are not visible. Due to the lack of transparency as well would mean that if I were to just crop the top and bottom on a straight line, I would lose the curves at the spine of the book.

Adding a Min-Width

At one point in time I did have a ‘min-width’ property for the site, but at some point it appears that I have deleted it…this was brought to my attention by Amanda, that when she was viewing the site everything was underneath each other as opposed to displaying on top of each other.

Using Chrome’s ‘Inspect Element’ option I was able to identify the smallest size in which my project is best viewed and added this to the CSS.

iPhone ‘Error’ Message

When I was testing my site before making it live I had a working iPhone ‘error’ message that would pop up when someone tries to access the site from an iPhone that would say that the browser was too small to be able to view the site properly. However, upon going live I noticed that this message did not work, all that was displaying was the background. From this I could determine that part of my ‘@media query’ was working properly, and part of it was not. I had a look through my original CSS to see if there was anything conflicting that would mean the message would not show and that’s where I found my problem.

In my main CSS I was telling the iPhone <div> to ‘display:none;’ as this means it would not appear on the page at all (‘visibility:hidden;’ meant it was there you just couldn’t see it so left a blank box at the top so I chose not to use that). In my ‘@media query’ for the iPhone I had set the property of the iPhone <div> to ‘visibility:visible !important;’ with the idea that it would override the main CSS command. What I did not realise at the time of putting it live was that ‘display’ and ‘visibility’ do not work together.

In order to fix this I had to change one to match the other. The easiest way I found to do this was to change them both to ‘visible’ (as there are a lot of properties under ‘display’ and I was not 100% sure what the correct one to use was!), in order to combat my previous problem in the main CSS with ‘visible’, I simply set the height to 0px so that the box would basically not exist.

I then edited my message to make it a bit more informative and to make it look nicer on the screen. I also added a link to this blog so that while the main site was not available, the user is able to see the ‘behind-the-scenes’ work that has gone into it.

Creating a Favicon

I decided that I wanted to add a little bit of customisation to my site while I was waiting to get feedback from my testers. So I made a Favicon. Using the ‘ICO (Windows Icon) Format’ plugin in Photoshop I opened up my first cow image with the idea of turning the head of the cow into my icon. I cropped it to the right size and cut it out from the rest of the body, saved it as a .ico and I was done.

I then had to put it into my code using a <link> tag. This is the code that I used, it defines what is being link, what type it is and the link for the image.

I then went to test it in Chrome to see if it works, but instead I got this:

I opened up Firefox to have a look to see if it was because I had made a mistake in the code or if it was something else. I thought it was unlikely that the code was wrong as I checked a few different websites before using it. Sure enough, it showed up in Firefox.

This let me identify that it was a problem with Chrome that I was having, not the code. So to begin with I changed the order of my code around a few times to see if it was something like I was putting it in the wrong order, which is a hurdle I’ve fallen at before, but I tried all combinations and got nothing. I did a quick Google to look for the problem to see if it was a common one. Turns out it is. Chrome does not render favicon images when the page is being tested locally, in order to combat this I used an app that I got for free from the Mac App Store called SimpleHTTPServer. This sets up a simple server (as the name suggests) so that you can test the work ‘live’ (this is also what I have been using to check my changes that I make on iPad and iPhone). Once this was all set up I tested again in Chrome, and had success.

Working With Children

Over the past week while I have been working on the bugs for my website I have assigned family members with the task of trying out the website with their children. Unfortunately, I do not yet have any video of this but the general feedback that I got was very positive. One of my cousins is a web developer himself and was very impressed with what I had put together and was able to help me out with a few of the niggles I had left to sort out.

Both cousins who tried it out with their children said that it was very simple to use and they grasped the concept quickly with adult supervision, which is conveniently exactly what I had hoped would happen!

Hopefully I’ll be able to get some videos or photos soon to add on.

New Book Background

I have now Photoshopped my book again to get rid of the text so no one can guess what I’ve scanned for the background. Unless they’re are a brainbox and can figure it out from the colours at the side, but I really hope no one has that much free time. I have also resaved it as a .jpg instead of a .png as I do not need to use white space and this will also be a smaller file size.

It’s messy but in theory no one should see it so I’m not all that bothered – it’s a just in case method! I have just looked at it in the browser while writing this as I forgot to crop the edges, so I need to remember to go back and do that because it has white edges!

Fixing Safari Issues

As aforementioned I had a pretty big problem with Safari. Whenever it loaded the desktop version, it loaded the iPad settings because they’re both Safari. I did a Google about how I could fix this and some people suggested taking out the (max-width) part of the @media query as the desktop browser would then not match the (min-width). I tried this, it didn’t work. People on the Internet lie. So I did a little more research and one thing that a lot of people were doing that I had completely overlooked as to also insert the orientation setting of the iPad. I modified my @media query as follows:

(As a side note, if anyone wants to use the @media query at any point, it only seemed to work for me when I put it after my regular CSS styling). I then tested it, and bravo, it worked.

It’s also worth noting that once I put in the iPhone settings Desktop Safari decided to load those instead. So I have also modified these to specify the (max-device-width) and therefore eliminate Desktop Safari.