Improving the website - Screen size responsiveness and PHP

After playing around with my site I have found there are a few things that are not quite right and want to be improved before I look at more features. The first thing I wanted to fix was how the site looked on different sizes of screen. I tried opening the site on my phone and all I could see was the left side navbar until I scrolled down. Not a lot of good.

Looking at the above, if I opened the site, I would assume it was blank and move on. The cause of this is how I am adding the navbar to the left menu of the screen, iframes. iframes themselves are not a problem, but the way I use them sure is. Below is the code I used:

My mistakes with iframes

In this you will notice I am using style="height:99vh" which makes the height of the iframe the same height as the users screen. This is a lazy work around for the iframe height not auto adjusting easily, and at first, I thought this would be better than the default 150px tall for iframes or an arbitrary number I could add. If I added a number to big this would cause a scrollbar with no content, to small and items would not show. However, does cause its own problems as I have shown above with smaller screens.

In search of solutions I looked at a lot of different options like using JavaScript to adjust the height of the iframe after the page loads similar to the method outlined by Geeks for Geeks here or on Sitepoint here. Ultimately this felt like a janky solution and cluttered my code with more scripts. I also found some forums talking about using CSS3 media tags to do this, however these were move for the size of the users screen.

After dismissing javascript solutions as unpreferable I looked at how I was adding the navbar to each page. In an ideal world I would just want to insert the code into my webpage rather than loading it in a frame or object but that didn't seem possible. I looked at the various tags options such as Object and Embed but neither of these allow for links to open or interact as easily with the parent page. There is also rumours that Embed tags will be deprecated in the coming years. Eventually I found this page from CSS-tricks.com which gave me my solution: The Simplest Ways to Handle HTML Includes.

If you look through this page there are loads of great options but what caught my eye was using PHP with the include tag.

Exploring PHP

Is this all I needed to do? One line of code. This seems so simple, would look neat in my code, and if you have read the first instalment of this project then you will remember my webhosting includes PHP. Time to give this a go.

My first attempt was to copy this almost exactly into my test page, upload it and run it.

Much to my disappointment this did not work, and I have no navbar. Checking the source of the page I saw the code was in highlighted as html comments rather than code. Why was it in green, this should have done something! right?

This didn't work the first time, but if Thomas Savery (inventor of the steam engine) didn't give up after 1 attempt, he kept going and so will I.

At first I thought this was an issue with my navbar.html so looking into I finding a solution to this I found myself on Stack Overflow again here and I saw the main top reply talking about re-formatting my navbar to include <?php and echo <<<EOT tags, but I also noticed further down as navbar.php. This is when I realised that my site would not run php code in html pages

To understand why this is we need to know how PHP works. PHP is server side code rather than client side. This means that when you connect to a site that uses php, the server runs the code, and drops in the output before sending the file to the client. This means any PHP code will not show to the client, but it also means I will need to tell the server that this is a PHP document. If done correctly the final user will not know that php was involved except for the file being called index.php.

To make this work I needed to move across a linked stylesheet from the navbar to each website page, then update the navbar page to be a php document. Once I had done this, I finally updated the main HTML documents to PHP documents along with the footer which works the same way (just a name change and update the iframe to a PHP include). At this point I thought I was done. I did have to do a little bit of fiddling to sort a couple of issues I have produced along the way (if you are using 2 stylesheets, remember order is important, and the second will go first).

Now I know this I can update my navbar.php to look like the below:

You will notice most of the HTML is actualy greyed out, this is because it is within a PHP script but will not run. Instead everything between the EOT at the beginning and end will be passed through as an output to the main page this is being loaded into.

Thinking it was all solved I started updating the rest of the site with this update and all seemed to be going well until I started updating the project pages. These are in a folder rather than in the main directory. In HTML to reference something in root you just use a /slash e.g.

<link rel="stylesheet" href="/style.css">

This does not work for PHP however, this is because PHP is run by the server, in my case a Linux server so when it is trying to run the include for something in the root folder, it is looking in the Linux root folder. To fix this I needed to update the referenced file path like so:

<!-- side bar -->

<div class="column left">

<?php include "./home/user/public_html/navbar.php" ?>

</div>

With this done the PHP fix is now implemented and removes the need for iframes in the site for now. As I write this, I am looking at the top and bottom of my pages and I may come back and update this so more of the site is included in these PHP include files, this way the site page I am updating would just have the content itself. This would allow for easier updates across the site with minimal work needed on a per page basis. Another task for the to-do list later on.

Screen size and responsiveness

Now I have the iframe removed the site already looks a lot better than before when loaded on mobile or smaller screens but still doesn't look right. To me it looks very lop sided with everything clinging to the left side of the screen.

I know mobile sites are possible, and I should not need to write completely new pages for each screen size and type. Before long I found another resource from W3Schools that looks promising at first HTML Responsive Web Design but after looking at how this would work with my site I quickly changed my mind. I already have the viewport metatag but things like changing text size based on screen size using font-size: 10vw; did not seem right to me. If someone has a small screen, I want the text bigger if anything, not smaller!

Most of the way down I found the real powerhouse of the responsive sizes: CSS media queries. These would allow me to adjust css code based on screen width, for example I could make the main content 100% width of the page if the screen was too thin. This is where I started with the below:

@media screen and (max-width: 766px) {

.right {

width: 100%;

}

}

Happy that this worked more easily than I thought it would I started adding more elements to this, updating website section widths, floats, along with the train animation positions so the site feels more natural to use on the thinner screens, without affecting design on the larger screens. My main elements with minimum-width in the CSS total 750px wide so I have set my site to start updating a little wider than to try to ensure the site is always usable and clear. In total I have 5 different media queries sections in my CSS, but a skilled web developer could probably do this in 1 or 2.

For now, I am happy the site is more responsive to different screen sizes and generally feels more polished. I'm sure there will be more updates to this in the future, but for now this will do.

Thanks for reading, if you want to get in touch or have any comments you can get in touch please send me a message to Hello@TrainsRule.co.uk and the next mail train will pick up your message.

2024 TrainsRule
Privacy Policy