Creating = Problem Solving

Three Weeks Late

Photo Credit: Isobel T via Compfight cc

Photo Credit: Isobel T via Compfight cc

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.

Screenshot 2014-09-06 08.09.25

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):

Screenshot 2014-09-13 20.10.34Here 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.

KA-2 Technology

 

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:

Screenshot 2014-09-13 21.17.19

 

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.

Screenshot 2014-09-13 21.16.44

 

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!

Screenshot 2014-09-13 20.09.51

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.

10 thoughts on “Creating = Problem Solving”

  1. Wow! Your blog is looking great πŸ™‚

    I still don’t quite get CSS, but seeing how you used it and exploring the link you attached is very helpful! Thanks for sharing.

    I wish I had some suggestions for either your blog or the KA-2 site – but it truly looks amazing. I really like the way your KA-2 site has a lot of graphics and videos, rather than being text heavy. The organization of classes along the right side and links on the left is useful, too.

    • Thanks Jessica! Glad you liked both my sites and that my post was helpful to you πŸ™‚ I’m hoping to make the lines in my tables on my KA-2 Technology site invisible as Clint suggested, that’s one major thing on my editing list! πŸ™‚

  2. Wow fantastic blog layout! I am using the same theme and really like the way you were able set feature pictures (I didnt know I could do that…time to figure out how!) and I love the revolving pictures on the home page!

    I need to spend a bit more time on my blog πŸ™‚

    Thanks for sharing canva and patterncooler im sure those will come in very useful for me as they did you.

    • Hi Scott,

      Thanks! Glad you liked the resources I used, hope they will be useful to you in one way or another πŸ™‚ Will come and take a look at your blog soon! πŸ™‚

  3. Pana this looks great! I love the look of your front page and I love how you problem solved issues.

    I’m not sure if it is a better option, but *another* option is to use HTML tables to insert your images. You can make the borders invisible and control width of each column as well as the image alignment of each one of your images.

    • Thanks Clint! I did think of tables but I didn’t realize I could make the lines invisible!!! That was why I searched for a way to create columns as I did not want lines. Wonderful idea and thanks again! πŸ™‚

  4. Pana,

    Thank you for sharing the process and making your thinking visible! I really enjoyed reading your post and the design thinking it revealed. Impressive!

    I’m sorry that we didn’t have a chance to connect and meet in person at the BLC14 conference this year in Boston. I was such an incredible learning experience. So many inspiring educators!

    • Hi Andrea,

      I knew you were at BLC but it’s hard to figure out who is who in real life when you only have a tiny twitter photo to go by! πŸ™‚ Glad you liked my post, I always find it helpful to read about other people’s journeys through learning, so I tried my best to do the same.

  5. I really appreciated going behind-the-scenes with you Pana as you adjusted your COETAIL blog to make it more visually appealing and easier to navigate. It looked very good to begin with but the changes made it look great. I particularly like the sense of balance you created by arranging the various blogs in a grid format, removing the visible text from your About me photo, and making the Twitter feed less prominent. Setting feature images to your past posts was a big improvement too. Those black boxes HAD to be filled!

    • Hi Anna,

      Thanks! I’m glad that the changes I made are visually appealing to others who visit the site too. As I was making the changes I wondered if I was making good choices and if others would find my changes as visually appealing as I did. It’s good to know that I’m not alone! πŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *