Connected Courses (#ccourses)

Neon Open

I’m all signed up for Connected Courses, a MOOC seeking to connect educators interested in “developing online, open courses that embody the principles of connected learning and the values of the open web.”

Having already ran a small open online course as part of my M.Ed., I am excited to explore this model of learning further; drawing on the experience of educators who have played a direct role in its development pedagogically and technically.

(Image cc. Matt Katzenberger)

Responsive Part Two (Fine-Tuning)

After updating my blog and home page to be more responsive, I continued with a little fine-tuning. Here is a brief account of the additional changes I have made…

Blog

Blog Home 01.09.12

Typography

  • I have added a Google font called ‘Bitter‘;
  • I edited the sidebar CSS to make the font size and colour more consistent with the blog body.

Functionality

The majority of tweaks that I have made are focussed on improving the way the blog functions…

  • I have switched back to featuring whole posts on the front page of the blog rather than excerpts;
  • The about page has been updated to include an accurate list of my most popular posts;
  • To make it easier for visitors to find specific content, I have added category links at the top of the archive page;
  • All internal links now open in the same window; only external links open in a new window;
  • As well as videos and images, embedded Google Docs now resize automatically. I achieved this by editing the  FitVids.js script within my blog’s theme. While it doesn’t specify this on the FitVids.js github page, it will work with both ‘docs.google.com’ and ‘drive.google.com’ documents embedded using the iframe tag.

Home Page

Improved Home

My home page now features a mini-profile with links to specific content, rather than a series of buttons. I think that it is more personal and does a better job of providing an overview of who I am, what I do, and where I can be found online.

I have also employed the built in menu to display direct links to key aspects of my online footprint, including my Twitter and Google+ profiles.

These changes have also improved the way the home page displays across all devices.

Responsive

The mobile web is in the ascendency, with many UI and UX designers, iterating for mobile before desktop. With this in mind I have been wrestling with CSS and HTML5 to make my blog more responsive to different screen sizes. However, I kept encountering a range of problems, trying to turn a basic WP theme into something far more up-to-date.

Instead I have installed the Origin theme, which is already set up to be responsive. Tinkering around with both the CSS and HTML, I have managed to construct a design that I am happy with. I coded a menu at the top and took the opportunity to install a new contact page. I also removed some features that I felt were peripheral, adding to the minimalistic style I favour.

Blog 15.07.12

Sporting the same theme as my blog, my home page is also more minimal, creating a more consistent experience for people who stumble across via search or through links on Twitter and Google+.

Home Page 15.07.12

I am most pleased with the way my blog now renders on mobile devices. The menu drops below the header, while the text resizes naturally to fit. The sidebar becomes pinned to the bottom of the page below the posts, and the posts themselves maintain all of their formatting. Images and videos also adapt to suit whichever screen they are being viewed on. Moreover, the blog is HTML5 compliant ensuring that all content is viewable regardless of OS or browser.

Blog iPhone 1

Blog iPhone 2

Blog iPhone 3

Blog iPhone 5

Please let me know what you think, particularly if you are viewing this on your mobile device. I’m interested to learn from others’ experiences; aiming to make my blog as accessible and user friendly as possible.

jamesmichie.com

So, I finally bought a domain. I almost bought one when I first set up this blog but essentially I chickened out as I was more than a little unsure about the process nor was I sure about how this blog was going to evolve.

What changed my mind? Confidence. The success of this blog; people actually read it! Learning some basic html because I became dissatisfied with the look and feel of my blog. A need to bring my web foot print under control. And finally, to provide a more professional first impression of me for potential employers.

I was very happy to find that “jamesmichie.com” was available. So I went ahead and bought the domain through “bluehost” – recommended by Doug Belshaw (@dajbelshaw). I have since spent my time creating a static landing page.

Note on Doug Belshaw: Doug was a fantastic help when I started blogging and continues to be a great help now, giving up some of his free time this past Sunday evening to skype with me and help me understand how to set up a static landing page. Thanks Doug!

I went through some trial and error in the process of building it (I used Concrete5) but I’m happy with the results so far.

jamesmichie.com19.07.10

I’m thinking of adding a professional looking photo of myself but I think that is where I will stop.

What do you think? Please comment below.