New Wesbite

I finally got around to creating a new website for me to showcase my work and share my learning experiences on. The update was long overdue since the old site was starting to look stale.

The website uses my new framework which I have been progressivly improving upon with each client. Additionally the new website uses "responsive" design which means it should appear nicely both desktoops, mobiles and tablets of varying screen widths.

Old Compared to New

This new website differs from the old website in many ways. The main difference is the old website used a database to store the page URLs and used .htaccess to pass the URL to an index page. This index page then found the relevent database entry for that URL.

This method worked, however my experiemce at The Foundry showed me that many times clients want a custom website approach which may not fit inside the constraints of database look up pages. Additionally .htaccess was written to perform page look ups and is very quick whereas database lookups can be slower, especially when you have to parse the URL string.

The new website has an entry for ever URL in the .htaccess file, it then fowards this URL to an index page with a .php file as a parameter. The index page initiates the session, brings in the config file and creates the connection to the database, it then includes the php file that was passed to it.

This apprach means that I have the central access point to the website which is useful for defining things which are used globally throughout all pages, as well as using specific pages while still using the power of the .htaccess file for complex URLs and speed.

Responsive Design

This website is responsive, try it! Just shrink the page width and you will notice the content scales nicely.

In this age of mobile computing I find it incredibly frustrating when I visit a website and the text is so tiny I have to pinch zoom when ever I want to click a link. There is no excuse for this, website designers have the power to make websites which can scale according to the device but many just don't bother, opting for a fixed with design instead to save time.

I did not use any third party code to make my website responsive, I found material only which explains how in your CSS file you can define a media query which will check for a certain width of the page and use specific CSS definitions. I decided to go for 3 different widths for this website, 978px, 652px and 326px. I found that these widths are good to use because they will suit a range of different devices. I use a column design where on the highest width I have 3 columns, the middle width I have 2 columns, and the smallest width I have 1 column. To make the website appear correctly on mobile devices there is an additional thing you must define in the HTML head which is this:

Many phones and tablets these days have a virtual pixel count and an actual pixel count. Apple likes to call their version of this a "Retina Display", the aim of this is that your 1280x720px photo will have double the pixel density and look nicer when upscaled or downscaled. Unfortunetly when websites are shown on these devices they use the actual pixel count and can appear miniscule. Adding that line of HTML fixes that and sets the scaling to use the virtual pixels instead.