Rebuilding Barn21: Halfway Through Coding
8th March 2018This 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.
HeaderI 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.
FooterAfter 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.
ArticlesReformatting 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.
At the top of the article the sidebar sits below the main text. Image by Barney Sheppard At the bottom of the article the sidebar sits above the footer. Image by Barney SheppardThe 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.
The music page was relatively simple to create. Image by Barney Sheppard