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.

Perfect ‘Simple’ Note Making – Revamped

nvALT, my preferred text editor, has been the constant tool in my writing and note making setup for more than a year now. There have, however, been a few changes to both the way I write blog posts and the way I create and sync notes with my Android phone. Therefore, I felt a brief update was in order.

Syntax

While learning HTML syntax has helped me to build and customise this blog, it is not particularly easy to use when writing blog posts. What I prefer, is to write in plain text. To avoid writing out lots of HTML, I would write posts in nvALT and then add links, formatting and images in the WordPress browser-based editor. This was not the worst workflow but it was not ideal.

Over the last three months I have been learning to write using Markdown. Markdown is both a software tool and a simple syntax, created by John Gruber, that allows you to maintain your focus on writing. It works by converting plain text, formatted with the Markdown syntax, in to valid HTML.

nvALT has Markdown support built in meaning that I can write a blog post using the syntax, quickly open up a HTML preview to check that everything looks as it should, then simply copy/paste the HTML source code directly into the WordPress browser-based editor. After adding a title and tags all I have to do is hit publish. A far more pleasing workflow.

If you are interested in learning Markdown quickly, this video by Eddie Smith is definitely worth watching:

Epistle

A couple of months into learning Markdown I decided that I should find a text editor for my Android phone that supported it. Being a very specific search I quickly came across Epistle by Matteo Villa.

Epistle

Like nvALT, Epistle has built-in Markdown support. Which means I can write fully formatted blog posts on my phone, using the Markdown syntax. It has an elegant and minimal user interface. Note creation involves a single click and they can be organised alphabetically or by date. Also, you can select from serif, sans-serif and monospace fonts. After a couple of clicks, I had Epistle working in exactly the same way as nvALT. I was completely sold.

Getting in sync

However, there was a problem. Epsitle does not sync with Simplenote. Instead it syncs with Dropbox. Fortunately, I remembered reading a blog post demonstrating how to sync your notes in nvALT with Dropbox and Plain Text for iPad. Re-reading the post it was clear that I could do the same with nvALT, Dropbox and Epistle.

In short I switched to saving notes in nvALT as plain text files. Then I created a folder called “NV” and moved all my notes to this folder. Next, I synced the folder with Dropbox using MacDropAny. To complete the setup, in Epistle, I changed the Dropbox folder it was syncing with to the “NV” folder I had created. And that was it, my notes were synced across both devices.

Perfect and ‘Simple’

It’s almost a year since I first shared an insight into my note making and writing processes. In essence not much has changed. My setup and work flow remain perfect and ‘simple’; revamped but much the same.

Twitter for Mac: Separate Windows, Separate Streams

[Cross-posted from my Posterous blog]

T4M Separate Windows

This is my preferred way of using Twitter for Mac.

Firstly, click on the stream you wish to view, e.g.: @replies, a list you have created or a hashtag you wish to follow. Then click Shift+Cmd+T and it will open that stream in a separate window. Do this for each stream you wish to follow.

Today I have my ‘Niche’ list open in one window and my @replies in another. The main, Twitter for Mac, window is minimised to my hidden dock.

Desktop background is by John Carey.

Redesigning jamesmichie.com(blog) – CSS FTW!

I’ve been tweaking and redesigning aspects of my blog ever since I started it, attempting to balance clean/minimal design while trying to provide visitors with an enjoyable reading experience and straightforward navigation. I feel that I’ve finally achieved this and in doing so learned a lot about CSS. Completing work on my blog resulted in me redesigning my homepage from scratch, creating a greater sense of uniformity between the two. As I’d done before, I called upon the excellent site: w3schools.com for help in figuring out padding, margins, borders and floats, amongst other attributes.

jamesmichie.com/blog

blog 26.02.11

My blog is built upon the ‘Plainscape‘ theme. It is a very simple, two-column theme with very few unique features which makes it highly adaptable. I have made some minor edits to the layout and have completely overhauled the header and footers to suit my needs.  This included moving my sidebar buttons and search box into the header. From my research this seems to be a more common place for them to be. While I was making these adjustments I also added a new photo to my about page, tidied up my categories and moved the Evernote, Delivr and Instapaper buttons to the top right of my posts, a position that I feel is more intuitive for their purpose. Also, I have made significant changes to the css of the blog creating a strict colour scheme. I’ve added borders around menus and the different sections of the sidebar to improve navigation. Overall, I am more satisfied than I have been for a while, feeling that the blog has a far more consistent/professional look.

