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.

[#ukedchat] Starting with a blank piece of paper: Design the school of your dreams.

uked11

Next Thursday, I will be hosting #ukedchat for the third time.

During my previous session, I asked:

Are schools (as physical spaces) necessary to facilitate learning in the 21st century?

The resulting discussion was a thoroughly engaging one, which raised more questions than provided answers. It was apparent that most of the educators who got involved, felt that schools as physical spaces still have purpose. However, it was also clear that schools in their current state are not 100% fit for purpose. Be it the learning space itself, the infrastructure or the curriculum, a number of areas for improvement were recognised.

In this next session, I want to pick up where the previous discussion left off and explore what a school should be like in the 21st century. In order to do that, I thought it would be useful to provide a premise:

Starting with a blank piece of paper: Design the school of your dreams.

In considering this, I wish for us to focus on the following areas:

Curriculum

What should be learned? How should it be learned? How should learning be structured? Subjects? Skills?

Assessment

Should learning be assessed? If so, how? Is there a place for grades? How can we accredit informal learning? AfL? Badges?

People

Who is to be involved? How will they be involved? Teachers? Students? Parents?

Space

Where will the learning happen? Classrooms? What role for libraries? What about virtual spaces?

Time

How long should the school day be? Should it be the same for everyone? How would lessons/timetable be structured?

Technology

What technologies should be utilised? Wifi? Tablets? BYOD?

To provide some further provocation, the following series of videos feature students from the Santa Barbara Middle School interviewing Sir Ken Robinson about his dream school; his answers are, as usual, well considered and challenging:

And so, if that has suitably whetted your appetite, I hope that you will be able to join me on Thursday at 8pm.

[Update: Saturday,  21 April] This was the 94th instalment of #ukedchat. You can read a summary of the discussion here and read/download a PDF archive of all the tweets here.

iPhone Apps (2)

Since my previous post I have added a few more apps and settled on an arrangement for my home screen.

Alongside Tweetbot, Instapaper, Reeder, Kindle and Notesy which I added almost immediately, I have now added the following apps:

Evernote – I have been using Evernote to manage and organise my M.Ed studies. It is an invaluable tool. I use the desktop app almost every day and have been making regular use of the Android version. On first look, as I have found with other cross platform apps, both the iPhone’s UI and UX are vastly superior. What’s more the quality of the display on the 4S is crystal clear.

Instacast – Like Tweetbot, this is an app I have wanted to use for some time. It has been well reviewed, with the consensus being that there is no better app for the job. As an avid listener to podcasts, I am very pleased with my experience so far. What this app offers over the built in music app is the ability to stream shows, download on the fly and access show notes within the app itself. This makes for a far richer listening experience.

Agenda – The built in iPhone calendar has a very poor UI. Agenda, is clean and minimal, utilising sound principals of typographic design.

Pop – I’m a huge believer in ubiquitous capture and even with Notesy installed, sometimes all you need is a piece of paper. That is exactly what Pop offers: a piece of paper on to which you can write stuff down and return to later. The only other options are: select, select all, copy all and paste. This adds what I would call ‘useful friction’ in that when I decide to act on the information I have captured in Pop I will have to make an effort to move each piece around. This means I will be forced to decide if what I noted down is really valuable or not.

Taking photographs with a mobile phone is an activity I have never really been interested in. I think this is due to the poor quality of cameras I have encountered in previous phones. With the iPhone 4S’ 8MP camera, I am planning to take this as an opportunity to capture images on a more regular basis. I looked to my PLN on Twitter to help me get started and they didn’t disappoint. I chose to begin with the following two apps:

Camera+ – I decided to get this app as it offered some interesting improvements on the built in camera app: Improved zoom capabilities and a stabiliser (perfect for a novice photographer)

Snapseed – Nearly everyone who replied to my initial tweet recommended this app, and I have already had loads of fun playing with it. It offers a wide range of features, from basic editing features such as cropping and rotating to more stylistic effects such as manipulating depth of field.

iPhone Home Screen 12.04.12

In terms of arranging the apps, my choices are based on frequency and tactility. Apps towards the bottom of the home screen are the ones that I use most often. As such I want them positioned where I can access them quickly when holding the phone in one hand. Beyond that the apps are loosely grouped: Photography, Sound & Video, Reading, Notes/Writing, Interruptions.

iPhone Apps

I have had a shiny new iPhone 4S (32GB) for less than 24 hours. I am installing apps as I feel that I need them, here is what I have installed so far, with a few thoughts:

TweetBot – This was the first app I downloaded and installed. Partly because Twitter is number one reason I use a smartphone but mainly due to the fact that I have been coveting this app since it was first released. As an Android user, I have had to read/listen to others talk about how good it is, while being stuck with only mediocre choices. And, my first impression is a significantly positive one. Both the UI and UX are superb. The only feature it lacks is ‘keyword block’ which I enjoy with Hibari on Mac.

Instapaper – This is another favourite, regularly used app that has been poorly served on Android. Marco has done a wonderful job with version 4.1.1; the attention to detail is meticulous. I can already tell that I will be opting to catch up with my unread items on my iPhone rather than on my MacBook Air.

Reeder – I have been using the Mac-based equivalent since I bought my MacBook Air last year. The iOS version does not disappoint, attractive UI and friction free UX.

Kindle – Most of the time I read on a Kindle Keyboard but I tend to use my phone when I am travelling to and from work. The iOS app is identical to the Android version and was a natural choice for inclusion at this early stage.

Notesy – This was the most difficult choice. I considered Byword, Writing Kit and Plain Text before deciding to try Notesy. Plain Text does not include Markdown support, making it easy to remove that from the selection process. Writing Kit was a little too feature rich and I was concerned that it would not fit into the minimal mindset that I have with regard to text editors. Based on some thorough reading and a helpful chart, I settled on Notesy due to the fact that I could customise the UI more than in Byword.

I’ll follow this up as I continue to add apps and use the phone.