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: