Rebuilding Barn21: Finishing Touches And Hosting
11th April 2018Rejoice, the Barn21 redesign is finished! Well, sort of... Whilst there are still some major parts to do, most importantly media queries to alter the site's appearance depending on screen size, it is now complete enough that I am ready to show it to you and the rest of the world. If you haven't already read the other parts of the Rebuilding Barn21 series I'd recommend checking them out to get up to speed, you can find them on the Architecture & Design page. The previous article before this one unpacks the coding of the articles, header and footer, and music page. In this edition, I am going to explore how I coded the navigation pages and portfolio page, as well as some relatively complex elements such as the search bar and contact form. We will also look at the hosting of the site, which can initially seem quite confusing and daunting with so many options. However once you have a system set up it is easy and logical.
Now that the redesign is essentially complete I have a lot more free time on my hands, and I am keen to continue developing my web design skills. With this in mind, if you're interested in having me design or create a website for you don't hesitate to get in touch. I can provide a range of help, from one off guidance on how to do certain things up to a full design and website coding service.
The homepage uses a brick mosaic layout. Image by Barney Sheppard The photography page uses a brick mosaic layout. Image by Barney Sheppard
Homepage And Photography PageThe navigation pages use two different layouts depending on the content, a brick mosaic and grid. The homepage and photography pages use the former, which essentially stacks different sized modules on top of one another. I chose this layout for these pages due to its engaging aesthetic and the visual nature of the content. I wanted to preserve the image aspect ratios, which a grid does not easily allow, and have a versatile layout for the homepage on which I could place and arrange different sized temporary and permanent elements. Whilst it is more time consuming to organise than a grid, in my opinion the extra time is worth it due to the importance of the homepage.
Music posts on the homepage have a record that spins when the mouse hovers over it. To achieve this effect there are in fact two images, one static and one moving, that overlay one another. When the mouse hovers over the static image, its opacity changes to 0%, revealing the moving image behind.
Photoseries posts have two grey backgrounds to differentiate them from individual photos and other post types. These were quite easy to create as they only required appropriate positioning.
The non-photography navigation pages have a simple grid layout. Image by Barney Sheppard
Architecture & Design, Travel And Technology PageThese category specific pages utilise a grid layout, which is essentially square boxes across a defined number of rows. Since it is not so important to maintain the title image aspect ratios of the articles contained in these categories, the more time consuming brick mosaic was not necessary. Whereas in the latter I have to move every element to the correct position within the correct column, in the former I only have to add the new element to the start of the list.
Portfolio PageThe portfolio page is quite complex in comparison to the others on the site because it contains multiple elements that execute in sequence. I wanted to make it different and memorable due to its personal importance to me, and to showcase my skills in web design. The handwritten message is actually a video without any controls, which fades out shortly after finishing. Realising this could get annoying for repeat visitors, all the other links to my portfolio go straight to the pdf instead of displaying the portfolio page. Surprisingly, coding videos with html is very simple, and it's a media type I've already began using to improve the quality of my articles. The space vacated by the video is filled with a link to my portfolio, followed by a hint at some of my personal projects. Alongside rebuilding Barn21 I've also been creating my architecture portfolio. It was a painful process, (don't worry, I won't be doing a series on its creation) but I'm very proud of the outcome, so if you have a couple of minutes spare I'd encourage you to check it out. As with everything, I'm keen to improve, so if you have any feedback please send it my way!
Complex Bits And PiecesWhen I began the challenge of learning html and rebuilding Barn21 I was committed to learning how to do everything I wanted, no matter how complicated it seemed. Despite probably not being complex to professional, educated web designers, two tricky elements I have implemented are the search bar and contact form. The search bar uses Google Custom Search, a free widget which uses Google's website trawling tools to allow custom searches of your site. Like embedding Google Maps, there is an overwhelmingly large amount of information online, the key is to understand what's relevant and useful. Despite struggles that culminated in an Adobe support worker remotely controlling my computer, in the end we got it working and formatted as I would like (apart from the annoying blue non-removable cross which appears at the end of the text input!).
Another difficult element to implement was the contact form because it required me to use a new coding language called php. Whereas the rest of Barn21 only outputs information, the contact form requires the capture and then manipulation of information. When you, the visitor, submit your name, email address and message in the contact form I receive the data in the form of an email. This allows me to see your message and respond to you personally. Youtube was the saviour yet again in this case, and I copied most of the code from this tutorial.
In my opinion its features such as these which will elevate my website design skills. The most challenging skills to learn are often the most rewarding and valuable, since with increasing difficulty more and more people give up.
The Filezilla window with local files on the left and hosting site files on the right. Image by Barney Sheppard
HostingAfter coding Barn21 in Adobe Dreamweaver, I needed to choose a company with which to host the site. After research and deliberation I chose Siteground due to their good reputation and reasonable prices. The main clincher was their 24 hour online support, since I figured as a novice it's likely I'm going to need to ask a lot of stupid questions in the next few months.
When you purchase a hosting package and domain you need to get your site online. To do this you need to move your website files from your computer into the relevant folders in your hosting account. All the large hosting companies have tutorials on how to do this since it differs slightly in each case, however I will explain my process to provide an example. Although Dreamweaver has tools for transferring your files, I found this to be a little buggy and confusing, with files sometimes taking a while to update. A much more immediate option is Filezilla, which is one of the file transfer programs recommended by Siteground. Basically, when you login to your hosting account through the program it displays two columns, one with your local files and another with files in your hosting account. All you need to do is select the files you want to put in the hosting folder and then upload them, it's as simple as that. Each time I make changes to some pages I reupload them and select the overwrite option so they replace the older versions in the online hosting folder. Hosting seems complex at first, however the wealth of programs and tutorials on offer simplify the process a lot.
With the hosting complete the website went live, and hopefully you're now reading this article on the new, sleek Barn21. All that's left for me to say is thank you for joining me on this project, and enjoy exploring the site and content!