Three Weeks Late
As I read through the first week’s assignment, I found myself wishing the course had started earlier…I had JUST finish building the new KA-2 Lower School Technology site at our school. I’m sure I’ll continue to develop it and make edits as I discover ways to make it better. However, I was not by any means, ready to start editing it just a few weeks after its completion!
Having just gone through the process of creating a site, it gave me some insight as to how the function and purpose of a site really did play into the choices I made. Who was my audience? How would they use the site? Was everything clear and easy to find? Here’s what I knew before I started:
- The site would serve as a link between our school’s main website and the class blogs
- Teachers, families and students will use the site
- It should provide links to websites by grade level
- It should share what they have been learning in Technology with me
- It should link to the 3-5 Lower School Technology site
I spent about three days putting the site together so that it was ready to go by Open House and teachers could introduce it to their parents. Take a look and tell me what you think! I definitely already have some ideas about things I want to change but I’d love to hear from others too.
Rethinking and Redesigning
I decided I should rework my COETAIL site because I haven’t touched it since I first set it up. I’ve learned a couple new things that I wanted to apply to the site and I also wanted to try and research new ways to enhance images and layout.
First things first, let’s take a look at my original home page (you can also view the archived version from the Wayback Machine by clicking on the image):
Here are the things I wanted to change about it:
- Link images in colums: I always knew that I wanted a static front page since I created the site. I also wanted to have more of a grid like appearance for the links rather than having them all in one long line down the middle.
- Slideshow of images: Taking from my original blog site, mspanasays.com, I wanted to have a slideshow of images on my homepage that told a short story about my professional life. Luckily, I took a look at my theme’s settings and it had this feature built in.
- Soften the look of the theme: The site is mine and I feel it should represent me to a certain degree. I enjoy softer colors and this theme is originally pretty dark. I also wanted to add some texture to it.
- Fix the holes: I hadn’t set feature images to my posts the the previous two courses so whenever I visited the blog page, there were these blank black boxes staring back at me with my post titles under them. Once again, not a fan of too much darkness so that needed to be remedied!
Allow me to go through each one of these to explain my journey to you…
A Little CSS Magic!
I knew nothing about CSS till I started my first blog, and boy was it a steep learning curve (and still is)! However, with the power of Google, I am slowly learing to understand this crazy language and continue to find new tips and tricks to edit the appearance of webpages. To all web designers out there, I know the stuff I’m about to talk about is super basic in your eyes, haha!
I knew I wanted columns on my front page, so I Googled how to do this with CSS, and found this very helpful page. It gave me the code to create the columns and all I had to do was copy and paste it then input what I wanted to go into each column! Here’s the code I copied for three columns:
<div style=”width:30%;padding:0 10pt 0 0;float:left;”>
Column 1 info here
Column 1 info here
Column 1 info here
</div><div style=”width:30%;padding:0 10pt 0 0;float:left;”>
Column 2 info here
Column 2 info here
Column 2 info here
</div><div style=”width:30%;padding:0 10pt 0 0;float:right;”>
Column 3 info here
Column 3 info here
Column 3 info here
</div>
I thought everything would be done after I moved each image into the right column…it wasn’t. There was a larger gap between the second and third columns because the middle column aligned left and the third aligned right. I could not deal with this uneven spacing! So I changed the last column from ‘right’ to ‘left’ and my spacing was even. I now however have a larger gap on the far right than the far left; my three columns aren’t centered on the page. Anyone out there proficient in CSS and can tell me how to edit this code so everything centers on the page?
Second problem I faced was trying to get the images all the same size!!! I tried to edit through cropping but it just was NOT working out. I then remembered this wonderful online tool called Canva which I used to create this header for the KA-2 Lower School Technology site.
It is so quick and easy, plus it’s free! I created custom sized canvases so that no matter what size the picture was I knew the end result would be exactly right. I added a free background to give each image an a border and I also used filters to change look of some of the photos. Here is the end result:
Thank Goodness for Great Themes!
When looking to create a slideshow on my homepage, I was lucky that my theme already had this feature built into it. All I had to do was upload the photos I wanted…but I was wrong again. My photos suffered the same problem that the image links did, they were all different sizes and the slideshow kept adjusting its height from image to image. I did not like this. So I used Canva once again to create uniformed images and maintained the same background as the link images so that it continued through the page as a theme.
A Softer Palette
Knowing that I couldn’t take away the yellow that remains as the background for the content area, I wanted to break things up a bit and not just have a solid color in the main background of the site. If you look at my original site, I just used a solid pink which played off of the flower in my header. However, I thought if I gave it some texture I could tie everything together a bit better visually. To do this, I went to my favorite site for seamless pattern creation, patterncooler.com. I found a simple geometric pattern and changed the colors to match the pink from my header but also used yellow to match the content background. I love how the soft line patterns in the background play with the lines in the border pattern of the images.
Filling in the Gaps
Last but not least, I went back to all my posts and set feature images to each one so that I didn’t have plain black boxes staring at me anymore!
And there you have it, my website creation adventures over the past month! I welcome any and all feedback, comments and/or suggestions for both my KA-2 Lower School Technology site and my COETAIL blog site.
Recent Comments