jamesmichie.com

home 26.02.11

To bring my homepage up the same standard as my blog, I began by deleting Concret5 and installed WordPress instead. I then looked for a one column theme and settled on F8 Lite. Being fairly confident in editing html and css it didn’t take me long to match the css of my new homepage theme to that of my blogs. I then went about stripping many of the features from the header and footer sections. I made use of the themes widget placement being at the bottom to add my blog feed, tweets and lifestream. In the settings I changed the front page from ‘latest posts’ to a ‘static page’ and went about creating one, adding the same photo I had selected to use on my about page. I matched the buttons from my blog to direct people to the parts of my web footprint that I feel they would be most interested in visiting. And with that I was done. I now feel that my homepage does a much better job of representing me and gives a much clearer picture of the key parts of my web footprint.

Understanding and taking control of css was the biggest win during this process. It made a huge difference as it allowed me to make design changes with greater ease and far more consistency. I have included, below, the css attributes which are consistent accross both my blog and homepage. If you would like to know about specific aspects or features, feel free to ask me in the comments.

CSS attributes:

background:

  • color: #f8f8f8

header, hmenu, sidebar header text:

  • font-family: ‘helvetica’, arial, sans-serif
  • font-weight: bold
  • text-transform:uppercase
  • color: #000000
  • a: #000000
  • hover: #34c48f

body, sidebar, footer text:

  • font-family: ‘helvetica’, arial, sans-serif
  • color: #333333
  • a: 34c48f
  • hover: #9a9a9a

meta text:

  • font-family: ‘helvetica’, arial, sans-serif
  • color: #9a9a9a

borders:

  • weight: 1px
  • style: solid
  • color: #9a9a9a

10 things I’ve learned in a year of blogging

Number One

I started this blog one year ago today. When I published the first post I was very unsure about whether I would be able to commit to blogging on a regular basis but now can’t imagine not doing it. It has become an extension of my brain – a place where I can explore ideas; share experiences and reflect on my learning. As an educator the learning never stops and a blog (IMO) is the best way to document and focus the learning experience. Along the way I have learned a lot about blogging and so I’ve decided to share some of what I’ve learned, today, on my blog’s birthday. Here goes:

1. It’s what you write that matters

The most important feature of your blog is what you write. I know that this sounds obvious but I can attest to the fact that it is easy to get bogged down in worrying more about the look and feel of your blog than the content you are putting out. My advice? Find a blog theme that is clean and offers your readers a clear reading experience. Stick to sans-serif fonts and a high level of contrast between the text and your blog background. Don’t obsess about images, buttons and other features. Focus on the writing and the rest will follow. After all, the people who will become regular readers of your blog will not care about the way your blog looks. In fact the people who become return visitors will probably subscribe by RSS and therefore not even read your blog via your actual site. Pick interesting topics to write about. Find your own writing style. And don’t be afraid to borrow from others while you are finding your own voice.

2. It’s okay to post at your own pace

Starting a blog can be intimidating. Particularly when you see that some bloggers post at least once a day, sometimes more. I originally set out thinking that I would blog at least five times a week but I quickly realised that for me this was unrealistic. I have settled into a far more organic rhythm publishing an average of six posts a month. How often I post is affected by a number of factors but mainly by my workload.

I write when I feel compelled. I shelve posts occasionally to let them simmer, returning to them with a clearer sense of what I wish to convey. Sometimes an idea for a post will go from first draft to published post in less than a couple of hours. Other times they will go through multiple drafts until I am happy. Remember that quality is far more important than quantity. If you would like to know more about my writing process and how I find focus check out the following two posts:

3. It’s important to post material that is provocative (from time to time)

I’m not suggesting here that you set your stall out to… but it will come as no surprise that many of my most read posts are the ones that were a little contentious, that focused on challenging issues where others will certainly have an opinion. And it is also good to pick up on topics that are being readily discussed. Here are some examples of posts that caught fire:

4. Make sure your about page is up to scratch

