Technical Process - how it all came together (Part II)

It was time to make my other pages and this blog entry is how I did my 'Contemporary Art', 'London Art Venues' and ' My Life in Exhibition' pages. The first two have informative function, so I decided I want some consistency there. I wanted to be functional but also to look neat and to also to contain information, without making everything messy and overwhelming. After looking at designs I decided on that one 



I knew I had to make changes and to work on the code, but Boostrap comes with great explanations, examples and exercise files, so I knew I can do that and started with the 'Contemporary Art' page.


 I used  the basic structure and took it from there. The good thing with Boostrap is that it comes with predesigned CSS that suits your elements and, once you incorporated the link to jQuery, it connects with the java library to make everything work. The hard part is to see if this works for you and if not, to tweak it to the point where it does. I had to make numerous changes. I had to figure out the principle of collapsed bars and how to make it that when you open the page only the first one is open and you navigate through the rest yourself. I spend considerable amount of time putting arrows there, as I wanted to indicate somehow that after all these are collapsable bars you can navigate and reveal new content in each. I used glyphicons and used w3schools to learn how to embed those to elements on my website.



Once I had that in place, I changed the color of the windows to grey, as when it was white it was way too bright and my eyes were hurting just by looking at it. And I looked a lot! Every line, every small change, every try was inspected by me in a browser, otherwise I knew I might end up with a really bad result. Just changing things and expect them to work at the end does not work in building websites. Once everything was in place, my pages looked like that. 


I applied the same to the next one, ' London Art Venues' and went on to the 'My Life in Exhibitions'. From the start it was clear that this one will be constructed around images. After looking at designs and examples I decided on that one



The challenge here was that I wanted to make at least 6 to 8 carousels with different number of images in them. This is another thing Bootstrap can help with, but only if you take the time and put the efforts to read the Documentation, and understand how it works. It uses a grid that helps you position your elements. It is a twelve column grid, so from there I just had to learn how you write the code to address those columns. Once I figured this out, it was easy to adjust my carousels in the frame of that grid. Some elements needed removing from the basic example I included here, other needed adding.  It took a while to figure out what dimensions I want to use so it was again a lot of trying and changing things around. Then there was the significant amount of time I dedicated to actually link my images there. From doing the tutorials I already knew how to do that, but it took a while to rename the images I wanted to use, to put all of them in my website folder and to make sure everything is in place. As I am using a lot of images it was time consuming but it turned out well in the end. 



Now, do I have the required 6 images adjusted for the web, as per the brief? Yes, I do. Did I adjust all my images? The simple answer is no.. The not so simple is no, because at this time I was already a bit behind, there are way too many images included in that page, and I simply ran out of time. This is the thing though - if you get the dimensions of your carousel right ,they are still displayed relatively good. The issue is that a lot of my images are quite big. This affects the speed and functionality of my page. It takes a little bit longer to load for my liking. But if the connection is good, it is not such an issue. Will I do it better, if given another chance to make a website - definitely. Because this is the thing I realised by now -  I can learn as much as possible and yet fail at doing a good website. Because I keep on learning while doing it, it is a work in progress and my knowledge about it is progressing as well. What I have accomplishes so far is  good technical elements, but there is so much more I can do now, with pages already completed.   Everything I am taking from this I will apply for better results, better design and better functionality in the future.

Comments

Popular posts from this blog

Flowcharts, Wireframes and Mood board

Technical Process - how it all came together (Part I)

Image, Text and (not) Music