// Architecture & Design
Search Icon
Architecture & Design category
Portfolio category
Photography category
Travel category
Technology category
Music category
About & Contact category
Rebuilding Barn21: Halfway Through Coding
This article marks an important milestone in my aim of redesigning Barn21 from scratch. Up to this point I’ve explored the what, why and how? of the project, the preliminary sketches of the scheme and the desired visual design. As of yesterday afternoon, I finished reformatting and coding all the articles so they are now ready to be implemented in the new design. This checkpoint feels like a halfway mark in the coding to me, so it seems like an ideal time to update you on the progress of the project, some of the obstacles I’ve encountered and the resources I’ve used to overcome them.

Originally I thought it logical to start with the homepage of the site, then build out the other pages from there. After a string of frustrating yet ultimately rewarding days I settled on a layout technique that uses four columns along with a header and footer. With the new knowledge I had gained, I realised a more efficient system of coding the site would be to first complete the static pages such as articles etc. before moving onto the dynamic pages such as the post grids and homepage. This has facilitated the creation new posts during the redesign without the need for updating the dynamic pages. It has also allowed me to develop my skills “behind the scenes” which should increase the smoothness of the transition to the new site.

If you’re interested in learning how to code HTML, CSS and/or JavaScript yourself, I’d highly recommend reading the tutorials on before you dive in. They’re an overarching introduction to web design that do a great job of explaining all the basics. Once you start W3 Schools and the Stack Overflow forums are your best friends. Most of the solutions I have used came from one of these two sources, and where appropriate in this article I’ve linked them. This edition of Rebuilding Barn21 focuses on the header, footer, articles and music page. In the next one I’ll explore how I coded the navigation sections and some more specialised pages.
I am very happy with the header since it looks almost identical to my visual design board. The site title, logo and active category were relatively easy to code with just some positioning to do. In contrast, the navigation bar was a lot more challenging, especially since I was a complete novice with HTML and CSS at the time. It uses a flexbox layout, which essentially facilitates a responsive appearance whilst maintaining simplicity in the code. It took me a couple of days to get it right, so I was proud when it finally started working as I wanted. Whilst I like the underline of the categories when the mouse hovers over them, ideally the lines would draw out from the centre of each category. I may try to add this effect at a later date. The search bar was also a challenge to figure out, and I fear that the most difficult part of implementing it is yet to come. So far it takes an input and the button works, however I haven’t yet added the code which will actually search the site. I’ve read that Google custom search is the best solution, so I’ll have to explore this when the site goes live.
After working out how to display the navigation pages I set about creating the footer. It was fairly simple to create, however a few specific aspects confused me at the time. The Return To Top button is a particularly funny example because at the time I thought it was very complex, however I now realise its sheer simplicity. It is essentially a pair of links at the top and bottom of the page, and when you click the one at the bottom the page view moves to the one at the top. I don’t know why I couldn’t get my head around this at the time, I just remember being a little confused but relieved that it worked. Another issue I had with the footer was its positioning. I needed it to stay at the bottom of the page when there wasn’t sufficient content to fill the viewport, then sit below content that is longer than the viewport. I found the solution in the first technique outlined in this article, and whilst I’m still not completely sure how it works, I know it essentially creates a margin for the footer.

A theme you may notice in these articles is that I don’t know in detail how some elements work, especially JavaScript functions. This is part of the process of learning web design, it’s a lot of trial and error and I’ve learnt that sometimes when things work it’s best to leave them alone. Often I find a particular block of code very confusing, only to realise when I come back to it later that I was missing a crucial link or observation that brings everything together. To be honest, whilst it’s useful to understand how each bit of code works, at the end of the day if it functions how I want I’m not too bothered about learning its specifics.
Reformatting and coding all the articles was a laborious task. At the time of writing Barn21 has over 100 articles that each needed reading, checking, inputting into the website file system, image editing, captioning and accreditation, reformatting for the new design and finally coding on Dreamweaver. This task took me approximately three weeks of constant attention and it was a huge relief to complete it.

The articles contain a variety of elements that enable different experiences of content within the site. It was a fun challenge to find relevant solutions for the specific issues I encountered then work out how I could tweak the code to match my desired aesthetic from the visual design boards.
A mainstay of the article pages is a reading progress indicator, which in my opinion is significantly underutilised on the Internet. When I browse sites such as Dezeen and Archdaily its omission really bugs me, because you have no clue of the length of an article. Time is precious, after all. I used code from a useful website called CSS-Tricks to create the indicator, then altered it to fit the appearance of the rest of Barn21. Initially I was daunted by the quantity of code that was required, especially since some of it was JavaScript, however after copying and pasting it into Dreamweaver it wasn’t too difficult to get the element working.
There are two different image displays on the article pages. The first is a type of gallery called a lightbox, where the user clicks on an image to enlarge it whilst simultaneously lightening the background. Creating a lightbox from scratch would be impossible for me at this stage, so after doing some research I decided to use a minimal and elegant one created by programmer Lokesh Dhakar. Once I had implemented the code on the site, I changed some of the options to streamline the design. This allowed me to use the Barn21 logo as arrows and refine the look of the close button. Whilst the gallery does not look identical to my visual design boards, I am happy with how it’s turned out.
The other image display type is a slideshow, which I have utilised for travel articles as well as some architectural articles with only a little text. Use of the slideshow is relevant when images are the main focus despite the post not being in the photography category. It allows the pictures to be large and take centre stage whilst preventing the disjointed look of a picture gallery that users have to scroll down through. As the slideshow was a relatively late addition to the design by the time I implemented it I had a good grasp of how to tweak the code to my ideals. For this reason, I was able to take a simple slideshow from W3 schools, then alter it to introduce logo arrows like in the lightbox and also a position indicator than mimics the vertical bars of the logo.
By far the most challenging element to implement on the site was Google Maps, since they required alterations to the JavaScript in order to be relevant to the travel articles within which they are situated. When working out how to input the maps, I was lead into a whole part of Google that I wasn’t aware of before, their developers section. It contains a huge range of applications and information that is difficult to navigate as a novice, which left me feeling a little overwhelmed. On this occasion YouTube came to the rescue, and in particular the creator Traversy Media, whose simple step by step Google Maps guide I followed. When placing markers on the maps I found that copying and pasting coordinates from Google Maps itself was a touch inaccurate, so instead I used which seems to be a lot more precise. Once I had included all the relevant information, I visited Snazzy Maps to give my maps a distinct look.
The sidebar on the articles contains two related pieces that users might be interested in reading. Whilst they were simple to create, coding the correct positioning was more difficult due to the intricacies caused by specific situations. The dynamic sidebar content should never move below the footer, however its upper edge must also never sit higher than the beginning of the article in the main column. I was determined to have the sidebar scroll with the article, and actually stumbled upon the solution through trial and error. After a whole day of messing around with the code I was close to giving up hope and sticking the sidebar to the bottom of article, then I changed something in the CSS and it worked perfectly.
Music Page
Whilst the music page is not strictly static, it only changes once each month and shares many similarities with the article layout. Containing two columns, the first holds a Spotify player for each month’s playlist and the second information regarding said playlist. Compared to the difficulty of the Google Maps and gallery JavaScript this page was a breeze to create. Embedding the playlists and optimising their appearance was simple with the recently released Spotify for Developers tools, and apart from them the page just contains links. I experimented with a sidebar to quickly take users to a specific month, however decided against it in the end.