The about page on your blog is arguably one of the most important pages as many new readers who come across your blog will want to know more about it and the person behind it. Who are you? Why do you write this blog? How often can they expect to see new posts? These are just some of the questions a new reader may have. I am working on improving my about page at the moment, using this guide.

5. Minimal design helps your readers to focus on the content

I am at heart a minimalist. If this was nothing more than a personal journal it would probably look more like this. However, this level of minimalism is a step to far (less?) for my blog which is as much an online portfolio as it is a reflective journal. Therefore, I have found a compromise, balancing minimalism with important features that help my readers navigate my blog and hopefully keep them there. These include static pages listed in a menu under the header, a range of methods for readers to find interesting posts including: categories, tags, recent posts and a blog archive. I currently use the WordPress theme: Plainscape, which I have tweaked to my liking adding a few unique features, but these are minor and took very little time to put in place.

6. Harness social networks to spread the word

If you wish to grow the number of visitors to your blog you must harness the power of social networks. Twitter has been one of the most powerful tools in driving people towards my blog content and had helped connect me with many other bloggers who share similar ideas and write about similar topics. This has helped me to develop my blogging practice while also giving me a network who read and retweet my blog posts. I use Feedburner to manage my blog feed and Twitterfeed to autopost it to Twitter. After more than a year of sharing my disdain for Facebook, I have reneged on my principles, reactivated my account and established a Facebook page for my blog, here’s why.

7. Remember it’s not all about you

Let your readers know what blogs you like to read, this is very easy to do as most blogging platforms include a blog roll feature. I also use a range of tools including Google Reader, Delicious and Amplify to share things that I have been reading and I feel will be of interest to the people that read my blog. To make it easy for them to find this information I have installed the Lifestream plugin and generated a page on my blog to display this information.

8. It is about discussion

Most bloggers are looking to generate discussion around their posts. This is what the blogging thing is all about and it’s really important that you respond to comments from people. I would advise that you install the Disqus commenting system to your blog. It offers a wide range of management features for comments on your blog allowing anyone to log in and comment on your blog while being an effective tool in blocking spam. I try to reply to comments within 24 hours although occasionally life gets in the way.

The commenting does not end there though. As I have already made clear, it is not all about you. If you want to drive people towards your blog and encourage them to comment on your own posts then you must comment on other people’s blog posts. It raises your profile amongst the blogging community and will encourage people to look up your blog when they have seen you comment on their own posts. Be careful though and avoid committing any commenting faux pas, use this post as a guide about what not to do when commenting on posts.

9. Understand SEO and analytics

Without going into too much detail, if you are serious about blogging and see it as more than an opportunity to collect your thoughts then it is worth taking a bit of time to understand ‘Search Engine Optimisation’. In very basic terms this is making your blog more visible to search engines like Google. I could end up writing an entire post on this and only scratch the surface in many ways. Instead I will simply say that this post is a good place to start and if you are using WordPress then you can make a decent start by installing the following two plugins: All in One SEO Pack | Google XML Sitemaps

To really get a handle on how your blog is doing it is also worth signing up to Google analytics. Again there is a very handy WordPress plugin to help with this.

10. Learn a little HTML

This one is going to be a bit geeky but for that I make no apologies. When it comes to my blog I decided from the outset that I was not going to compromise when it came to way that my blogged worked and looked. I knew that if I was going to really have control of my blog I needed to learn some of the basics of HyperText Markup Language (HTML). Having started this blog initially on Blogger there were not as many features in the editing window as WordPress and one thing that niggled me about my posts was that links would open in the same window. This resulted in me learning my first bit of HTML. To get the links I was including in posts to open in a new window I learned to add the following HTML tag: target=”_blank”. From there I gradually learned more HTML so that I could effectively tweak my blog’s theme and code my own buttons in both my blog’s sidebar and under each post. I have blogged and shared the HTML/Javascript for two buttons that I addapted the code for:

This site is an excellent place to start learning HTML and it allows you to test out your code before you go and try it on your blog.

And with that I will bring this post to an end. I’ve thoroughly enjoyed the last twelve months of blogging and I’m very excited about the next twelve. I’ve got some fantastic projects underway at the moment and I’m also right in the middle of my MA, so expect lots more posts over the next few months!

Image: inf3ktion on Flickr