web design


CIRCLE-RGB-100pxI am pretty excited to talk about the new redesigned site that we launched a few weeks ago now on the COETAIL (Certificate of Educational Technology and Information Literacy) site. Head on over and take a look and see what you think.

This has been a fun project to work on with our developer Foliovision. Websites have always been a hobby of mine and looking back on it, it was designing websites that got me into technology in the first place. Check out my first ever website…I actually got paid to make this. They bought the software I made the site. Man…that is the original era of the animated .gif! 🙂

Anyway…it’s crazy to look back to where web design was in 2001 and where it is now. Man how times have changed!

A couple of things to check out:

  • Infinite scroll: Scroll to the bottom of the blog posts coming from the community and 8 more load automatically. With Google Reader going away many of our participants have turned to this new front page as a replacement which is leading to more cross-commenting between our cohorts.
  • Site Wide Tags: This has been around for awhile but we brought it to the front to help participants understand how tags work and how you can use them when you’re looking for information across the site for a specific topic.
  • Responsive Design: This is where the web is heading and what I love is that you can look at the site on any size device and the theme auto adjusts and looks great on any size screen.


Most of all we keep the community first and foremost on the site. It’s about creating connections and moving teachers along a path to understanding true technology integration. The program continues to grow and we continue to, I think, make it better. Kim and I are excited where all this is going and excited about the changes we are seeing in the participants, in their classrooms, and the impact this program has had on whole schools around the world.

We do have a new cohort starting in February and like the rest it’s filling up fast if you are interested.

I had a great day today. I got to talk about web design with 5th grade students. Ms. Bulsza invited me in to talk to the class about their blogs.

AngelicOver the past couple of weeks someone (OK…maybe me) taught them how to install embedded widgets on their blogs sidebars. What I found interesting is that I taught one girl in one class how to do it….two weeks later every kid in 5th grade has the most outrageous sidebar widgets on their blogs. Things that had nothing to do with education, their learning, or 5th grade…..the purpose of the blogs.

Now there are two ways to handle this situation. 1) You can stand up as a teacher and say, “OK, that’s it, no more chirping birds, or iPods playing songs, or games that make noises on your blog.” Or you could say 2) “Let’s have a discussion about web design.”

Now I’m not sure if Ms. Bulsza was expecting my approach, but the last thing I want to do is tell kids that they can’t make their blog….their blog. However, it is an opportunity to have a conversation about website design, as this blog/website belongs to them.

So here’s the lesson I did in about an hour today.

Ridge Blog1) I want you to go to your favorite website. Once there I want you just sit and look at the page and think about what makes this site, this page your favorite. Look at it like art work. What catches your eye? Why do you come back here time and time again.

2) Ask for volunteers to come up, plug their laptops into the projector and show the website they choose. Then have then talk about why this is their favorite website, and open it up to the class as well.

Here’s where we ended up today.

Youtube: What we liked about YouTube was that the best videos were right there for you to click on. They were little thumbnail images and you could easily see the title, how many people had watched them, and you knew where to click, as we talked about that blue is the color of links on the web.

BrianaClub Penguin: We likes that it was simple, that you could easily tell that it was a site you had to join do to the “membership” button at the top. We liked that it had moving images on the home page. We really didn’t know what it was about, but the Disney over Club Penguin told us it was probably OK for kids. We also talks about colors and that most everything we design, from clothes, to websites, to art has at most three main colors. Club Penguin has Blue, White and Orange as their main colors on the site.

RuneScape: We liked that you could translate the site quickly. We liked that there were bullet points that told you what you could expect, what this site was about. We liked that there was a video right in the middle of the page that you could play and learn more about the site.

Facebook: We liked that it was simple. You either log in or you create an account…that’s it. The two colors that Facebook uses, Blue and White, are all over the site, so you always know when you are on Facebook.

Haley(Yes…all these sites are unblocked at my school…for just this reason…we can use them to learn.)

3) We then went to a news site. I choose the BBC to talk about how a news site looks. We agian talked about the site.

We liked that the BBC was “easy on the eyes” the colors were nice. We liked that the clock was on your time zone, we liked that you could easily tell when you were reading Top Stories and when you were reading Sports.

4) While on the BBC we talked about “above the fold” a term used in the newspaper era (only about 5 kids in the class had ever read a newspaper) that had made it’s way online. We talked about scrolling and how you do the best you can to get the most important content above the fold so viewers to your site don’t have to scroll to get to the content.

5) After this I gave them 5 minutes to go to their blogs and just have a look. Pretend you’ve never seen this site before, we know that people will spend on average 7 seconds on a site before decided to keep reading or leave the site. “What does your site say in 7 seconds?”

6) Ask for volunteers to bring their laptops up, plug them into the projector, and talk about their site. What do they like, what would they change after today. Then open it up to the kids and allow them to ask questions and give feedback about their blog.

Room 227 Blog7) Get involved! After looking at 4 or 5 student blogs, we put Ms. Bulsza’s blog on the screen and had the kids talk about it. They liked the layout, liked that the content was above the fold, but felt the header image didn’t represent the class, that the blog talked all about the classroom but the header image didn’t fit.

Next up….my blog. I pulled The Thinking Stick up on the screen and let the kids give me feedback. They liked the newspaper layout, they liked the image in the middle of the screen, but they didn’t like the baseball bat or the fact that the site “Thinking Stick” wasn’t really about education.

“I expected to be reading about baseball” one student said…and they were right…..my image and even the name of this blog does not represent the content found here.

Ocea8) Now that we’ve talked about blogs, and web design we gave the students 15 minutes to look and fix their blogs.

We never talked about sidebar widgets, we never talked about what you could or couldn’t have. What we did talk about was what makes a good website? We empowered the students to understand that a well designed website matters. It matters to your audience.

So that’s it….that and the fact I told the students in the next couple days I’ll be checking their blogs and giving them feedback on their blog designs. It’s not homework, it’s not required, but from the amount of students that wanted to stay in during recess to work on their blog design…I think they’ll be wanting to do some design work on their own. 🙂