Designed in Sweden…

I was able to scratch two itches this past week: Start to learn how full-site editing works in WordPress and update my homepage in the process.

Screenshot of my updated homepage at jamesmichie.com.

Anders Norén released a new block theme called ‘Oaknut‘ earlier this month. It boasts a clean single page design, created specifically for landing pages. And with less than 150 lines of CSS, no javascript and locally hosted fonts, it is exceptionally privacy friendly and lightning quick.

I selected a monochrome style variation and got to grips with tweaking parts of the template, including individual blocks and group containers . I stuck with the suggested layout for the most part with a logo, title, tagline and four standard buttons directing visitors to four locations, three of which are on my main blog. All of this was relatively simple in the Gutenberg editor. Finally, I edited the footer and header. This was far easier now with no child theme required. All told, it took less than 30 minutes to go from installation to hitting publish.

I am really pleased with how it looks and even more pleased that it was designed in Sweden 🇸🇪 and is hosted in Germany 🇩🇪 – making my homepage a truly European 🇪🇺 affair.

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