I explained to her that we weren't open whilst we were doing lessons and she said 'well, it says you are on the internet'. Apart from the feasibility problems - if you've ever been to a lesson you'll understand - it's not fair to people that are paying for my attention to have that taken away by a customer. So, on the Monday I decided to have a scootle round the site and try to see what she was seeing. I couldn't. There was genuinely nowhere on the website where we hadn't said 'close for workshops' on a Sunday but it did get me thinking about the colour-scheme and the information that we'd put out there. We were still stuck on explaining our mission statement for the opening but two years on, this has changed somewhat...
At that exact moment in time, Jazz came into the shop and we put together a summary of what the shop is about and that you can find here: just click this link. We decided to put that on the first page but it kinda made the old 'about us' tab redundant. And once I'd made the decision to change that then I thought I might as well implement some suggestions that the lovely Rachel came up with about shunting the 'location' information into the'contact us' button because they were nearly the same (I still don't know how to describe this amalgamated tab - at the minute it's 'speak to us' but I don't think it's clear enough that the directions are in there - do you? Any ideas?).
Anyway, so one thing led to another and before I knew it I was having to think of something to fill in two tabs. I've got an idea for the 'coming soon' but I'm taking a break before I do that because, seriously - HTML? FML.
I decided to fill the 'about us' tab with a photo gallery. I got it in my head because I wanted the very first photo on the website, this one:
to be a lovely, undulating, rotating smorgasbord of photos, much like this. But blimey - have you ever seen javascript? It's genuinely like an alien language. I managed to get a few of our photos in and moving like they should be I just couldn't get the image to place in a reasonable position. It was hanging about it in the top right hand corner like this:
I just couldn't bloody move it! It was at this point that I learned was css is and I'll explain it to you in the only way that I know how - if you're a html geek, look away now because this will be painful...
So, websites are like a series of documents that link to each other. So each of our tabs - 'home', 'gallery', 'patience...' etc - is it's own little document saved on the back of our website but instead of being called 'something.doc' like a word processing document is it's called 'something.html'. So far so easy right? But to get these documents to show what you want you have to write what's inside them in html language.
Essentially, everything in html needs to be in its own special little brackets. To make a paragraph, everything in that paragraph needs to be enclosed within a < p > and a < / p>.
< p > So a paragraph looks something like this. < / p >
To make a heading, the words have to be enclosed in brackets something like < h 1> and < / h 1 > or < h 3 > and < / h 3 >.
< h 2 > So a heading will look something like this. < / h 2 >
If you want something in italics then it'll need to be written in < i > and < / i > brackets or bold in < strong > and < / strong > brackets (or < b > and < / b >).
(All of this is without the spaces, I've put them there so that blogger doesn't recognise the html and use it...).
Photos are a bloody nightmare - they look like this:
< img src="a-web-address.co.uk" alt="a description" / >
Each and every photo has to be saved in a position that it can be linked to - it's own little document on your website. If you get the address for it wrong, say a capital letter in the wrong place, then it won't turn up because the html document is looking for something that as far as its concerned, doesn't exist.
But really - html at this level is fairly simple, you just have to know what you want to say and be very careful with spaces and capitals and things. Not too bad. CSS on the other hand - blimey o'reilly!
So, CSS is it's own little document saved on the website that each and every html document refers back to. At the top of every html document, there's a bit called the 'head' and in that you're telling the document a few important things, like whether you want google analytics and where to refer to for the css.
The css document is where you tell the website what you want what's in your html brackets to look like. So, I could decide that I want all of my < h 3 > brackets to be 23 pixels high and all of my < p > brackets in the main body to be in Times New Roman. I would write that something like...
h3
{font-size:23px;}
h3
{font-size:23px;}
p
{font-family:"Times New Roman";}
So it's still working with brackets - this time it's just those pretty wiggly ones. What that would mean is that every time I write:
< h 3 > My Heading < / h 3 >
< p > And then my paragraph < / p >
the html document would refer back to the css to know what style to make the the stuff in thebrackets. Does that make any sense at all?
Right - as far as I'm concerned that's all fine. But then you get to this issue where everything has a margin (the space outside of it), a border (pretty self explanatory), padding (between the border and the content) and then the actual content. Those four elements can be different colours, sizes and styles. I still haven't got my head fully around that, but it's every single bloody thing. So as I was making my gallery, every element of it (each photo and then each bigger photo as it was hovered over) was affected by every single bloody box in there:
So in this picture, the actual photo with the purple arrow, was affect by the box outside it with the red arrow and that was affected by the box outside of that with the green arrow. Every time I changed one thing, everything else had to be adjusted so that the whole thing fitted into the space that the css page had left for the main body of our pages. I'm not sure that makes any sense really, and if it doesn't then it's only because I don't understand it myself.
For the past week I have been changing each element of the whole shebang to different weird and wacky colours and sizes so I can identify exactly which wiggly bracket refers to what (difficulty compounded by the fact that for every normal instruction, there also has to be one for when it's hovered on...).
Another thing to share about this process is how exciting it is to look at these kind of things every day:
I don't suppose you can tell with a photo this small, but the writing in the middle of each spot is a six digit code for the colour that it is. So the lovely alice blue that's at the back of most of our website is actually:
#F0F8FF
And, yep, you guess it, everytime I want to use it I have to find where abouts in the css the element that I want to change is and then write some squiggly brackets with something like
background {color:#f0f8ff} .
Romantic, hey?
I keep saying this, but I genuinely didn't think that this would be my life when I opened a yarn shop. Thinking back to the beginning I honestly thought I'd have weekends, time to knit, time to get over hangovers... It's not a complaint because I'm really pleased that I can do this. It's hard work, the finickity aspect goes against everything I'm about and I wish I knew enough about it to speak fluently as it were (that would make it so much easier to google problems I'm having, as it is this website has become my bible) but it really is a pleasure to learn something new isn't it?
Right, I've just had my lunch as I've reread this so now I'll make a coffee and settle down to some serious shop sample knitting and blog reading - it's amazing how much passes you by when you take a week out. Tomorrow I write lessons, today I knit.
Love Eleanor.
No comments:
Post a Comment