jamesmichie.com

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.

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+.

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.

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.

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

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

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

Boo #5: A Busy Week On The ‘Internets’!

Links:

Subscribe to my Boos:

iTunes / RSS

Should I Move My Blog?

Having bought the domain jamesmichie.com and spent some time creating a landing page, I would like to move my blog to jamesmichie.com/blog. However, Blogger will not allow me to do this as it is neither the original domain nor is it a sub-domain. Therefore, I have been left with a choice. Keep my blog where it is and redirect from jamesmichie.com/blog (as it does now) or move my blog to a different blogging platform. This could be quite a bit of work and is therefore not an easy decision to make.

When I am struggling to make a decision I turn to mind mapping, so I can way up the pros and cons. Here is what I came up with this morning over a cup of coffee:

What do you think? Stick with Blogger? Move to WordPress? Or move to Posterous? Your thoughts and comments are welcome.

To view the mind map as a downloadable PDF click here.

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.

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.